@automattic/charts 3.1.1 → 4.0.0

package/dist/index.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -28,7 +28,7 @@ let _wordpress_i18n = require("@wordpress/i18n");
 let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
 let react = require("react");
-react = __toESM(react, 1);
+react = __toESM(react);
 let _visx_vendor_d3_color = require("@visx/vendor/d3-color");
 let date_fns = require("date-fns");
 let _visx_text = require("@visx/text");
@@ -40,6 +40,7 @@ let _visx_scale = require("@visx/scale");
 let _visx_group = require("@visx/group");
 let _visx_legend = require("@visx/legend");
 let _wordpress_ui = require("@wordpress/ui");
+let react_dom = require("react-dom");
 let _visx_gradient = require("@visx/gradient");
 let _visx_curve = require("@visx/curve");
 let _visx_responsive = require("@visx/responsive");
@@ -174,6 +175,39 @@ const parseAsLocalDate = (dateString) => {
 	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((0, date_fns.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.
@@ -252,7 +286,8 @@ const formatPercentage = (value) => {
 */
 const getLongestTickWidth = (ticks, formatTick, labelStyle) => {
 	const formattedTicks = ticks.map((tick) => formatTick(tick, 0, []));
-	return (0, _visx_text.getStringWidth)(formattedTicks.reduce((longest, current) => longest.length >= current.length ? longest : current, formattedTicks[0]), labelStyle);
+	const longestTick = formattedTicks.reduce((longest, current) => longest.length >= current.length ? longest : current, formattedTicks[0]);
+	return (0, _visx_text.getStringWidth)(longestTick, labelStyle);
 };
 //#endregion
 //#region src/utils/get-styles.ts
@@ -385,20 +420,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 = (0, _visx_vendor_d3_color.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.
 *
@@ -626,6 +647,112 @@ 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 warned = /* @__PURE__ */ new Set();
+const warnOnce = (key, message) => {
+	if (warned.has(key) || process.env.NODE_ENV === "production") return;
+	warned.add(key);
+	console.warn(`[Charts] ${message}`);
+};
+const isUsable = (formatting) => {
+	try {
+		Intl.DateTimeFormat(formatting.locale, { timeZone: formatting.timeZone });
+		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.
@@ -762,140 +889,40 @@ const getChartColor = (index, colorCache) => {
 	const fallbackLightness = BASE_LIGHTNESS + index % LIGHTNESS_VARIATION_STEPS * LIGHTNESS_INCREMENT;
 	return (0, _visx_vendor_d3_color.hsl)(Math.round(fallbackHue), fallbackSaturation / 100, fallbackLightness / 100).formatHex();
 };
-//#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]
-];
 /**
-* The variable a `theme` prop override is published as, one layer outside the role itself.
+* The catalog role holding one series-palette slot.
 *
-* `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.
+* @param slot - The one-based slot number.
+* @return The role name.
 */
-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 colour. 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 colours 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.
-*
-* @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: []
-	};
-	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
-	};
-};
+const seriesRole = (slot) => `--a8c-charts-color-series-${slot}`;
+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/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: "transparent",
-	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
-	colors: [
-		"#98C8DF",
-		"#006DAB",
-		"#A6DC80",
-		"#1F9828",
-		"#FF8C8F"
-	],
-	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"
@@ -919,52 +946,9 @@ const defaultTheme = {
 	}
 };
 //#endregion
-//#region src/providers/chart-context/private/with-catalog-pointers.ts
-const CATALOG_RESTORE_FOR_ROLE = {
-	"--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
-	} })
-};
-/**
-* 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 five 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 = (0, react.createContext)(null);
-const GlobalChartsProvider = ({ children, theme }) => {
+const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 	const [charts, setCharts] = (0, react.useState)(() => /* @__PURE__ */ new Map());
 	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => /* @__PURE__ */ new Map());
 	const seededCharts = (0, react.useRef)(/* @__PURE__ */ new Set());
@@ -974,11 +958,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		wrapperRef.current = node;
 		setScopeNode(node);
 	}, []);
-	const { vars: overrideVars, roles: overriddenRoles } = (0, react.useMemo)(() => themeOverrideVars(theme), [theme]);
-	const providerTheme = (0, react.useMemo)(() => {
-		if (!theme) return defaultTheme;
-		return withCatalogPointers(mergeThemes(defaultTheme, theme), overriddenRoles);
-	}, [theme, overriddenRoles]);
+	const providerTheme = (0, react.useMemo)(() => theme ? mergeThemes(defaultTheme, theme) : defaultTheme, [theme]);
 	const [colorCache, setColorCache] = (0, react.useState)(() => ({
 		colors: [],
 		hues: [],
@@ -989,29 +969,26 @@ const GlobalChartsProvider = ({ children, theme }) => {
 	const [isColorPaletteResolved, setIsColorPaletteResolved] = (0, react.useState)(false);
 	(0, react.useLayoutEffect)(() => {
 		setIsColorPaletteResolved(false);
-		const { colors } = providerTheme;
 		const resolvedColors = [];
 		const hues = [];
 		const existingHslColors = [];
 		let minHue = 360;
 		let maxHue = 0;
-		if (Array.isArray(colors)) {
-			for (const color of colors) if (color && typeof color === "string") {
-				const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
-				if (normalizedColor.startsWith("#")) {
-					resolvedColors.push(normalizedColor);
-					const hslColor = (0, _visx_vendor_d3_color.hsl)(normalizedColor);
-					if (!isNaN(hslColor.h)) {
-						const hslTuple = [
-							hslColor.h,
-							hslColor.s * 100,
-							hslColor.l * 100
-						];
-						hues.push(hslTuple[0]);
-						existingHslColors.push(hslTuple);
-						minHue = Math.min(minHue, hslTuple[0]);
-						maxHue = Math.max(maxHue, hslTuple[0]);
-					}
+		for (const color of SERIES_PALETTE_POINTERS) {
+			const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
+			if (normalizedColor.startsWith("#")) {
+				resolvedColors.push(normalizedColor);
+				const hslColor = (0, _visx_vendor_d3_color.hsl)(normalizedColor);
+				if (!isNaN(hslColor.h)) {
+					const hslTuple = [
+						hslColor.h,
+						hslColor.s * 100,
+						hslColor.l * 100
+					];
+					hues.push(hslTuple[0]);
+					existingHslColors.push(hslTuple);
+					minHue = Math.min(minHue, hslTuple[0]);
+					maxHue = Math.max(maxHue, hslTuple[0]);
 				}
 			}
 		}
@@ -1022,14 +999,15 @@ const GlobalChartsProvider = ({ children, theme }) => {
 			minHue,
 			maxHue
 		});
-	}, [providerTheme]);
+	}, []);
 	(0, react.useEffect)(() => {
 		if (colorCache.colors.length > 0) setIsColorPaletteResolved(true);
 	}, [colorCache]);
 	const [groupToColorMap, setGroupToColorMap] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const paletteKey = colorCache.colors.join(",");
 	(0, react.useEffect)(() => {
 		setGroupToColorMap(/* @__PURE__ */ new Map());
-	}, [providerTheme.colors]);
+	}, [paletteKey]);
 	const registerChart = (0, react.useCallback)((id, data) => {
 		setCharts((prev) => new Map(prev).set(id, data));
 	}, []);
@@ -1113,12 +1091,17 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		const set = hiddenSeries.get(chartId);
 		return set ? new Set(set) : /* @__PURE__ */ new Set();
 	}, [hiddenSeries]);
+	const formatting = (0, react.useMemo)(() => sanitizeFormatting({
+		locale,
+		timeZone
+	}), [locale, timeZone]);
 	const value = (0, react.useMemo)(() => ({
 		charts,
 		registerChart,
 		unregisterChart,
 		getChartData,
 		theme: providerTheme,
+		formatting,
 		getElementStyles,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
@@ -1134,6 +1117,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		unregisterChart,
 		getChartData,
 		providerTheme,
+		formatting,
 		getElementStyles,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
@@ -1149,10 +1133,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: setWrapperNode,
 			className: CHART_SCOPE_CLASS,
-			style: {
-				display: "contents",
-				...overrideVars
-			},
+			style: { display: "contents" },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartScopeContext.Provider, {
 				value: scopeNode,
 				children
@@ -1216,6 +1197,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).
@@ -1242,26 +1256,33 @@ const useXYChartTheme = (data) => {
 	return (0, react.useMemo)(() => {
 		const resolve = createCssVariableResolver(scopeElement);
 		const resolveColor = (value) => value ? resolve(value) ?? value : value;
-		const seriesColors = JSON.parse(seriesColorKey);
+		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 (0, _visx_xychart.buildChartTheme)({
 			...theme,
-			colors: [...seriesColors, ...theme.colors ?? []],
-			backgroundColor: resolveColor(theme.backgroundColor),
-			gridStyles: theme.gridStyles && {
+			gridColor: "",
+			gridColorDark: "",
+			colors: paletteColors,
+			backgroundColor: resolveColor(CATALOG_POINTERS.background),
+			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : void 0,
+			gridStyles: {
 				...theme.gridStyles,
-				stroke: resolveColor(theme.gridStyles.stroke)
+				stroke: CATALOG_POINTERS.grid
 			},
-			xAxisLineStyles: theme.xAxisLineStyles && {
+			xAxisLineStyles: {
 				...theme.xAxisLineStyles,
-				stroke: resolveColor(theme.xAxisLineStyles.stroke)
+				stroke: CATALOG_POINTERS.axisX
 			},
-			xTickLineStyles: theme.xTickLineStyles && {
+			xTickLineStyles: {
 				...theme.xTickLineStyles,
-				stroke: resolveColor(theme.xTickLineStyles.stroke)
+				stroke: CATALOG_POINTERS.tickX
 			},
-			svgLabelSmall: theme.svgLabelSmall && {
+			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
+			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
+			svgLabelSmall: {
 				...theme.svgLabelSmall,
-				fill: resolveColor(theme.svgLabelSmall.fill)
+				fill: CATALOG_POINTERS.labelAxis
 			}
 		});
 	}, [
@@ -1359,11 +1380,12 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		if (options.axis?.y?.tickValues?.length) return options.axis.y.tickValues;
 		const minY = Math.min(...allDataPoints.map((d) => d.value));
 		const maxY = Math.max(...allDataPoints.map((d) => d.value));
-		return (0, _visx_scale.getTicks)((0, _visx_scale.createScale)({
+		const yScale = (0, _visx_scale.createScale)({
 			...options.yScale,
 			domain: [minY, maxY],
 			range: [height, 0]
-		}), options.axis?.y?.numTicks);
+		});
+		return (0, _visx_scale.getTicks)(yScale, options.axis?.y?.numTicks);
 	}, [
 		options,
 		data,
@@ -1488,7 +1510,7 @@ const MIN_PIXEL_SIZE = 3;
 /**
 * Pixel size for zero-value bars (1px less than near-zero to be visually distinguishable).
 */
-const ZERO_PIXEL_SIZE = MIN_PIXEL_SIZE - 1;
+const ZERO_PIXEL_SIZE = 2;
 const useZeroValueDisplay = (data, options = { enabled: false }) => {
 	const { enabled, valueAxisLength } = options;
 	return (0, react.useMemo)(() => {
@@ -1666,6 +1688,21 @@ const useGlobalChartsTheme = () => {
 	return (0, react.useContext)(GlobalChartsContext)?.theme ?? defaultTheme;
 };
 //#endregion
+//#region src/providers/chart-context/hooks/use-chart-formatting.ts
+const RUNTIME_FORMATTING = {};
+/**
+* The locale and time zone dates are rendered in, as set on `GlobalChartsProvider`.
+*
+* Falls back to the runtime's own rather than throwing: charts render outside a
+* provider, and a host that sets neither gets exactly the browser-default
+* behavior this package had before the context existed.
+*
+* @return The host's formatting context.
+*/
+const useChartFormatting = () => {
+	return (0, react.useContext)(GlobalChartsContext)?.formatting ?? RUNTIME_FORMATTING;
+};
+//#endregion
 //#region src/components/legend/utils/value-or-identity.ts
 /**
 * Returns an object's value if defined, or the object.
@@ -2103,9 +2140,311 @@ const BaseTooltip = ({ data, top, left, component: Component = DefaultTooltipCon
 	});
 };
 //#endregion
+//#region src/components/tooltip/private/bounded-tooltip.tsx
+const DEFAULT_OFFSET = 10;
+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. Below and to the right of the
+* anchor; flipped to the other side when that side clips less, as visx's
+* `TooltipWithBounds` decides it; then clamped so the box stays inside
+* `bounds` whenever it fits at all.
+*
+* @param params            - Anchor, offsets, the box size and the bounds 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.bounds     - Edges the box must keep inside, in wrapper coordinates.
+* @return The box's top-left corner, rounded to whole pixels.
+*/
+const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, bounds }) => {
+	const rightX = left + offsetLeft;
+	const leftX = left - offsetLeft - box.width;
+	const rightOverflow = rightX + box.width - bounds.right;
+	const leftOverflow = bounds.left - leftX;
+	let x = rightOverflow > 0 && rightOverflow > leftOverflow ? leftX : rightX;
+	const downY = top + offsetTop;
+	const upY = top - offsetTop - box.height;
+	const downOverflow = downY + box.height - bounds.bottom;
+	const upOverflow = bounds.top - upY;
+	let y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
+	x = Math.min(Math.max(x, bounds.left), Math.max(bounds.left, bounds.right - box.width));
+	y = Math.min(Math.max(y, bounds.top), Math.max(bounds.top, bounds.bottom - box.height));
+	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.
+*
+* @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.
+* @return The tooltip box.
+*/
+const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style = _visx_tooltip.defaultStyles, unstyled = false, children, ...rest }) => {
+	const nodeRef = (0, react.useRef)(null);
+	const clipRef = (0, react.useRef)(null);
+	const [position, setPosition] = (0, react.useState)(null);
+	(0, react.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,
+			box: {
+				width: own.width,
+				height: own.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
+	]);
+	const x = position?.x ?? left + offsetLeft;
+	const y = position?.y ?? top + offsetTop;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_tooltip.Tooltip, {
+		ref: nodeRef,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			transform: `translate(${x}px, ${y}px)`,
+			...!unstyled && style
+		},
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/components/tooltip/xy-chart-tooltip.tsx
+const CROSSHAIR_STROKE_WIDTH = 1.5;
+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 } = (0, react.useContext)(_visx_xychart.DataContext) || {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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, zIndex = DEFAULT_TOOLTIP_Z_INDEX, ...rest }) => {
+	const tooltipProps = Object.fromEntries(Object.entries(rest).filter(([key]) => !PORTAL_OPTIONS.has(key)));
+	const { colorScale, theme, innerHeight = 0, innerWidth = 0, margin, xScale, yScale, dataRegistry } = (0, react.useContext)(_visx_xychart.DataContext) || {};
+	const tooltipContent = renderTooltip ? renderTooltip({
+		...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)) {
+		const { left, top } = getDatumLeftTop(nearestDatum.key, nearestDatum.datum);
+		if (snapTooltipToDatumX && 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__ */ (0, react_jsx_runtime.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 ? BoundedTooltip : _visx_tooltip.Tooltip;
+	const boxStyle = {
+		..._visx_tooltip.defaultStyles,
+		zIndex,
+		background: theme?.backgroundColor ?? "white",
+		boxShadow: `0 1px 2px ${theme?.htmlLabel?.color ? `${theme.htmlLabel.color}55` : "#22222255"}`,
+		...theme?.htmlLabel
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+		className: "visx-tooltip-overlay",
+		pointerEvents: "none",
+		children: [
+			showVerticalCrosshair && isValidNumber(tooltipLeft) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				className: "visx-crosshair visx-crosshair-vertical",
+				x1: tooltipLeft,
+				x2: tooltipLeft,
+				y1: marginTop,
+				y2: marginTop + innerHeight,
+				stroke: crosshairStroke,
+				strokeWidth: CROSSHAIR_STROKE_WIDTH,
+				...verticalCrosshairStyle
+			}),
+			showHorizontalCrosshair && isValidNumber(tooltipTop) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				className: "visx-crosshair visx-crosshair-horizontal",
+				x1: marginLeft,
+				x2: marginLeft + innerWidth,
+				y1: tooltipTop,
+				y2: tooltipTop,
+				stroke: crosshairStroke,
+				strokeWidth: CROSSHAIR_STROKE_WIDTH,
+				...horizontalCrosshairStyle
+			}),
+			glyphs
+		]
+	}), container && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipComponent, {
+		left: tooltipLeft,
+		top: tooltipTop,
+		style: boxStyle,
+		applyPositionStyle: true,
+		...tooltipProps,
+		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.
+*
+* @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 = (0, react.useContext)(_visx_xychart.TooltipContext);
+	const [container, setContainer] = (0, react.useState)(null);
+	const anchorRef = (0, react.useCallback)((node) => {
+		setContainer(node?.ownerSVGElement?.parentElement ?? null);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { ref: anchorRef }), tooltipContext?.tooltipOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XyChartTooltipContent, {
+		...props,
+		tooltipContext,
+		container
+	})] });
+};
+//#endregion
 //#region src/components/tooltip/accessible-tooltip.tsx
-const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", ...props }) => {
+const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = (0, react.useContext)(_visx_xychart.TooltipContext);
+	const scopeElement = useChartScopeElement();
+	const crosshairStroke = (0, react.useMemo)(() => {
+		const stroke = resolveCssVariable(CATALOG_POINTERS.grid, scopeElement);
+		return stroke ? { stroke } : void 0;
+	}, [scopeElement]);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const tooltipData = (0, react.useMemo)(() => {
 		if (mode !== "individual") return [];
 		if (series.length === 0) return [];
@@ -2166,11 +2505,11 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 				tabIndex: -1,
 				role: "tooltip",
 				"aria-atomic": "true",
-				className: (0, clsx.default)(CHART_SCOPE_CLASS, keyboardFocusedClassName),
+				className: (0, clsx.default)(standaloneScopeClass, keyboardFocusedClassName),
 				children: tooltipContent
 			}, `chart-tooltip-${selectedIndex}`);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: CHART_SCOPE_CLASS,
+				className: standaloneScopeClass,
 				role: "tooltip",
 				"aria-live": "polite",
 				children: tooltipContent
@@ -2180,14 +2519,23 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip,
 		selectedIndex,
 		tooltipRef,
-		keyboardFocusedClassName
+		keyboardFocusedClassName,
+		standaloneScopeClass
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Tooltip, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XyChartTooltip, {
 		...props,
+		verticalCrosshairStyle: {
+			...crosshairStroke,
+			...verticalCrosshairStyle
+		},
+		horizontalCrosshairStyle: {
+			...crosshairStroke,
+			...horizontalCrosshairStyle
+		},
 		renderTooltip: focusableRenderTooltip
 	});
 };
-const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints }) => {
+const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate }) => {
 	return {
 		tooltipRef: (0, react.useCallback)((element) => {
 			if (element && selectedIndex !== void 0) element.focus();
@@ -2228,13 +2576,14 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 				setSelectedIndex(void 0);
 				setIsNavigating(false);
 				chartRef.current?.focus();
-			}
+			} else if ((event.key === "Enter" || event.key === " ") && selectedIndex !== void 0) onActivate?.(selectedIndex);
 		}, [
 			totalPoints,
 			selectedIndex,
 			setSelectedIndex,
 			setIsNavigating,
-			chartRef
+			chartRef,
+			onActivate
 		])
 	};
 };
@@ -2521,72 +2870,90 @@ const getCurveType = (type, smoothing) => {
 		default: return _visx_curve.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((0, date_fns.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((0, date_fns.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((0, date_fns.differenceInYears)(span.maxX, span.minX)) <= 1 ? formatDateTick : formatYearTick;
+	return Math.abs((0, date_fns.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--) {
@@ -2601,26 +2968,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;
@@ -2632,15 +2998,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;
@@ -2655,7 +3114,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
@@ -2936,6 +3431,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",
@@ -3001,7 +3499,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 			style: {
 				width: `44px`,
 				height: `44px`,
-				transform: `translate(${44 / 2}px, 0)`
+				transform: `translate(22px, 0)`
 			},
 			"aria-label": title || (0, _wordpress_i18n.__)("View details", "jetpack-charts"),
 			children: renderLabel({
@@ -3176,12 +3674,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 } = (0, react.useContext)(_visx_xychart.DataContext) || {};
 	const labelRef = (0, react.useRef)(null);
 	const [height, setHeight] = (0, react.useState)(null);
-	const styles = (0, deepmerge.default)(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
-	const resolveColor = (value) => value ? resolveCssVariable(value, scopeElement) ?? value : value;
+	const styles = (0, react.useMemo)(() => deepmerge.default.all([
+		ANNOTATION_POINTERS,
+		providerTheme.annotationStyles ?? {},
+		datumStyles ?? {}
+	]), [providerTheme.annotationStyles, datumStyles]);
 	(0, react.useEffect)(() => {
 		if (labelRef.current?.getBBox) {
 			const bbox = labelRef.current.getBBox();
@@ -3267,15 +3767,8 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 		dx,
 		dy,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.Connector, {
-				...styles?.connector,
-				stroke: resolveColor(styles?.connector?.stroke)
-			}),
-			subjectType === "circle" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.CircleSubject, {
-				...styles?.circleSubject,
-				fill: resolveColor(styles?.circleSubject?.fill),
-				stroke: resolveColor(styles?.circleSubject?.stroke)
-			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.Connector, { ...styles?.connector }),
+			subjectType === "circle" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.CircleSubject, { ...styles?.circleSubject }),
 			subjectType === "line-vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.LineSubject, {
 				min: yMax,
 				max: yMin,
@@ -3309,8 +3802,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)
@@ -3358,16 +3849,33 @@ 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 = (0, react.useMemo)(() => createDateFormatter(TOOLTIP_FORMAT_BY_RESOLUTION$1[displayResolution], formatting), [displayResolution, formatting]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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 `RenderTooltipParams< DataPointDate >`, plus the chart's optional `bucketInfo`.
 * @return Tooltip JSX, or `null` when no datum is hovered.
 */
 const renderDefaultTooltip = (params) => {
-	const { tooltipData } = params;
+	const { tooltipData, bucketInfo } = params;
 	const nearestDatum = tooltipData?.nearestDatum?.datum;
 	if (!nearestDatum) return null;
 	const tooltipPoints = Object.entries(tooltipData?.datumByKey || {}).map(([key, { datum }]) => ({
@@ -3378,7 +3886,10 @@ const renderDefaultTooltip = (params) => {
 		className: line_chart_module_default["line-chart__tooltip"],
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: line_chart_module_default["line-chart__tooltip-date"],
-			children: nearestDatum.date?.toLocaleDateString()
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipDate, {
+				date: nearestDatum.date,
+				displayResolution: bucketInfo?.displayResolution ?? "day"
+			})
 		}), tooltipPoints.map((point) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 			direction: "row",
 			align: "center",
@@ -3422,14 +3933,14 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, 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 = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
@@ -3484,26 +3995,36 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		}
 		return min < max ? [min, max] : void 0;
 	}, [rescaleYOnVisibilityChange, dataSorted]);
+	const activateSelectedPoint = (0, react.useCallback)((index) => {
+		const series = dataSorted[0];
+		const datum = series?.data[index];
+		if (series && datum) onDatumActivate?.({
+			datum,
+			index,
+			key: series.label
+		});
+	}, [dataSorted, onDatumActivate]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: dataSorted[0]?.data.length || 0
+		totalPoints: dataSorted[0]?.data.length || 0,
+		onActivate: activateSelectedPoint
 	});
 	const chartOptions = (0, react.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,
@@ -3530,7 +4051,14 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		dataSorted,
 		width,
 		zoom.domain,
-		stableYDomain
+		stableYDomain,
+		formatting,
+		isSeriesVisible
+	]);
+	const bucketInfo = (0, react.useMemo)(() => getBucketInfo(dataSorted.filter((series) => isSeriesVisible(series.label)), options?.axis?.x?.tickResolution), [
+		dataSorted,
+		isSeriesVisible,
+		options?.axis?.x?.tickResolution
 	]);
 	const tooltipRenderGlyph = (0, react.useMemo)(() => {
 		return (props) => {
@@ -3554,42 +4082,48 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
 	const error = validateData$4(dataSorted);
 	const isDataValid = !error;
+	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
+		withGlyph: withLegendGlyph,
+		glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
+		collapseGroups: legendCollapseGroups,
+		renderGlyph
+	}), [
+		withLegendGlyph,
+		glyphStyle?.radius,
+		legendCollapseGroups,
+		renderGlyph
+	]), legendShape);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		withGradientFill,
+		smoothing,
+		curveType,
+		withStartGlyphs,
+		withEndGlyphs,
+		withLegendGlyph
+	}), [
+		withGradientFill,
+		smoothing,
+		curveType,
+		withStartGlyphs,
+		withEndGlyphs,
+		withLegendGlyph
+	]);
 	useChartRegistration({
 		chartId,
-		legendItems: useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
-			withGlyph: withLegendGlyph,
-			glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
-			collapseGroups: legendCollapseGroups,
-			renderGlyph
-		}), [
-			withLegendGlyph,
-			glyphStyle?.radius,
-			legendCollapseGroups,
-			renderGlyph
-		]), legendShape),
+		legendItems,
 		chartType: "line",
 		isDataValid,
-		metadata: (0, react.useMemo)(() => ({
-			withGradientFill,
-			smoothing,
-			curveType,
-			withStartGlyphs,
-			withEndGlyphs,
-			withLegendGlyph
-		}), [
-			withGradientFill,
-			smoothing,
-			curveType,
-			withStartGlyphs,
-			withEndGlyphs,
-			withLegendGlyph
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const accessors = {
 		xAccessor: (d) => d?.date,
 		yAccessor: (d) => d?.value
 	};
+	const tooltipRenderer = (0, react.useMemo)(() => (params) => renderTooltip({
+		...params,
+		bucketInfo
+	}), [renderTooltip, bucketInfo]);
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("line-chart", line_chart_module_default["line-chart"]),
 		children: error
@@ -3638,7 +4172,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						ref: chartRef,
-						style: { position: "relative" },
+						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
 							theme,
 							width,
@@ -3730,7 +4264,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,
 									showSeriesGlyphs: true,
-									renderTooltip,
+									renderTooltip: tooltipRenderer,
 									renderGlyph: tooltipRenderGlyph,
 									glyphStyle,
 									showVerticalCrosshair: withTooltipCrosshairs?.showVertical,
@@ -3868,12 +4402,11 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = (0, react.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 = (0, react.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);
@@ -3923,7 +4456,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const fixedYDomain = (0, react.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;
@@ -3957,20 +4490,19 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		dataSorted,
 		stacked,
 		stackOffset,
-		rescaleYOnVisibility
+		rescaleYOnVisibilityChange
 	]);
 	const chartOptions = (0, react.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,
@@ -3998,31 +4530,34 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		width,
 		stacked,
 		fixedYDomain,
-		zoom.domain
+		zoom.domain,
+		formatting
 	]);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
 	const error = validateData$3(dataSorted);
 	const isDataValid = !error;
+	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
+		withGlyph: false,
+		glyphSize: 0,
+		collapseGroups: legend.collapseGroups ?? false
+	}), [legend.collapseGroups]), legendShape);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		stacked,
+		stackOffset,
+		smoothing,
+		curveType
+	}), [
+		stacked,
+		stackOffset,
+		smoothing,
+		curveType
+	]);
 	useChartRegistration({
 		chartId,
-		legendItems: useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({
-			withGlyph: false,
-			glyphSize: 0,
-			collapseGroups: legend.collapseGroups ?? false
-		}), [legend.collapseGroups]), legendShape),
+		legendItems,
 		chartType: "area",
 		isDataValid,
-		metadata: (0, react.useMemo)(() => ({
-			stacked,
-			stackOffset,
-			smoothing,
-			curveType
-		}), [
-			stacked,
-			stackOffset,
-			smoothing,
-			curveType
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const animationEnabled = !!animation && !prefersReducedMotion;
@@ -4032,9 +4567,17 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	};
 	const zeroYAccessor = (0, react.useCallback)(() => 0, []);
 	const visibleLabels = (0, react.useMemo)(() => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
+	const bucketInfo = (0, react.useMemo)(() => getBucketInfo(dataSorted.filter((series) => visibleLabels.has(series.label)), options?.axis?.x?.tickResolution), [
+		dataSorted,
+		visibleLabels,
+		options?.axis?.x?.tickResolution
+	]);
 	const filteredRenderTooltip = (0, react.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;
@@ -4044,13 +4587,18 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		};
 		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__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4125,7 +4673,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						ref: chartRef,
-						style: { position: "relative" },
+						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
 							theme,
 							width,
@@ -4181,7 +4729,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: theme.backgroundColor ?? providerTheme.backgroundColor
+									strokeColor: theme.backgroundColor
 								})] }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -4349,8 +4897,7 @@ const TOOLTIP_FORMAT_BY_RESOLUTION = {
 		year: "numeric",
 		month: "long",
 		day: "numeric",
-		hour: "numeric",
-		hour12: true
+		hour: "numeric"
 	},
 	day: {
 		year: "numeric",
@@ -4369,16 +4916,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) => (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("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) => (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("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));
@@ -4429,6 +4976,7 @@ const getGroupPadding = (scale) => {
 */
 function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
 	const stableOptions = useDeepMemo(options);
+	const formatting = useChartFormatting();
 	const axisConfig = (0, react.useMemo)(() => {
 		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, tickFormat: xTickFormat, ...xAxisOptions } = stableOptions.axis?.x || {};
 		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, tickFormat: yTickFormat, ...yAxisOptions } = stableOptions.axis?.y || {};
@@ -4455,9 +5003,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 = _automattic_number_formatters.formatNumberCompact;
 		const bandDomain = timeTickFormatter ? getBandDomain(data, isSeriesRendered) : null;
 		const valueAccessor = (d) => {
@@ -4493,7 +5041,8 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 	}, [
 		data,
 		tickResolution,
-		isSeriesRendered
+		isSeriesRendered,
+		formatting
 	]);
 	return (0, react.useMemo)(() => {
 		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
@@ -4617,11 +5166,6 @@ function computeComparisonRect(params) {
 	};
 }
 /**
-* Fraction of each per-series step left as a gap between bars within a single tick.
-* Larger = more space between adjacent series; the shadow spans `1 - COMPARISON_INNER_GAP` of the step.
-*/
-const COMPARISON_INNER_GAP = .1;
-/**
 * Upper clamp on the computed group padding, so bars can never collapse to zero width
 * even at very large `widthFactor` values.
 */
@@ -4709,7 +5253,7 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md" }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const horizontal = orientation === "horizontal";
@@ -4736,14 +5280,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
 	const primarySeriesForNav = dataWithVisibleZeros.filter((s) => s.options?.type !== "comparison");
-	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
-		selectedIndex,
-		setSelectedIndex,
-		isNavigating,
-		setIsNavigating,
-		chartRef,
-		totalPoints: Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length
-	});
+	const totalPoints = Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length;
 	const seriesWithVisibility = (0, react.useMemo)(() => dataWithVisibleZeros.map((series, index) => ({
 		series,
 		index,
@@ -4755,6 +5292,27 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const primaryEntries = (0, react.useMemo)(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
 	const primaryKeys = (0, react.useMemo)(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
 	const primarySeries = (0, react.useMemo)(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
+	const activateSelectedBar = (0, react.useCallback)((index) => {
+		const primaryCount = primaryEntries.length;
+		if (!primaryCount) return;
+		const dataPointIndex = Math.floor(index / primaryCount);
+		const series = primaryEntries[index % primaryCount]?.series;
+		const datum = series?.data[dataPointIndex];
+		if (series && datum) onDatumActivate?.({
+			datum,
+			index: dataPointIndex,
+			key: series.label
+		});
+	}, [primaryEntries, onDatumActivate]);
+	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
+		selectedIndex,
+		setSelectedIndex,
+		isNavigating,
+		setIsNavigating,
+		chartRef,
+		totalPoints,
+		onActivate: activateSelectedBar
+	});
 	const comparisonEntries = (0, react.useMemo)(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
@@ -4791,7 +5349,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const groupPadding = (0, react.useMemo)(() => {
 		const basePadding = chartOptions.barGroup.padding;
 		if (!comparisonWidthFactor || comparisonWidthFactor <= 1) return basePadding;
-		const p = 1 - (1 - COMPARISON_INNER_GAP) / comparisonWidthFactor;
+		const p = 1 - .9 / comparisonWidthFactor;
 		return Math.min(Math.max(p, basePadding), MAX_GROUP_PADDING);
 	}, [chartOptions.barGroup.padding, comparisonWidthFactor]);
 	const { xScale, yScale } = (0, react.useMemo)(() => {
@@ -4929,15 +5487,17 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartId
 	]);
 	const error = validateData$2(dataSorted);
+	const isDataValid = !error;
+	const chartMetadata = (0, react.useMemo)(() => ({
+		orientation,
+		withPatterns
+	}), [orientation, withPatterns]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "bar",
-		isDataValid: !error,
-		metadata: (0, react.useMemo)(() => ({
-			orientation,
-			withPatterns
-		}), [orientation, withPatterns])
+		isDataValid,
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4991,6 +5551,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						ref: chartRef,
+						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
 							theme,
 							width,
@@ -5002,6 +5563,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 							xScale,
 							yScale,
 							horizontal,
+							onPointerDown,
+							onPointerUp,
 							pointerEventsDataKey: "nearest",
 							children: [
 								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
@@ -5156,7 +5719,26 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	right: 20,
 	bottom: 0,
 	top: 0
-}, ...rest }) => {
+}, className, ...rest }) => {
+	const { getElementStyles } = useGlobalChartsContext();
+	const tintedData = (0, react.useMemo)(() => {
+		if (data.length > 1) return data;
+		return data.map((series, index) => {
+			if (series.options?.stroke) return series;
+			const { color } = getElementStyles({
+				data: series,
+				index
+			});
+			if (!isValidHexColor(color)) return series;
+			return {
+				...series,
+				options: {
+					...series.options,
+					stroke: lightenHexColor(color, .6)
+				}
+			};
+		});
+	}, [data, getElementStyles]);
 	const chartOptions = (0, react.useMemo)(() => {
 		const isMultiSeries = data.length > 1;
 		const defaultYScale = {
@@ -5189,7 +5771,8 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarChart, {
 		orientation: "horizontal",
 		gridVisibility: "none",
-		data,
+		className: (0, clsx.default)("bar-list-chart", className),
+		data: tintedData,
 		width,
 		height,
 		margin,
@@ -5225,6 +5808,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",
@@ -5305,23 +5891,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 = (0, react.useRef)(null);
 	const selectedBarRef = (0, react.useRef)(null);
 	const [scopeNode, setScopeNode] = (0, react.useState)(null);
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
-	const { containerRef: portalContainerRef, TooltipInPortal, containerBounds } = (0, _visx_tooltip.useTooltipInPortal)({
-		detectBounds: true,
-		scroll: true
-	});
-	const portalContainerRefRef = (0, react.useRef)(portalContainerRef);
-	(0, react.useEffect)(() => {
-		portalContainerRefRef.current = portalContainerRef;
-	}, [portalContainerRef]);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const setChartRef = (0, react.useCallback)((node) => {
-		portalContainerRefRef.current(node);
 		chartRef.current = node;
 		setScopeNode(node);
 	}, []);
@@ -5338,30 +5915,22 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		});
 	}, [showTooltip]);
 	const getMouseTooltipCoords = (0, react.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 = (0, react.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 = (0, react.useCallback)((step, event, interactionType) => {
 		selectedBarRef.current = event.currentTarget;
 		const { isClicked } = getStepState(step.id);
@@ -5422,19 +5991,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: conversion_funnel_chart_module_default["main-rate"],
 		children: formatPercentage(mainRate)
 	}), changeIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: conversion_funnel_chart_module_default["change-indicator"],
-		style: { color: changeColor },
+		className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
@@ -5450,20 +6014,21 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})]
 	});
 	const isDataValid = Boolean(steps && steps.length > 0);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		mainRate,
+		changeIndicator,
+		stepsCount: steps?.length || 0
+	}), [
+		mainRate,
+		changeIndicator,
+		steps?.length
+	]);
 	useChartRegistration({
 		chartId,
 		legendItems: [],
 		chartType: "conversion-funnel",
 		isDataValid,
-		metadata: (0, react.useMemo)(() => ({
-			mainRate,
-			changeIndicator,
-			stepsCount: steps?.length || 0
-		}), [
-			mainRate,
-			changeIndicator,
-			steps?.length
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	if (!isDataValid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
@@ -5471,7 +6036,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		align: "center",
 		justify: "center",
 		ref: setScopeNode,
-		className: (0, clsx.default)(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
+		className: (0, clsx.default)("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
@@ -5482,16 +6047,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})
 	});
 	const maxRate = Math.max(...steps.map((step) => step.rate));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 		direction: "column",
 		gap: "xl",
 		ref: setChartRef,
-		className: (0, clsx.default)(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(ChartScopeContext.Provider, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartScopeContext.Provider, {
 			value: scopeNode,
 			children: [renderMainMetric ? renderMainMetric({
 				mainRate,
@@ -5543,7 +6108,6 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 							role: "button",
 							tabIndex: isBlurred ? -1 : 0,
 							"aria-label": step.label,
-							style: { backgroundColor: barBackgroundColor },
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: (0, clsx.default)(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
 								style: {
@@ -5555,23 +6119,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__ */ (0, react_jsx_runtime.jsx)(TooltipInPortal, {
-			top: tooltipTop,
-			left: tooltipLeft,
-			className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
+				top: tooltipTop,
+				left: tooltipLeft,
+				className: (0, clsx.default)(standaloneScopeClass, conversion_funnel_chart_module_default["tooltip-wrapper"]),
+				children: tooltipContent
+			});
+		})()]
+	});
 };
 /**
 * ConversionFunnelChart component with provider wrapper
@@ -5717,7 +6281,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 = (0, react.useRef)(null);
 	const reportedErrorIdsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
@@ -5751,8 +6315,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 = (0, react.useMemo)(() => {
 		if (data.length === 0) return {
 			data,
@@ -5813,8 +6377,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		className: (0, clsx.default)("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
-			height,
-			backgroundColor
+			height
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_google_charts.Chart, {
 			chartType: "GeoChart",
@@ -5864,6 +6427,7 @@ var heatmap_chart_module_default = {
 	"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",
@@ -6006,7 +6570,7 @@ const HeatmapContext = (0, react.createContext)(null);
 //#region src/charts/heatmap-chart/private/heatmap-legend.tsx
 const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 	const context = (0, react.useContext)(HeatmapContext);
-	const { legend, backgroundColor } = useGlobalChartsTheme();
+	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
 	const { primaryColorHex } = context;
 	const labelStyle = legend.labelStyles;
@@ -6017,6 +6581,7 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Text, {
 				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
 				style: labelStyle,
 				children: lessLabel ?? (0, _wordpress_i18n.__)("Less", "jetpack-charts")
 			}),
@@ -6030,7 +6595,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);
@@ -6038,6 +6602,7 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Text, {
 				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
 				style: labelStyle,
 				children: moreLabel ?? (0, _wordpress_i18n.__)("More", "jetpack-charts")
 			})
@@ -6055,19 +6620,16 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
-	const { containerRef, containerBounds, TooltipInPortal } = (0, _visx_tooltip.useTooltipInPortal)({
-		detectBounds: true,
-		scroll: true
-	});
-	const containerBoundsRef = (0, react.useRef)(containerBounds);
-	containerBoundsRef.current = containerBounds;
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = (0, react.useRef)(null);
+	const getTooltipOrigin = (0, react.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 + (1 - CELL_MIX_FLOOR) * intensity)));
+	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + .85 * intensity)));
 	const extent = (0, react.useMemo)(() => getValueExtent(data), [data]);
 	const heatmapContext = (0, react.useMemo)(() => ({
 		extent,
@@ -6141,19 +6703,21 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	]);
 	const handleCellMouseMove = (0, react.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 = (0, react.useCallback)(() => {
 		if (withTooltips && selectedIndex === void 0) hideTooltip();
@@ -6164,13 +6728,14 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	]);
 	(0, react.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)
 		});
 	}, [
@@ -6179,7 +6744,8 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		rows,
 		chartId,
 		buildTooltipData,
-		showTooltip
+		showTooltip,
+		getTooltipOrigin
 	]);
 	const defaultRenderTooltip = (0, react.useCallback)((info) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: info.value === null ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value) })] }), []);
 	if (!columns || !rows) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, {
@@ -6197,7 +6763,6 @@ 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})`,
 		gridTemplateRows: `auto repeat(${rows}, ${rowTrack})`
 	};
@@ -6295,11 +6860,11 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 							})]
 						}, `row-${rowIndex}`);
 					})]
-				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipInPortal, {
+				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "a8c-charts-scope",
+						className: standaloneScopeClass,
 						role: "tooltip",
 						tabIndex: -1,
 						children: (renderTooltip ?? defaultRenderTooltip)(tooltipData)
@@ -6323,7 +6888,7 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ (0, react_jsx_run
 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 ../../../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>
 *
@@ -6686,7 +7251,7 @@ var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => {
 	tslib_1.__exportStar(require_dist$1(), exports);
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
@@ -6718,10 +7283,11 @@ var StyleSheet = /*#__PURE__*/ function() {
 		var _this = this;
 		this._insertTag = function(tag) {
 			var before;
-			if (_this.tags.length === 0) if (_this.insertionPoint) before = _this.insertionPoint.nextSibling;
-			else if (_this.prepend) before = _this.container.firstChild;
-			else before = _this.before;
-			else before = _this.tags[_this.tags.length - 1].nextSibling;
+			if (_this.tags.length === 0) {
+				if (_this.insertionPoint) before = _this.insertionPoint.nextSibling;
+				else if (_this.prepend) before = _this.container.firstChild;
+				else before = _this.before;
+			} else before = _this.tags[_this.tags.length - 1].nextSibling;
 			_this.container.insertBefore(tag, before);
 			_this.tags.push(tag);
 		};
@@ -7040,9 +7606,7 @@ function delimiter(type) {
 		case 40:
 			if (type === 41) delimiter(type);
 			break;
-		case 92:
-			next();
-			break;
+		case 92: next();
 	}
 	return position;
 }
@@ -8065,14 +8629,12 @@ function handleInterpolation(mergedProps, registered, interpolation) {
 				return serializedStyles.styles + ";";
 			}
 			return createStringFromObject(mergedProps, registered, interpolation);
-		case "function":
-			if (mergedProps !== void 0) {
-				var previousCursor = cursor;
-				var result = interpolation(mergedProps);
-				cursor = previousCursor;
-				return handleInterpolation(mergedProps, registered, result);
-			}
-			break;
+		case "function": if (mergedProps !== void 0) {
+			var previousCursor = cursor;
+			var result = interpolation(mergedProps);
+			cursor = previousCursor;
+			return handleInterpolation(mergedProps, registered, result);
+		}
 	}
 	var asString = interpolation;
 	if (registered == null) return asString;
@@ -8327,7 +8889,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
 var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
 var useCx = () => {
 	const cache = __unsafe_useEmotionCache();
@@ -8434,7 +8996,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
 var white = "#fff";
 var GRAY = {
 	900: "#1e1e1e",
@@ -8513,7 +9075,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/config-values.mjs
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
 	controlPaddingX: 12,
@@ -8528,9 +9090,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",
@@ -8541,7 +9100,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)",
@@ -8618,10 +9176,10 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	};
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.52.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.52.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;
 }
@@ -8635,7 +9193,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
 var ComponentsContext = (0, react.createContext)(
 	/** @type {Record<string, any>} */
@@ -8662,19 +9220,19 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 (0, react.memo)(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/constants.mjs
 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@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 var import_dist = require_dist();
 function getStyledClassName(namespace) {
 	return `components-${(0, import_dist.paramCase)(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -8691,7 +9249,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -8699,7 +9257,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
 	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
@@ -8719,7 +9277,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -8735,7 +9293,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
 var customAttributeRegExp = /^(data|aria|x)-/i;
 var eventHandlerRegExp = /^on[A-Z]/;
 var svgElementNames = new Set(`animate animateMotion animateTransform circle clipPath defs desc ellipse
@@ -8817,14 +9375,15 @@ function filterIntrinsicElementProps(props, element) {
 }
 function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 	const Element = as || "div";
+	const forwardedProps = typeof Element === "string" ? filterIntrinsicElementProps(props, Element) : props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Element, {
 		ref,
-		...typeof Element === "string" ? filterIntrinsicElementProps(props, Element) : props
+		...forwardedProps
 	});
 }
 var PolymorphicElement = (0, react.forwardRef)(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PolymorphicElement, {
 		ref,
@@ -8833,7 +9392,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 }
 var component_default$2 = Object.assign((0, react.forwardRef)(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -8848,7 +9407,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
@@ -8882,7 +9441,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@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -8930,7 +9489,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/grid/hook.mjs
 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]);
@@ -8951,7 +9510,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,
@@ -8972,10 +9531,11 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
+	const gridProps = useGrid(props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
-		...useGrid(props),
+		...gridProps,
 		ref: forwardedRef
 	});
 }
@@ -8994,8 +9554,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.
@@ -9080,14 +9640,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 (0, react.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 || (0, _wordpress_i18n.__)("Current period", "jetpack-charts"),
@@ -9096,7 +9655,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 || (0, _wordpress_i18n.__)("Previous period", "jetpack-charts"),
@@ -9110,7 +9669,6 @@ function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withCom
 		secondaryColor,
 		withComparison,
 		legendLabels,
-		leaderboardChartSettings,
 		getElementStyles,
 		withOverlayLabel
 	]);
@@ -9124,6 +9682,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",
@@ -9142,6 +9703,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
 *
@@ -9244,15 +9813,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 || [],
@@ -9287,15 +9856,17 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		withComparison,
 		withOverlayLabel
 	]);
+	const isDataValid = Boolean(data && data.length > 0);
+	const chartMetadata = (0, react.useMemo)(() => ({
+		withComparison,
+		withOverlayLabel
+	}), [withComparison, withOverlayLabel]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "leaderboard",
-		isDataValid: Boolean(data && data.length > 0),
-		metadata: (0, react.useMemo)(() => ({
-			withComparison,
-			withOverlayLabel
-		}), [withComparison, withOverlayLabel])
+		isDataValid,
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
@@ -9306,7 +9877,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 			legendPosition,
 			legendElement: false,
 			legendChildren,
-			className: (0, clsx.default)(leaderboard_chart_module_default.leaderboardChart, {
+			className: (0, clsx.default)("leaderboard-chart", leaderboard_chart_module_default.leaderboardChart, {
 				[leaderboard_chart_module_default["leaderboardChart--responsive"]]: !propWidth && !propHeight,
 				[leaderboard_chart_module_default["leaderboardChart--loading"]]: loading
 			}, className),
@@ -9341,7 +9912,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 			legendPosition,
 			legendElement,
 			legendChildren,
-			className: (0, clsx.default)(leaderboard_chart_module_default.leaderboardChart, {
+			className: (0, clsx.default)("leaderboard-chart", leaderboard_chart_module_default.leaderboardChart, {
 				[leaderboard_chart_module_default["leaderboardChart--responsive"]]: !propWidth && !propHeight,
 				[leaderboard_chart_module_default["leaderboardChart--loading"]]: loading
 			}, className),
@@ -9363,8 +9934,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.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;
@@ -9373,8 +9944,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Stack, {
 							direction: "column",
 							gap: labelSpacing,
@@ -9395,13 +9965,11 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							children: [
 								isPrimaryVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Text, { children: valueFormatter(entry.currentValue) }),
 								showComparisonValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Text, {
-									className: leaderboard_chart_module_default.deltaValue,
-									style: { color: deltaColor },
+									className: (0, clsx.default)(leaderboard_chart_module_default.deltaValue, deltaTrendClass),
 									children: deltaFormatter(entry.delta)
 								}),
 								showComparisonPlaceholder && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Text, {
-									className: (0, clsx.default)(leaderboard_chart_module_default.deltaValue, leaderboard_chart_module_default.deltaPlaceholder),
-									style: { color: deltaColor },
+									className: (0, clsx.default)(leaderboard_chart_module_default.deltaValue, leaderboard_chart_module_default.deltaPlaceholder, deltaTrendClass),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										"aria-hidden": "true",
 										children: "—"
@@ -9485,7 +10053,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
@@ -9540,18 +10110,16 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId(providedChartId);
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = (0, _visx_tooltip.useTooltip)();
-	const { containerRef, TooltipInPortal, containerBounds } = (0, _visx_tooltip.useTooltipInPortal)({
-		detectBounds: true,
-		scroll: true,
-		debounce: 0
-	});
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = (0, react.useRef)(null);
 	const onMouseLeave = (0, react.useCallback)(() => {
 		if (!withTooltips) return;
 		hideTooltip();
 	}, [withTooltips, hideTooltip]);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const dataWithPercentages = useDataWithPercentages(data);
 	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
-		data: useDataWithPercentages(data),
+		data: dataWithPercentages,
 		chartId,
 		isSeriesVisible
 	});
@@ -9561,20 +10129,21 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 	}), [legendValueDisplay]));
 	const { isValid, message } = validateData$1(data);
 	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(children, "PieChart");
+	const chartMetadata = (0, react.useMemo)(() => ({
+		thickness,
+		gapScale,
+		cornerScale
+	}), [
+		thickness,
+		gapScale,
+		cornerScale
+	]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "pie",
 		isDataValid: isValid,
-		metadata: (0, react.useMemo)(() => ({
-			thickness,
-			gapScale,
-			cornerScale
-		}), [
-			thickness,
-			gapScale,
-			cornerScale
-		])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	if (!isValid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -9625,19 +10194,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 				width: propWidth || void 0,
 				height: propHeight || void 0
 			},
-			trailingContent: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipInPortal, {
-					top: tooltipTop || 0,
-					left: tooltipLeft || 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "a8c-charts-scope",
-						role: "tooltip",
-						children: renderTooltip({ tooltipData })
-					})
-				}),
-				htmlChildren,
-				otherChildren
-			] }),
+			trailingContent: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { 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;
@@ -9650,9 +10207,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__ */ (0, react_jsx_runtime.jsx)(Center, {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Center, {
 					ref: containerRef,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					className: pie_chart_module_default["pie-chart__plot"],
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 						viewBox: `0 0 ${width} ${height}`,
 						preserveAspectRatio: "xMidYMid meet",
 						width,
@@ -9684,11 +10242,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 = {
@@ -9703,30 +10262,28 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 										}
 										const svgLabelSmall = providerTheme.svgLabelSmall;
 										const fontSize = resolveFontSize(svgLabelSmall?.fontSize) ?? 12;
-										const estimatedTextWidth = (0, _visx_text.getStringWidth)(arc.data.label, {
+										const backgroundWidth = (0, _visx_text.getStringWidth)(arc.data.label, {
 											fontSize,
 											fontFamily: svgLabelSmall?.fontFamily,
 											fontWeight: svgLabelSmall?.fontWeight
-										});
-										const labelPadding = 6;
-										const backgroundWidth = estimatedTextWidth + labelPadding * 2;
-										const backgroundHeight = fontSize + labelPadding * 2;
+										}) + 12;
+										const backgroundHeight = fontSize + 12;
 										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 											...groupProps,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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",
@@ -9737,7 +10294,15 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 								}
 							}), !allSegmentsHidden && svgChildren]
 						})]
-					})
+					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
+						top: tooltipTop || 0,
+						left: tooltipLeft || 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: standaloneScopeClass,
+							role: "tooltip",
+							children: renderTooltip({ tooltipData })
+						})
+					})]
 				});
 			}
 		})
@@ -9764,6 +10329,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
@@ -9813,23 +10379,17 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = (0, _visx_tooltip.useTooltip)();
-	const { containerRef, TooltipInPortal, containerBounds } = (0, _visx_tooltip.useTooltipInPortal)({
-		detectBounds: true,
-		scroll: true,
-		debounce: 0
-	});
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = (0, react.useRef)(null);
 	const handleMouseMove = (0, react.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
@@ -9842,8 +10402,9 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 	}, [handleMouseMove]);
 	const { isValid, message } = validateData(data);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const dataWithPercentages = useDataWithPercentages(data);
 	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
-		data: useDataWithPercentages(data),
+		data: dataWithPercentages,
 		chartId,
 		isSeriesVisible
 	});
@@ -9860,15 +10421,16 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		legendValueDisplay
 	}), [legendValueDisplay]));
 	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(children, "PieSemiCircleChart");
+	const chartMetadata = (0, react.useMemo)(() => ({
+		thickness,
+		clockwise
+	}), [thickness, clockwise]);
 	useChartRegistration({
 		chartId,
 		legendItems,
 		chartType: "pie-semi-circle",
 		isDataValid: isValid,
-		metadata: (0, react.useMemo)(() => ({
-			thickness,
-			clockwise
-		}), [thickness, clockwise])
+		metadata: chartMetadata
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const effectiveWidth = propWidth || DEFAULT_WIDTH$1;
@@ -9876,7 +10438,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__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: pie_semi_circle_chart_module_default["pie-semi-circle-chart"],
+			className: (0, clsx.default)("pie-semi-circle-chart", pie_semi_circle_chart_module_default["pie-semi-circle-chart"], className),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				width: errorWidth,
 				height: errorHeight,
@@ -9923,19 +10485,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				width: propWidth || void 0,
 				height: propHeight || void 0
 			},
-			trailingContent: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipInPortal, {
-					top: tooltipTop || 0,
-					left: tooltipLeft || 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "a8c-charts-scope",
-						role: "tooltip",
-						children: renderTooltip({ tooltipData })
-					})
-				}),
-				htmlChildren,
-				otherChildren
-			] }),
+			trailingContent: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [htmlChildren, otherChildren] }),
 			children: ({ contentWidth, contentHeight }) => {
 				const availableWidth = contentWidth > 0 ? contentWidth : effectiveWidth;
 				const availableHeight = contentHeight > 0 ? contentHeight : propHeight || effectiveWidth / 2;
@@ -9943,9 +10493,10 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				const height = width / 2;
 				const radius = height;
 				const innerRadius = radius * (1 - thickness);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Center, {
 					ref: containerRef,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__plot"],
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 						width,
 						height,
 						viewBox: `0 0 ${width} ${height}`,
@@ -10003,7 +10554,15 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 								!allSegmentsHidden && svgChildren
 							] })
 						})]
-					})
+					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
+						top: tooltipTop || 0,
+						left: tooltipLeft || 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: standaloneScopeClass,
+							role: "tooltip",
+							children: renderTooltip({ tooltipData })
+						})
+					})]
 				});
 			}
 		})
@@ -10059,6 +10618,7 @@ const transformToSeriesData = (data, color, strokeWidth) => {
 };
 const SparklineComponent = (0, react.forwardRef)(({ data, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, color, strokeWidth: strokeWidthProp, withGradientFill = true, gradient, className, chartId, margin: marginProp, animation }, ref) => {
 	const theme = useGlobalChartsTheme();
+	const chartsContext = (0, react.useContext)(GlobalChartsContext);
 	const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;
 	const strokeWidth = strokeWidthProp ?? themeStrokeWidth;
 	const seriesData = (0, react.useMemo)(() => {
@@ -10112,7 +10672,7 @@ const SparklineComponent = (0, react.forwardRef)(({ data, width = DEFAULT_WIDTH,
 	if (data.length === 1) {
 		const cx = width / 2;
 		const cy = height / 2;
-		const resolvedColor = color || "#000000";
+		const resolvedColor = color || chartsContext?.getElementStyles({ index: 0 }).color || "#000000";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref,
 			className: (0, clsx.default)("sparkline", sparkline_module_default.sparkline, sparkline_module_default["sparkline--single-point"], className),
@@ -10215,8 +10775,9 @@ const Icon = ({ direction }) => {
 */
 function TrendIndicator({ direction, value, className, style, showIcon = true }) {
 	const ariaLabel = `${DIRECTION_LABELS[direction]}: ${value}`;
+	const standaloneScopeClass = useStandaloneScopeClass();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: (0, clsx.default)(useStandaloneScopeClass(), trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
+		className: (0, clsx.default)(standaloneScopeClass, trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
 		style,
 		"aria-label": ariaLabel,
 		children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { direction }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -10259,6 +10820,7 @@ exports.buildCalendarHeatmapData = buildCalendarHeatmapData;
 exports.defaultTheme = defaultTheme;
 exports.formatMetricValue = formatMetricValue;
 exports.formatPercentage = formatPercentage;
+exports.getBucketInfo = getBucketInfo;
 exports.getColorDistance = getColorDistance;
 exports.hexToRgba = hexToRgba;
 exports.isValidHexColor = isValidHexColor;
@@ -10268,10 +10830,10 @@ exports.mixHexColors = mixHexColors;
 exports.normalizeColorToHex = normalizeColorToHex;
 exports.parseAsLocalDate = parseAsLocalDate;
 exports.parseHslString = parseHslString;
-exports.parseRgbString = parseRgbString;
 exports.prefersLightText = prefersLightText;
 exports.relativeLuminance = relativeLuminance;
 exports.resolveCssVariable = resolveCssVariable;
+exports.useChartFormatting = useChartFormatting;
 exports.useChartLegendItems = useChartLegendItems;
 exports.useChartRegistration = useChartRegistration;
 exports.useChartScopeElement = useChartScopeElement;