@automattic/charts 3.2.0 → 4.0.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { getStringWidth as getStringWidth$1 } from "./visx/text/index.js";
 import { formatNumber, formatNumberCompact } from "@automattic/number-formatters";
-import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, Tooltip, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
+import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
 import { __, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
@@ -10,11 +10,12 @@ import { addDays, differenceInCalendarWeeks, differenceInHours, differenceInYear
 import { Text, getStringWidth } from "@visx/text";
 import deepmerge from "deepmerge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
+import { Tooltip, defaultStyles, useTooltip } from "@visx/tooltip";
 import { createScale, getTicks, scaleBand, scaleOrdinal, scaleTime } from "@visx/scale";
 import { Group } from "@visx/group";
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
 import { IconButton, Stack, Text as Text$1 } from "@wordpress/ui";
+import { createPortal } from "react-dom";
 import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { useParentSize } from "@visx/responsive";
@@ -172,6 +173,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(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.
@@ -384,20 +418,6 @@ const parseHslString = (hslString) => {
 	];
 };
 /**
-* Parse an RGB string like 'rgb(255, 0, 0)' into a hex color.
-*
-* @deprecated    Use normalizeColorToHex() instead, which handles all color formats including rgb() and rgba().
-* @param      rgbString - RGB color string (not RGBA)
-* @return        hex color string or null if invalid
-*/
-const parseRgbString = (rgbString) => {
-	const lower = rgbString.toLowerCase().trim();
-	if (!lower.startsWith("rgb(") || lower.startsWith("rgba(")) return null;
-	const parsed = color(lower);
-	if (!parsed) return null;
-	return parsed.formatHex();
-};
-/**
 * Normalize any CSS color value to a hex color string.
 * Handles hex, HSL, HSLA, RGB, RGBA, named CSS colors, and CSS variables.
 *
@@ -625,6 +645,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.
@@ -772,150 +898,29 @@ const SERIES_SLOT_1_FALLBACK = "#3858e9";
 /** The catalog pointer for every slot, in slot order. */
 const SERIES_PALETTE_POINTERS = Array.from({ length: 5 }, (_, index) => index === 0 ? `var(${seriesRole(1)}, ${SERIES_SLOT_1_FALLBACK})` : `var(${seriesRole(index + 1)})`);
 //#endregion
-//#region src/providers/chart-context/private/theme-override-vars.ts
-const ROLE_FOR_FIELD = [
-	["--a8c-charts-color-background", (theme) => theme.backgroundColor],
-	["--a8c-charts-color-grid", (theme) => theme.gridStyles?.stroke],
-	["--a8c-charts-color-axis", (theme) => theme.xAxisLineStyles?.stroke],
-	["--a8c-charts-color-tick", (theme) => theme.xTickLineStyles?.stroke],
-	["--a8c-charts-color-label-axis", (theme) => theme.svgLabelSmall?.fill],
-	["--a8c-charts-color-label-background", (theme) => theme.labelBackgroundColor],
-	["--a8c-charts-color-label-on-fill", (theme) => theme.labelTextColor],
-	...Array.from({ length: 5 }, (_, index) => [seriesRole(index + 1), (theme) => theme.colors?.[index]])
-];
-let warnedAboutExtraColors = false;
-/**
-* Warns once when a consumer passes more colors than there are slots to publish them into.
-*
-* @param count - How many entries `theme.colors` holds.
-*/
-function warnOnceAboutExtraColors(count) {
-	if (warnedAboutExtraColors || process.env.NODE_ENV === "production") return;
-	warnedAboutExtraColors = true;
-	console.warn(`[Charts] theme.colors holds ${count} colors and the palette has 5 slots, so entries past the 5th are ignored. Set a per-series color with \`options.stroke\` instead.`);
-}
-/**
-* The variable a `theme` prop override is published as, one layer outside the role itself.
-*
-* `chart-scope.scss` declares each of these roles as `var(<role>-theme, <catalog default>)`, so an override that is invalid at computed-value time — a fallback-less `var()` naming a token the host never set — only invalidates this variable, and the role still resolves its mapped `--wpds-*` token. Published as the role directly, such a value took the role and every bare `var(<role>)` read site down with it.
-*
-* @param role - The catalog role being overridden.
-* @return The custom property carrying the consumer's value.
-*/
-const themeLayerVar = (role) => `${role}-theme`;
-ROLE_FOR_FIELD.map(([role]) => role);
-/**
-* Whether a value reads the role it is being published for, which would make the catalog entry depend on itself.
-*
-* The dependency runs `<role>: var(<role>-theme, …)`, so a value naming `<role>` closes a cycle through the catalog entry. CSS marks every custom property in a cycle invalid at computed-value time — the role's own fallback is *not* used, so the token resolves to nothing and every chart loses that color. Verified in Chrome: `--role-theme: var(--role, blue); --role: var(--role-theme, green)` leaves `--role` empty, not `green`.
-*
-* Three things this has to get right, none of which a plain substring test gets:
-*
-* `var()` permits whitespace after the opening paren, so testing for `var(<role>` misses `var( --a8c-charts-color-grid, … )`.
-*
-* Several roles are prefixes of others (`--a8c-charts-color-label` of `--a8c-charts-color-label-secondary`), and every role is a prefix of its own theme layer. A prefix match would read a legitimate cross-role pointer as a self-reference and silently drop the override, so the role must be followed by something that cannot continue an identifier — `-` included. A value naming `<role>-theme` is therefore not treated as a self-reference: that cycle is confined to the theme layer, which leaves the role free to fall back to the catalog default.
-*
-* `resolveCssVariable` also accepts a bare custom-property name with no `var()` wrapper (`--a8c-charts-color-grid`), so that is legal `theme` input too. It forms no cycle — custom properties accept arbitrary token streams — so it survives as a literal string and drops silently at the use site instead of falling back to the catalog default.
-*
-* @param value - The consumer's value for the field.
-* @param role  - The catalog role this value would override.
-* @return True when the value reads `role`, so it must not be published.
-*/
-const readsOwnRole = (value, role) => value.trim() === role || new RegExp(`var\\(\\s*${role.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(value);
-/**
-* Maps a sparse consumer theme onto the theme-layer variables its overridden catalog roles read, so CSS-painted and JS-resolved colors read one source.
-*
-* A value that reads the role it would override is left unpublished — that is the default theme's own pointer surviving `mergeThemes`, and publishing it would invalidate the role. The role is still reported in `roles`: `withCatalogPointers` restores its theme field to the catalog pointer either way, so CSS and visx agree on the catalog default rather than visx painting a literal CSS never sees.
-*
-* `theme.colors` publishes through the same mechanism, one slot per entry, so a CSS declaration of `--a8c-charts-color-series-N` still beats it and a short array leaves the later slots unset rather than blank.
-*
-* @param theme - The consumer's `theme` prop, before merging with the default theme.
-* @return The wrapper's custom properties, and the roles the consumer overrode.
-*/
-const themeOverrideVars = (theme) => {
-	if (!theme) return {
-		vars: {},
-		roles: []
-	};
-	if (Array.isArray(theme.colors) && theme.colors.length > 5) warnOnceAboutExtraColors(theme.colors.length);
-	const vars = {};
-	const roles = [];
-	for (const [role, read] of ROLE_FOR_FIELD) {
-		const value = read(theme);
-		if (typeof value !== "string" || value === "") continue;
-		roles.push(role);
-		if (!readsOwnRole(value, role)) vars[themeLayerVar(role)] = value;
-	}
-	return {
-		vars,
-		roles
-	};
-};
-//#endregion
 //#region src/providers/chart-context/themes.ts
 /**
-* Default theme configuration
+* Default theme configuration: the shape and spacing a consumer can override.
+*
+* For a color, set the matching `--a8c-charts-color-*` role in CSS instead; the `var()`
+* chains that deliver those live in `private/catalog-pointers.ts`.
 */
 const defaultTheme = {
-	backgroundColor: "var(--a8c-charts-color-background, #fff)",
-	labelBackgroundColor: "var(--a8c-charts-color-label-background, transparent)",
-	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
-	colors: [...SERIES_PALETTE_POINTERS],
-	gridStyles: {
-		stroke: "var(--a8c-charts-color-grid, #dbdbdb)",
-		strokeWidth: 1
-	},
+	gridStyles: { strokeWidth: 1 },
 	tickLength: 4,
-	gridColor: "",
-	gridColorDark: "",
-	xTickLineStyles: {
-		stroke: "var(--a8c-charts-color-tick, #dbdbdb)",
-		strokeWidth: 1
-	},
-	xAxisLineStyles: {
-		stroke: "var(--a8c-charts-color-axis, #dbdbdb)",
-		strokeWidth: 1
-	},
+	xTickLineStyles: { strokeWidth: 1 },
+	xAxisLineStyles: { strokeWidth: 1 },
 	legend: {
-		labelStyles: { color: "var(--a8c-charts-color-label, #1e1e1e)" },
+		labelStyles: {},
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
-	svgLabelSmall: {
-		fill: "var(--a8c-charts-color-label-axis, #1e1e1e)",
-		fontFamily: "inherit"
-	},
+	svgLabelSmall: { fontFamily: "inherit" },
 	svgLabelBig: { fontFamily: "inherit" },
-	annotationStyles: {
-		label: {
-			anchorLineStroke: "var(--a8c-charts-color-annotation, #1e1e1e)",
-			backgroundFill: "var(--a8c-charts-color-surface, #fff)"
-		},
-		connector: { stroke: "var(--a8c-charts-color-annotation, #1e1e1e)" },
-		circleSubject: {
-			stroke: "transparent",
-			fill: "var(--a8c-charts-color-annotation, #1e1e1e)",
-			radius: 5
-		}
-	},
-	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)" },
-	leaderboardChart: {
-		rowGap: 12,
-		columnGap: 4,
-		labelSpacing: "xs",
-		deltaColors: [
-			"var(--a8c-charts-color-trend-down, #cc1818)",
-			"var(--a8c-charts-color-trend-neutral, #707070)",
-			"var(--a8c-charts-color-trend-up, #008030)"
-		]
-	},
-	conversionFunnelChart: {
-		backgroundColor: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
-		positiveChangeColor: "var(--a8c-charts-color-trend-up, #008030)",
-		negativeChangeColor: "var(--a8c-charts-color-trend-down, #cc1818)"
-	},
+	annotationStyles: {},
+	leaderboardChart: { labelSpacing: "xs" },
 	lineChart: { lineStyles: { comparison: {
 		strokeDasharray: "4 4",
 		strokeLinecap: "square"
@@ -939,70 +944,9 @@ const defaultTheme = {
 	}
 };
 //#endregion
-//#region src/providers/chart-context/private/with-catalog-pointers.ts
-/**
-* The pointer one palette slot is restored to.
-*
-* Unlike the other roles, this keeps the consumer's own color as the pointer's terminal literal instead of the catalog's. The literal is only ever reached where `getComputedStyle` resolves nothing — SSR and jsdom — and there the palette is the one field where falling back to the catalog default would be visible: every series would paint the same seeded blue. In a browser the slot resolves first, so a CSS declaration of it still outranks the consumer's `theme.colors`.
-*
-* @param index - The slot's zero-based index in `colors`.
-* @param value - The merged theme's entry for it.
-* @return The catalog pointer for that slot.
-*/
-const seriesPointer = (index, value) => {
-	const role = seriesRole(index + 1);
-	if (typeof value === "string" && value.startsWith(`var(${role}`)) return value;
-	if (typeof value !== "string" || value === "") return SERIES_PALETTE_POINTERS[index];
-	return `var(${role}, ${value})`;
-};
-const CATALOG_RESTORE_FOR_ROLE = {
-	...Object.fromEntries(Array.from({ length: 5 }, (_, index) => [seriesRole(index + 1), (theme) => ({ colors: SERIES_PALETTE_POINTERS.map((_pointer, slot) => seriesPointer(slot, theme.colors?.[slot])) })])),
-	"--a8c-charts-color-background": () => ({ backgroundColor: defaultTheme.backgroundColor }),
-	"--a8c-charts-color-grid": (theme) => ({ gridStyles: {
-		...theme.gridStyles,
-		stroke: defaultTheme.gridStyles.stroke
-	} }),
-	"--a8c-charts-color-axis": (theme) => ({ xAxisLineStyles: {
-		...theme.xAxisLineStyles,
-		stroke: defaultTheme.xAxisLineStyles.stroke
-	} }),
-	"--a8c-charts-color-tick": (theme) => ({ xTickLineStyles: {
-		...theme.xTickLineStyles,
-		stroke: defaultTheme.xTickLineStyles.stroke
-	} }),
-	"--a8c-charts-color-label-axis": (theme) => ({ svgLabelSmall: {
-		...theme.svgLabelSmall,
-		fill: defaultTheme.svgLabelSmall.fill
-	} }),
-	"--a8c-charts-color-label-background": () => ({ labelBackgroundColor: defaultTheme.labelBackgroundColor }),
-	"--a8c-charts-color-label-on-fill": () => ({ labelTextColor: defaultTheme.labelTextColor })
-};
-/**
-* Restores the mapped theme fields of `overriddenRoles` to their catalog pointer, so the theme-layer variable `themeOverrideVars` writes on the provider wrapper is the only carrier for an overridden role — CSS and the JS bridge (`useXYChartTheme`) then resolve it through the same cascade instead of visx reading a baked literal that can disagree with a closer CSS override.
-*
-* This covers roles `themeOverrideVars` deliberately left unpublished as well as the ones it published. A value that reads its own role is not publishable, but leaving visx the consumer's literal is what the whole mechanism exists to prevent: `theme={ { gridStyles: { stroke: 'var(--brand, var(--a8c-charts-color-grid, red))' } } }` would have CSS paint the catalog default while visx painted `--brand`.
-*
-* Every field outside the mapped roles is left exactly as `merged` provided it: those aren't published as theme-layer vars, so rewriting them would erase a consumer's override with no replacement carrier.
-*
-* @param merged          - The consumer theme merged onto `defaultTheme` (`mergeThemes` output).
-* @param overriddenRoles - The catalog roles the consumer overrode, from `themeOverrideVars`.
-* @return A new theme object; `merged` is not mutated.
-*/
-const withCatalogPointers = (merged, overriddenRoles) => {
-	let result = merged;
-	for (const role of overriddenRoles) {
-		const restore = CATALOG_RESTORE_FOR_ROLE[role];
-		if (restore) result = {
-			...result,
-			...restore(result)
-		};
-	}
-	return result;
-};
-//#endregion
 //#region src/providers/chart-context/global-charts-provider.tsx
 const GlobalChartsContext = createContext(null);
-const GlobalChartsProvider = ({ children, theme }) => {
+const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 	const [charts, setCharts] = useState(() => /* @__PURE__ */ new Map());
 	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Map());
 	const seededCharts = useRef(/* @__PURE__ */ new Set());
@@ -1012,11 +956,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		wrapperRef.current = node;
 		setScopeNode(node);
 	}, []);
-	const { vars: overrideVars, roles: overriddenRoles } = useMemo(() => themeOverrideVars(theme), [theme]);
-	const providerTheme = useMemo(() => {
-		if (!theme) return defaultTheme;
-		return withCatalogPointers(mergeThemes(defaultTheme, theme), overriddenRoles);
-	}, [theme, overriddenRoles]);
+	const providerTheme = useMemo(() => theme ? mergeThemes(defaultTheme, theme) : defaultTheme, [theme]);
 	const [colorCache, setColorCache] = useState(() => ({
 		colors: [],
 		hues: [],
@@ -1032,7 +972,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		const existingHslColors = [];
 		let minHue = 360;
 		let maxHue = 0;
-		for (const color of providerTheme.colors ?? SERIES_PALETTE_POINTERS) {
+		for (const color of SERIES_PALETTE_POINTERS) {
 			const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
 			if (normalizedColor.startsWith("#")) {
 				resolvedColors.push(normalizedColor);
@@ -1057,7 +997,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 			minHue,
 			maxHue
 		});
-	}, [providerTheme]);
+	}, []);
 	useEffect(() => {
 		if (colorCache.colors.length > 0) setIsColorPaletteResolved(true);
 	}, [colorCache]);
@@ -1149,12 +1089,17 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		const set = hiddenSeries.get(chartId);
 		return set ? new Set(set) : /* @__PURE__ */ new Set();
 	}, [hiddenSeries]);
+	const formatting = useMemo(() => sanitizeFormatting({
+		locale,
+		timeZone
+	}), [locale, timeZone]);
 	const value = useMemo(() => ({
 		charts,
 		registerChart,
 		unregisterChart,
 		getChartData,
 		theme: providerTheme,
+		formatting,
 		getElementStyles,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
@@ -1170,6 +1115,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		unregisterChart,
 		getChartData,
 		providerTheme,
+		formatting,
 		getElementStyles,
 		toggleSeriesVisibility,
 		setSeriesVisibility,
@@ -1185,10 +1131,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		children: /* @__PURE__ */ jsx("div", {
 			ref: setWrapperNode,
 			className: CHART_SCOPE_CLASS,
-			style: {
-				display: "contents",
-				...overrideVars
-			},
+			style: { display: "contents" },
 			children: /* @__PURE__ */ jsx(ChartScopeContext.Provider, {
 				value: scopeNode,
 				children
@@ -1252,6 +1195,39 @@ const useDeepMemo = (value) => {
 	return ref.current;
 };
 //#endregion
+//#region src/providers/chart-context/private/catalog-pointers.ts
+const CATALOG_POINTERS = {
+	background: "var(--a8c-charts-color-background, #fff)",
+	labelAxis: "var(--a8c-charts-color-label-axis, #1e1e1e)",
+	grid: "var(--a8c-charts-color-grid, #dbdbdb)",
+	axisX: "var(--a8c-charts-color-axis-x, #dbdbdb)",
+	tickX: "var(--a8c-charts-color-tick-x, #dbdbdb)",
+	axisY: "var(--a8c-charts-color-axis-y, none)",
+	tickY: "var(--a8c-charts-color-tick-y, none)",
+	annotation: "var(--a8c-charts-color-annotation, #1e1e1e)",
+	surface: "var(--a8c-charts-color-surface, #fff)",
+	surfaceSecondary: "var(--a8c-charts-color-surface-secondary, #f4f4f4)",
+	trendUp: "var(--a8c-charts-color-trend-up, #008030)",
+	trendDown: "var(--a8c-charts-color-trend-down, #cc1818)",
+	series: SERIES_PALETTE_POINTERS
+};
+/**
+* The annotation parts visx paints, in the shape `@visx/annotation` takes. `radius`
+* rides along as the base the theme and the per-datum styles merge onto.
+*/
+const ANNOTATION_POINTERS = {
+	label: {
+		anchorLineStroke: CATALOG_POINTERS.annotation,
+		backgroundFill: CATALOG_POINTERS.surface
+	},
+	connector: { stroke: CATALOG_POINTERS.annotation },
+	circleSubject: {
+		stroke: "transparent",
+		fill: CATALOG_POINTERS.annotation,
+		radius: 5
+	}
+};
+//#endregion
 //#region src/providers/chart-scope/use-chart-scope-element.ts
 /**
 * Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
@@ -1278,13 +1254,34 @@ const useXYChartTheme = (data) => {
 	return useMemo(() => {
 		const resolve = createCssVariableResolver(scopeElement);
 		const resolveColor = (value) => value ? resolve(value) ?? value : value;
-		const paletteColors = [...JSON.parse(seriesColorKey), ...theme.colors ?? []].map((color) => resolveColor(color)).filter((color) => Boolean(color) && !color.includes("var("));
-		const htmlLabelColor = resolveColor(theme.svgLabelSmall?.fill);
+		const paletteColors = [...JSON.parse(seriesColorKey), ...CATALOG_POINTERS.series].map((color) => resolveColor(color)).filter((color) => Boolean(color) && !color.includes("var("));
+		const resolvedLabelColor = resolveColor(CATALOG_POINTERS.labelAxis);
+		const htmlLabelColor = resolvedLabelColor ? normalizeColorToHex(resolvedLabelColor) || resolvedLabelColor : resolvedLabelColor;
 		return buildChartTheme({
 			...theme,
+			gridColor: "",
+			gridColorDark: "",
 			colors: paletteColors,
-			backgroundColor: resolveColor(theme.backgroundColor),
-			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : void 0
+			backgroundColor: resolveColor(CATALOG_POINTERS.background),
+			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : void 0,
+			gridStyles: {
+				...theme.gridStyles,
+				stroke: CATALOG_POINTERS.grid
+			},
+			xAxisLineStyles: {
+				...theme.xAxisLineStyles,
+				stroke: CATALOG_POINTERS.axisX
+			},
+			xTickLineStyles: {
+				...theme.xTickLineStyles,
+				stroke: CATALOG_POINTERS.tickX
+			},
+			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
+			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
+			svgLabelSmall: {
+				...theme.svgLabelSmall,
+				fill: CATALOG_POINTERS.labelAxis
+			}
 		});
 	}, [
 		theme,
@@ -1689,6 +1686,21 @@ const useGlobalChartsTheme = () => {
 	return useContext(GlobalChartsContext)?.theme ?? defaultTheme;
 };
 //#endregion
+//#region src/providers/chart-context/hooks/use-chart-formatting.ts
+const RUNTIME_FORMATTING = {};
+/**
+* The locale and time zone dates are rendered in, as set on `GlobalChartsProvider`.
+*
+* Falls back to the runtime's own rather than throwing: charts render outside a
+* provider, and a host that sets neither gets exactly the browser-default
+* behavior this package had before the context existed.
+*
+* @return The host's formatting context.
+*/
+const useChartFormatting = () => {
+	return useContext(GlobalChartsContext)?.formatting ?? RUNTIME_FORMATTING;
+};
+//#endregion
 //#region src/components/legend/utils/value-or-identity.ts
 /**
 * Returns an object's value if defined, or the object.
@@ -2126,15 +2138,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 = defaultStyles, unstyled = false, children, ...rest }) => {
+	const nodeRef = useRef(null);
+	const clipRef = useRef(null);
+	const [position, setPosition] = useState(null);
+	useLayoutEffect(() => {
+		const node = nodeRef.current;
+		const wrapper = node?.parentElement;
+		if (!node || !wrapper) return;
+		if (clipRef.current?.wrapper !== wrapper) clipRef.current = {
+			wrapper,
+			clip: findClippingAncestor(wrapper)
+		};
+		const own = node.getBoundingClientRect();
+		const wrapperRect = wrapper.getBoundingClientRect();
+		const clipRect = clipRef.current.clip?.getBoundingClientRect() ?? {
+			left: 0,
+			top: 0,
+			right: window.innerWidth,
+			bottom: window.innerHeight
+		};
+		const next = getBoundedPosition({
+			left,
+			top,
+			offsetLeft,
+			offsetTop,
+			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__ */ jsx(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 } = useContext(DataContext) || {};
+	return /* @__PURE__ */ jsx("circle", {
+		cx: x,
+		cy: y,
+		r: size,
+		fill: color,
+		stroke: theme?.backgroundColor,
+		strokeWidth: CROSSHAIR_STROKE_WIDTH,
+		paintOrder: "fill",
+		...glyphStyle
+	});
+};
+const defaultRenderGlyph$1 = ({ key, ...props }) => /* @__PURE__ */ jsx(DefaultGlyph$1, {
+	seriesKey: key,
+	...props
+}, key);
+const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, renderGlyph = defaultRenderGlyph$1, glyphStyle, snapTooltipToDatumX = false, snapTooltipToDatumY = false, showVerticalCrosshair = false, showHorizontalCrosshair = false, showDatumGlyph = false, showSeriesGlyphs = false, verticalCrosshairStyle, horizontalCrosshairStyle, detectBounds = true, 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 } = useContext(DataContext) || {};
+	const tooltipContent = renderTooltip ? renderTooltip({
+		...tooltipContext,
+		colorScale
+	}) : null;
+	if (tooltipContent == null) return null;
+	const scaleX = xScale;
+	const scaleY = yScale;
+	const getDatumLeftTop = (key, datum) => {
+		const entry = dataRegistry?.get(key);
+		return {
+			left: scaleX && entry?.xAccessor ? Number(scaleX(entry.xAccessor(datum))) + scaleBandwidth(xScale) / 2 : void 0,
+			top: scaleY && entry?.yAccessor ? Number(scaleY(entry.yAccessor(datum))) + scaleBandwidth(yScale) / 2 : void 0
+		};
+	};
+	const nearestDatum = tooltipContext.tooltipData?.nearestDatum;
+	let { tooltipLeft, tooltipTop } = tooltipContext;
+	if (nearestDatum && (snapTooltipToDatumX || snapTooltipToDatumY)) {
+		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__ */ 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 : Tooltip;
+	const boxStyle = {
+		...defaultStyles,
+		zIndex,
+		background: theme?.backgroundColor ?? "white",
+		boxShadow: `0 1px 2px ${theme?.htmlLabel?.color ? `${theme.htmlLabel.color}55` : "#22222255"}`,
+		...theme?.htmlLabel
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("g", {
+		className: "visx-tooltip-overlay",
+		pointerEvents: "none",
+		children: [
+			showVerticalCrosshair && isValidNumber(tooltipLeft) && /* @__PURE__ */ jsx("line", {
+				className: "visx-crosshair visx-crosshair-vertical",
+				x1: tooltipLeft,
+				x2: tooltipLeft,
+				y1: marginTop,
+				y2: marginTop + innerHeight,
+				stroke: crosshairStroke,
+				strokeWidth: CROSSHAIR_STROKE_WIDTH,
+				...verticalCrosshairStyle
+			}),
+			showHorizontalCrosshair && isValidNumber(tooltipTop) && /* @__PURE__ */ 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 && createPortal(/* @__PURE__ */ 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 = useContext(TooltipContext);
+	const [container, setContainer] = useState(null);
+	const anchorRef = useCallback((node) => {
+		setContainer(node?.ownerSVGElement?.parentElement ?? null);
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("g", { ref: anchorRef }), tooltipContext?.tooltipOpen && /* @__PURE__ */ jsx(XyChartTooltipContent, {
+		...props,
+		tooltipContext,
+		container
+	})] });
+};
+//#endregion
 //#region src/components/tooltip/accessible-tooltip.tsx
 const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = useContext(TooltipContext);
 	const scopeElement = useChartScopeElement();
-	const gridStroke = useGlobalChartsTheme().gridStyles?.stroke;
 	const crosshairStroke = useMemo(() => {
-		const stroke = gridStroke ? resolveCssVariable(gridStroke, scopeElement) : null;
+		const stroke = resolveCssVariable(CATALOG_POINTERS.grid, scopeElement);
 		return stroke ? { stroke } : void 0;
-	}, [gridStroke, scopeElement]);
+	}, [scopeElement]);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const tooltipData = useMemo(() => {
 		if (mode !== "individual") return [];
 		if (series.length === 0) return [];
@@ -2195,11 +2503,11 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 				tabIndex: -1,
 				role: "tooltip",
 				"aria-atomic": "true",
-				className: clsx(CHART_SCOPE_CLASS, keyboardFocusedClassName),
+				className: clsx(standaloneScopeClass, keyboardFocusedClassName),
 				children: tooltipContent
 			}, `chart-tooltip-${selectedIndex}`);
 			return /* @__PURE__ */ jsx("div", {
-				className: CHART_SCOPE_CLASS,
+				className: standaloneScopeClass,
 				role: "tooltip",
 				"aria-live": "polite",
 				children: tooltipContent
@@ -2209,9 +2517,10 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip,
 		selectedIndex,
 		tooltipRef,
-		keyboardFocusedClassName
+		keyboardFocusedClassName,
+		standaloneScopeClass
 	]);
-	return /* @__PURE__ */ jsx(Tooltip, {
+	return /* @__PURE__ */ jsx(XyChartTooltip, {
 		...props,
 		verticalCrosshairStyle: {
 			...crosshairStroke,
@@ -2559,72 +2868,90 @@ const getCurveType = (type, smoothing) => {
 		default: return curveLinear;
 	}
 };
-const dateTimeFormat = (options) => {
-	let formatter;
-	return (timestamp) => {
-		if (!Number.isFinite(Number(timestamp))) return new Date(timestamp).toLocaleDateString();
-		formatter = formatter ?? new Intl.DateTimeFormat(void 0, options);
-		return formatter.format(timestamp);
-	};
-};
-const formatYearTick = dateTimeFormat({ year: "numeric" });
-const formatDateTick = dateTimeFormat({
+const YEAR_TICK = { year: "numeric" };
+const DATE_TICK = {
 	month: "short",
 	day: "numeric"
-});
-const formatHourTick = dateTimeFormat({
-	hour: "numeric",
-	hour12: true
-});
-const formatMonthTick = dateTimeFormat({ month: "short" });
+};
+const HOUR_TICK = { hour: "numeric" };
+const MONTH_TICK = { month: "short" };
 const boundaryFormat = (isAnchor, atBoundary, between) => {
 	const format = (timestamp) => isAnchor(new Date(timestamp)) ? atBoundary(timestamp) : between(timestamp);
 	format.isAnchor = isAnchor;
 	return format;
 };
-const formatDateOrHourTick = boundaryFormat((date) => date.getHours() === 0 && date.getMinutes() === 0, formatDateTick, formatHourTick);
-const formatMonthOrYearTick = boundaryFormat((date) => date.getMonth() === 0, formatYearTick, formatMonthTick);
+const tickFormats = (formatting) => {
+	const clock = createZonedClock(formatting.timeZone);
+	const year = createDateFormatter(YEAR_TICK, formatting);
+	const date = createDateFormatter(DATE_TICK, formatting);
+	const hour = createDateFormatter(HOUR_TICK, formatting);
+	const month = createDateFormatter(MONTH_TICK, formatting);
+	const datedTick = (timestamp) => date(timestamp);
+	datedTick.anchorsAtLabelChange = true;
+	return {
+		year,
+		date: datedTick,
+		dateOrHour: boundaryFormat((value) => clock(value).hour === 0, date, hour),
+		hour,
+		monthOrYear: boundaryFormat((value) => clock(value).month === 1, year, month)
+	};
+};
 const getSpan = (sortedData) => {
-	const bounds = sortedData.map((datom) => [datom.data.at(0)?.date, datom.data.at(-1)?.date]).filter(([first, last]) => first !== void 0 && last !== void 0);
+	const bounds = sortedData.map((datom) => [datom.data.at(0)?.date, datom.data.at(-1)?.date]).filter(([first, last]) => Number.isFinite(Number(first)) && Number.isFinite(Number(last)));
 	if (!bounds.length) return null;
 	return {
 		minX: Math.min(...bounds.map(([first]) => Number(first))),
 		maxX: Math.max(...bounds.map(([, last]) => Number(last)))
 	};
 };
-const getPointSpacingInHours = (sortedData) => {
-	return sortedData.reduce((spacing, datom) => datom.data.reduce((seriesSpacing, point, index) => {
-		const previous = datom.data[index - 1];
-		if (previous?.date === void 0 || point?.date === void 0) return seriesSpacing;
-		return Math.min(seriesSpacing, Math.abs(differenceInHours(point.date, previous.date)));
-	}, spacing), Number.POSITIVE_INFINITY);
-};
-const SUB_DAILY_SPACING_HOURS = 23;
-const MONTHLY_SPACING_HOURS = 672;
-const getBucketResolution = (sortedData, tickResolution) => {
-	if (tickResolution) return tickResolution === "week" ? "day" : tickResolution;
-	const spacingInHours = getPointSpacingInHours(sortedData);
-	if (spacingInHours < SUB_DAILY_SPACING_HOURS) return "hour";
-	if (!Number.isFinite(spacingInHours) || spacingInHours < MONTHLY_SPACING_HOURS) return "day";
-	return spacingInHours < 12 * MONTHLY_SPACING_HOURS ? "month" : "year";
-};
-const getFormatter = (sortedData, tickResolution) => {
+/**
+* The most informative tick format for a bucket resolution and the span on screen.
+*
+* @param sortedData     - Series as returned by `useChartDataTransform`.
+* @param tickResolution - Caller-declared bucket resolution, when known.
+* @param formatting     - Host locale and time zone.
+* @param domain         - The effective scale domain, or undefined for the data's own extent.
+* @return The formatter the axis labels its ticks with.
+*/
+const getFormatter = (sortedData, tickResolution, formatting = {}, domain) => {
+	const format = tickFormats(formatting);
 	const resolution = getBucketResolution(sortedData, tickResolution);
-	if (resolution === "year") return formatYearTick;
-	if (resolution === "month") return formatMonthOrYearTick;
-	const span = getSpan(sortedData);
-	if (!span) return formatDateTick;
+	if (resolution === "year") return format.year;
+	if (resolution === "month") return format.monthOrYear;
+	const span = domain ? {
+		minX: domain[0].getTime(),
+		maxX: domain[1].getTime()
+	} : getSpan(sortedData);
+	if (!span) return format.date;
 	const diffInHours = Math.abs(differenceInHours(span.maxX, span.minX));
 	if (resolution === "hour") {
-		if (diffInHours <= 24) return formatHourTick;
-		if (diffInHours <= 168) return formatDateOrHourTick;
+		if (diffInHours < 24) return format.hour;
+		if (diffInHours <= 168) return format.dateOrHour;
 	}
-	return Math.abs(differenceInYears(span.maxX, span.minX)) <= 1 ? formatDateTick : formatYearTick;
+	return Math.abs(differenceInYears(span.maxX, span.minX)) <= 1 ? format.date : format.year;
+};
+/**
+* The instants a set of series spans, as a scale domain.
+*
+* @param sortedData - Series as returned by `useChartDataTransform`.
+* @return Earliest and latest dated point, or undefined when nothing is dated.
+*/
+const getSeriesExtent = (sortedData) => {
+	const span = getSpan(sortedData);
+	return span ? [new Date(span.minX), new Date(span.maxX)] : void 0;
+};
+const getAnchorIndices = (domain, tickFormatter, labels) => {
+	if (tickFormatter.anchorsAtLabelChange) return labels.reduce((indices, label, index) => {
+		if (index === 0 || label !== labels[index - 1]) indices.push(index);
+		return indices;
+	}, []);
+	const { isAnchor } = tickFormatter;
+	if (!isAnchor) return [];
+	return domain.reduce((indices, date, index) => {
+		if (isAnchor(date)) indices.push(index);
+		return indices;
+	}, []);
 };
-const getAnchorIndices = (domain, isAnchor) => domain.reduce((indices, date, index) => {
-	if (isAnchor(date)) indices.push(index);
-	return indices;
-}, []);
 const getCandidateSteps = (length, maxTicks, anchorSpacing) => {
 	const steps = /* @__PURE__ */ new Set();
 	for (let count = maxTicks; count > 1; count--) {
@@ -2639,26 +2966,25 @@ const getCandidateSteps = (length, maxTicks, anchorSpacing) => {
 	return steps;
 };
 /**
-* Tick values for a band time axis.
+* Tick values sampled by index, for the bar chart's band axis and for evenly
+* spaced points on a continuous one.
 *
-* visx samples a band domain by index from offset zero, blind to which labels
-* carry a boundary and without collapsing repeats — so the tick that prints the
-* year or the date often isn't sampled at all, and a long series can show the
-* same label twice. Choose the values instead: sweep the evenly spaced
-* candidates, including those that step from anchor to anchor, and keep the one
-* that reaches the most anchors without thinning the axis or putting two
-* identical labels side by side.
+* visx samples by index from offset zero, blind to which labels carry a boundary
+* and without collapsing repeats — so the tick that prints the year or the date
+* often isn't sampled at all, and a long series can show the same label twice.
+* Choose the values instead: sweep the evenly spaced candidates, including those
+* that step from anchor to anchor, and keep the one that reaches the most anchors
+* without thinning the axis or putting two identical labels side by side.
 *
-* @param domain        - Band domain, in axis order.
+* @param domain        - Buckets in axis order.
 * @param tickFormatter - Formatter the axis will render these values with.
 * @param maxTicks      - Most ticks the axis should carry.
 * @return Values to hand the axis as `tickValues`.
 */
 const getBandTickValues = (domain, tickFormatter, maxTicks) => {
 	if (!domain.length) return [];
-	const { isAnchor } = tickFormatter;
-	const anchorIndices = isAnchor ? getAnchorIndices(domain, isAnchor) : [];
 	const domainLabels = domain.map((date) => tickFormatter(date.getTime()));
+	const anchorIndices = getAnchorIndices(domain, tickFormatter, domainLabels);
 	const candidates = [];
 	const consider = (indices) => {
 		if (!indices.length || indices.length > maxTicks) return;
@@ -2670,15 +2996,108 @@ const getBandTickValues = (domain, tickFormatter, maxTicks) => {
 		for (let index = offset; index < domain.length; index += step) indices.push(index);
 		consider(indices);
 	}
-	for (let stride = 1; stride <= anchorIndices.length; stride++) consider(anchorIndices.filter((_, position) => position % stride === 0));
+	const minStride = Math.max(1, Math.ceil(anchorIndices.length / maxTicks));
+	for (let stride = minStride; stride <= anchorIndices.length; stride++) {
+		const stepped = [];
+		for (let position = 0; position < anchorIndices.length; position += stride) stepped.push(anchorIndices[position]);
+		consider(stepped);
+	}
 	if (!candidates.length) return [domain[0]];
 	const densest = candidates.reduce((most, indices) => Math.max(most, indices.length), 0);
-	const anchorsIn = (indices) => isAnchor ? indices.filter((index) => isAnchor(domain[index])).length : 0;
+	const anchorIndexSet = new Set(anchorIndices);
+	const anchorsIn = (indices) => indices.filter((index) => anchorIndexSet.has(index)).length;
 	return candidates.filter((indices) => indices.length >= densest - 1).reduce((chosen, indices) => {
 		const gain = anchorsIn(indices) - anchorsIn(chosen);
 		return gain > 0 || gain === 0 && indices.length > chosen.length ? indices : chosen;
 	}).map((index) => domain[index]);
 };
+/**
+* The most x-axis ticks a chart of this width has room for.
+*
+* @param chartWidth - Chart width in pixels.
+* @return A tick budget of at least one.
+*/
+const getMaxTicksForWidth = (chartWidth) => Math.max(1, Math.floor(chartWidth / X_TICK_WIDTH));
+const MIN_GAP_IN_LABELS = .9;
+const nearestValue = (sorted, target) => {
+	let low = 0;
+	let high = sorted.length - 1;
+	while (low < high) {
+		const middle = Math.floor((low + high) / 2);
+		if (sorted[middle] < target) low = middle + 1;
+		else high = middle;
+	}
+	const above = sorted[low];
+	const below = low > 0 ? sorted[low - 1] : above;
+	return Math.abs(above - target) <= Math.abs(below - target) ? above : below;
+};
+const getPositionTickValues = (points, tickFormatter, maxTicks, axis) => {
+	const times = points.map((point) => point.getTime());
+	const { first, last } = axis;
+	if (maxTicks <= 1 || times.length === 1 || first === last) return [points[0]];
+	const step = (last - first) / (maxTicks - 1);
+	const labels = points.map((point) => tickFormatter(point.getTime()));
+	const minGap = (last - first) / maxTicks * MIN_GAP_IN_LABELS;
+	const anchors = getAnchorIndices(points, tickFormatter, labels).map((index) => times[index]);
+	const chosen = [];
+	let lastLabel = null;
+	for (let index = 0; index < maxTicks; index++) {
+		const target = first + index * step;
+		const anchor = anchors.length ? nearestValue(anchors, target) : null;
+		let tick = anchor !== null && Math.abs(anchor - target) <= step / 2 ? anchor : null;
+		if (tick === null) {
+			const point = nearestValue(times, target);
+			tick = Math.abs(point - target) <= step / 2 ? point : target;
+		}
+		const previous = chosen[chosen.length - 1];
+		if (previous !== void 0 && (tick <= previous || tick - previous < minGap)) continue;
+		const label = tickFormatter(tick);
+		if (label === lastLabel) continue;
+		chosen.push(tick);
+		lastLabel = label;
+	}
+	return chosen.map((timestamp) => new Date(timestamp));
+};
+const isIndexSamplingUnusable = (ticks, points, maxTicks, axis) => {
+	if (ticks.length < 2 || points.length < 2) return false;
+	const span = axis.last - axis.first;
+	if (!span) return false;
+	return ticks.slice(1).reduce((nearest, tick, index) => Math.min(nearest, tick.getTime() - ticks[index].getTime()), Infinity) < span / maxTicks * MIN_GAP_IN_LABELS || ticks.length < Math.min(maxTicks, points.length) / 3;
+};
+/**
+* Tick values for a continuous time axis, chosen from the points it draws.
+*
+* Sampled by index while the points are evenly spaced, which keeps the axis on
+* the calendar boundaries `getBandTickValues` steers towards, and by position
+* once they are not, where an index stride crowds one end of the scale.
+*
+* Values are taken from the data wherever there is one to take, so a local time
+* that does not exist cannot become a tick and DST needs no special case. Only a
+* target stranded in a gap is constructed, as a plain instant.
+*
+* @param sortedData    - Series as returned by `useChartDataTransform`.
+* @param domain        - The effective scale domain, or undefined for all data.
+* @param tickFormatter - The formatter the ticks will be labeled with.
+* @param maxTicks      - The most ticks the axis has room for.
+* @return Tick dates, or null when no series carries a usable date.
+*/
+const getTimeAxisTickValues = (sortedData, domain, tickFormatter, maxTicks) => {
+	const byTimestamp = /* @__PURE__ */ new Map();
+	for (const series of sortedData) for (const point of series.data) {
+		const date = point.date;
+		if (date instanceof Date && Number.isFinite(date.getTime())) byTimestamp.set(date.getTime(), date);
+	}
+	if (!byTimestamp.size) return null;
+	const min = domain?.[0]?.getTime();
+	const max = domain?.[1]?.getTime();
+	const visible = [...byTimestamp.keys()].sort((a, b) => a - b).filter((timestamp) => (min === void 0 || timestamp >= min) && (max === void 0 || timestamp <= max)).map((timestamp) => byTimestamp.get(timestamp));
+	const axis = {
+		first: min ?? visible[0].getTime(),
+		last: max ?? visible[visible.length - 1].getTime()
+	};
+	const ticks = getBandTickValues(visible, tickFormatter, maxTicks);
+	return isIndexSamplingUnusable(ticks, visible, maxTicks, axis) ? getPositionTickValues(visible, tickFormatter, maxTicks, axis) : ticks;
+};
 const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
 	const span = getSpan(data);
 	if (!span) return 1;
@@ -2693,7 +3112,43 @@ const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
 		if (ticks.some((tick, idx) => idx > 0 && tick === ticks[idx - 1])) continue;
 		return ticks.length;
 	}
-	return secondBestGuess;
+	return Math.max(1, secondBestGuess);
+};
+//#endregion
+//#region src/charts/private/time-axis-options.ts
+const toDateDomain = (domain) => domain ? [new Date(domain[0]), new Date(domain[1])] : void 0;
+/**
+* The x-axis options for a continuous time chart, shared by LineChart and AreaChart.
+*
+* Kept in one place so the tick-selection logic isn't duplicated between them.
+*
+* @param args                  - Named arguments.
+* @param args.dataSorted       - Series as returned by `useChartDataTransform`.
+* @param args.width            - Chart width in pixels, which bounds how many ticks fit.
+* @param args.axisOptions      - The caller's `options.axis.x`.
+* @param args.scaleDomain      - The caller's `options.xScale.domain`.
+* @param args.zoomDomain       - The chart's current zoom window, when zoomed.
+* @param args.formatting       - Host locale and time zone.
+* @param args.isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it. Defaults to all of them.
+* @return Options ready to spread into the chart's `axis.x`; `orientation` is always set.
+*/
+const buildTimeAxisOptions = ({ dataSorted, width, axisOptions, scaleDomain, zoomDomain, formatting, isSeriesRendered }) => {
+	const { tickResolution, tickFormat, tickValues: callerTickValues, numTicks: callerNumTicks, orientation: callerOrientation, display: callerDisplay, ...rest } = axisOptions ?? {};
+	const rendered = isSeriesRendered ? dataSorted.filter(isSeriesRendered) : dataSorted;
+	const effectiveDomain = zoomDomain ?? toDateDomain(scaleDomain) ?? getSeriesExtent(rendered);
+	const ownFormatter = getFormatter(rendered, tickResolution, formatting, effectiveDomain);
+	const formatter = tickFormat || ownFormatter;
+	const ownTickValues = tickFormat || callerTickValues ? null : getTimeAxisTickValues(rendered, effectiveDomain, ownFormatter, callerNumTicks ?? getMaxTicksForWidth(width));
+	const tickValues = callerTickValues ?? (ownTickValues?.length ? ownTickValues : void 0);
+	const numTicks = callerNumTicks ?? (tickValues ? void 0 : guessOptimalNumTicks(rendered, width, formatter));
+	return {
+		orientation: callerOrientation ?? "bottom",
+		tickFormat: formatter,
+		display: callerDisplay ?? true,
+		...rest,
+		...tickValues ? { tickValues } : {},
+		...numTicks === void 0 ? {} : { numTicks }
+	};
 };
 //#endregion
 //#region src/charts/private/with-responsive/with-responsive.module.scss
@@ -2974,6 +3429,9 @@ function ZoomResetButton({ onClick }) {
 	});
 }
 //#endregion
+//#region src/charts/private/xy-plot/xy-plot.module.scss
+var xy_plot_module_default = { "xy-plot": "a8ccharts-bIyhgG-xy-plot" };
+//#endregion
 //#region src/charts/line-chart/line-chart.module.scss
 var line_chart_module_default = {
 	"line-chart": "a8ccharts-inuQka-line-chart",
@@ -3214,12 +3672,14 @@ const getVerticalAnchor = (subjectType, isFlippedVertically, y, yMax, height) =>
 };
 const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", styles: datumStyles, testId, renderLabel, renderLabelPopover }) => {
 	const providerTheme = useGlobalChartsTheme();
-	const scopeElement = useChartScopeElement();
 	const { xScale, yScale } = useContext(DataContext) || {};
 	const labelRef = useRef(null);
 	const [height, setHeight] = useState(null);
-	const styles = deepmerge(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
-	const resolveColor = (value) => value ? resolveCssVariable(value, scopeElement) ?? value : value;
+	const styles = useMemo(() => deepmerge.all([
+		ANNOTATION_POINTERS,
+		providerTheme.annotationStyles ?? {},
+		datumStyles ?? {}
+	]), [providerTheme.annotationStyles, datumStyles]);
 	useEffect(() => {
 		if (labelRef.current?.getBBox) {
 			const bbox = labelRef.current.getBBox();
@@ -3305,15 +3765,8 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 		dx,
 		dy,
 		children: [
-			/* @__PURE__ */ jsx(Connector, {
-				...styles?.connector,
-				stroke: resolveColor(styles?.connector?.stroke)
-			}),
-			subjectType === "circle" && /* @__PURE__ */ jsx(CircleSubject, {
-				...styles?.circleSubject,
-				fill: resolveColor(styles?.circleSubject?.fill),
-				stroke: resolveColor(styles?.circleSubject?.stroke)
-			}),
+			/* @__PURE__ */ jsx(Connector, { ...styles?.connector }),
+			subjectType === "circle" && /* @__PURE__ */ jsx(CircleSubject, { ...styles?.circleSubject }),
 			subjectType === "line-vertical" && /* @__PURE__ */ jsx(LineSubject, {
 				min: yMax,
 				max: yMin,
@@ -3347,8 +3800,6 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 					title,
 					subtitle,
 					...styles?.label,
-					anchorLineStroke: resolveColor(styles?.label?.anchorLineStroke),
-					backgroundFill: resolveColor(styles?.label?.backgroundFill),
 					...labelPosition,
 					horizontalAnchor: getHorizontalAnchor(subjectType, isFlippedHorizontally),
 					verticalAnchor: getVerticalAnchor(subjectType, isFlippedVertically, y, yMax, height ?? ANNOTATION_INIT_HEIGHT)
@@ -3396,16 +3847,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 = useMemo(() => createDateFormatter(TOOLTIP_FORMAT_BY_RESOLUTION$1[displayResolution], formatting), [displayResolution, formatting]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: date ? format(date) : null });
+};
 /**
 * Default visx-tooltip render that prints the hovered date as a heading and
 * one row per visible series (label + formatted value), sorted descending by
 * value. Reused by AreaChart, which has the same multi-series shape.
 *
-* @param params - visx `RenderTooltipParams< DataPointDate >`.
+* @param params - visx `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 }]) => ({
@@ -3416,7 +3884,10 @@ const renderDefaultTooltip = (params) => {
 		className: line_chart_module_default["line-chart__tooltip"],
 		children: [/* @__PURE__ */ jsx("div", {
 			className: line_chart_module_default["line-chart__tooltip-date"],
-			children: nearestDatum.date?.toLocaleDateString()
+			children: /* @__PURE__ */ jsx(TooltipDate, {
+				date: nearestDatum.date,
+				displayResolution: bucketInfo?.displayResolution ?? "day"
+			})
 		}), tooltipPoints.map((point) => /* @__PURE__ */ jsxs(Stack, {
 			direction: "row",
 			align: "center",
@@ -3465,9 +3936,9 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
-	const providerTheme = useGlobalChartsTheme();
+	const formatting = useChartFormatting();
 	const theme = useXYChartTheme(data);
-	const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
+	const resolvedBackgroundColor = theme.backgroundColor;
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
 	const isSeriesVisible = useCallback((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
@@ -3541,17 +4012,17 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		onActivate: activateSelectedPoint
 	});
 	const chartOptions = useMemo(() => {
-		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
-				x: {
-					orientation: "bottom",
-					numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
-					tickFormat: formatter,
-					display: true,
-					...xAxisOptions
-				},
+				x: buildTimeAxisOptions({
+					dataSorted,
+					width,
+					axisOptions: options?.axis?.x,
+					scaleDomain: options?.xScale?.domain,
+					zoomDomain: zoom.domain,
+					formatting,
+					isSeriesRendered: (series) => isSeriesVisible(series.label)
+				}),
 				y: {
 					orientation: "left",
 					numTicks: 4,
@@ -3578,7 +4049,14 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		dataSorted,
 		width,
 		zoom.domain,
-		stableYDomain
+		stableYDomain,
+		formatting,
+		isSeriesVisible
+	]);
+	const bucketInfo = useMemo(() => getBucketInfo(dataSorted.filter((series) => isSeriesVisible(series.label)), options?.axis?.x?.tickResolution), [
+		dataSorted,
+		isSeriesVisible,
+		options?.axis?.x?.tickResolution
 	]);
 	const tooltipRenderGlyph = useMemo(() => {
 		return (props) => {
@@ -3640,6 +4118,10 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		xAccessor: (d) => d?.date,
 		yAccessor: (d) => d?.value
 	};
+	const tooltipRenderer = useMemo(() => (params) => renderTooltip({
+		...params,
+		bucketInfo
+	}), [renderTooltip, bucketInfo]);
 	if (error) return /* @__PURE__ */ jsx("div", {
 		className: clsx("line-chart", line_chart_module_default["line-chart"]),
 		children: error
@@ -3688,7 +4170,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
 						ref: chartRef,
-						style: { position: "relative" },
+						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
 							theme,
 							width,
@@ -3780,7 +4262,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,
 									showSeriesGlyphs: true,
-									renderTooltip,
+									renderTooltip: tooltipRenderer,
 									renderGlyph: tooltipRenderGlyph,
 									glyphStyle,
 									showVerticalCrosshair: withTooltipCrosshairs?.showVertical,
@@ -3918,12 +4400,11 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange, rescaleYOnLegendToggle, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
 	const legendPosition = legend.position ?? "bottom";
-	const rescaleYOnVisibility = rescaleYOnVisibilityChange ?? rescaleYOnLegendToggle ?? true;
-	const providerTheme = useGlobalChartsTheme();
+	const formatting = useChartFormatting();
 	const theme = useXYChartTheme(data);
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
@@ -3973,7 +4454,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const fixedYDomain = useMemo(() => {
-		if (rescaleYOnVisibility || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
+		if (rescaleYOnVisibilityChange || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
 		if (stacked) {
 			const numPoints = Math.max(...dataSorted.map((s) => s.data.length));
 			let posMax = 0;
@@ -4007,20 +4488,19 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		dataSorted,
 		stacked,
 		stackOffset,
-		rescaleYOnVisibility
+		rescaleYOnVisibilityChange
 	]);
 	const chartOptions = useMemo(() => {
-		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
-				x: {
-					orientation: "bottom",
-					numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
-					tickFormat: formatter,
-					display: true,
-					...xAxisOptions
-				},
+				x: buildTimeAxisOptions({
+					dataSorted,
+					width,
+					axisOptions: options?.axis?.x,
+					scaleDomain: options?.xScale?.domain,
+					zoomDomain: zoom.domain,
+					formatting
+				}),
 				y: {
 					orientation: "left",
 					numTicks: 4,
@@ -4048,7 +4528,8 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		width,
 		stacked,
 		fixedYDomain,
-		zoom.domain
+		zoom.domain,
+		formatting
 	]);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
 	const error = validateData$3(dataSorted);
@@ -4084,9 +4565,17 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	};
 	const zeroYAccessor = useCallback(() => 0, []);
 	const visibleLabels = useMemo(() => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
+	const bucketInfo = useMemo(() => getBucketInfo(dataSorted.filter((series) => visibleLabels.has(series.label)), options?.axis?.x?.tickResolution), [
+		dataSorted,
+		visibleLabels,
+		options?.axis?.x?.tickResolution
+	]);
 	const filteredRenderTooltip = useCallback((params) => {
 		const datumByKey = params?.tooltipData?.datumByKey;
-		if (!datumByKey) return renderTooltip(params);
+		if (!datumByKey) return renderTooltip({
+			...params,
+			bucketInfo
+		});
 		const filtered = Object.fromEntries(Object.entries(datumByKey).filter(([key]) => visibleLabels.has(key)));
 		if (Object.keys(filtered).length === 0) return null;
 		const nearestDatum = params?.tooltipData?.nearestDatum;
@@ -4096,13 +4585,18 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		};
 		return renderTooltip({
 			...params,
+			bucketInfo,
 			tooltipData: {
 				...params.tooltipData,
 				datumByKey: filtered,
 				nearestDatum: nextNearest
 			}
 		});
-	}, [renderTooltip, visibleLabels]);
+	}, [
+		renderTooltip,
+		visibleLabels,
+		bucketInfo
+	]);
 	const resolvedFillOpacity = fillOpacity ?? (stacked ? .85 : .4);
 	const resolvedWithStroke = withStroke ?? !stacked;
 	if (error) return /* @__PURE__ */ jsx("div", {
@@ -4177,7 +4671,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
 						ref: chartRef,
-						style: { position: "relative" },
+						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
 							theme,
 							width,
@@ -4233,7 +4727,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: theme.backgroundColor ?? providerTheme.backgroundColor
+									strokeColor: theme.backgroundColor
 								})] }),
 								/* @__PURE__ */ jsx(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -4401,8 +4895,7 @@ const TOOLTIP_FORMAT_BY_RESOLUTION = {
 		year: "numeric",
 		month: "long",
 		day: "numeric",
-		hour: "numeric",
-		hour12: true
+		hour: "numeric"
 	},
 	day: {
 		year: "numeric",
@@ -4421,16 +4914,16 @@ const TOOLTIP_FORMAT_BY_RESOLUTION = {
 *
 * @param data           - Date-based series, already parsed and sorted by `useChartDataTransform`.
 * @param tickResolution - Caller-declared bucket resolution, when known.
+* @param formatting     - Host locale and time zone.
 * @return Tooltip label formatter.
 */
-const getTooltipFormatter = (data, tickResolution) => {
-	if (tickResolution === "week") return (timestamp) => sprintf(__("Week of %s", "jetpack-charts"), new Date(timestamp).toLocaleDateString(void 0, {
-		year: "numeric",
-		month: "long",
-		day: "numeric"
-	}));
+const getTooltipFormatter = (data, tickResolution, formatting) => {
+	if (tickResolution === "week") {
+		const formatDay = createDateFormatter(TOOLTIP_FORMAT_BY_RESOLUTION.day, formatting);
+		return (timestamp) => sprintf(__("Week of %s", "jetpack-charts"), formatDay(timestamp));
+	}
 	const format = TOOLTIP_FORMAT_BY_RESOLUTION[getBucketResolution(data, tickResolution)] ?? TOOLTIP_FORMAT_BY_RESOLUTION.day;
-	return (timestamp) => new Date(timestamp).toLocaleString(void 0, format);
+	return createDateFormatter(format, formatting);
 };
 const identity = (label) => label;
 const byBucket = (format) => (bucket) => typeof bucket === "string" ? bucket : format(Number(bucket));
@@ -4481,6 +4974,7 @@ const getGroupPadding = (scale) => {
 */
 function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
 	const stableOptions = useDeepMemo(options);
+	const formatting = useChartFormatting();
 	const axisConfig = useMemo(() => {
 		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, tickFormat: xTickFormat, ...xAxisOptions } = stableOptions.axis?.x || {};
 		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, tickFormat: yTickFormat, ...yAxisOptions } = stableOptions.axis?.y || {};
@@ -4507,9 +5001,9 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 			zero: false
 		};
 		const hasLabels = Boolean(data?.[0]?.data?.[0]?.label);
-		const timeTickFormatter = hasLabels ? null : getFormatter(data, tickResolution);
+		const timeTickFormatter = hasLabels ? null : getFormatter(data, tickResolution, formatting);
 		const labelFormatter = timeTickFormatter ? byBucket(timeTickFormatter) : identity;
-		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution));
+		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution, formatting));
 		const valueFormatter = formatNumberCompact;
 		const bandDomain = timeTickFormatter ? getBandDomain(data, isSeriesRendered) : null;
 		const valueAccessor = (d) => {
@@ -4545,7 +5039,8 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 	}, [
 		data,
 		tickResolution,
-		isSeriesRendered
+		isSeriesRendered,
+		formatting
 	]);
 	return useMemo(() => {
 		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
@@ -5054,6 +5549,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsx("div", {
 						ref: chartRef,
+						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ jsxs(XYChart, {
 							theme,
 							width,
@@ -5221,7 +5717,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	right: 20,
 	bottom: 0,
 	top: 0
-}, ...rest }) => {
+}, className, ...rest }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const tintedData = useMemo(() => {
 		if (data.length > 1) return data;
@@ -5273,6 +5769,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	return /* @__PURE__ */ jsx(BarChart, {
 		orientation: "horizontal",
 		gridVisibility: "none",
+		className: clsx("bar-list-chart", className),
 		data: tintedData,
 		width,
 		height,
@@ -5309,6 +5806,9 @@ const BarListChartResponsive = withResponsive(BarListChart);
 var conversion_funnel_chart_module_default = {
 	"bar-container": "a8ccharts-mGEVca-bar-container",
 	"change-indicator": "a8ccharts-mGEVca-change-indicator",
+	"change-indicator--negative": "a8ccharts-mGEVca-change-indicator--negative",
+	"change-indicator--positive": "a8ccharts-mGEVca-change-indicator--positive",
+	"conversion-funnel-chart": "a8ccharts-mGEVca-conversion-funnel-chart",
 	"conversion-funnel-chart--loading": "a8ccharts-mGEVca-conversion-funnel-chart--loading",
 	"empty-state": "a8ccharts-mGEVca-empty-state",
 	"funnel-bar": "a8ccharts-mGEVca-funnel-bar",
@@ -5389,23 +5889,14 @@ const useFunnelSelection = (hideTooltip) => {
 */
 const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip }) => {
 	const chartId = useChartId(providedChartId);
-	const { conversionFunnelChart: conversionFunnelChartSettings } = useGlobalChartsTheme();
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
 	const selectedBarRef = useRef(null);
 	const [scopeNode, setScopeNode] = useState(null);
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
-	const { containerRef: portalContainerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true
-	});
-	const portalContainerRefRef = useRef(portalContainerRef);
-	useEffect(() => {
-		portalContainerRefRef.current = portalContainerRef;
-	}, [portalContainerRef]);
+	const standaloneScopeClass = useStandaloneScopeClass();
 	const setChartRef = useCallback((node) => {
-		portalContainerRefRef.current(node);
 		chartRef.current = node;
 		setScopeNode(node);
 	}, []);
@@ -5422,30 +5913,22 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		});
 	}, [showTooltip]);
 	const getMouseTooltipCoords = useCallback((event) => {
-		if (containerBounds.width === 0 || containerBounds.height === 0) return null;
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if (!bounds) return null;
 		return {
-			x: event.clientX - containerBounds.left,
-			y: event.clientY - containerBounds.top
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top
 		};
-	}, [
-		containerBounds.width,
-		containerBounds.height,
-		containerBounds.left,
-		containerBounds.top
-	]);
+	}, []);
 	const getKeyboardTooltipCoords = useCallback((event) => {
-		if (containerBounds.width === 0 || containerBounds.height === 0) return null;
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if (!bounds) return null;
 		const rect = event.currentTarget.getBoundingClientRect();
 		return {
-			x: rect.left + rect.width / 2 - containerBounds.left,
-			y: rect.top - containerBounds.top
+			x: rect.left + rect.width / 2 - bounds.left,
+			y: rect.top - bounds.top
 		};
-	}, [
-		containerBounds.width,
-		containerBounds.height,
-		containerBounds.left,
-		containerBounds.top
-	]);
+	}, []);
 	const handleStepInteraction = useCallback((step, event, interactionType) => {
 		selectedBarRef.current = event.currentTarget;
 		const { isClicked } = getStepState(step.id);
@@ -5506,19 +5989,14 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		};
 	}, [clearSelectionAndRef]);
 	const resolvedHeight = height ?? style?.height ?? "100%";
-	const { primaryColor, backgroundColor, positiveChangeColor, negativeChangeColor } = conversionFunnelChartSettings;
-	const { color: barColor } = getElementStyles ? getElementStyles({
-		index: 0,
-		overrideColor: primaryColor
-	}) : { color: primaryColor || "#000000" };
-	const changeColor = changeIndicator?.startsWith("+") ? positiveChangeColor : negativeChangeColor;
-	const barBackgroundColor = backgroundColor || hexToRgba(barColor, .08) || "rgba(0, 0, 0, 0.08)";
+	const { color: barColor } = getElementStyles ? getElementStyles({ index: 0 }) : { color: "#000000" };
+	const isPositiveChange = changeIndicator?.startsWith("+");
+	const changeColor = isPositiveChange ? CATALOG_POINTERS.trendUp : CATALOG_POINTERS.trendDown;
 	const renderDefaultMainMetric = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: conversion_funnel_chart_module_default["main-rate"],
 		children: formatPercentage(mainRate)
 	}), changeIndicator && /* @__PURE__ */ jsx("span", {
-		className: conversion_funnel_chart_module_default["change-indicator"],
-		style: { color: changeColor },
+		className: clsx(conversion_funnel_chart_module_default["change-indicator"], conversion_funnel_chart_module_default[isPositiveChange ? "change-indicator--positive" : "change-indicator--negative"]),
 		children: changeIndicator
 	})] });
 	const renderDefaultTooltip = (step) => /* @__PURE__ */ jsxs(Stack, {
@@ -5556,7 +6034,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		align: "center",
 		justify: "center",
 		ref: setScopeNode,
-		className: clsx(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
+		className: clsx("conversion-funnel-chart", conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
 			height: resolvedHeight
@@ -5567,16 +6045,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})
 	});
 	const maxRate = Math.max(...steps.map((step) => step.rate));
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
+	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "column",
 		gap: "xl",
 		ref: setChartRef,
-		className: clsx(conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
+		className: clsx("conversion-funnel-chart", conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
 			...style,
 			height: resolvedHeight
 		},
-		children: /* @__PURE__ */ jsxs(ChartScopeContext.Provider, {
+		children: [/* @__PURE__ */ jsxs(ChartScopeContext.Provider, {
 			value: scopeNode,
 			children: [renderMainMetric ? renderMainMetric({
 				mainRate,
@@ -5628,7 +6106,6 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 							role: "button",
 							tabIndex: isBlurred ? -1 : 0,
 							"aria-label": step.label,
-							style: { backgroundColor: barBackgroundColor },
 							children: /* @__PURE__ */ jsx("div", {
 								className: clsx(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
 								style: {
@@ -5640,23 +6117,23 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 					}, step.id);
 				})
 			})]
-		})
-	}), tooltipOpen && tooltipData && (() => {
-		const tooltipContent = renderTooltip ? renderTooltip({
-			step: tooltipData,
-			index: steps.findIndex((s) => s.id === tooltipData.id),
-			top: tooltipTop,
-			left: tooltipLeft,
-			className: conversion_funnel_chart_module_default["tooltip-wrapper"]
-		}) : renderDefaultTooltip(tooltipData);
-		if (!tooltipContent) return null;
-		return /* @__PURE__ */ jsx(TooltipInPortal, {
-			top: tooltipTop,
-			left: tooltipLeft,
-			className: clsx("a8c-charts-scope", conversion_funnel_chart_module_default["tooltip-wrapper"]),
-			children: tooltipContent
-		}, Math.random());
-	})()] });
+		}), tooltipOpen && tooltipData && (() => {
+			const tooltipContent = renderTooltip ? renderTooltip({
+				step: tooltipData,
+				index: steps.findIndex((s) => s.id === tooltipData.id),
+				top: tooltipTop,
+				left: tooltipLeft,
+				className: conversion_funnel_chart_module_default["tooltip-wrapper"]
+			}) : renderDefaultTooltip(tooltipData);
+			if (!tooltipContent) return null;
+			return /* @__PURE__ */ jsx(BoundedTooltip, {
+				top: tooltipTop,
+				left: tooltipLeft,
+				className: clsx(standaloneScopeClass, conversion_funnel_chart_module_default["tooltip-wrapper"]),
+				children: tooltipContent
+			});
+		})()]
+	});
 };
 /**
 * ConversionFunnelChart component with provider wrapper
@@ -5802,7 +6279,7 @@ function normalizeGeoChartError(eventArgs) {
 * @return A React component displaying an interactive map with data visualization
 */
 const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", onError, renderPlaceholder }) => {
-	const { getElementStyles, theme: { geoChart: { featureFillColor }, backgroundColor } } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef(null);
 	const reportedErrorIdsRef = useRef(/* @__PURE__ */ new Set());
@@ -5836,8 +6313,8 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 	});
 	const fullColorHex = getElementStyles({ index: 0 }).color;
 	const lightColorHex = lightenHexColor(fullColorHex, .8);
-	const backgroundColorHex = normalizeColorToHex(backgroundColor, scopeElement, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
-	const defaultFillColorHex = normalizeColorToHex(featureFillColor, scopeElement, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
+	const backgroundColorHex = normalizeColorToHex(CATALOG_POINTERS.background, scopeElement, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
+	const defaultFillColorHex = normalizeColorToHex(CATALOG_POINTERS.surfaceSecondary, scopeElement, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
 	const sanitizedData = useMemo(() => {
 		if (data.length === 0) return {
 			data,
@@ -5898,8 +6375,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
-			height,
-			backgroundColor
+			height
 		},
 		children: /* @__PURE__ */ jsx(Chart, {
 			chartType: "GeoChart",
@@ -5949,6 +6425,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",
@@ -6091,7 +6568,7 @@ const HeatmapContext = createContext(null);
 //#region src/charts/heatmap-chart/private/heatmap-legend.tsx
 const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 	const context = useContext(HeatmapContext);
-	const { legend, backgroundColor } = useGlobalChartsTheme();
+	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
 	const { primaryColorHex } = context;
 	const labelStyle = legend.labelStyles;
@@ -6102,6 +6579,7 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 		children: [
 			/* @__PURE__ */ jsx(Text$1, {
 				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
 				style: labelStyle,
 				children: lessLabel ?? __("Less", "jetpack-charts")
 			}),
@@ -6115,7 +6593,6 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
 							"--a8c-charts-color-heatmap-primary": primaryColorHex,
-							"--a8c-charts-color-heatmap-background": backgroundColor,
 							"--a8c-charts-heatmap-cell-intensity": intensity
 						}
 					}, index);
@@ -6123,6 +6600,7 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 			}),
 			/* @__PURE__ */ jsx(Text$1, {
 				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
 				style: labelStyle,
 				children: moreLabel ?? __("More", "jetpack-charts")
 			})
@@ -6140,17 +6618,14 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
 	const [selectedIndex, setSelectedIndex] = useState();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = useTooltip();
-	const { containerRef, containerBounds, TooltipInPortal } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true
-	});
-	const containerBoundsRef = useRef(containerBounds);
-	containerBoundsRef.current = containerBounds;
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = useRef(null);
+	const getTooltipOrigin = useCallback(() => containerRef.current?.closest(`[data-chart-id="heatmap-chart-${chartId}"]`)?.getBoundingClientRect() ?? null, [chartId]);
 	const { color: primaryColorHex } = getElementStyles({
 		index: 0,
-		overrideColor: primaryColor || heatmapChartSettings.primaryColor
+		overrideColor: primaryColor
 	});
-	const chartBackgroundHex = normalizeColorToHex(theme.backgroundColor, scopeElement, resolveCssVariable);
+	const chartBackgroundHex = normalizeColorToHex(CATALOG_POINTERS.background, scopeElement, resolveCssVariable);
 	const primaryHex = normalizeColorToHex(primaryColorHex);
 	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && isValidHexColor(chartBackgroundHex) && prefersLightText(mixHexColors(primaryHex, chartBackgroundHex, 1 - (CELL_MIX_FLOOR + .85 * intensity)));
 	const extent = useMemo(() => getValueExtent(data), [data]);
@@ -6226,19 +6701,21 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	]);
 	const handleCellMouseMove = useCallback((event) => {
 		if (!withTooltips) return;
+		const origin = getTooltipOrigin();
+		if (!origin) return;
 		const target = event.currentTarget;
 		const columnIndex = Number(target.dataset.column);
 		const rowIndex = Number(target.dataset.row);
-		const bounds = containerBoundsRef.current;
 		showTooltip({
-			tooltipLeft: event.clientX - bounds.left,
-			tooltipTop: event.clientY - bounds.top,
+			tooltipLeft: event.clientX - origin.left,
+			tooltipTop: event.clientY - origin.top,
 			tooltipData: buildTooltipData(columnIndex, rowIndex)
 		});
 	}, [
 		withTooltips,
 		showTooltip,
-		buildTooltipData
+		buildTooltipData,
+		getTooltipOrigin
 	]);
 	const handleCellMouseLeave = useCallback(() => {
 		if (withTooltips && selectedIndex === void 0) hideTooltip();
@@ -6249,13 +6726,14 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	]);
 	useEffect(() => {
 		if (!withTooltips || selectedIndex === void 0) return;
+		const origin = getTooltipOrigin();
+		if (!origin) return;
 		const col = Math.floor(selectedIndex / rows);
 		const row = selectedIndex % rows;
 		const rect = (typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null)?.getBoundingClientRect();
-		const bounds = containerBoundsRef.current;
 		showTooltip({
-			tooltipLeft: rect ? rect.left + rect.width / 2 - bounds.left : 0,
-			tooltipTop: rect ? rect.top + rect.height / 2 - bounds.top : 0,
+			tooltipLeft: rect ? rect.left + rect.width / 2 - origin.left : 0,
+			tooltipTop: rect ? rect.top + rect.height / 2 - origin.top : 0,
 			tooltipData: buildTooltipData(col, row)
 		});
 	}, [
@@ -6264,7 +6742,8 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		rows,
 		chartId,
 		buildTooltipData,
-		showTooltip
+		showTooltip,
+		getTooltipOrigin
 	]);
 	const defaultRenderTooltip = useCallback((info) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ jsx("div", { children: info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value) })] }), []);
 	if (!columns || !rows) return /* @__PURE__ */ jsx(Center, {
@@ -6282,7 +6761,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})`
 	};
@@ -6380,11 +6858,11 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 							})]
 						}, `row-${rowIndex}`);
 					})]
-				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
+				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "a8c-charts-scope",
+						className: standaloneScopeClass,
 						role: "tooltip",
 						tabIndex: -1,
 						children: (renderTooltip ?? defaultRenderTooltip)(tooltipData)
@@ -6408,7 +6886,7 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ jsx(HeatmapChartW
 HeatmapChartResponsiveInner.displayName = "HeatmapChart";
 const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
 //#endregion
-//#region ../../../node_modules/.pnpm/is-plain-object@5.0.0/node_modules/is-plain-object/dist/is-plain-object.mjs
+//#region ../../../node_modules/.pnpm/is-plain-object@5.1.0/node_modules/is-plain-object/dist/is-plain-object.mjs
 /*!
 * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
 *
@@ -6475,7 +6953,7 @@ function paramCase(input, options) {
 	return dotCase(input, __assign({ delimiter: "-" }, options));
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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 = useRef$1(false);
 	useEffect$1(() => {
@@ -8045,7 +8523,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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();
@@ -8152,7 +8630,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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",
@@ -8231,7 +8709,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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,
@@ -8246,9 +8724,6 @@ var CONTROL_PROPS = {
 };
 var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	colorDivider: "rgba(0, 0, 0, 0.1)",
-	colorScrollbarThumb: "rgba(0, 0, 0, 0.2)",
-	colorScrollbarThumbHover: "rgba(0, 0, 0, 0.5)",
-	colorScrollbarTrack: "rgba(0, 0, 0, 0.04)",
 	elevationIntensity: 1,
 	radiusXSmall: "1px",
 	radiusSmall: "2px",
@@ -8259,7 +8734,6 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	borderWidth: "1px",
 	borderWidthFocus: "1.5px",
 	borderWidthTab: "4px",
-	spinnerSize: 16,
 	fontSize: "13px",
 	fontSizeH1: "calc(2.44 * 13px)",
 	fontSizeH2: "calc(1.95 * 13px)",
@@ -8336,10 +8810,10 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	};
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.53.0/node_modules/@wordpress/warning/build-module/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.53.0/node_modules/@wordpress/warning/build-module/index.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -8353,7 +8827,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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 = createContext$1(
 	/** @type {Record<string, any>} */
@@ -8380,18 +8854,18 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 memo(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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
 function getStyledClassName(namespace) {
 	return `components-${paramCase(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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 });
 }
@@ -8408,7 +8882,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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 };
 }
@@ -8416,7 +8890,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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");
@@ -8436,7 +8910,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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)",
@@ -8452,7 +8926,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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
@@ -8542,7 +9016,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/view/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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__ */ jsx(PolymorphicElement, {
 		ref,
@@ -8551,7 +9025,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 }
 var component_default$2 = Object.assign(forwardRef$1(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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__ */ jsx(component_default$2, {
@@ -8566,7 +9040,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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",
@@ -8600,7 +9074,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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",
@@ -8648,7 +9122,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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]);
@@ -8669,7 +9143,7 @@ function useGrid(props) {
 			justifyContent: justify,
 			verticalAlign: isInline ? "middle" : void 0,
 			...alignmentProps
-		}, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdURzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgV29yZFByZXNzQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0gfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IGdldEFsaWdubWVudFByb3BzIH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHR5cGUgeyBHcmlkUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlR3JpZChcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBHcmlkUHJvcHMsICdkaXYnID5cbikge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y29sdW1ucyA9IDIsXG5cdFx0Z2FwID0gMyxcblx0XHRpc0lubGluZSA9IGZhbHNlLFxuXHRcdGp1c3RpZnksXG5cdFx0cm93R2FwLFxuXHRcdHJvd3MsXG5cdFx0dGVtcGxhdGVDb2x1bW5zLFxuXHRcdHRlbXBsYXRlUm93cyxcblx0XHQuLi5vdGhlclByb3BzXG5cdH0gPSB1c2VDb250ZXh0U3lzdGVtKCBwcm9wcywgJ0dyaWQnICk7XG5cblx0Y29uc3QgY29sdW1uc0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCBjb2x1bW5zICkgPyBjb2x1bW5zIDogWyBjb2x1bW5zIF07XG5cdGNvbnN0IGNvbHVtbiA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggY29sdW1uc0FzQXJyYXkgKTtcblx0Y29uc3Qgcm93c0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCByb3dzICkgPyByb3dzIDogWyByb3dzIF07XG5cdGNvbnN0IHJvdyA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggcm93c0FzQXJyYXkgKTtcblxuXHRjb25zdCBncmlkVGVtcGxhdGVDb2x1bW5zID1cblx0XHR0ZW1wbGF0ZUNvbHVtbnMgfHwgKCAhISBjb2x1bW5zICYmIGByZXBlYXQoICR7IGNvbHVtbiB9LCAxZnIgKWAgKTtcblx0Y29uc3QgZ3JpZFRlbXBsYXRlUm93cyA9XG5cdFx0dGVtcGxhdGVSb3dzIHx8ICggISEgcm93cyAmJiBgcmVwZWF0KCAkeyByb3cgfSwgMWZyIClgICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYWxpZ25tZW50UHJvcHMgPSBnZXRBbGlnbm1lbnRQcm9wcyggYWxpZ25tZW50ICk7XG5cblx0XHRjb25zdCBncmlkQ2xhc3NlcyA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24sXG5cdFx0XHRkaXNwbGF5OiBpc0lubGluZSA/ICdpbmxpbmUtZ3JpZCcgOiAnZ3JpZCcsXG5cdFx0XHRnYXA6IGBjYWxjKCAkeyBDT05GSUcuZ3JpZEJhc2UgfSAqICR7IGdhcCB9IClgLFxuXHRcdFx0Z3JpZFRlbXBsYXRlQ29sdW1uczogZ3JpZFRlbXBsYXRlQ29sdW1ucyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkVGVtcGxhdGVSb3dzOiBncmlkVGVtcGxhdGVSb3dzIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRSb3dHYXA6IHJvd0dhcCxcblx0XHRcdGdyaWRDb2x1bW5HYXA6IGNvbHVtbkdhcCxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0dmVydGljYWxBbGlnbjogaXNJbmxpbmUgPyAnbWlkZGxlJyA6IHVuZGVmaW5lZCxcblx0XHRcdC4uLmFsaWdubWVudFByb3BzLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeCggZ3JpZENsYXNzZXMsIGNsYXNzTmFtZSApO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y3gsXG5cdFx0Z2FwLFxuXHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnMsXG5cdFx0Z3JpZFRlbXBsYXRlUm93cyxcblx0XHRpc0lubGluZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcyB9O1xufVxuIl19 */");
+		}, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDb250ZXh0U3lzdGVtIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyBnZXRBbGlnbm1lbnRQcm9wcyB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlUmVzcG9uc2l2ZVZhbHVlIH0gZnJvbSAnLi4vdXRpbHMvdXNlLXJlc3BvbnNpdmUtdmFsdWUnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB0eXBlIHsgR3JpZFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUdyaWQoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgR3JpZFByb3BzLCAnZGl2JyA+XG4pIHtcblx0Y29uc3Qge1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGNvbHVtbnMgPSAyLFxuXHRcdGdhcCA9IDMsXG5cdFx0aXNJbmxpbmUgPSBmYWxzZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XHRyb3dzLFxuXHRcdHRlbXBsYXRlQ29sdW1ucyxcblx0XHR0ZW1wbGF0ZVJvd3MsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdHcmlkJyApO1xuXG5cdGNvbnN0IGNvbHVtbnNBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggY29sdW1ucyApID8gY29sdW1ucyA6IFsgY29sdW1ucyBdO1xuXHRjb25zdCBjb2x1bW4gPSB1c2VSZXNwb25zaXZlVmFsdWUoIGNvbHVtbnNBc0FycmF5ICk7XG5cdGNvbnN0IHJvd3NBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggcm93cyApID8gcm93cyA6IFsgcm93cyBdO1xuXHRjb25zdCByb3cgPSB1c2VSZXNwb25zaXZlVmFsdWUoIHJvd3NBc0FycmF5ICk7XG5cblx0Y29uc3QgZ3JpZFRlbXBsYXRlQ29sdW1ucyA9XG5cdFx0dGVtcGxhdGVDb2x1bW5zIHx8ICggISEgY29sdW1ucyAmJiBgcmVwZWF0KCAkeyBjb2x1bW4gfSwgMWZyIClgICk7XG5cdGNvbnN0IGdyaWRUZW1wbGF0ZVJvd3MgPVxuXHRcdHRlbXBsYXRlUm93cyB8fCAoICEhIHJvd3MgJiYgYHJlcGVhdCggJHsgcm93IH0sIDFmciApYCApO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblxuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyggKCkgPT4ge1xuXHRcdGNvbnN0IGFsaWdubWVudFByb3BzID0gZ2V0QWxpZ25tZW50UHJvcHMoIGFsaWdubWVudCApO1xuXG5cdFx0Y29uc3QgZ3JpZENsYXNzZXMgPSBjc3MoIHtcblx0XHRcdGFsaWduSXRlbXM6IGFsaWduLFxuXHRcdFx0ZGlzcGxheTogaXNJbmxpbmUgPyAnaW5saW5lLWdyaWQnIDogJ2dyaWQnLFxuXHRcdFx0Z2FwOiBgY2FsYyggJHsgQ09ORklHLmdyaWRCYXNlIH0gKiAkeyBnYXAgfSApYCxcblx0XHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnM6IGdyaWRUZW1wbGF0ZUNvbHVtbnMgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFRlbXBsYXRlUm93czogZ3JpZFRlbXBsYXRlUm93cyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkUm93R2FwOiByb3dHYXAsXG5cdFx0XHRncmlkQ29sdW1uR2FwOiBjb2x1bW5HYXAsXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdHZlcnRpY2FsQWxpZ246IGlzSW5saW5lID8gJ21pZGRsZScgOiB1bmRlZmluZWQsXG5cdFx0XHQuLi5hbGlnbm1lbnRQcm9wcyxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goIGdyaWRDbGFzc2VzLCBjbGFzc05hbWUgKTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGN4LFxuXHRcdGdhcCxcblx0XHRncmlkVGVtcGxhdGVDb2x1bW5zLFxuXHRcdGdyaWRUZW1wbGF0ZVJvd3MsXG5cdFx0aXNJbmxpbmUsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMgfTtcbn1cbiJdfQ== */");
 		return cx(gridClasses, className);
 	}, [
 		align,
@@ -8690,7 +9164,7 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_e283446b3cbc213906bb0d97b3dd78c5/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@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__ */ jsx(component_default$2, {
@@ -8713,8 +9187,8 @@ const SUBPIXEL_TOLERANCE = .5;
 * Counts how many leading rows fit inside the content container.
 *
 * Rows are read from the DOM rather than derived from constants: row height
-* depends on the theme's row gap, label wrapping, and whatever a caller renders
-* as a label, so any restated number would drift.
+* depends on `--a8c-charts-dimension-leaderboard-row-gap`, label wrapping, and
+* whatever a caller renders as a label, so any restated number would drift.
 *
 * Every row is a direct grid child marked with `data-row-index`; interactive rows
 * use a button wrapper and non-interactive rows use a div wrapper.
@@ -8799,14 +9273,13 @@ function useFittedRowCount(enabled, rowCount, data) {
 * @return Array of legend items for the leaderboard chart
 */
 function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withComparison = false, withOverlayLabel = false, legendLabels }) {
-	const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
 	const { getElementStyles } = useGlobalChartsContext();
 	return useMemo(() => {
 		if (!data || data.length === 0) return [];
 		const items = [];
 		const { color: resolvedPrimaryColor } = getElementStyles({
 			index: 0,
-			overrideColor: primaryColor || leaderboardChartSettings.primaryColor
+			overrideColor: primaryColor
 		});
 		items.push({
 			label: legendLabels?.primary || __("Current period", "jetpack-charts"),
@@ -8815,7 +9288,7 @@ function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withCom
 		if (withComparison && !withOverlayLabel) {
 			const { color: resolvedSecondaryColor } = getElementStyles({
 				index: 1,
-				overrideColor: secondaryColor || leaderboardChartSettings.secondaryColor
+				overrideColor: secondaryColor
 			});
 			items.push({
 				label: legendLabels?.comparison || __("Previous period", "jetpack-charts"),
@@ -8829,7 +9302,6 @@ function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withCom
 		secondaryColor,
 		withComparison,
 		legendLabels,
-		leaderboardChartSettings,
 		getElementStyles,
 		withOverlayLabel
 	]);
@@ -8843,6 +9315,9 @@ var leaderboard_chart_module_default = {
 	"chevron": "a8ccharts-GovfoW-chevron",
 	"deltaPlaceholder": "a8ccharts-GovfoW-deltaPlaceholder",
 	"deltaValue": "a8ccharts-GovfoW-deltaValue",
+	"deltaValue--down": "a8ccharts-GovfoW-deltaValue--down",
+	"deltaValue--neutral": "a8ccharts-GovfoW-deltaValue--neutral",
+	"deltaValue--up": "a8ccharts-GovfoW-deltaValue--up",
 	"emptyState": "a8ccharts-GovfoW-emptyState",
 	"fitEmptyState": "a8ccharts-GovfoW-fitEmptyState",
 	"interactiveRow": "a8ccharts-GovfoW-interactiveRow",
@@ -8861,6 +9336,14 @@ var leaderboard_chart_module_default = {
 };
 //#endregion
 //#region src/charts/leaderboard-chart/leaderboard-chart.tsx
+const ROW_GAP = "var(--a8c-charts-dimension-leaderboard-row-gap, 12px)";
+const COLUMN_GAP = "var(--a8c-charts-dimension-leaderboard-column-gap, 4px)";
+/** Indexed by `Math.sign( delta ) + 1`, so [negative, neutral, positive]. */
+const DELTA_TREND_CLASS = [
+	"deltaValue--down",
+	"deltaValue--neutral",
+	"deltaValue--up"
+];
 /**
 * Default value formatter using formatMetricValue
 *
@@ -8963,15 +9446,15 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		...legend.shapeStyles
 	};
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "LeaderboardChart");
-	const { labelSpacing, rowGap, columnGap, primaryColor: settingsPrimaryColor, secondaryColor: settingsSecondaryColor, deltaColors } = leaderboardChartSettings;
+	const { labelSpacing } = leaderboardChartSettings;
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 	const { color: resolvedPrimaryColor } = getElementStyles({
 		index: 0,
-		overrideColor: primaryColor || settingsPrimaryColor
+		overrideColor: primaryColor
 	});
 	const { color: resolvedSecondaryColor } = getElementStyles({
 		index: 1,
-		overrideColor: secondaryColor || settingsSecondaryColor
+		overrideColor: secondaryColor
 	});
 	const legendItems = useLeaderboardLegendItems({
 		data: data || [],
@@ -9027,7 +9510,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 			legendPosition,
 			legendElement: false,
 			legendChildren,
-			className: clsx(leaderboard_chart_module_default.leaderboardChart, {
+			className: clsx("leaderboard-chart", leaderboard_chart_module_default.leaderboardChart, {
 				[leaderboard_chart_module_default["leaderboardChart--responsive"]]: !propWidth && !propHeight,
 				[leaderboard_chart_module_default["leaderboardChart--loading"]]: loading
 			}, className),
@@ -9062,7 +9545,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 			legendPosition,
 			legendElement,
 			legendChildren,
-			className: clsx(leaderboard_chart_module_default.leaderboardChart, {
+			className: clsx("leaderboard-chart", leaderboard_chart_module_default.leaderboardChart, {
 				[leaderboard_chart_module_default["leaderboardChart--responsive"]]: !propWidth && !propHeight,
 				[leaderboard_chart_module_default["leaderboardChart--loading"]]: loading
 			}, className),
@@ -9084,8 +9567,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ jsx(component_default, {
 					templateColumns: "minmax(0, 1fr) auto",
-					rowGap,
-					columnGap,
+					rowGap: ROW_GAP,
+					columnGap: COLUMN_GAP,
 					"data-leaderboard-grid": true,
 					children: data.map((entry, rowIndex) => {
 						const rowStyle = shouldFitRows && rowIndex >= fittedCount ? { visibility: "hidden" } : void 0;
@@ -9094,8 +9577,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 						const hasDelta = hasDeltaValue(entry);
 						const showComparisonValue = showComparisonColumn && hasDelta;
 						const showComparisonPlaceholder = showComparisonColumn && !hasDelta;
-						const colorIndex = showComparisonValue ? Math.sign(entry.delta) + 1 : 1;
-						const deltaColor = deltaColors[colorIndex];
+						const deltaTrendClass = leaderboard_chart_module_default[DELTA_TREND_CLASS[showComparisonValue ? Math.sign(entry.delta) + 1 : 1]];
 						const rowCells = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
 							direction: "column",
 							gap: labelSpacing,
@@ -9116,13 +9598,11 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							children: [
 								isPrimaryVisible && /* @__PURE__ */ jsx(Text$1, { children: valueFormatter(entry.currentValue) }),
 								showComparisonValue && /* @__PURE__ */ jsx(Text$1, {
-									className: leaderboard_chart_module_default.deltaValue,
-									style: { color: deltaColor },
+									className: clsx(leaderboard_chart_module_default.deltaValue, deltaTrendClass),
 									children: deltaFormatter(entry.delta)
 								}),
 								showComparisonPlaceholder && /* @__PURE__ */ jsxs(Text$1, {
-									className: clsx(leaderboard_chart_module_default.deltaValue, leaderboard_chart_module_default.deltaPlaceholder),
-									style: { color: deltaColor },
+									className: clsx(leaderboard_chart_module_default.deltaValue, leaderboard_chart_module_default.deltaPlaceholder, deltaTrendClass),
 									children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
 										children: "—"
@@ -9206,7 +9686,9 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 //#endregion
 //#region src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
-	"pie-chart": "a8ccharts-gnszbG-pie-chart",
+	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
+	"pie-chart__label-text": "a8ccharts-gnszbG-pie-chart__label-text",
+	"pie-chart__plot": "a8ccharts-gnszbG-pie-chart__plot",
 	"pie-chart--responsive": "a8ccharts-gnszbG-pie-chart--responsive"
 };
 //#endregion
@@ -9261,11 +9743,8 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId(providedChartId);
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
-	const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true,
-		debounce: 0
-	});
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = useRef(null);
 	const onMouseLeave = useCallback(() => {
 		if (!withTooltips) return;
 		hideTooltip();
@@ -9348,19 +9827,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 				width: propWidth || void 0,
 				height: propHeight || void 0
 			},
-			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
-					top: tooltipTop || 0,
-					left: tooltipLeft || 0,
-					children: /* @__PURE__ */ jsx("div", {
-						className: "a8c-charts-scope",
-						role: "tooltip",
-						children: renderTooltip({ tooltipData })
-					})
-				}),
-				htmlChildren,
-				otherChildren
-			] }),
+			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [htmlChildren, otherChildren] }),
 			children: ({ contentWidth, contentHeight }) => {
 				const availableSize = Math.min(contentWidth > 0 ? contentWidth : 300, contentHeight > 0 ? contentHeight : 300);
 				const actualSize = size ? Math.min(size, availableSize) : availableSize;
@@ -9373,9 +9840,10 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 				const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
 				const maxCornerRadius = (outerRadius - innerRadius) / 2;
 				const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
-				return /* @__PURE__ */ jsx(Center, {
+				return /* @__PURE__ */ jsxs(Center, {
 					ref: containerRef,
-					children: /* @__PURE__ */ jsxs("svg", {
+					className: pie_chart_module_default["pie-chart__plot"],
+					children: [/* @__PURE__ */ jsxs("svg", {
 						viewBox: `0 0 ${width} ${height}`,
 						preserveAspectRatio: "xMidYMid meet",
 						width,
@@ -9407,11 +9875,12 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 										const hasSpaceForLabel = arc.endAngle - arc.startAngle >= .25;
 										const handleMouseMove = (event) => {
 											if (!withTooltips) return;
-											if (containerBounds.width === 0 || containerBounds.height === 0) return;
+											const bounds = containerRef.current?.getBoundingClientRect();
+											if (!bounds) return;
 											showTooltip({
 												tooltipData: arc.data,
-												tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-												tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
+												tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+												tooltipTop: event.clientY - bounds.top + tooltipOffsetY
 											});
 										};
 										const pathProps = {
@@ -9434,20 +9903,20 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 										const backgroundHeight = fontSize + 12;
 										return /* @__PURE__ */ jsxs("g", {
 											...groupProps,
-											children: [/* @__PURE__ */ jsx("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ jsxs("g", { children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ jsx("rect", {
+											children: [/* @__PURE__ */ jsx("path", { ...pathProps }), showLabels && hasSpaceForLabel && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+												className: pie_chart_module_default["pie-chart__label-plate"],
 												x: centroidX - backgroundWidth / 2,
 												y: centroidY - backgroundHeight / 2,
 												width: backgroundWidth,
 												height: backgroundHeight,
-												fill: providerTheme.labelBackgroundColor,
 												rx: 4,
 												ry: 4,
 												pointerEvents: "none"
 											}), /* @__PURE__ */ jsx("text", {
+												className: pie_chart_module_default["pie-chart__label-text"],
 												x: centroidX,
 												y: centroidY,
 												dy: ".33em",
-												fill: providerTheme.labelTextColor || "#333",
 												fontSize,
 												textAnchor: "middle",
 												pointerEvents: "none",
@@ -9458,7 +9927,15 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 								}
 							}), !allSegmentsHidden && svgChildren]
 						})]
-					})
+					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
+						top: tooltipTop || 0,
+						left: tooltipLeft || 0,
+						children: /* @__PURE__ */ jsx("div", {
+							className: standaloneScopeClass,
+							role: "tooltip",
+							children: renderTooltip({ tooltipData })
+						})
+					})]
 				});
 			}
 		})
@@ -9485,6 +9962,7 @@ var pie_semi_circle_chart_module_default = {
 	"label": "a8ccharts-YtTOxW-label",
 	"note": "a8ccharts-YtTOxW-note",
 	"pie-semi-circle-chart": "a8ccharts-YtTOxW-pie-semi-circle-chart",
+	"pie-semi-circle-chart__plot": "a8ccharts-YtTOxW-pie-semi-circle-chart__plot",
 	"pie-semi-circle-chart--responsive": "a8ccharts-YtTOxW-pie-semi-circle-chart--responsive"
 };
 //#endregion
@@ -9534,23 +10012,17 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
-	const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
-		detectBounds: true,
-		scroll: true,
-		debounce: 0
-	});
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = useRef(null);
 	const handleMouseMove = useCallback((event, arc) => {
-		if (containerBounds.width === 0 || containerBounds.height === 0) return;
+		const bounds = containerRef.current?.getBoundingClientRect();
+		if (!bounds) return;
 		showTooltip({
 			tooltipData: arc.data,
-			tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-			tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
+			tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+			tooltipTop: event.clientY - bounds.top + tooltipOffsetY
 		});
 	}, [
-		containerBounds.width,
-		containerBounds.height,
-		containerBounds.left,
-		containerBounds.top,
 		showTooltip,
 		tooltipOffsetX,
 		tooltipOffsetY
@@ -9599,7 +10071,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		const errorWidth = propHeight ? Math.min(propWidth || propHeight * 2, propHeight * 2) : effectiveWidth;
 		const errorHeight = errorWidth / 2;
 		return /* @__PURE__ */ jsx("div", {
-			className: pie_semi_circle_chart_module_default["pie-semi-circle-chart"],
+			className: clsx("pie-semi-circle-chart", pie_semi_circle_chart_module_default["pie-semi-circle-chart"], className),
 			children: /* @__PURE__ */ jsx("svg", {
 				width: errorWidth,
 				height: errorHeight,
@@ -9646,19 +10118,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				width: propWidth || void 0,
 				height: propHeight || void 0
 			},
-			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
-					top: tooltipTop || 0,
-					left: tooltipLeft || 0,
-					children: /* @__PURE__ */ jsx("div", {
-						className: "a8c-charts-scope",
-						role: "tooltip",
-						children: renderTooltip({ tooltipData })
-					})
-				}),
-				htmlChildren,
-				otherChildren
-			] }),
+			trailingContent: /* @__PURE__ */ jsxs(Fragment$1, { children: [htmlChildren, otherChildren] }),
 			children: ({ contentWidth, contentHeight }) => {
 				const availableWidth = contentWidth > 0 ? contentWidth : effectiveWidth;
 				const availableHeight = contentHeight > 0 ? contentHeight : propHeight || effectiveWidth / 2;
@@ -9666,9 +10126,10 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				const height = width / 2;
 				const radius = height;
 				const innerRadius = radius * (1 - thickness);
-				return /* @__PURE__ */ jsx(Center, {
+				return /* @__PURE__ */ jsxs(Center, {
 					ref: containerRef,
-					children: /* @__PURE__ */ jsxs("svg", {
+					className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__plot"],
+					children: [/* @__PURE__ */ jsxs("svg", {
 						width,
 						height,
 						viewBox: `0 0 ${width} ${height}`,
@@ -9726,7 +10187,15 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 								!allSegmentsHidden && svgChildren
 							] })
 						})]
-					})
+					}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
+						top: tooltipTop || 0,
+						left: tooltipLeft || 0,
+						children: /* @__PURE__ */ jsx("div", {
+							className: standaloneScopeClass,
+							role: "tooltip",
+							children: renderTooltip({ tooltipData })
+						})
+					})]
 				});
 			}
 		})
@@ -9951,6 +10420,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 	});
 }
 //#endregion
-export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
 
 //# sourceMappingURL=index.js.map