@automattic/charts 3.2.0 → 4.1.0

package/dist/index.js

@@ -1,20 +1,22 @@
 import { getStringWidth as getStringWidth$1 } from "./visx/text/index.js";
 import { formatNumber, formatNumberCompact } from "@automattic/number-formatters";
-import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, Tooltip, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
+import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
 import { __, _x, sprintf } from "@wordpress/i18n";
 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";
-import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
+import { Tooltip, defaultStyles, useTooltip } from "@visx/tooltip";
 import { createScale, getTicks, scaleBand, scaleOrdinal, scaleTime } from "@visx/scale";
 import { Group } from "@visx/group";
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
 import { IconButton, Stack, Text as Text$1 } from "@wordpress/ui";
+import { createPortal } from "react-dom";
 import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { useParentSize } from "@visx/responsive";
@@ -83,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
 */
@@ -130,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);
@@ -167,11 +187,47 @@ 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);
 };
 //#endregion
+//#region src/utils/bucket-info.ts
+const getInstant = (point) => {
+	if (!point) return;
+	if ("date" in point && point.date) return point.date.getTime();
+	if ("dateString" in point && point.dateString) return parseAsLocalDate(point.dateString).getTime();
+};
+const getPointSpacingInHours = (data) => {
+	return data.reduce((spacing, datom) => {
+		const instants = [...new Set(datom.data.map((point) => getInstant(point)))].filter((time) => time !== void 0 && Number.isFinite(time)).sort((a, b) => a - b);
+		return instants.reduce((seriesSpacing, time, index) => index === 0 ? seriesSpacing : Math.min(seriesSpacing, Math.abs(differenceInHours(time, instants[index - 1]))), spacing);
+	}, Number.POSITIVE_INFINITY);
+};
+const SUB_DAILY_SPACING_HOURS = 23;
+const MONTHLY_SPACING_HOURS = 672;
+const getBucketResolution = (data, tickResolution) => {
+	if (tickResolution) return tickResolution === "week" ? "day" : tickResolution;
+	const spacingInHours = getPointSpacingInHours(data);
+	if (spacingInHours < SUB_DAILY_SPACING_HOURS) return "hour";
+	if (!Number.isFinite(spacingInHours) || spacingInHours < MONTHLY_SPACING_HOURS) return "day";
+	return spacingInHours < 12 * MONTHLY_SPACING_HOURS ? "month" : "year";
+};
+/**
+* How this data was classified, for consumers that render their own labels.
+*
+* @param data           - The series the chart draws, in any order, dated by `date` or `dateString`.
+* @param tickResolution - Caller-declared bucket resolution, when known.
+* @return The declared or inferred bucket, and the resolution formats key on.
+*/
+const getBucketInfo = (data, tickResolution) => ({
+	bucket: tickResolution ?? getBucketResolution(data),
+	displayResolution: getBucketResolution(data, tickResolution)
+});
+//#endregion
 //#region src/utils/format-metric-value.ts
 /**
 * Format a numeric metric value based on type, precision and scale.
@@ -239,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.
@@ -384,20 +465,6 @@ const parseHslString = (hslString) => {
 	];
 };
 /**
-* Parse an RGB string like 'rgb(255, 0, 0)' into a hex color.
-*
-* @deprecated    Use normalizeColorToHex() instead, which handles all color formats including rgb() and rgba().
-* @param      rgbString - RGB color string (not RGBA)
-* @return        hex color string or null if invalid
-*/
-const parseRgbString = (rgbString) => {
-	const lower = rgbString.toLowerCase().trim();
-	if (!lower.startsWith("rgb(") || lower.startsWith("rgba(")) return null;
-	const parsed = color(lower);
-	if (!parsed) return null;
-	return parsed.formatHex();
-};
-/**
 * Normalize any CSS color value to a hex color string.
 * Handles hex, HSL, HSLA, RGB, RGBA, named CSS colors, and CSS variables.
 *
@@ -625,6 +692,106 @@ const resolveFontSize = (val) => {
 	}
 };
 //#endregion
+//#region src/utils/date-formatting.ts
+const formatters = /* @__PURE__ */ new Map();
+const getFormatter$1 = (options, { locale, timeZone }) => {
+	const key = `${locale ?? ""}|${timeZone ?? ""}|${JSON.stringify(options)}`;
+	let formatter = formatters.get(key);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale, {
+			...options,
+			timeZone
+		});
+		formatters.set(key, formatter);
+	}
+	return formatter;
+};
+const isUsable = (formatting) => {
+	try {
+		Intl.DateTimeFormat(formatting.locale, { timeZone: formatting.timeZone });
+		return true;
+	} catch {
+		return false;
+	}
+};
+const toBcp47 = (locale) => locale?.replace(/_/g, "-");
+/**
+* Repairs a host locale for `Intl`, dropping either half it still cannot use.
+*
+* Every formatter below is built during render, so an unusable string would throw
+* where React unmounts the whole host tree rather than one chart. WordPress hands
+* out the likeliest one either way: `timezone_string` is `''` on a site set to a
+* raw UTC offset, and has no repair.
+*
+* @param formatting - Locale and time zone as the host supplied them.
+* @return The usable halves, each `undefined` where the host's value was not.
+*/
+const sanitizeFormatting = (formatting) => {
+	const repaired = {
+		...formatting,
+		locale: toBcp47(formatting.locale)
+	};
+	if (isUsable(repaired)) return repaired;
+	const locale = isUsable({ locale: repaired.locale }) ? repaired.locale : void 0;
+	const timeZone = isUsable({ timeZone: repaired.timeZone }) ? repaired.timeZone : void 0;
+	if (locale === void 0 && formatting.locale !== void 0) warnOnce(`locale:${formatting.locale}`, `locale ${JSON.stringify(formatting.locale)} is not a BCP-47 tag Intl accepts, so dates render in the browser's locale.`);
+	if (timeZone === void 0 && formatting.timeZone !== void 0) warnOnce(`timeZone:${formatting.timeZone}`, `timeZone ${JSON.stringify(formatting.timeZone)} is not a zone Intl accepts, so dates render in the browser's zone. Pass an IANA name or a UTC offset such as "+05:30".`);
+	return {
+		locale,
+		timeZone
+	};
+};
+/**
+* A date formatter bound to the host's locale and time zone.
+*
+* @param options    - Date-part options, as for `Intl.DateTimeFormat`.
+* @param formatting - Host locale and time zone; either half absent leaves the runtime's own.
+* @return Formatter taking a timestamp or a `Date`.
+*/
+const createDateFormatter = (options, formatting) => {
+	return (value) => {
+		if (!Number.isFinite(Number(value))) return new Date(Number(value)).toLocaleDateString();
+		return getFormatter$1(options, formatting).format(value);
+	};
+};
+const CLOCK_OPTIONS = {
+	month: "numeric",
+	hour: "numeric",
+	hourCycle: "h23"
+};
+const NO_FIELDS = {
+	month: NaN,
+	hour: NaN
+};
+/**
+* A clock reading calendar fields in the host's time zone.
+*
+* `Date`'s own getters read the browser's zone, so a chart viewed from another
+* country anchors its ticks to the wrong midnights and the wrong January
+* without this.
+*
+* @param timeZone - IANA zone name; absent leaves the runtime's own.
+* @return Reader taking a `Date`.
+*/
+const createZonedClock = (timeZone) => {
+	if (!timeZone) return (date) => ({
+		month: date.getMonth() + 1,
+		hour: date.getHours()
+	});
+	return (date) => {
+		if (!Number.isFinite(Number(date))) return NO_FIELDS;
+		const parts = getFormatter$1(CLOCK_OPTIONS, {
+			locale: "en-US",
+			timeZone
+		}).formatToParts(date);
+		const read = (type) => Number(parts.find((part) => part.type === type)?.value);
+		return {
+			month: read("month"),
+			hour: read("hour")
+		};
+	};
+};
+//#endregion
 //#region src/providers/chart-scope/chart-scope-context.ts
 /**
 * The nearest chart element, published so JS token resolution reads the same CSS cascade that paints the chart's own colours.
@@ -772,150 +939,29 @@ const SERIES_SLOT_1_FALLBACK = "#3858e9";
 /** The catalog pointer for every slot, in slot order. */
 const SERIES_PALETTE_POINTERS = Array.from({ length: 5 }, (_, index) => index === 0 ? `var(${seriesRole(1)}, ${SERIES_SLOT_1_FALLBACK})` : `var(${seriesRole(index + 1)})`);
 //#endregion
-//#region src/providers/chart-context/private/theme-override-vars.ts
-const ROLE_FOR_FIELD = [
-	["--a8c-charts-color-background", (theme) => theme.backgroundColor],
-	["--a8c-charts-color-grid", (theme) => theme.gridStyles?.stroke],
-	["--a8c-charts-color-axis", (theme) => theme.xAxisLineStyles?.stroke],
-	["--a8c-charts-color-tick", (theme) => theme.xTickLineStyles?.stroke],
-	["--a8c-charts-color-label-axis", (theme) => theme.svgLabelSmall?.fill],
-	["--a8c-charts-color-label-background", (theme) => theme.labelBackgroundColor],
-	["--a8c-charts-color-label-on-fill", (theme) => theme.labelTextColor],
-	...Array.from({ length: 5 }, (_, index) => [seriesRole(index + 1), (theme) => theme.colors?.[index]])
-];
-let warnedAboutExtraColors = false;
-/**
-* Warns once when a consumer passes more colors than there are slots to publish them into.
-*
-* @param count - How many entries `theme.colors` holds.
-*/
-function warnOnceAboutExtraColors(count) {
-	if (warnedAboutExtraColors || process.env.NODE_ENV === "production") return;
-	warnedAboutExtraColors = true;
-	console.warn(`[Charts] theme.colors holds ${count} colors and the palette has 5 slots, so entries past the 5th are ignored. Set a per-series color with \`options.stroke\` instead.`);
-}
-/**
-* The variable a `theme` prop override is published as, one layer outside the role itself.
-*
-* `chart-scope.scss` declares each of these roles as `var(<role>-theme, <catalog default>)`, so an override that is invalid at computed-value time — a fallback-less `var()` naming a token the host never set — only invalidates this variable, and the role still resolves its mapped `--wpds-*` token. Published as the role directly, such a value took the role and every bare `var(<role>)` read site down with it.
-*
-* @param role - The catalog role being overridden.
-* @return The custom property carrying the consumer's value.
-*/
-const themeLayerVar = (role) => `${role}-theme`;
-ROLE_FOR_FIELD.map(([role]) => role);
-/**
-* Whether a value reads the role it is being published for, which would make the catalog entry depend on itself.
-*
-* The dependency runs `<role>: var(<role>-theme, …)`, so a value naming `<role>` closes a cycle through the catalog entry. CSS marks every custom property in a cycle invalid at computed-value time — the role's own fallback is *not* used, so the token resolves to nothing and every chart loses that color. Verified in Chrome: `--role-theme: var(--role, blue); --role: var(--role-theme, green)` leaves `--role` empty, not `green`.
-*
-* Three things this has to get right, none of which a plain substring test gets:
-*
-* `var()` permits whitespace after the opening paren, so testing for `var(<role>` misses `var( --a8c-charts-color-grid, … )`.
-*
-* Several roles are prefixes of others (`--a8c-charts-color-label` of `--a8c-charts-color-label-secondary`), and every role is a prefix of its own theme layer. A prefix match would read a legitimate cross-role pointer as a self-reference and silently drop the override, so the role must be followed by something that cannot continue an identifier — `-` included. A value naming `<role>-theme` is therefore not treated as a self-reference: that cycle is confined to the theme layer, which leaves the role free to fall back to the catalog default.
-*
-* `resolveCssVariable` also accepts a bare custom-property name with no `var()` wrapper (`--a8c-charts-color-grid`), so that is legal `theme` input too. It forms no cycle — custom properties accept arbitrary token streams — so it survives as a literal string and drops silently at the use site instead of falling back to the catalog default.
-*
-* @param value - The consumer's value for the field.
-* @param role  - The catalog role this value would override.
-* @return True when the value reads `role`, so it must not be published.
-*/
-const readsOwnRole = (value, role) => value.trim() === role || new RegExp(`var\\(\\s*${role.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(value);
-/**
-* Maps a sparse consumer theme onto the theme-layer variables its overridden catalog roles read, so CSS-painted and JS-resolved colors read one source.
-*
-* A value that reads the role it would override is left unpublished — that is the default theme's own pointer surviving `mergeThemes`, and publishing it would invalidate the role. The role is still reported in `roles`: `withCatalogPointers` restores its theme field to the catalog pointer either way, so CSS and visx agree on the catalog default rather than visx painting a literal CSS never sees.
-*
-* `theme.colors` publishes through the same mechanism, one slot per entry, so a CSS declaration of `--a8c-charts-color-series-N` still beats it and a short array leaves the later slots unset rather than blank.
-*
-* @param theme - The consumer's `theme` prop, before merging with the default theme.
-* @return The wrapper's custom properties, and the roles the consumer overrode.
-*/
-const themeOverrideVars = (theme) => {
-	if (!theme) return {
-		vars: {},
-		roles: []
-	};
-	if (Array.isArray(theme.colors) && theme.colors.length > 5) warnOnceAboutExtraColors(theme.colors.length);
-	const vars = {};
-	const roles = [];
-	for (const [role, read] of ROLE_FOR_FIELD) {
-		const value = read(theme);
-		if (typeof value !== "string" || value === "") continue;
-		roles.push(role);
-		if (!readsOwnRole(value, role)) vars[themeLayerVar(role)] = value;
-	}
-	return {
-		vars,
-		roles
-	};
-};
-//#endregion
 //#region src/providers/chart-context/themes.ts
 /**
-* Default theme configuration
+* Default theme configuration: the shape and spacing a consumer can override.
+*
+* For a color, set the matching `--a8c-charts-color-*` role in CSS instead; the `var()`
+* chains that deliver those live in `private/catalog-pointers.ts`.
 */
 const defaultTheme = {
-	backgroundColor: "var(--a8c-charts-color-background, #fff)",
-	labelBackgroundColor: "var(--a8c-charts-color-label-background, transparent)",
-	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
-	colors: [...SERIES_PALETTE_POINTERS],
-	gridStyles: {
-		stroke: "var(--a8c-charts-color-grid, #dbdbdb)",
-		strokeWidth: 1
-	},
+	gridStyles: { strokeWidth: 1 },
 	tickLength: 4,
-	gridColor: "",
-	gridColorDark: "",
-	xTickLineStyles: {
-		stroke: "var(--a8c-charts-color-tick, #dbdbdb)",
-		strokeWidth: 1
-	},
-	xAxisLineStyles: {
-		stroke: "var(--a8c-charts-color-axis, #dbdbdb)",
-		strokeWidth: 1
-	},
+	xTickLineStyles: { strokeWidth: 1 },
+	xAxisLineStyles: { strokeWidth: 1 },
 	legend: {
-		labelStyles: { color: "var(--a8c-charts-color-label, #1e1e1e)" },
+		labelStyles: {},
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
-	svgLabelSmall: {
-		fill: "var(--a8c-charts-color-label-axis, #1e1e1e)",
-		fontFamily: "inherit"
-	},
+	svgLabelSmall: { fontFamily: "inherit" },
 	svgLabelBig: { fontFamily: "inherit" },
-	annotationStyles: {
-		label: {
-			anchorLineStroke: "var(--a8c-charts-color-annotation, #1e1e1e)",
-			backgroundFill: "var(--a8c-charts-color-surface, #fff)"
-		},
-		connector: { stroke: "var(--a8c-charts-color-annotation, #1e1e1e)" },
-		circleSubject: {
-			stroke: "transparent",
-			fill: "var(--a8c-charts-color-annotation, #1e1e1e)",
-			radius: 5
-		}
-	},
-	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)" },
-	leaderboardChart: {
-		rowGap: 12,
-		columnGap: 4,
-		labelSpacing: "xs",
-		deltaColors: [
-			"var(--a8c-charts-color-trend-down, #cc1818)",
-			"var(--a8c-charts-color-trend-neutral, #707070)",
-			"var(--a8c-charts-color-trend-up, #008030)"
-		]
-	},
-	conversionFunnelChart: {
-		backgroundColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
-		positiveChangeColor: "var(--a8c-charts-color-trend-up, #008030)",
-		negativeChangeColor: "var(--a8c-charts-color-trend-down, #cc1818)"
-	},
+	annotationStyles: {},
+	leaderboardChart: { labelSpacing: "xs" },
 	lineChart: { lineStyles: { comparison: {
 		strokeDasharray: "4 4",
 		strokeLinecap: "square"
@@ -939,70 +985,9 @@ const defaultTheme = {
 	}
 };
 //#endregion
-//#region src/providers/chart-context/private/with-catalog-pointers.ts
-/**
-* The pointer one palette slot is restored to.
-*
-* Unlike the other roles, this keeps the consumer's own color as the pointer's terminal literal instead of the catalog's. The literal is only ever reached where `getComputedStyle` resolves nothing — SSR and jsdom — and there the palette is the one field where falling back to the catalog default would be visible: every series would paint the same seeded blue. In a browser the slot resolves first, so a CSS declaration of it still outranks the consumer's `theme.colors`.
-*
-* @param index - The slot's zero-based index in `colors`.
-* @param value - The merged theme's entry for it.
-* @return The catalog pointer for that slot.
-*/
-const seriesPointer = (index, value) => {
-	const role = seriesRole(index + 1);
-	if (typeof value === "string" && value.startsWith(`var(${role}`)) return value;
-	if (typeof value !== "string" || value === "") return SERIES_PALETTE_POINTERS[index];
-	return `var(${role}, ${value})`;
-};
-const CATALOG_RESTORE_FOR_ROLE = {
-	...Object.fromEntries(Array.from({ length: 5 }, (_, index) => [seriesRole(index + 1), (theme) => ({ colors: SERIES_PALETTE_POINTERS.map((_pointer, slot) => seriesPointer(slot, theme.colors?.[slot])) })])),
-	"--a8c-charts-color-background": () => ({ backgroundColor: defaultTheme.backgroundColor }),
-	"--a8c-charts-color-grid": (theme) => ({ gridStyles: {
-		...theme.gridStyles,
-		stroke: defaultTheme.gridStyles.stroke
-	} }),
-	"--a8c-charts-color-axis": (theme) => ({ xAxisLineStyles: {
-		...theme.xAxisLineStyles,
-		stroke: defaultTheme.xAxisLineStyles.stroke
-	} }),
-	"--a8c-charts-color-tick": (theme) => ({ xTickLineStyles: {
-		...theme.xTickLineStyles,
-		stroke: defaultTheme.xTickLineStyles.stroke
-	} }),
-	"--a8c-charts-color-label-axis": (theme) => ({ svgLabelSmall: {
-		...theme.svgLabelSmall,
-		fill: defaultTheme.svgLabelSmall.fill
-	} }),
-	"--a8c-charts-color-label-background": () => ({ labelBackgroundColor: defaultTheme.labelBackgroundColor }),
-	"--a8c-charts-color-label-on-fill": () => ({ labelTextColor: defaultTheme.labelTextColor })
-};
-/**
-* Restores the mapped theme fields of `overriddenRoles` to their catalog pointer, so the theme-layer variable `themeOverrideVars` writes on the provider wrapper is the only carrier for an overridden role — CSS and the JS bridge (`useXYChartTheme`) then resolve it through the same cascade instead of visx reading a baked literal that can disagree with a closer CSS override.
-*
-* This covers roles `themeOverrideVars` deliberately left unpublished as well as the ones it published. A value that reads its own role is not publishable, but leaving visx the consumer's literal is what the whole mechanism exists to prevent: `theme={ { gridStyles: { stroke: 'var(--brand, var(--a8c-charts-color-grid, red))' } } }` would have CSS paint the catalog default while visx painted `--brand`.
-*
-* Every field outside the mapped roles is left exactly as `merged` provided it: those aren't published as theme-layer vars, so rewriting them would erase a consumer's override with no replacement carrier.
-*
-* @param merged          - The consumer theme merged onto `defaultTheme` (`mergeThemes` output).
-* @param overriddenRoles - The catalog roles the consumer overrode, from `themeOverrideVars`.
-* @return A new theme object; `merged` is not mutated.
-*/
-const withCatalogPointers = (merged, overriddenRoles) => {
-	let result = merged;
-	for (const role of overriddenRoles) {
-		const restore = CATALOG_RESTORE_FOR_ROLE[role];
-		if (restore) result = {
-			...result,
-			...restore(result)
-		};
-	}
-	return result;
-};
-//#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
 const GlobalChartsContext = createContext(null);
-const GlobalChartsProvider = ({ children, theme }) => {
+const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 	const [charts, setCharts] = useState(() => /* @__PURE__ */ new Map());
 	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Map());
 	const seededCharts = useRef(/* @__PURE__ */ new Set());
@@ -1012,11 +997,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		wrapperRef.current = node;
 		setScopeNode(node);
 	}, []);
-	const { vars: overrideVars, roles: overriddenRoles } = useMemo(() => themeOverrideVars(theme), [theme]);
-	const providerTheme = useMemo(() => {
-		if (!theme) return defaultTheme;
-		return withCatalogPointers(mergeThemes(defaultTheme, theme), overriddenRoles);
-	}, [theme, overriddenRoles]);
+	const providerTheme = useMemo(() => theme ? mergeThemes(defaultTheme, theme) : defaultTheme, [theme]);
 	const [colorCache, setColorCache] = useState(() => ({
 		colors: [],
 		hues: [],
@@ -1032,7 +1013,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		const existingHslColors = [];
 		let minHue = 360;
 		let maxHue = 0;
-		for (const color of providerTheme.colors ?? SERIES_PALETTE_POINTERS) {
+		for (const color of SERIES_PALETTE_POINTERS) {
 			const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
 			if (normalizedColor.startsWith("#")) {
 				resolvedColors.push(normalizedColor);
@@ -1057,7 +1038,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 			minHue,
 			maxHue
 		});
-	}, [providerTheme]);
+	}, []);
 	useEffect(() => {
 		if (colorCache.colors.length > 0) setIsColorPaletteResolved(true);
 	}, [colorCache]);
@@ -1149,12 +1130,17 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		const set = hiddenSeries.get(chartId);
 		return set ? new Set(set) : /* @__PURE__ */ new Set();
 	}, [hiddenSeries]);
+	const formatting = useMemo(() => sanitizeFormatting({
+		locale,
+		timeZone
+	}), [locale, timeZone]);
 	const value = useMemo(() => ({
 		charts,
 		registerChart,
 		unregisterChart,
 		getChartData,
 		theme: providerTheme,
+		formatting,
 		getElementStyles,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
@@ -1170,6 +1156,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		unregisterChart,
 		getChartData,
 		providerTheme,
+		formatting,
 		getElementStyles,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
@@ -1185,10 +1172,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		children: /* @__PURE__ */ jsx("div", {
 			ref: setWrapperNode,
 			className: CHART_SCOPE_CLASS,
-			style: {
-				display: "contents",
-				...overrideVars
-			},
+			style: { display: "contents" },
 			children: /* @__PURE__ */ jsx(ChartScopeContext.Provider, {
 				value: scopeNode,
 				children
@@ -1252,6 +1236,39 @@ const useDeepMemo = (value) => {
 	return ref.current;
 };
 //#endregion
+//#region src/providers/chart-context/private/catalog-pointers.ts
+const CATALOG_POINTERS = {
+	background: "var(--a8c-charts-color-background, #fff)",
+	labelAxis: "var(--a8c-charts-color-label-axis, #1e1e1e)",
+	grid: "var(--a8c-charts-color-grid, #dbdbdb)",
+	axisX: "var(--a8c-charts-color-axis-x, #dbdbdb)",
+	tickX: "var(--a8c-charts-color-tick-x, #dbdbdb)",
+	axisY: "var(--a8c-charts-color-axis-y, none)",
+	tickY: "var(--a8c-charts-color-tick-y, none)",
+	annotation: "var(--a8c-charts-color-annotation, #1e1e1e)",
+	surface: "var(--a8c-charts-color-surface, #fff)",
+	surfaceSecondary: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
+	trendUp: "var(--a8c-charts-color-trend-up, #008030)",
+	trendDown: "var(--a8c-charts-color-trend-down, #cc1818)",
+	series: SERIES_PALETTE_POINTERS
+};
+/**
+* The annotation parts visx paints, in the shape `@visx/annotation` takes. `radius`
+* rides along as the base the theme and the per-datum styles merge onto.
+*/
+const ANNOTATION_POINTERS = {
+	label: {
+		anchorLineStroke: CATALOG_POINTERS.annotation,
+		backgroundFill: CATALOG_POINTERS.surface
+	},
+	connector: { stroke: CATALOG_POINTERS.annotation },
+	circleSubject: {
+		stroke: "transparent",
+		fill: CATALOG_POINTERS.annotation,
+		radius: 5
+	}
+};
+//#endregion
 //#region src/providers/chart-scope/use-chart-scope-element.ts
 /**
 * Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
@@ -1278,13 +1295,34 @@ const useXYChartTheme = (data) => {
 	return useMemo(() => {
 		const resolve = createCssVariableResolver(scopeElement);
 		const resolveColor = (value) => value ? resolve(value) ?? value : value;
-		const paletteColors = [...JSON.parse(seriesColorKey), ...theme.colors ?? []].map((color) => resolveColor(color)).filter((color) => Boolean(color) && !color.includes("var("));
-		const htmlLabelColor = resolveColor(theme.svgLabelSmall?.fill);
+		const paletteColors = [...JSON.parse(seriesColorKey), ...CATALOG_POINTERS.series].map((color) => resolveColor(color)).filter((color) => Boolean(color) && !color.includes("var("));
+		const resolvedLabelColor = resolveColor(CATALOG_POINTERS.labelAxis);
+		const htmlLabelColor = resolvedLabelColor ? normalizeColorToHex(resolvedLabelColor) || resolvedLabelColor : resolvedLabelColor;
 		return buildChartTheme({
 			...theme,
+			gridColor: "",
+			gridColorDark: "",
 			colors: paletteColors,
-			backgroundColor: resolveColor(theme.backgroundColor),
-			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : void 0
+			backgroundColor: resolveColor(CATALOG_POINTERS.background),
+			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : void 0,
+			gridStyles: {
+				...theme.gridStyles,
+				stroke: CATALOG_POINTERS.grid
+			},
+			xAxisLineStyles: {
+				...theme.xAxisLineStyles,
+				stroke: CATALOG_POINTERS.axisX
+			},
+			xTickLineStyles: {
+				...theme.xTickLineStyles,
+				stroke: CATALOG_POINTERS.tickX
+			},
+			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
+			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
+			svgLabelSmall: {
+				...theme.svgLabelSmall,
+				fill: CATALOG_POINTERS.labelAxis
+			}
 		});
 	}, [
 		theme,
@@ -1293,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
 *
@@ -1307,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;
@@ -1315,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
@@ -1325,7 +1379,7 @@ const useChartDataTransform = (data) => {
 				return a.date.getTime() - b.date.getTime();
 			})
 		}));
-	}, [data]);
+	}, [data, timeZone]);
 };
 //#endregion
 //#region src/hooks/use-chart-margin.tsx
@@ -1367,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) => {
@@ -1383,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);
@@ -1402,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,
@@ -2126,15 +2208,370 @@ 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 [
+		overflow,
+		overflowX,
+		overflowY
+	].some((value) => value && value !== "visible");
+};
+const findClippingAncestor = (wrapper) => {
+	let element = wrapper.parentElement;
+	while (element && element !== document.body) {
+		if (isClipping(element)) return element;
+		element = element.parentElement;
+	}
+	return null;
+};
+/**
+* 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 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; fixed placement preserves the axis's subpixel y.
+*/
+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 - 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 - fit.bottom;
+	const upOverflow = fit.top - upY;
+	let y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
+	x = clamp(x, bounds.left, bounds.right, box.width);
+	y = clamp(y, bounds.top, bounds.bottom, box.height);
+	return {
+		x: Math.round(x),
+		y: Math.round(y)
+	};
+};
+/**
+* visx's `Tooltip`, positioned like its `TooltipWithBounds` but kept inside the
+* nearest clipping ancestor — or the viewport when there is none — rather than
+* inside its own parent. Rendered in-tree, a tooltip's parent is the chart
+* wrapper, which is often narrower than the box; measuring against the parent
+* alone would let the box spill into an `overflow: hidden` card and be cut off.
+*
+* Re-measures on every render, so a box whose content changes width between
+* two hovers is placed for its current size. See `getBoundedPosition` for the
+* below-axis exception.
+*
+* @param props            - visx `Tooltip` props.
+* @param props.left       - Anchor x, in wrapper coordinates.
+* @param props.top        - Anchor y, in wrapper coordinates.
+* @param props.offsetLeft - Gap between the anchor and the box, horizontally.
+* @param props.offsetTop  - Gap between the anchor and the box, vertically.
+* @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, placement = "auto", ...rest }) => {
+	const nodeRef = useRef(null);
+	const clipRef = useRef(null);
+	const [position, setPosition] = useState(null);
+	useLayoutEffect(() => {
+		const node = nodeRef.current;
+		const wrapper = node?.parentElement;
+		if (!node || !wrapper) return;
+		if (clipRef.current?.wrapper !== wrapper) clipRef.current = {
+			wrapper,
+			clip: findClippingAncestor(wrapper)
+		};
+		const own = node.getBoundingClientRect();
+		const wrapperRect = wrapper.getBoundingClientRect();
+		const clipRect = clipRef.current.clip?.getBoundingClientRect() ?? {
+			left: 0,
+			top: 0,
+			right: window.innerWidth,
+			bottom: window.innerHeight
+		};
+		const next = getBoundedPosition({
+			left,
+			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,
+				right: clipRect.right - wrapperRect.left,
+				bottom: clipRect.bottom - wrapperRect.top
+			}
+		});
+		setPosition((current) => current && current.x === next.x && current.y === next.y ? current : next);
+	}, [
+		left,
+		top,
+		offsetLeft,
+		offsetTop,
+		children,
+		placement
+	]);
+	const x = position?.x ?? left + offsetLeft;
+	const y = position?.y ?? top + (placement === "below-axis" ? POINTER_HEIGHT : offsetTop);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		ref: nodeRef,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			transform: `translate(${x}px, ${y}px)`,
+			...!unstyled && style
+		},
+		...rest,
+		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;
+const PORTAL_OPTIONS = /* @__PURE__ */ new Set([
+	"scroll",
+	"debounce",
+	"resizeObserverPolyfill"
+]);
+const isValidNumber = (value) => typeof value === "number" && Number.isFinite(value);
+const scaleBandwidth = (scale) => {
+	const bandwidth = scale?.bandwidth;
+	return typeof bandwidth === "function" ? Number(bandwidth()) : 0;
+};
+const DefaultGlyph$1 = ({ x, y, size, color, glyphStyle, seriesKey }) => {
+	const { theme } = useContext(DataContext) || {};
+	return /* @__PURE__ */ jsx("circle", {
+		cx: x,
+		cy: y,
+		r: size,
+		fill: color,
+		stroke: theme?.backgroundColor,
+		strokeWidth: CROSSHAIR_STROKE_WIDTH,
+		paintOrder: "fill",
+		...glyphStyle
+	});
+};
+const defaultRenderGlyph$1 = ({ key, ...props }) => /* @__PURE__ */ jsx(DefaultGlyph$1, {
+	seriesKey: key,
+	...props
+}, key);
+const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, renderGlyph = defaultRenderGlyph$1, glyphStyle, snapTooltipToDatumX = false, snapTooltipToDatumY = false, showVerticalCrosshair = false, showHorizontalCrosshair = false, showDatumGlyph = false, showSeriesGlyphs = false, verticalCrosshairStyle, horizontalCrosshairStyle, detectBounds = true, tooltipPlacement = "auto", zIndex = DEFAULT_TOOLTIP_Z_INDEX, style, ...rest }) => {
+	const 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({
+		...tooltipContext,
+		colorScale
+	}) : null;
+	if (tooltipContent == null) return null;
+	const scaleX = xScale;
+	const scaleY = yScale;
+	const getDatumLeftTop = (key, datum) => {
+		const entry = dataRegistry?.get(key);
+		return {
+			left: scaleX && entry?.xAccessor ? Number(scaleX(entry.xAccessor(datum))) + scaleBandwidth(xScale) / 2 : void 0,
+			top: scaleY && entry?.yAccessor ? Number(scaleY(entry.yAccessor(datum))) + scaleBandwidth(yScale) / 2 : void 0
+		};
+	};
+	const nearestDatum = tooltipContext.tooltipData?.nearestDatum;
+	let { tooltipLeft, tooltipTop } = tooltipContext;
+	if (nearestDatum && (snapTooltipToDatumX || snapTooltipToDatumY || tooltipPlacement === "below-axis")) {
+		const { left, top } = getDatumLeftTop(nearestDatum.key, nearestDatum.datum);
+		if ((snapTooltipToDatumX || tooltipPlacement === "below-axis") && isValidNumber(left)) tooltipLeft = left;
+		if (snapTooltipToDatumY && isValidNumber(top)) tooltipTop = top;
+	}
+	const glyphs = [];
+	if (showDatumGlyph || showSeriesGlyphs) {
+		const size = Number(glyphStyle?.radius ?? DEFAULT_GLYPH_RADIUS);
+		const labelColor = theme?.htmlLabel?.color ?? FALLBACK_COLOR;
+		const fallbackColor = showSeriesGlyphs ? labelColor : theme?.gridStyles?.stroke ?? labelColor;
+		let entries = [];
+		if (showSeriesGlyphs) entries = Object.values(tooltipContext.tooltipData?.datumByKey ?? {});
+		else if (nearestDatum) entries = [nearestDatum];
+		for (const { key, datum, index } of entries) {
+			const { left, top } = getDatumLeftTop(key, datum);
+			if (!isValidNumber(left) || !isValidNumber(top)) continue;
+			glyphs.push(/* @__PURE__ */ jsx("g", {
+				className: "visx-tooltip-glyph",
+				transform: `translate(${left}, ${top})`,
+				children: renderGlyph({
+					key,
+					color: colorScale?.(key) ?? fallbackColor,
+					datum,
+					index,
+					size,
+					x: 0,
+					y: 0,
+					glyphStyle,
+					isNearestDatum: nearestDatum?.key === key
+				})
+			}, key));
+		}
+	}
+	const crosshairStroke = theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? FALLBACK_COLOR;
+	const marginTop = margin?.top ?? 0;
+	const marginLeft = margin?.left ?? 0;
+	const TooltipComponent = detectBounds || tooltipPlacement === "below-axis" ? BoundedTooltip : Tooltip;
+	const boxStyle = {
+		...defaultStyles,
+		zIndex,
+		backgroundColor: theme?.backgroundColor ?? "white",
+		boxShadow: `0 1px 2px ${theme?.htmlLabel?.color ? `${theme.htmlLabel.color}55` : "#22222255"}`,
+		...theme?.htmlLabel,
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("g", {
+		className: "visx-tooltip-overlay",
+		pointerEvents: "none",
+		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
+			}),
+			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
+			}),
+			glyphs
+		]
+	}), container && createPortal(/* @__PURE__ */ jsx(TooltipComponent, {
+		left: tooltipLeft,
+		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipTop,
+		style: boxStyle,
+		applyPositionStyle: true,
+		...tooltipProps,
+		...tooltipPlacement === "below-axis" && { placement: tooltipPlacement },
+		children: tooltipContent
+	}), container)] });
+};
+/**
+* In-tree replacement for `@visx/xychart`'s `Tooltip`.
+*
+* visx renders its tooltip box, glyphs and crosshairs through portals appended
+* to `document.body`. That puts them in the page's root stacking context, where
+* they paint above every sticky or fixed element that lives inside a nested
+* stacking context, and no z-index on that element can change the order. This
+* component draws the glyphs and crosshairs straight into the chart SVG and
+* renders the tooltip box into the SVG's parent element, so all of them stack
+* as ordinary descendants of the chart.
+*
+* Render it as a child of `XYChart`. The element wrapping that `XYChart` must
+* be `position: relative` with the SVG at its origin, and `isolation: isolate`:
+* the box is placed with the SVG-local coordinates visx reports, and the
+* 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. 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.
+*/
+const XyChartTooltip = (props) => {
+	const tooltipContext = useContext(TooltipContext);
+	const [container, setContainer] = useState(null);
+	const anchorRef = useCallback((node) => {
+		setContainer(node?.ownerSVGElement?.parentElement ?? null);
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("g", { ref: anchorRef }), tooltipContext?.tooltipOpen && /* @__PURE__ */ jsx(XyChartTooltipContent, {
+		...props,
+		tooltipContext,
+		container
+	})] });
+};
+//#endregion
 //#region src/components/tooltip/accessible-tooltip.tsx
 const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = useContext(TooltipContext);
 	const scopeElement = useChartScopeElement();
-	const gridStroke = useGlobalChartsTheme().gridStyles?.stroke;
 	const crosshairStroke = useMemo(() => {
-		const stroke = gridStroke ? resolveCssVariable(gridStroke, scopeElement) : null;
+		const stroke = resolveCssVariable(CATALOG_POINTERS.grid, scopeElement);
 		return stroke ? { stroke } : void 0;
-	}, [gridStroke, scopeElement]);
+	}, [scopeElement]);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const tooltipData = useMemo(() => {
 		if (mode !== "individual") return [];
 		if (series.length === 0) return [];
@@ -2195,11 +2632,11 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 				tabIndex: -1,
 				role: "tooltip",
 				"aria-atomic": "true",
-				className: clsx(CHART_SCOPE_CLASS, keyboardFocusedClassName),
+				className: clsx(standaloneScopeClass, keyboardFocusedClassName),
 				children: tooltipContent
 			}, `chart-tooltip-${selectedIndex}`);
 			return /* @__PURE__ */ jsx("div", {
-				className: CHART_SCOPE_CLASS,
+				className: standaloneScopeClass,
 				role: "tooltip",
 				"aria-live": "polite",
 				children: tooltipContent
@@ -2209,9 +2646,10 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip,
 		selectedIndex,
 		tooltipRef,
-		keyboardFocusedClassName
+		keyboardFocusedClassName,
+		standaloneScopeClass
 	]);
-	return /* @__PURE__ */ jsx(Tooltip, {
+	return /* @__PURE__ */ jsx(XyChartTooltip, {
 		...props,
 		verticalCrosshairStyle: {
 			...crosshairStroke,
@@ -2224,11 +2662,14 @@ 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]),
+			if (element && selectedIndex !== void 0) {
+				if (preventTooltipScroll) element.focus({ preventScroll: true });
+				else element.focus();
+			}
+		}, [preventTooltipScroll, selectedIndex]),
 		onChartFocus: useCallback(() => {
 			if (!isNavigating && selectedIndex !== void 0) setSelectedIndex(0);
 		}, [
@@ -2559,72 +3000,90 @@ const getCurveType = (type, smoothing) => {
 		default: return curveLinear;
 	}
 };
-const dateTimeFormat = (options) => {
-	let formatter;
-	return (timestamp) => {
-		if (!Number.isFinite(Number(timestamp))) return new Date(timestamp).toLocaleDateString();
-		formatter = formatter ?? new Intl.DateTimeFormat(void 0, options);
-		return formatter.format(timestamp);
-	};
-};
-const formatYearTick = dateTimeFormat({ year: "numeric" });
-const formatDateTick = dateTimeFormat({
+const YEAR_TICK = { year: "numeric" };
+const DATE_TICK = {
 	month: "short",
 	day: "numeric"
-});
-const formatHourTick = dateTimeFormat({
-	hour: "numeric",
-	hour12: true
-});
-const formatMonthTick = dateTimeFormat({ month: "short" });
+};
+const HOUR_TICK = { hour: "numeric" };
+const MONTH_TICK = { month: "short" };
 const boundaryFormat = (isAnchor, atBoundary, between) => {
 	const format = (timestamp) => isAnchor(new Date(timestamp)) ? atBoundary(timestamp) : between(timestamp);
 	format.isAnchor = isAnchor;
 	return format;
 };
-const formatDateOrHourTick = boundaryFormat((date) => date.getHours() === 0 && date.getMinutes() === 0, formatDateTick, formatHourTick);
-const formatMonthOrYearTick = boundaryFormat((date) => date.getMonth() === 0, formatYearTick, formatMonthTick);
+const tickFormats = (formatting) => {
+	const clock = createZonedClock(formatting.timeZone);
+	const year = createDateFormatter(YEAR_TICK, formatting);
+	const date = createDateFormatter(DATE_TICK, formatting);
+	const hour = createDateFormatter(HOUR_TICK, formatting);
+	const month = createDateFormatter(MONTH_TICK, formatting);
+	const datedTick = (timestamp) => date(timestamp);
+	datedTick.anchorsAtLabelChange = true;
+	return {
+		year,
+		date: datedTick,
+		dateOrHour: boundaryFormat((value) => clock(value).hour === 0, date, hour),
+		hour,
+		monthOrYear: boundaryFormat((value) => clock(value).month === 1, year, month)
+	};
+};
 const getSpan = (sortedData) => {
-	const bounds = sortedData.map((datom) => [datom.data.at(0)?.date, datom.data.at(-1)?.date]).filter(([first, last]) => first !== void 0 && last !== void 0);
+	const bounds = sortedData.map((datom) => [datom.data.at(0)?.date, datom.data.at(-1)?.date]).filter(([first, last]) => Number.isFinite(Number(first)) && Number.isFinite(Number(last)));
 	if (!bounds.length) return null;
 	return {
 		minX: Math.min(...bounds.map(([first]) => Number(first))),
 		maxX: Math.max(...bounds.map(([, last]) => Number(last)))
 	};
 };
-const getPointSpacingInHours = (sortedData) => {
-	return sortedData.reduce((spacing, datom) => datom.data.reduce((seriesSpacing, point, index) => {
-		const previous = datom.data[index - 1];
-		if (previous?.date === void 0 || point?.date === void 0) return seriesSpacing;
-		return Math.min(seriesSpacing, Math.abs(differenceInHours(point.date, previous.date)));
-	}, spacing), Number.POSITIVE_INFINITY);
-};
-const SUB_DAILY_SPACING_HOURS = 23;
-const MONTHLY_SPACING_HOURS = 672;
-const getBucketResolution = (sortedData, tickResolution) => {
-	if (tickResolution) return tickResolution === "week" ? "day" : tickResolution;
-	const spacingInHours = getPointSpacingInHours(sortedData);
-	if (spacingInHours < SUB_DAILY_SPACING_HOURS) return "hour";
-	if (!Number.isFinite(spacingInHours) || spacingInHours < MONTHLY_SPACING_HOURS) return "day";
-	return spacingInHours < 12 * MONTHLY_SPACING_HOURS ? "month" : "year";
-};
-const getFormatter = (sortedData, tickResolution) => {
+/**
+* The most informative tick format for a bucket resolution and the span on screen.
+*
+* @param sortedData     - Series as returned by `useChartDataTransform`.
+* @param tickResolution - Caller-declared bucket resolution, when known.
+* @param formatting     - Host locale and time zone.
+* @param domain         - The effective scale domain, or undefined for the data's own extent.
+* @return The formatter the axis labels its ticks with.
+*/
+const getFormatter = (sortedData, tickResolution, formatting = {}, domain) => {
+	const format = tickFormats(formatting);
 	const resolution = getBucketResolution(sortedData, tickResolution);
-	if (resolution === "year") return formatYearTick;
-	if (resolution === "month") return formatMonthOrYearTick;
-	const span = getSpan(sortedData);
-	if (!span) return formatDateTick;
+	if (resolution === "year") return format.year;
+	if (resolution === "month") return format.monthOrYear;
+	const span = domain ? {
+		minX: domain[0].getTime(),
+		maxX: domain[1].getTime()
+	} : getSpan(sortedData);
+	if (!span) return format.date;
 	const diffInHours = Math.abs(differenceInHours(span.maxX, span.minX));
 	if (resolution === "hour") {
-		if (diffInHours <= 24) return formatHourTick;
-		if (diffInHours <= 168) return formatDateOrHourTick;
+		if (diffInHours < 24) return format.hour;
+		if (diffInHours <= 168) return format.dateOrHour;
 	}
-	return Math.abs(differenceInYears(span.maxX, span.minX)) <= 1 ? formatDateTick : formatYearTick;
+	return Math.abs(differenceInYears(span.maxX, span.minX)) <= 1 ? format.date : format.year;
+};
+/**
+* The instants a set of series spans, as a scale domain.
+*
+* @param sortedData - Series as returned by `useChartDataTransform`.
+* @return Earliest and latest dated point, or undefined when nothing is dated.
+*/
+const getSeriesExtent = (sortedData) => {
+	const span = getSpan(sortedData);
+	return span ? [new Date(span.minX), new Date(span.maxX)] : void 0;
+};
+const getAnchorIndices = (domain, tickFormatter, labels) => {
+	if (tickFormatter.anchorsAtLabelChange) return labels.reduce((indices, label, index) => {
+		if (index === 0 || label !== labels[index - 1]) indices.push(index);
+		return indices;
+	}, []);
+	const { isAnchor } = tickFormatter;
+	if (!isAnchor) return [];
+	return domain.reduce((indices, date, index) => {
+		if (isAnchor(date)) indices.push(index);
+		return indices;
+	}, []);
 };
-const getAnchorIndices = (domain, isAnchor) => domain.reduce((indices, date, index) => {
-	if (isAnchor(date)) indices.push(index);
-	return indices;
-}, []);
 const getCandidateSteps = (length, maxTicks, anchorSpacing) => {
 	const steps = /* @__PURE__ */ new Set();
 	for (let count = maxTicks; count > 1; count--) {
@@ -2639,26 +3098,25 @@ const getCandidateSteps = (length, maxTicks, anchorSpacing) => {
 	return steps;
 };
 /**
-* Tick values for a band time axis.
+* Tick values sampled by index, for the bar chart's band axis and for evenly
+* spaced points on a continuous one.
 *
-* visx samples a band domain by index from offset zero, blind to which labels
-* carry a boundary and without collapsing repeats — so the tick that prints the
-* year or the date often isn't sampled at all, and a long series can show the
-* same label twice. Choose the values instead: sweep the evenly spaced
-* candidates, including those that step from anchor to anchor, and keep the one
-* that reaches the most anchors without thinning the axis or putting two
-* identical labels side by side.
+* visx samples by index from offset zero, blind to which labels carry a boundary
+* and without collapsing repeats — so the tick that prints the year or the date
+* often isn't sampled at all, and a long series can show the same label twice.
+* Choose the values instead: sweep the evenly spaced candidates, including those
+* that step from anchor to anchor, and keep the one that reaches the most anchors
+* without thinning the axis or putting two identical labels side by side.
 *
-* @param domain        - Band domain, in axis order.
+* @param domain        - Buckets in axis order.
 * @param tickFormatter - Formatter the axis will render these values with.
 * @param maxTicks      - Most ticks the axis should carry.
 * @return Values to hand the axis as `tickValues`.
 */
 const getBandTickValues = (domain, tickFormatter, maxTicks) => {
 	if (!domain.length) return [];
-	const { isAnchor } = tickFormatter;
-	const anchorIndices = isAnchor ? getAnchorIndices(domain, isAnchor) : [];
 	const domainLabels = domain.map((date) => tickFormatter(date.getTime()));
+	const anchorIndices = getAnchorIndices(domain, tickFormatter, domainLabels);
 	const candidates = [];
 	const consider = (indices) => {
 		if (!indices.length || indices.length > maxTicks) return;
@@ -2670,15 +3128,108 @@ const getBandTickValues = (domain, tickFormatter, maxTicks) => {
 		for (let index = offset; index < domain.length; index += step) indices.push(index);
 		consider(indices);
 	}
-	for (let stride = 1; stride <= anchorIndices.length; stride++) consider(anchorIndices.filter((_, position) => position % stride === 0));
+	const minStride = Math.max(1, Math.ceil(anchorIndices.length / maxTicks));
+	for (let stride = minStride; stride <= anchorIndices.length; stride++) {
+		const stepped = [];
+		for (let position = 0; position < anchorIndices.length; position += stride) stepped.push(anchorIndices[position]);
+		consider(stepped);
+	}
 	if (!candidates.length) return [domain[0]];
 	const densest = candidates.reduce((most, indices) => Math.max(most, indices.length), 0);
-	const anchorsIn = (indices) => isAnchor ? indices.filter((index) => isAnchor(domain[index])).length : 0;
+	const anchorIndexSet = new Set(anchorIndices);
+	const anchorsIn = (indices) => indices.filter((index) => anchorIndexSet.has(index)).length;
 	return candidates.filter((indices) => indices.length >= densest - 1).reduce((chosen, indices) => {
 		const gain = anchorsIn(indices) - anchorsIn(chosen);
 		return gain > 0 || gain === 0 && indices.length > chosen.length ? indices : chosen;
 	}).map((index) => domain[index]);
 };
+/**
+* The most x-axis ticks a chart of this width has room for.
+*
+* @param chartWidth - Chart width in pixels.
+* @return A tick budget of at least one.
+*/
+const getMaxTicksForWidth = (chartWidth) => Math.max(1, Math.floor(chartWidth / X_TICK_WIDTH));
+const MIN_GAP_IN_LABELS = .9;
+const nearestValue = (sorted, target) => {
+	let low = 0;
+	let high = sorted.length - 1;
+	while (low < high) {
+		const middle = Math.floor((low + high) / 2);
+		if (sorted[middle] < target) low = middle + 1;
+		else high = middle;
+	}
+	const above = sorted[low];
+	const below = low > 0 ? sorted[low - 1] : above;
+	return Math.abs(above - target) <= Math.abs(below - target) ? above : below;
+};
+const getPositionTickValues = (points, tickFormatter, maxTicks, axis) => {
+	const times = points.map((point) => point.getTime());
+	const { first, last } = axis;
+	if (maxTicks <= 1 || times.length === 1 || first === last) return [points[0]];
+	const step = (last - first) / (maxTicks - 1);
+	const labels = points.map((point) => tickFormatter(point.getTime()));
+	const minGap = (last - first) / maxTicks * MIN_GAP_IN_LABELS;
+	const anchors = getAnchorIndices(points, tickFormatter, labels).map((index) => times[index]);
+	const chosen = [];
+	let lastLabel = null;
+	for (let index = 0; index < maxTicks; index++) {
+		const target = first + index * step;
+		const anchor = anchors.length ? nearestValue(anchors, target) : null;
+		let tick = anchor !== null && Math.abs(anchor - target) <= step / 2 ? anchor : null;
+		if (tick === null) {
+			const point = nearestValue(times, target);
+			tick = Math.abs(point - target) <= step / 2 ? point : target;
+		}
+		const previous = chosen[chosen.length - 1];
+		if (previous !== void 0 && (tick <= previous || tick - previous < minGap)) continue;
+		const label = tickFormatter(tick);
+		if (label === lastLabel) continue;
+		chosen.push(tick);
+		lastLabel = label;
+	}
+	return chosen.map((timestamp) => new Date(timestamp));
+};
+const isIndexSamplingUnusable = (ticks, points, maxTicks, axis) => {
+	if (ticks.length < 2 || points.length < 2) return false;
+	const span = axis.last - axis.first;
+	if (!span) return false;
+	return ticks.slice(1).reduce((nearest, tick, index) => Math.min(nearest, tick.getTime() - ticks[index].getTime()), Infinity) < span / maxTicks * MIN_GAP_IN_LABELS || ticks.length < Math.min(maxTicks, points.length) / 3;
+};
+/**
+* Tick values for a continuous time axis, chosen from the points it draws.
+*
+* Sampled by index while the points are evenly spaced, which keeps the axis on
+* the calendar boundaries `getBandTickValues` steers towards, and by position
+* once they are not, where an index stride crowds one end of the scale.
+*
+* Values are taken from the data wherever there is one to take, so a local time
+* that does not exist cannot become a tick and DST needs no special case. Only a
+* target stranded in a gap is constructed, as a plain instant.
+*
+* @param sortedData    - Series as returned by `useChartDataTransform`.
+* @param domain        - The effective scale domain, or undefined for all data.
+* @param tickFormatter - The formatter the ticks will be labeled with.
+* @param maxTicks      - The most ticks the axis has room for.
+* @return Tick dates, or null when no series carries a usable date.
+*/
+const getTimeAxisTickValues = (sortedData, domain, tickFormatter, maxTicks) => {
+	const byTimestamp = /* @__PURE__ */ new Map();
+	for (const series of sortedData) for (const point of series.data) {
+		const date = point.date;
+		if (date instanceof Date && Number.isFinite(date.getTime())) byTimestamp.set(date.getTime(), date);
+	}
+	if (!byTimestamp.size) return null;
+	const min = domain?.[0]?.getTime();
+	const max = domain?.[1]?.getTime();
+	const visible = [...byTimestamp.keys()].sort((a, b) => a - b).filter((timestamp) => (min === void 0 || timestamp >= min) && (max === void 0 || timestamp <= max)).map((timestamp) => byTimestamp.get(timestamp));
+	const axis = {
+		first: min ?? visible[0].getTime(),
+		last: max ?? visible[visible.length - 1].getTime()
+	};
+	const ticks = getBandTickValues(visible, tickFormatter, maxTicks);
+	return isIndexSamplingUnusable(ticks, visible, maxTicks, axis) ? getPositionTickValues(visible, tickFormatter, maxTicks, axis) : ticks;
+};
 const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
 	const span = getSpan(data);
 	if (!span) return 1;
@@ -2693,7 +3244,43 @@ const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
 		if (ticks.some((tick, idx) => idx > 0 && tick === ticks[idx - 1])) continue;
 		return ticks.length;
 	}
-	return secondBestGuess;
+	return Math.max(1, secondBestGuess);
+};
+//#endregion
+//#region src/charts/private/time-axis-options.ts
+const toDateDomain = (domain) => domain ? [new Date(domain[0]), new Date(domain[1])] : void 0;
+/**
+* The x-axis options for a continuous time chart, shared by LineChart and AreaChart.
+*
+* Kept in one place so the tick-selection logic isn't duplicated between them.
+*
+* @param args                  - Named arguments.
+* @param args.dataSorted       - Series as returned by `useChartDataTransform`.
+* @param args.width            - Chart width in pixels, which bounds how many ticks fit.
+* @param args.axisOptions      - The caller's `options.axis.x`.
+* @param args.scaleDomain      - The caller's `options.xScale.domain`.
+* @param args.zoomDomain       - The chart's current zoom window, when zoomed.
+* @param args.formatting       - Host locale and time zone.
+* @param args.isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it. Defaults to all of them.
+* @return Options ready to spread into the chart's `axis.x`; `orientation` is always set.
+*/
+const buildTimeAxisOptions = ({ dataSorted, width, axisOptions, scaleDomain, zoomDomain, formatting, isSeriesRendered }) => {
+	const { tickResolution, tickFormat, tickValues: callerTickValues, numTicks: callerNumTicks, orientation: callerOrientation, display: callerDisplay, ...rest } = axisOptions ?? {};
+	const rendered = isSeriesRendered ? dataSorted.filter(isSeriesRendered) : dataSorted;
+	const effectiveDomain = zoomDomain ?? toDateDomain(scaleDomain) ?? getSeriesExtent(rendered);
+	const ownFormatter = getFormatter(rendered, tickResolution, formatting, effectiveDomain);
+	const formatter = tickFormat || ownFormatter;
+	const ownTickValues = tickFormat || callerTickValues ? null : getTimeAxisTickValues(rendered, effectiveDomain, ownFormatter, callerNumTicks ?? getMaxTicksForWidth(width));
+	const tickValues = callerTickValues ?? (ownTickValues?.length ? ownTickValues : void 0);
+	const numTicks = callerNumTicks ?? (tickValues ? void 0 : guessOptimalNumTicks(rendered, width, formatter));
+	return {
+		orientation: callerOrientation ?? "bottom",
+		tickFormat: formatter,
+		display: callerDisplay ?? true,
+		...rest,
+		...tickValues ? { tickValues } : {},
+		...numTicks === void 0 ? {} : { numTicks }
+	};
 };
 //#endregion
 //#region src/charts/private/with-responsive/with-responsive.module.scss
@@ -2974,6 +3561,9 @@ function ZoomResetButton({ onClick }) {
 	});
 }
 //#endregion
+//#region src/charts/private/xy-plot/xy-plot.module.scss
+var xy_plot_module_default = { "xy-plot": "a8ccharts-bIyhgG-xy-plot" };
+//#endregion
 //#region src/charts/line-chart/line-chart.module.scss
 var line_chart_module_default = {
 	"line-chart": "a8ccharts-inuQka-line-chart",
@@ -3214,12 +3804,14 @@ const getVerticalAnchor = (subjectType, isFlippedVertically, y, yMax, height) =>
 };
 const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", styles: datumStyles, testId, renderLabel, renderLabelPopover }) => {
 	const providerTheme = useGlobalChartsTheme();
-	const scopeElement = useChartScopeElement();
 	const { xScale, yScale } = useContext(DataContext) || {};
 	const labelRef = useRef(null);
 	const [height, setHeight] = useState(null);
-	const styles = deepmerge(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
-	const resolveColor = (value) => value ? resolveCssVariable(value, scopeElement) ?? value : value;
+	const styles = useMemo(() => deepmerge.all([
+		ANNOTATION_POINTERS,
+		providerTheme.annotationStyles ?? {},
+		datumStyles ?? {}
+	]), [providerTheme.annotationStyles, datumStyles]);
 	useEffect(() => {
 		if (labelRef.current?.getBBox) {
 			const bbox = labelRef.current.getBBox();
@@ -3305,15 +3897,8 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 		dx,
 		dy,
 		children: [
-			/* @__PURE__ */ jsx(Connector, {
-				...styles?.connector,
-				stroke: resolveColor(styles?.connector?.stroke)
-			}),
-			subjectType === "circle" && /* @__PURE__ */ jsx(CircleSubject, {
-				...styles?.circleSubject,
-				fill: resolveColor(styles?.circleSubject?.fill),
-				stroke: resolveColor(styles?.circleSubject?.stroke)
-			}),
+			/* @__PURE__ */ jsx(Connector, { ...styles?.connector }),
+			subjectType === "circle" && /* @__PURE__ */ jsx(CircleSubject, { ...styles?.circleSubject }),
 			subjectType === "line-vertical" && /* @__PURE__ */ jsx(LineSubject, {
 				min: yMax,
 				max: yMin,
@@ -3347,8 +3932,6 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 					title,
 					subtitle,
 					...styles?.label,
-					anchorLineStroke: resolveColor(styles?.label?.anchorLineStroke),
-					backgroundFill: resolveColor(styles?.label?.backgroundFill),
 					...labelPosition,
 					horizontalAnchor: getHorizontalAnchor(subjectType, isFlippedHorizontally),
 					verticalAnchor: getVerticalAnchor(subjectType, isFlippedVertically, y, yMax, height ?? ANNOTATION_INIT_HEIGHT)
@@ -3396,16 +3979,34 @@ const toNumber = (val) => {
 	const num = typeof val === "number" ? val : parseFloat(val);
 	return isNaN(num) ? void 0 : num;
 };
+const TOOLTIP_DATE = {};
+const TOOLTIP_FORMAT_BY_RESOLUTION$1 = {
+	hour: {
+		year: "numeric",
+		month: "numeric",
+		day: "numeric",
+		hour: "numeric"
+	},
+	day: TOOLTIP_DATE,
+	month: TOOLTIP_DATE,
+	year: TOOLTIP_DATE
+};
+const TooltipDate = ({ date, displayResolution }) => {
+	const formatting = useChartFormatting();
+	const format = useMemo(() => createDateFormatter(TOOLTIP_FORMAT_BY_RESOLUTION$1[displayResolution], formatting), [displayResolution, formatting]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: date ? format(date) : null });
+};
 /**
 * Default visx-tooltip render that prints the hovered date as a heading and
 * 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 >`.
+* @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 { tooltipData } = params;
+const renderDefaultTooltip = (params, contentStyle) => {
+	const { tooltipData, bucketInfo } = params;
 	const nearestDatum = tooltipData?.nearestDatum?.datum;
 	if (!nearestDatum) return null;
 	const tooltipPoints = Object.entries(tooltipData?.datumByKey || {}).map(([key, { datum }]) => ({
@@ -3414,9 +4015,13 @@ 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: nearestDatum.date?.toLocaleDateString()
+			children: /* @__PURE__ */ jsx(TooltipDate, {
+				date: nearestDatum.date,
+				displayResolution: bucketInfo?.displayResolution ?? "day"
+			})
 		}), tooltipPoints.map((point) => /* @__PURE__ */ jsxs(Stack, {
 			direction: "row",
 			align: "center",
@@ -3460,14 +4065,14 @@ 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";
 	const legendPosition = legend.position ?? "bottom";
-	const providerTheme = useGlobalChartsTheme();
+	const formatting = useChartFormatting();
 	const theme = useXYChartTheme(data);
-	const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
+	const resolvedBackgroundColor = theme.backgroundColor;
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
 	const isSeriesVisible = useCallback((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
@@ -3538,20 +4143,21 @@ 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(() => {
-		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
-				x: {
-					orientation: "bottom",
-					numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
-					tickFormat: formatter,
-					display: true,
-					...xAxisOptions
-				},
+				x: buildTimeAxisOptions({
+					dataSorted,
+					width,
+					axisOptions: options?.axis?.x,
+					scaleDomain: options?.xScale?.domain,
+					zoomDomain: zoom.domain,
+					formatting,
+					isSeriesRendered: (series) => isSeriesVisible(series.label)
+				}),
 				y: {
 					orientation: "left",
 					numTicks: 4,
@@ -3578,7 +4184,14 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		dataSorted,
 		width,
 		zoom.domain,
-		stableYDomain
+		stableYDomain,
+		formatting,
+		isSeriesVisible
+	]);
+	const bucketInfo = useMemo(() => getBucketInfo(dataSorted.filter((series) => isSeriesVisible(series.label)), options?.axis?.x?.tickResolution), [
+		dataSorted,
+		isSeriesVisible,
+		options?.axis?.x?.tickResolution
 	]);
 	const tooltipRenderGlyph = useMemo(() => {
 		return (props) => {
@@ -3640,6 +4253,29 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		xAccessor: (d) => d?.date,
 		yAccessor: (d) => d?.value
 	};
+	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
+	}, {
+		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
@@ -3688,7 +4324,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
 						ref: chartRef,
-						style: { position: "relative" },
+						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
 							theme,
 							width,
@@ -3778,13 +4414,17 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
+									tooltipPlacement,
+									style: resolvedTooltipStyle,
 									snapTooltipToDatumY: true,
 									showSeriesGlyphs: true,
-									renderTooltip,
+									renderTooltip: tooltipRenderer,
 									renderGlyph: tooltipRenderGlyph,
 									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"],
@@ -3918,12 +4558,11 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange, rescaleYOnLegendToggle, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
 	const legendPosition = legend.position ?? "bottom";
-	const rescaleYOnVisibility = rescaleYOnVisibilityChange ?? rescaleYOnLegendToggle ?? true;
-	const providerTheme = useGlobalChartsTheme();
+	const formatting = useChartFormatting();
 	const theme = useXYChartTheme(data);
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
@@ -3973,7 +4612,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const fixedYDomain = useMemo(() => {
-		if (rescaleYOnVisibility || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
+		if (rescaleYOnVisibilityChange || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
 		if (stacked) {
 			const numPoints = Math.max(...dataSorted.map((s) => s.data.length));
 			let posMax = 0;
@@ -4007,20 +4646,19 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		dataSorted,
 		stacked,
 		stackOffset,
-		rescaleYOnVisibility
+		rescaleYOnVisibilityChange
 	]);
 	const chartOptions = useMemo(() => {
-		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
-				x: {
-					orientation: "bottom",
-					numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
-					tickFormat: formatter,
-					display: true,
-					...xAxisOptions
-				},
+				x: buildTimeAxisOptions({
+					dataSorted,
+					width,
+					axisOptions: options?.axis?.x,
+					scaleDomain: options?.xScale?.domain,
+					zoomDomain: zoom.domain,
+					formatting
+				}),
 				y: {
 					orientation: "left",
 					numTicks: 4,
@@ -4048,7 +4686,8 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		width,
 		stacked,
 		fixedYDomain,
-		zoom.domain
+		zoom.domain,
+		formatting
 	]);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
 	const error = validateData$3(dataSorted);
@@ -4084,9 +4723,17 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	};
 	const zeroYAccessor = useCallback(() => 0, []);
 	const visibleLabels = useMemo(() => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
+	const bucketInfo = useMemo(() => getBucketInfo(dataSorted.filter((series) => visibleLabels.has(series.label)), options?.axis?.x?.tickResolution), [
+		dataSorted,
+		visibleLabels,
+		options?.axis?.x?.tickResolution
+	]);
 	const filteredRenderTooltip = useCallback((params) => {
 		const datumByKey = params?.tooltipData?.datumByKey;
-		if (!datumByKey) return renderTooltip(params);
+		if (!datumByKey) return renderTooltip({
+			...params,
+			bucketInfo
+		});
 		const filtered = Object.fromEntries(Object.entries(datumByKey).filter(([key]) => visibleLabels.has(key)));
 		if (Object.keys(filtered).length === 0) return null;
 		const nearestDatum = params?.tooltipData?.nearestDatum;
@@ -4096,13 +4743,18 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		};
 		return renderTooltip({
 			...params,
+			bucketInfo,
 			tooltipData: {
 				...params.tooltipData,
 				datumByKey: filtered,
 				nearestDatum: nextNearest
 			}
 		});
-	}, [renderTooltip, visibleLabels]);
+	}, [
+		renderTooltip,
+		visibleLabels,
+		bucketInfo
+	]);
 	const resolvedFillOpacity = fillOpacity ?? (stacked ? .85 : .4);
 	const resolvedWithStroke = withStroke ?? !stacked;
 	if (error) return /* @__PURE__ */ jsx("div", {
@@ -4177,7 +4829,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
 						ref: chartRef,
-						style: { position: "relative" },
+						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
 							theme,
 							width,
@@ -4233,7 +4885,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: theme.backgroundColor ?? providerTheme.backgroundColor
+									strokeColor: theme.backgroundColor
 								})] }),
 								/* @__PURE__ */ jsx(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -4401,8 +5053,7 @@ const TOOLTIP_FORMAT_BY_RESOLUTION = {
 		year: "numeric",
 		month: "long",
 		day: "numeric",
-		hour: "numeric",
-		hour12: true
+		hour: "numeric"
 	},
 	day: {
 		year: "numeric",
@@ -4421,16 +5072,16 @@ const TOOLTIP_FORMAT_BY_RESOLUTION = {
 *
 * @param data           - Date-based series, already parsed and sorted by `useChartDataTransform`.
 * @param tickResolution - Caller-declared bucket resolution, when known.
+* @param formatting     - Host locale and time zone.
 * @return Tooltip label formatter.
 */
-const getTooltipFormatter = (data, tickResolution) => {
-	if (tickResolution === "week") return (timestamp) => sprintf(__("Week of %s", "jetpack-charts"), new Date(timestamp).toLocaleDateString(void 0, {
-		year: "numeric",
-		month: "long",
-		day: "numeric"
-	}));
+const getTooltipFormatter = (data, tickResolution, formatting) => {
+	if (tickResolution === "week") {
+		const formatDay = createDateFormatter(TOOLTIP_FORMAT_BY_RESOLUTION.day, formatting);
+		return (timestamp) => sprintf(__("Week of %s", "jetpack-charts"), formatDay(timestamp));
+	}
 	const format = TOOLTIP_FORMAT_BY_RESOLUTION[getBucketResolution(data, tickResolution)] ?? TOOLTIP_FORMAT_BY_RESOLUTION.day;
-	return (timestamp) => new Date(timestamp).toLocaleString(void 0, format);
+	return createDateFormatter(format, formatting);
 };
 const identity = (label) => label;
 const byBucket = (format) => (bucket) => typeof bucket === "string" ? bucket : format(Number(bucket));
@@ -4481,6 +5132,7 @@ const getGroupPadding = (scale) => {
 */
 function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
 	const stableOptions = useDeepMemo(options);
+	const formatting = useChartFormatting();
 	const axisConfig = useMemo(() => {
 		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, tickFormat: xTickFormat, ...xAxisOptions } = stableOptions.axis?.x || {};
 		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, tickFormat: yTickFormat, ...yAxisOptions } = stableOptions.axis?.y || {};
@@ -4507,9 +5159,9 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 			zero: false
 		};
 		const hasLabels = Boolean(data?.[0]?.data?.[0]?.label);
-		const timeTickFormatter = hasLabels ? null : getFormatter(data, tickResolution);
+		const timeTickFormatter = hasLabels ? null : getFormatter(data, tickResolution, formatting);
 		const labelFormatter = timeTickFormatter ? byBucket(timeTickFormatter) : identity;
-		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution));
+		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution, formatting));
 		const valueFormatter = formatNumberCompact;
 		const bandDomain = timeTickFormatter ? getBandDomain(data, isSeriesRendered) : null;
 		const valueAccessor = (d) => {
@@ -4545,7 +5197,8 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 	}, [
 		data,
 		tickResolution,
-		isSeriesRendered
+		isSeriesRendered,
+		formatting
 	]);
 	return useMemo(() => {
 		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
@@ -5054,6 +5707,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsx("div", {
 						ref: chartRef,
+						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ jsxs(XYChart, {
 							theme,
 							width,
@@ -5221,7 +5875,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	right: 20,
 	bottom: 0,
 	top: 0
-}, ...rest }) => {
+}, className, ...rest }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const tintedData = useMemo(() => {
 		if (data.length > 1) return data;
@@ -5273,6 +5927,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	return /* @__PURE__ */ jsx(BarChart, {
 		orientation: "horizontal",
 		gridVisibility: "none",
+		className: clsx("bar-list-chart", className),
 		data: tintedData,
 		width,
 		height,
@@ -5309,6 +5964,9 @@ const BarListChartResponsive = withResponsive(BarListChart);
 var conversion_funnel_chart_module_default = {
 	"bar-container": "a8ccharts-mGEVca-bar-container",
 	"change-indicator": "a8ccharts-mGEVca-change-indicator",
+	"change-indicator--negative": "a8ccharts-mGEVca-change-indicator--negative",
+	"change-indicator--positive": "a8ccharts-mGEVca-change-indicator--positive",
+	"conversion-funnel-chart": "a8ccharts-mGEVca-conversion-funnel-chart",
 	"conversion-funnel-chart--loading": "a8ccharts-mGEVca-conversion-funnel-chart--loading",
 	"empty-state": "a8ccharts-mGEVca-empty-state",
 	"funnel-bar": "a8ccharts-mGEVca-funnel-bar",
@@ -5389,23 +6047,14 @@ const useFunnelSelection = (hideTooltip) => {
 */
 const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip }) => {
 	const chartId = useChartId(providedChartId);
-	const { conversionFunnelChart: conversionFunnelChartSettings } = useGlobalChartsTheme();
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
 	const selectedBarRef = useRef(null);
 	const [scopeNode, setScopeNode] = useState(null);
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
-	const { containerRef: portalContainerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true
-	});
-	const portalContainerRefRef = useRef(portalContainerRef);
-	useEffect(() => {
-		portalContainerRefRef.current = portalContainerRef;
-	}, [portalContainerRef]);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const setChartRef = useCallback((node) => {
-		portalContainerRefRef.current(node);
 		chartRef.current = node;
 		setScopeNode(node);
 	}, []);
@@ -5422,30 +6071,22 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		});
 	}, [showTooltip]);
 	const getMouseTooltipCoords = useCallback((event) => {
-		if (containerBounds.width === 0 || containerBounds.height === 0) return null;
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if (!bounds) return null;
 		return {
-			x: event.clientX - containerBounds.left,
-			y: event.clientY - containerBounds.top
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top
 		};
-	}, [
-		containerBounds.width,
-		containerBounds.height,
-		containerBounds.left,
-		containerBounds.top
-	]);
+	}, []);
 	const getKeyboardTooltipCoords = useCallback((event) => {
-		if (containerBounds.width === 0 || containerBounds.height === 0) return null;
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if (!bounds) return null;
 		const rect = event.currentTarget.getBoundingClientRect();
 		return {
-			x: rect.left + rect.width / 2 - containerBounds.left,
-			y: rect.top - containerBounds.top
+			x: rect.left + rect.width / 2 - bounds.left,
+			y: rect.top - bounds.top
 		};
-	}, [
-		containerBounds.width,
-		containerBounds.height,
-		containerBounds.left,
-		containerBounds.top
-	]);
+	}, []);
 	const handleStepInteraction = useCallback((step, event, interactionType) => {
 		selectedBarRef.current = event.currentTarget;
 		const { isClicked } = getStepState(step.id);
@@ -5506,19 +6147,14 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		};
 	}, [clearSelectionAndRef]);
 	const resolvedHeight = height ?? style?.height ?? "100%";
-	const { primaryColor, backgroundColor, positiveChangeColor, negativeChangeColor } = conversionFunnelChartSettings;
-	const { color: barColor } = getElementStyles ? getElementStyles({
-		index: 0,
-		overrideColor: primaryColor
-	}) : { color: primaryColor || "#000000" };
-	const changeColor = changeIndicator?.startsWith("+") ? positiveChangeColor : negativeChangeColor;
-	const barBackgroundColor = backgroundColor || hexToRgba(barColor, .08) || "rgba(0, 0, 0, 0.08)";
+	const { color: barColor } = getElementStyles ? getElementStyles({ index: 0 }) : { color: "#000000" };
+	const isPositiveChange = changeIndicator?.startsWith("+");
+	const changeColor = isPositiveChange ? CATALOG_POINTERS.trendUp : CATALOG_POINTERS.trendDown;
 	const renderDefaultMainMetric = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: conversion_funnel_chart_module_default["main-rate"],
 		children: formatPercentage(mainRate)
 	}), changeIndicator && /* @__PURE__ */ jsx("span", {
-		className: conversion_funnel_chart_module_default["change-indicator"],
-		style: { color: changeColor },
+		className: clsx(conversion_funnel_chart_module_default["change-indicator"], conversion_funnel_chart_module_default[isPositiveChange ? "change-indicator--positive" : "change-indicator--negative"]),
 		children: changeIndicator
 	})] });
 	const renderDefaultTooltip = (step) => /* @__PURE__ */ jsxs(Stack, {
@@ -5556,7 +6192,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		align: "center",
 		justify: "center",
 		ref: setScopeNode,
-		className: clsx(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
+		className: clsx("conversion-funnel-chart", conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
 			height: resolvedHeight
@@ -5567,16 +6203,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})
 	});
 	const maxRate = Math.max(...steps.map((step) => step.rate));
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
+	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "column",
 		gap: "xl",
 		ref: setChartRef,
-		className: clsx(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
+		className: clsx("conversion-funnel-chart", conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
 			height: resolvedHeight
 		},
-		children: /* @__PURE__ */ jsxs(ChartScopeContext.Provider, {
+		children: [/* @__PURE__ */ jsxs(ChartScopeContext.Provider, {
 			value: scopeNode,
 			children: [renderMainMetric ? renderMainMetric({
 				mainRate,
@@ -5628,7 +6264,6 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 							role: "button",
 							tabIndex: isBlurred ? -1 : 0,
 							"aria-label": step.label,
-							style: { backgroundColor: barBackgroundColor },
 							children: /* @__PURE__ */ jsx("div", {
 								className: clsx(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
 								style: {
@@ -5640,23 +6275,23 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 					}, step.id);
 				})
 			})]
-		})
-	}), tooltipOpen && tooltipData && (() => {
-		const tooltipContent = renderTooltip ? renderTooltip({
-			step: tooltipData,
-			index: steps.findIndex((s) => s.id === tooltipData.id),
-			top: tooltipTop,
-			left: tooltipLeft,
-			className: conversion_funnel_chart_module_default["tooltip-wrapper"]
-		}) : renderDefaultTooltip(tooltipData);
-		if (!tooltipContent) return null;
-		return /* @__PURE__ */ jsx(TooltipInPortal, {
-			top: tooltipTop,
-			left: tooltipLeft,
-			className: clsx("a8c-charts-scope", conversion_funnel_chart_module_default["tooltip-wrapper"]),
-			children: tooltipContent
-		}, Math.random());
-	})()] });
+		}), tooltipOpen && tooltipData && (() => {
+			const tooltipContent = renderTooltip ? renderTooltip({
+				step: tooltipData,
+				index: steps.findIndex((s) => s.id === tooltipData.id),
+				top: tooltipTop,
+				left: tooltipLeft,
+				className: conversion_funnel_chart_module_default["tooltip-wrapper"]
+			}) : renderDefaultTooltip(tooltipData);
+			if (!tooltipContent) return null;
+			return /* @__PURE__ */ jsx(BoundedTooltip, {
+				top: tooltipTop,
+				left: tooltipLeft,
+				className: clsx(standaloneScopeClass, conversion_funnel_chart_module_default["tooltip-wrapper"]),
+				children: tooltipContent
+			});
+		})()]
+	});
 };
 /**
 * ConversionFunnelChart component with provider wrapper
@@ -5802,7 +6437,7 @@ function normalizeGeoChartError(eventArgs) {
 * @return A React component displaying an interactive map with data visualization
 */
 const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", onError, renderPlaceholder }) => {
-	const { getElementStyles, theme: { geoChart: { featureFillColor }, backgroundColor } } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef(null);
 	const reportedErrorIdsRef = useRef(/* @__PURE__ */ new Set());
@@ -5836,8 +6471,8 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 	});
 	const fullColorHex = getElementStyles({ index: 0 }).color;
 	const lightColorHex = lightenHexColor(fullColorHex, .8);
-	const backgroundColorHex = normalizeColorToHex(backgroundColor, scopeElement, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
-	const defaultFillColorHex = normalizeColorToHex(featureFillColor, scopeElement, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
+	const backgroundColorHex = normalizeColorToHex(CATALOG_POINTERS.background, scopeElement, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
+	const defaultFillColorHex = normalizeColorToHex(CATALOG_POINTERS.surfaceSecondary, scopeElement, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
 	const sanitizedData = useMemo(() => {
 		if (data.length === 0) return {
 			data,
@@ -5898,8 +6533,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
-			height,
-			backgroundColor
+			height
 		},
 		children: /* @__PURE__ */ jsx(Chart, {
 			chartType: "GeoChart",
@@ -5943,12 +6577,17 @@ 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",
+	"heatmap-chart__legend-label": "a8ccharts-O3YMOW-heatmap-chart__legend-label",
 	"heatmap-chart__legend-swatch": "a8ccharts-O3YMOW-heatmap-chart__legend-swatch",
 	"heatmap-chart__row": "a8ccharts-O3YMOW-heatmap-chart__row",
 	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label",
@@ -5958,17 +6597,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];
@@ -5989,6 +6632,119 @@ const getNormalizedValue = (value, extent) => {
 	return Math.min(1, Math.max(0, (value - min) / (max - min)));
 };
 //#endregion
+//#region src/charts/heatmap-chart/private/civil-day.ts
+const DAY_MS = 864e5;
+const KEY_OPTIONS = {
+	calendar: "gregory",
+	numberingSystem: "latn",
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit"
+};
+const DATE_PREFIX = /^(\d{4})-(\d{2})-(\d{2})/;
+const pad = (value, length) => String(value).padStart(length, "0");
+/**
+* The day a UTC proxy stands for.
+*
+* @param date - UTC proxy.
+* @return Its day key.
+*/
+const civilKey = (date) => `${pad(date.getUTCFullYear(), 4)}-${pad(date.getUTCMonth() + 1, 2)}-${pad(date.getUTCDate(), 2)}`;
+/**
+* A day key as a UTC-midnight proxy. UTC has no DST, so every step below is exactly
+* `DAY_MS`.
+*
+* @param key - Day key.
+* @return The proxy, or null when the key names no real day.
+*/
+const civilDate = (key) => {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(key);
+	if (!match) return null;
+	const date = /* @__PURE__ */ new Date(0);
+	date.setUTCFullYear(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+	date.setUTCHours(0, 0, 0, 0);
+	return civilKey(date) === key ? date : null;
+};
+/**
+* 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/private/build-calendar-data.ts
 /** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
 const LABELLED_ROWS = [
@@ -6003,69 +6759,88 @@ const LABELLED_ROWS = [
 * @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.
+* @return The day key 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;
+	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;
 	}
-	return null;
+	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 entries = series.map((point) => ({
-		date: toDate(point),
-		value: point.value
-	})).filter((entry) => entry.date !== null);
-	if (!entries.length) return {
+	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 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 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.getMonth();
+	const firstMonth = gridStart.getUTCMonth();
 	let firstMonthWeeks = 0;
-	while (firstMonthWeeks < weekCount && addDays(gridStart, firstMonthWeeks * 7).getMonth() === firstMonth) firstMonthWeeks++;
+	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 = addDays(gridStart, week * 7);
-		const month = columnStart.getMonth();
-		const label = month !== previousMonth && (week !== 0 || showFirstMonthLabel) ? format(columnStart, "MMM") : "";
+		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 = addDays(gridStart, week * 7 + row);
-			const key = format(day, "yyyy-MM-dd");
+			const day = addCivilDays(gridStart, week * 7 + row);
+			const key = civilKey(day);
 			const cell = {
-				label: format(day, "EEE, MMM d, yyyy"),
+				label: formatDay(day),
 				value: valueByDay.has(key) ? valueByDay.get(key) : null
 			};
 			if (key < gridMinDayKey || key > gridMaxDayKey) {
@@ -6091,7 +6866,7 @@ const HeatmapContext = createContext(null);
 //#region src/charts/heatmap-chart/private/heatmap-legend.tsx
 const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 	const context = useContext(HeatmapContext);
-	const { legend, backgroundColor } = useGlobalChartsTheme();
+	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
 	const { primaryColorHex } = context;
 	const labelStyle = legend.labelStyles;
@@ -6102,6 +6877,7 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 		children: [
 			/* @__PURE__ */ jsx(Text$1, {
 				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
 				style: labelStyle,
 				children: lessLabel ?? __("Less", "jetpack-charts")
 			}),
@@ -6115,7 +6891,6 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
 							"--a8c-charts-color-heatmap-primary": primaryColorHex,
-							"--a8c-charts-color-heatmap-background": backgroundColor,
 							"--a8c-charts-heatmap-cell-intensity": intensity
 						}
 					}, index);
@@ -6123,6 +6898,7 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 			}),
 			/* @__PURE__ */ jsx(Text$1, {
 				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
 				style: labelStyle,
 				children: moreLabel ?? __("More", "jetpack-charts")
 			})
@@ -6132,7 +6908,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();
@@ -6140,17 +6917,14 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
 	const [selectedIndex, setSelectedIndex] = useState();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = useTooltip();
-	const { containerRef, containerBounds, TooltipInPortal } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true
-	});
-	const containerBoundsRef = useRef(containerBounds);
-	containerBoundsRef.current = containerBounds;
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = useRef(null);
+	const getTooltipOrigin = useCallback(() => containerRef.current?.closest(`[data-chart-id="heatmap-chart-${chartId}"]`)?.getBoundingClientRect() ?? null, [chartId]);
 	const { color: primaryColorHex } = getElementStyles({
 		index: 0,
-		overrideColor: primaryColor || heatmapChartSettings.primaryColor
+		overrideColor: primaryColor
 	});
-	const chartBackgroundHex = normalizeColorToHex(theme.backgroundColor, scopeElement, resolveCssVariable);
+	const chartBackgroundHex = normalizeColorToHex(CATALOG_POINTERS.background, scopeElement, resolveCssVariable);
 	const primaryHex = normalizeColorToHex(primaryColorHex);
 	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + .85 * intensity)));
 	const extent = useMemo(() => getValueExtent(data), [data]);
@@ -6226,19 +7000,21 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	]);
 	const handleCellMouseMove = useCallback((event) => {
 		if (!withTooltips) return;
+		const origin = getTooltipOrigin();
+		if (!origin) return;
 		const target = event.currentTarget;
 		const columnIndex = Number(target.dataset.column);
 		const rowIndex = Number(target.dataset.row);
-		const bounds = containerBoundsRef.current;
 		showTooltip({
-			tooltipLeft: event.clientX - bounds.left,
-			tooltipTop: event.clientY - bounds.top,
+			tooltipLeft: event.clientX - origin.left,
+			tooltipTop: event.clientY - origin.top,
 			tooltipData: buildTooltipData(columnIndex, rowIndex)
 		});
 	}, [
 		withTooltips,
 		showTooltip,
-		buildTooltipData
+		buildTooltipData,
+		getTooltipOrigin
 	]);
 	const handleCellMouseLeave = useCallback(() => {
 		if (withTooltips && selectedIndex === void 0) hideTooltip();
@@ -6249,13 +7025,14 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	]);
 	useEffect(() => {
 		if (!withTooltips || selectedIndex === void 0) return;
+		const origin = getTooltipOrigin();
+		if (!origin) return;
 		const col = Math.floor(selectedIndex / rows);
 		const row = selectedIndex % rows;
 		const rect = (typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null)?.getBoundingClientRect();
-		const bounds = containerBoundsRef.current;
 		showTooltip({
-			tooltipLeft: rect ? rect.left + rect.width / 2 - bounds.left : 0,
-			tooltipTop: rect ? rect.top + rect.height / 2 - bounds.top : 0,
+			tooltipLeft: rect ? rect.left + rect.width / 2 - origin.left : 0,
+			tooltipTop: rect ? rect.top + rect.height / 2 - origin.top : 0,
 			tooltipData: buildTooltipData(col, row)
 		});
 	}, [
@@ -6264,7 +7041,8 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		rows,
 		chartId,
 		buildTooltipData,
-		showTooltip
+		showTooltip,
+		getTooltipOrigin
 	]);
 	const defaultRenderTooltip = useCallback((info) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ jsx("div", { children: info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value) })] }), []);
 	if (!columns || !rows) return /* @__PURE__ */ jsx(Center, {
@@ -6282,14 +7060,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,
-		"--a8c-charts-color-heatmap-background": theme.backgroundColor,
-		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, {
@@ -6327,7 +7111,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) => {
@@ -6352,7 +7139,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)}`;
@@ -6365,14 +7153,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)
 									})
@@ -6380,11 +7170,11 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 							})]
 						}, `row-${rowIndex}`);
 					})]
-				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
+				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "a8c-charts-scope",
+						className: standaloneScopeClass,
 						role: "tooltip",
 						tabIndex: -1,
 						children: (renderTooltip ?? defaultRenderTooltip)(tooltipData)
@@ -6408,7 +7198,43 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ jsx(HeatmapChartW
 HeatmapChartResponsiveInner.displayName = "HeatmapChart";
 const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
 //#endregion
-//#region ../../../node_modules/.pnpm/is-plain-object@5.0.0/node_modules/is-plain-object/dist/is-plain-object.mjs
+//#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>
 *
@@ -6475,7 +7301,7 @@ function paramCase(input, options) {
 	return dotCase(input, __assign({ delimiter: "-" }, options));
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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(() => {
@@ -8045,7 +8871,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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();
@@ -8152,7 +8978,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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",
@@ -8231,7 +9057,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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,
@@ -8246,9 +9072,6 @@ var CONTROL_PROPS = {
 };
 var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	colorDivider: "rgba(0, 0, 0, 0.1)",
-	colorScrollbarThumb: "rgba(0, 0, 0, 0.2)",
-	colorScrollbarThumbHover: "rgba(0, 0, 0, 0.5)",
-	colorScrollbarTrack: "rgba(0, 0, 0, 0.04)",
 	elevationIntensity: 1,
 	radiusXSmall: "1px",
 	radiusSmall: "2px",
@@ -8259,7 +9082,6 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	borderWidth: "1px",
 	borderWidthFocus: "1.5px",
 	borderWidthTab: "4px",
-	spinnerSize: 16,
 	fontSize: "13px",
 	fontSizeH1: "calc(2.44 * 13px)",
 	fontSizeH2: "calc(1.95 * 13px)",
@@ -8336,10 +9158,10 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	};
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.53.0/node_modules/@wordpress/warning/build-module/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.53.0/node_modules/@wordpress/warning/build-module/index.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -8353,7 +9175,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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>} */
@@ -8380,18 +9202,18 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 memo(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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 });
 }
@@ -8408,7 +9230,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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 };
 }
@@ -8416,7 +9238,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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");
@@ -8436,7 +9258,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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)",
@@ -8452,7 +9274,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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
@@ -8542,7 +9364,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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,
@@ -8551,7 +9373,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@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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, {
@@ -8566,7 +9388,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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",
@@ -8600,7 +9422,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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",
@@ -8648,7 +9470,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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]);
@@ -8669,7 +9491,7 @@ function useGrid(props) {
 			justifyContent: justify,
 			verticalAlign: isInline ? "middle" : void 0,
 			...alignmentProps
-		}, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdURzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgV29yZFByZXNzQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0gfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IGdldEFsaWdubWVudFByb3BzIH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHR5cGUgeyBHcmlkUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlR3JpZChcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBHcmlkUHJvcHMsICdkaXYnID5cbikge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y29sdW1ucyA9IDIsXG5cdFx0Z2FwID0gMyxcblx0XHRpc0lubGluZSA9IGZhbHNlLFxuXHRcdGp1c3RpZnksXG5cdFx0cm93R2FwLFxuXHRcdHJvd3MsXG5cdFx0dGVtcGxhdGVDb2x1bW5zLFxuXHRcdHRlbXBsYXRlUm93cyxcblx0XHQuLi5vdGhlclByb3BzXG5cdH0gPSB1c2VDb250ZXh0U3lzdGVtKCBwcm9wcywgJ0dyaWQnICk7XG5cblx0Y29uc3QgY29sdW1uc0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCBjb2x1bW5zICkgPyBjb2x1bW5zIDogWyBjb2x1bW5zIF07XG5cdGNvbnN0IGNvbHVtbiA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggY29sdW1uc0FzQXJyYXkgKTtcblx0Y29uc3Qgcm93c0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCByb3dzICkgPyByb3dzIDogWyByb3dzIF07XG5cdGNvbnN0IHJvdyA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggcm93c0FzQXJyYXkgKTtcblxuXHRjb25zdCBncmlkVGVtcGxhdGVDb2x1bW5zID1cblx0XHR0ZW1wbGF0ZUNvbHVtbnMgfHwgKCAhISBjb2x1bW5zICYmIGByZXBlYXQoICR7IGNvbHVtbiB9LCAxZnIgKWAgKTtcblx0Y29uc3QgZ3JpZFRlbXBsYXRlUm93cyA9XG5cdFx0dGVtcGxhdGVSb3dzIHx8ICggISEgcm93cyAmJiBgcmVwZWF0KCAkeyByb3cgfSwgMWZyIClgICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYWxpZ25tZW50UHJvcHMgPSBnZXRBbGlnbm1lbnRQcm9wcyggYWxpZ25tZW50ICk7XG5cblx0XHRjb25zdCBncmlkQ2xhc3NlcyA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24sXG5cdFx0XHRkaXNwbGF5OiBpc0lubGluZSA/ICdpbmxpbmUtZ3JpZCcgOiAnZ3JpZCcsXG5cdFx0XHRnYXA6IGBjYWxjKCAkeyBDT05GSUcuZ3JpZEJhc2UgfSAqICR7IGdhcCB9IClgLFxuXHRcdFx0Z3JpZFRlbXBsYXRlQ29sdW1uczogZ3JpZFRlbXBsYXRlQ29sdW1ucyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkVGVtcGxhdGVSb3dzOiBncmlkVGVtcGxhdGVSb3dzIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRSb3dHYXA6IHJvd0dhcCxcblx0XHRcdGdyaWRDb2x1bW5HYXA6IGNvbHVtbkdhcCxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0dmVydGljYWxBbGlnbjogaXNJbmxpbmUgPyAnbWlkZGxlJyA6IHVuZGVmaW5lZCxcblx0XHRcdC4uLmFsaWdubWVudFByb3BzLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeCggZ3JpZENsYXNzZXMsIGNsYXNzTmFtZSApO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y3gsXG5cdFx0Z2FwLFxuXHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnMsXG5cdFx0Z3JpZFRlbXBsYXRlUm93cyxcblx0XHRpc0lubGluZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcyB9O1xufVxuIl19 */");
+		}, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDb250ZXh0U3lzdGVtIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyBnZXRBbGlnbm1lbnRQcm9wcyB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlUmVzcG9uc2l2ZVZhbHVlIH0gZnJvbSAnLi4vdXRpbHMvdXNlLXJlc3BvbnNpdmUtdmFsdWUnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB0eXBlIHsgR3JpZFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUdyaWQoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgR3JpZFByb3BzLCAnZGl2JyA+XG4pIHtcblx0Y29uc3Qge1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGNvbHVtbnMgPSAyLFxuXHRcdGdhcCA9IDMsXG5cdFx0aXNJbmxpbmUgPSBmYWxzZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XHRyb3dzLFxuXHRcdHRlbXBsYXRlQ29sdW1ucyxcblx0XHR0ZW1wbGF0ZVJvd3MsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdHcmlkJyApO1xuXG5cdGNvbnN0IGNvbHVtbnNBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggY29sdW1ucyApID8gY29sdW1ucyA6IFsgY29sdW1ucyBdO1xuXHRjb25zdCBjb2x1bW4gPSB1c2VSZXNwb25zaXZlVmFsdWUoIGNvbHVtbnNBc0FycmF5ICk7XG5cdGNvbnN0IHJvd3NBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggcm93cyApID8gcm93cyA6IFsgcm93cyBdO1xuXHRjb25zdCByb3cgPSB1c2VSZXNwb25zaXZlVmFsdWUoIHJvd3NBc0FycmF5ICk7XG5cblx0Y29uc3QgZ3JpZFRlbXBsYXRlQ29sdW1ucyA9XG5cdFx0dGVtcGxhdGVDb2x1bW5zIHx8ICggISEgY29sdW1ucyAmJiBgcmVwZWF0KCAkeyBjb2x1bW4gfSwgMWZyIClgICk7XG5cdGNvbnN0IGdyaWRUZW1wbGF0ZVJvd3MgPVxuXHRcdHRlbXBsYXRlUm93cyB8fCAoICEhIHJvd3MgJiYgYHJlcGVhdCggJHsgcm93IH0sIDFmciApYCApO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblxuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyggKCkgPT4ge1xuXHRcdGNvbnN0IGFsaWdubWVudFByb3BzID0gZ2V0QWxpZ25tZW50UHJvcHMoIGFsaWdubWVudCApO1xuXG5cdFx0Y29uc3QgZ3JpZENsYXNzZXMgPSBjc3MoIHtcblx0XHRcdGFsaWduSXRlbXM6IGFsaWduLFxuXHRcdFx0ZGlzcGxheTogaXNJbmxpbmUgPyAnaW5saW5lLWdyaWQnIDogJ2dyaWQnLFxuXHRcdFx0Z2FwOiBgY2FsYyggJHsgQ09ORklHLmdyaWRCYXNlIH0gKiAkeyBnYXAgfSApYCxcblx0XHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnM6IGdyaWRUZW1wbGF0ZUNvbHVtbnMgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFRlbXBsYXRlUm93czogZ3JpZFRlbXBsYXRlUm93cyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkUm93R2FwOiByb3dHYXAsXG5cdFx0XHRncmlkQ29sdW1uR2FwOiBjb2x1bW5HYXAsXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdHZlcnRpY2FsQWxpZ246IGlzSW5saW5lID8gJ21pZGRsZScgOiB1bmRlZmluZWQsXG5cdFx0XHQuLi5hbGlnbm1lbnRQcm9wcyxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goIGdyaWRDbGFzc2VzLCBjbGFzc05hbWUgKTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGN4LFxuXHRcdGdhcCxcblx0XHRncmlkVGVtcGxhdGVDb2x1bW5zLFxuXHRcdGdyaWRUZW1wbGF0ZVJvd3MsXG5cdFx0aXNJbmxpbmUsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMgfTtcbn1cbiJdfQ== */");
 		return cx(gridClasses, className);
 	}, [
 		align,
@@ -8690,7 +9512,7 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/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, {
@@ -8713,8 +9535,8 @@ const SUBPIXEL_TOLERANCE = .5;
 * Counts how many leading rows fit inside the content container.
 *
 * Rows are read from the DOM rather than derived from constants: row height
-* depends on the theme's row gap, label wrapping, and whatever a caller renders
-* as a label, so any restated number would drift.
+* depends on `--a8c-charts-dimension-leaderboard-row-gap`, label wrapping, and
+* whatever a caller renders as a label, so any restated number would drift.
 *
 * Every row is a direct grid child marked with `data-row-index`; interactive rows
 * use a button wrapper and non-interactive rows use a div wrapper.
@@ -8799,14 +9621,13 @@ function useFittedRowCount(enabled, rowCount, data) {
 * @return Array of legend items for the leaderboard chart
 */
 function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withComparison = false, withOverlayLabel = false, legendLabels }) {
-	const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
 	const { getElementStyles } = useGlobalChartsContext();
 	return useMemo(() => {
 		if (!data || data.length === 0) return [];
 		const items = [];
 		const { color: resolvedPrimaryColor } = getElementStyles({
 			index: 0,
-			overrideColor: primaryColor || leaderboardChartSettings.primaryColor
+			overrideColor: primaryColor
 		});
 		items.push({
 			label: legendLabels?.primary || __("Current period", "jetpack-charts"),
@@ -8815,7 +9636,7 @@ function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withCom
 		if (withComparison && !withOverlayLabel) {
 			const { color: resolvedSecondaryColor } = getElementStyles({
 				index: 1,
-				overrideColor: secondaryColor || leaderboardChartSettings.secondaryColor
+				overrideColor: secondaryColor
 			});
 			items.push({
 				label: legendLabels?.comparison || __("Previous period", "jetpack-charts"),
@@ -8829,7 +9650,6 @@ function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withCom
 		secondaryColor,
 		withComparison,
 		legendLabels,
-		leaderboardChartSettings,
 		getElementStyles,
 		withOverlayLabel
 	]);
@@ -8843,6 +9663,9 @@ var leaderboard_chart_module_default = {
 	"chevron": "a8ccharts-GovfoW-chevron",
 	"deltaPlaceholder": "a8ccharts-GovfoW-deltaPlaceholder",
 	"deltaValue": "a8ccharts-GovfoW-deltaValue",
+	"deltaValue--down": "a8ccharts-GovfoW-deltaValue--down",
+	"deltaValue--neutral": "a8ccharts-GovfoW-deltaValue--neutral",
+	"deltaValue--up": "a8ccharts-GovfoW-deltaValue--up",
 	"emptyState": "a8ccharts-GovfoW-emptyState",
 	"fitEmptyState": "a8ccharts-GovfoW-fitEmptyState",
 	"interactiveRow": "a8ccharts-GovfoW-interactiveRow",
@@ -8861,6 +9684,14 @@ var leaderboard_chart_module_default = {
 };
 //#endregion
 //#region src/charts/leaderboard-chart/leaderboard-chart.tsx
+const ROW_GAP = "var(--a8c-charts-dimension-leaderboard-row-gap, 12px)";
+const COLUMN_GAP = "var(--a8c-charts-dimension-leaderboard-column-gap, 4px)";
+/** Indexed by `Math.sign( delta ) + 1`, so [negative, neutral, positive]. */
+const DELTA_TREND_CLASS = [
+	"deltaValue--down",
+	"deltaValue--neutral",
+	"deltaValue--up"
+];
 /**
 * Default value formatter using formatMetricValue
 *
@@ -8963,15 +9794,15 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		...legend.shapeStyles
 	};
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "LeaderboardChart");
-	const { labelSpacing, rowGap, columnGap, primaryColor: settingsPrimaryColor, secondaryColor: settingsSecondaryColor, deltaColors } = leaderboardChartSettings;
+	const { labelSpacing } = leaderboardChartSettings;
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 	const { color: resolvedPrimaryColor } = getElementStyles({
 		index: 0,
-		overrideColor: primaryColor || settingsPrimaryColor
+		overrideColor: primaryColor
 	});
 	const { color: resolvedSecondaryColor } = getElementStyles({
 		index: 1,
-		overrideColor: secondaryColor || settingsSecondaryColor
+		overrideColor: secondaryColor
 	});
 	const legendItems = useLeaderboardLegendItems({
 		data: data || [],
@@ -9027,7 +9858,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 			legendPosition,
 			legendElement: false,
 			legendChildren,
-			className: clsx(leaderboard_chart_module_default.leaderboardChart, {
+			className: clsx("leaderboard-chart", leaderboard_chart_module_default.leaderboardChart, {
 				[leaderboard_chart_module_default["leaderboardChart--responsive"]]: !propWidth && !propHeight,
 				[leaderboard_chart_module_default["leaderboardChart--loading"]]: loading
 			}, className),
@@ -9062,7 +9893,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 			legendPosition,
 			legendElement,
 			legendChildren,
-			className: clsx(leaderboard_chart_module_default.leaderboardChart, {
+			className: clsx("leaderboard-chart", leaderboard_chart_module_default.leaderboardChart, {
 				[leaderboard_chart_module_default["leaderboardChart--responsive"]]: !propWidth && !propHeight,
 				[leaderboard_chart_module_default["leaderboardChart--loading"]]: loading
 			}, className),
@@ -9084,8 +9915,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ jsx(component_default, {
 					templateColumns: "minmax(0, 1fr) auto",
-					rowGap,
-					columnGap,
+					rowGap: ROW_GAP,
+					columnGap: COLUMN_GAP,
 					"data-leaderboard-grid": true,
 					children: data.map((entry, rowIndex) => {
 						const rowStyle = shouldFitRows && rowIndex >= fittedCount ? { visibility: "hidden" } : void 0;
@@ -9094,8 +9925,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 						const hasDelta = hasDeltaValue(entry);
 						const showComparisonValue = showComparisonColumn && hasDelta;
 						const showComparisonPlaceholder = showComparisonColumn && !hasDelta;
-						const colorIndex = showComparisonValue ? Math.sign(entry.delta) + 1 : 1;
-						const deltaColor = deltaColors[colorIndex];
+						const deltaTrendClass = leaderboard_chart_module_default[DELTA_TREND_CLASS[showComparisonValue ? Math.sign(entry.delta) + 1 : 1]];
 						const rowCells = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
 							direction: "column",
 							gap: labelSpacing,
@@ -9116,13 +9946,11 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							children: [
 								isPrimaryVisible && /* @__PURE__ */ jsx(Text$1, { children: valueFormatter(entry.currentValue) }),
 								showComparisonValue && /* @__PURE__ */ jsx(Text$1, {
-									className: leaderboard_chart_module_default.deltaValue,
-									style: { color: deltaColor },
+									className: clsx(leaderboard_chart_module_default.deltaValue, deltaTrendClass),
 									children: deltaFormatter(entry.delta)
 								}),
 								showComparisonPlaceholder && /* @__PURE__ */ jsxs(Text$1, {
-									className: clsx(leaderboard_chart_module_default.deltaValue, leaderboard_chart_module_default.deltaPlaceholder),
-									style: { color: deltaColor },
+									className: clsx(leaderboard_chart_module_default.deltaValue, leaderboard_chart_module_default.deltaPlaceholder, deltaTrendClass),
 									children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
 										children: "—"
@@ -9206,7 +10034,9 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 //#endregion
 //#region src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
-	"pie-chart": "a8ccharts-gnszbG-pie-chart",
+	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
+	"pie-chart__label-text": "a8ccharts-gnszbG-pie-chart__label-text",
+	"pie-chart__plot": "a8ccharts-gnszbG-pie-chart__plot",
 	"pie-chart--responsive": "a8ccharts-gnszbG-pie-chart--responsive"
 };
 //#endregion
@@ -9261,11 +10091,8 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId(providedChartId);
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
-	const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true,
-		debounce: 0
-	});
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = useRef(null);
 	const onMouseLeave = useCallback(() => {
 		if (!withTooltips) return;
 		hideTooltip();
@@ -9348,19 +10175,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 				width: propWidth || void 0,
 				height: propHeight || void 0
 			},
-			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
-					top: tooltipTop || 0,
-					left: tooltipLeft || 0,
-					children: /* @__PURE__ */ jsx("div", {
-						className: "a8c-charts-scope",
-						role: "tooltip",
-						children: renderTooltip({ tooltipData })
-					})
-				}),
-				htmlChildren,
-				otherChildren
-			] }),
+			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [htmlChildren, otherChildren] }),
 			children: ({ contentWidth, contentHeight }) => {
 				const availableSize = Math.min(contentWidth > 0 ? contentWidth : 300, contentHeight > 0 ? contentHeight : 300);
 				const actualSize = size ? Math.min(size, availableSize) : availableSize;
@@ -9373,9 +10188,10 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 				const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
 				const maxCornerRadius = (outerRadius - innerRadius) / 2;
 				const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
-				return /* @__PURE__ */ jsx(Center, {
+				return /* @__PURE__ */ jsxs(Center, {
 					ref: containerRef,
-					children: /* @__PURE__ */ jsxs("svg", {
+					className: pie_chart_module_default["pie-chart__plot"],
+					children: [/* @__PURE__ */ jsxs("svg", {
 						viewBox: `0 0 ${width} ${height}`,
 						preserveAspectRatio: "xMidYMid meet",
 						width,
@@ -9407,11 +10223,12 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 										const hasSpaceForLabel = arc.endAngle - arc.startAngle >= .25;
 										const handleMouseMove = (event) => {
 											if (!withTooltips) return;
-											if (containerBounds.width === 0 || containerBounds.height === 0) return;
+											const bounds = containerRef.current?.getBoundingClientRect();
+											if (!bounds) return;
 											showTooltip({
 												tooltipData: arc.data,
-												tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-												tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
+												tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+												tooltipTop: event.clientY - bounds.top + tooltipOffsetY
 											});
 										};
 										const pathProps = {
@@ -9434,20 +10251,20 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 										const backgroundHeight = fontSize + 12;
 										return /* @__PURE__ */ jsxs("g", {
 											...groupProps,
-											children: [/* @__PURE__ */ jsx("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ jsxs("g", { children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ jsx("rect", {
+											children: [/* @__PURE__ */ jsx("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+												className: pie_chart_module_default["pie-chart__label-plate"],
 												x: centroidX - backgroundWidth / 2,
 												y: centroidY - backgroundHeight / 2,
 												width: backgroundWidth,
 												height: backgroundHeight,
-												fill: providerTheme.labelBackgroundColor,
 												rx: 4,
 												ry: 4,
 												pointerEvents: "none"
 											}), /* @__PURE__ */ jsx("text", {
+												className: pie_chart_module_default["pie-chart__label-text"],
 												x: centroidX,
 												y: centroidY,
 												dy: ".33em",
-												fill: providerTheme.labelTextColor || "#333",
 												fontSize,
 												textAnchor: "middle",
 												pointerEvents: "none",
@@ -9458,7 +10275,15 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 								}
 							}), !allSegmentsHidden && svgChildren]
 						})]
-					})
+					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
+						top: tooltipTop || 0,
+						left: tooltipLeft || 0,
+						children: /* @__PURE__ */ jsx("div", {
+							className: standaloneScopeClass,
+							role: "tooltip",
+							children: renderTooltip({ tooltipData })
+						})
+					})]
 				});
 			}
 		})
@@ -9485,6 +10310,7 @@ var pie_semi_circle_chart_module_default = {
 	"label": "a8ccharts-YtTOxW-label",
 	"note": "a8ccharts-YtTOxW-note",
 	"pie-semi-circle-chart": "a8ccharts-YtTOxW-pie-semi-circle-chart",
+	"pie-semi-circle-chart__plot": "a8ccharts-YtTOxW-pie-semi-circle-chart__plot",
 	"pie-semi-circle-chart--responsive": "a8ccharts-YtTOxW-pie-semi-circle-chart--responsive"
 };
 //#endregion
@@ -9534,23 +10360,17 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
-	const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true,
-		debounce: 0
-	});
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = useRef(null);
 	const handleMouseMove = useCallback((event, arc) => {
-		if (containerBounds.width === 0 || containerBounds.height === 0) return;
+		const bounds = containerRef.current?.getBoundingClientRect();
+		if (!bounds) return;
 		showTooltip({
 			tooltipData: arc.data,
-			tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-			tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
+			tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+			tooltipTop: event.clientY - bounds.top + tooltipOffsetY
 		});
 	}, [
-		containerBounds.width,
-		containerBounds.height,
-		containerBounds.left,
-		containerBounds.top,
 		showTooltip,
 		tooltipOffsetX,
 		tooltipOffsetY
@@ -9599,7 +10419,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		const errorWidth = propHeight ? Math.min(propWidth || propHeight * 2, propHeight * 2) : effectiveWidth;
 		const errorHeight = errorWidth / 2;
 		return /* @__PURE__ */ jsx("div", {
-			className: pie_semi_circle_chart_module_default["pie-semi-circle-chart"],
+			className: clsx("pie-semi-circle-chart", pie_semi_circle_chart_module_default["pie-semi-circle-chart"], className),
 			children: /* @__PURE__ */ jsx("svg", {
 				width: errorWidth,
 				height: errorHeight,
@@ -9646,19 +10466,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				width: propWidth || void 0,
 				height: propHeight || void 0
 			},
-			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
-					top: tooltipTop || 0,
-					left: tooltipLeft || 0,
-					children: /* @__PURE__ */ jsx("div", {
-						className: "a8c-charts-scope",
-						role: "tooltip",
-						children: renderTooltip({ tooltipData })
-					})
-				}),
-				htmlChildren,
-				otherChildren
-			] }),
+			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [htmlChildren, otherChildren] }),
 			children: ({ contentWidth, contentHeight }) => {
 				const availableWidth = contentWidth > 0 ? contentWidth : effectiveWidth;
 				const availableHeight = contentHeight > 0 ? contentHeight : propHeight || effectiveWidth / 2;
@@ -9666,9 +10474,10 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				const height = width / 2;
 				const radius = height;
 				const innerRadius = radius * (1 - thickness);
-				return /* @__PURE__ */ jsx(Center, {
+				return /* @__PURE__ */ jsxs(Center, {
 					ref: containerRef,
-					children: /* @__PURE__ */ jsxs("svg", {
+					className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__plot"],
+					children: [/* @__PURE__ */ jsxs("svg", {
 						width,
 						height,
 						viewBox: `0 0 ${width} ${height}`,
@@ -9726,7 +10535,15 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 								!allSegmentsHidden && svgChildren
 							] })
 						})]
-					})
+					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
+						top: tooltipTop || 0,
+						left: tooltipLeft || 0,
+						children: /* @__PURE__ */ jsx("div", {
+							className: standaloneScopeClass,
+							role: "tooltip",
+							children: renderTooltip({ tooltipData })
+						})
+					})]
 				});
 			}
 		})
@@ -9951,6 +10768,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, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, 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