@automattic/charts 1.12.0 → 2.0.1

package/dist/index.js

@@ -14,8 +14,7 @@ import { useTooltip, useTooltipInPortal } 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 { __assign } from "tslib";
-import { Icon, chevronRight } from "@wordpress/icons";
+import { IconButton, Stack, Text as Text$1 } from "@wordpress/ui";
 import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { useParentSize } from "@visx/responsive";
@@ -23,8 +22,10 @@ import { Annotation, CircleSubject, Connector, HtmlLabel, Label, LineSubject } f
 import { PatternCircles, PatternHexagons, PatternLines, PatternWaves } from "@visx/pattern";
 import { Chart } from "react-google-charts";
 import DOMPurify from "dompurify";
+import { __assign } from "tslib";
 import "@babel/runtime/helpers/esm/extends";
 import "@babel/runtime/helpers/extends";
+import { Icon, chevronRight } from "@wordpress/icons";
 import { Pie } from "@visx/shape";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
@@ -507,15 +508,31 @@ const CSS_VAR_NAME_PATTERN = /^--[\w-]+$/;
 * @param element - Optional DOM element to resolve the variable from (defaults to document.documentElement)
 * @return The resolved value, fallback value, or null if unresolvable
 */
-const resolveCssVariable = (value, element) => {
-	if (!value) return null;
-	if (value.startsWith("var(") && value.endsWith(")")) {
-		const parsed = parseVarExpression(value);
-		if (parsed) return resolveVariableName(parsed.varName, element) || parsed.fallback;
-	}
-	if (value.startsWith("--")) return resolveVariableName(value, element);
-	return value;
-};
+const resolveCssVariable = (value, element) => createCssVariableResolver(element)(value);
+/**
+* Builds a resolver that reads every value from one `getComputedStyle` snapshot.
+*
+* `getComputedStyle` is the expensive half of resolving a token: each call can force the browser to flush pending style, and a chart theme resolves five roles at once. Taking the snapshot once per build turns that into a single query. The reads that share a snapshot happen synchronously inside one memo body, so no style change can land between them — the resolver is single-pass by design and is not meant to be held across renders.
+*
+* @param element - The element to resolve against, or null/undefined for the document root.
+* @return A resolver that resolves each value exactly as `resolveCssVariable` does.
+*/
+function createCssVariableResolver(element) {
+	let styles = null;
+	const getStyles = () => {
+		if (!styles) styles = computedStyleFor(element);
+		return styles;
+	};
+	return (value) => {
+		if (!value) return null;
+		if (value.startsWith("var(") && value.endsWith(")")) {
+			const parsed = parseVarExpression(value);
+			if (parsed) return readCustomProperty(parsed.varName, getStyles()) || parsed.fallback;
+		}
+		if (value.startsWith("--")) return readCustomProperty(value, getStyles());
+		return value;
+	};
+}
 /**
 * Parses a var() expression into its variable name and optional fallback.
 * Uses string manipulation instead of complex regex to avoid ReDoS.
@@ -543,17 +560,30 @@ function parseVarExpression(expr) {
 	};
 }
 /**
-* Resolves a plain CSS variable name to its computed value.
+* Takes one computed-style snapshot, or null where there is nothing to read (SSR, or a detached element).
+*
+* @param element - The element to read from, or null/undefined for the document root.
+* @return The computed styles, or null.
+*/
+function computedStyleFor(element) {
+	if (typeof window === "undefined" || typeof document === "undefined") return null;
+	try {
+		return getComputedStyle(element || document.documentElement);
+	} catch {
+		return null;
+	}
+}
+/**
+* Reads one custom property from a computed-style snapshot.
 *
 * @param varName - A CSS variable name like '--my-color'
-* @param element - Optional DOM element to resolve from
+* @param styles  - The snapshot to read from, or null
 * @return The computed value or null
 */
-function resolveVariableName(varName, element) {
-	if (typeof window === "undefined" || typeof document === "undefined") return null;
+function readCustomProperty(varName, styles) {
+	if (!styles) return null;
 	try {
-		const targetElement = element || document.documentElement;
-		return getComputedStyle(targetElement).getPropertyValue(varName).trim() || null;
+		return styles.getPropertyValue(varName).trim() || null;
 	} catch {
 		return null;
 	}
@@ -1022,11 +1052,13 @@ const useDeepMemo = (value) => {
 };
 //#endregion
 //#region src/hooks/use-xychart-theme.ts
-const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
+	const seriesColorKey = JSON.stringify((data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color)));
 	return useMemo(() => {
-		const seriesColors = (data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color));
+		const resolve = createCssVariableResolver();
+		const resolveColor = (value) => value ? resolve(value) ?? value : value;
+		const seriesColors = JSON.parse(seriesColorKey);
 		return buildChartTheme({
 			...theme,
 			colors: [...seriesColors, ...theme.colors ?? []],
@@ -1048,7 +1080,7 @@ const useXYChartTheme = (data) => {
 				fill: resolveColor(theme.svgLabelSmall.fill)
 			}
 		});
-	}, [theme, data]);
+	}, [theme, seriesColorKey]);
 };
 //#endregion
 //#region src/hooks/use-chart-data-transform.ts
@@ -1135,7 +1167,7 @@ const getXAxisLabelMetrics = (theme, orientation) => {
 const useChartMargin = (height, options, data, theme, horizontal = false) => {
 	const yTicks = useMemo(() => {
 		const allDataPoints = data.flatMap((series) => series.data);
-		if (horizontal) return allDataPoints.map((d) => d.label || options.axis?.y?.tickFormat(d.date.getTime(), 0, []));
+		if (horizontal) return allDataPoints.map((d) => d.label || d.date?.getTime());
 		if (options.axis?.y?.tickValues?.length) return options.axis.y.tickValues;
 		const minY = Math.min(...allDataPoints.map((d) => d.value));
 		const maxY = Math.max(...allDataPoints.map((d) => d.value));
@@ -1375,1336 +1407,80 @@ const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVi
 	]);
 	return {
 		visibleData,
-		allSegmentsHidden: useMemo(() => {
-			return legendInteractive && visibleData.length === 0;
-		}, [legendInteractive, visibleData]),
-		legendData: useMemo(() => {
-			if (!legendInteractive || !chartId) return data;
-			const visibleDataMap = new Map(visibleData.map((d) => [d.label, d]));
-			return data.map((segment) => {
-				if (!isSeriesVisible(chartId, segment.label)) return segment;
-				return visibleDataMap.get(segment.label) || segment;
-			});
-		}, [
-			data,
-			visibleData,
-			legendInteractive,
-			chartId,
-			isSeriesVisible
-		])
-	};
-};
-//#endregion
-//#region src/hooks/use-prefers-reduced-motion.ts
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const getInitialState = () => !window.matchMedia(QUERY).matches;
-/**
-* Custom hook to determine if the user prefers reduced motion.
-* @return {boolean} A boolean indicating the user's preference for reduced motion.
-*/
-function usePrefersReducedMotion() {
-	const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);
-	useEffect(() => {
-		const mediaQueryList = window.matchMedia(QUERY);
-		const listener = (event) => {
-			setPrefersReducedMotion(!event.matches);
-		};
-		mediaQueryList.addEventListener("change", listener);
-		return () => {
-			mediaQueryList.removeEventListener("change", listener);
-		};
-	}, []);
-	return prefersReducedMotion;
-}
-//#endregion
-//#region src/providers/chart-context/hooks/use-chart-registration.ts
-const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, metadata }) => {
-	const { registerChart, unregisterChart } = useGlobalChartsContext();
-	const stableLegendItems = useDeepMemo(legendItems);
-	const memoizedMetadata = useMemo(() => metadata, [metadata]);
-	useEffect(() => {
-		if (isDataValid) registerChart(chartId, {
-			legendItems: stableLegendItems,
-			chartType,
-			metadata: memoizedMetadata
-		});
-		return () => {
-			unregisterChart(chartId);
-		};
-	}, [
-		chartId,
-		stableLegendItems,
-		chartType,
-		memoizedMetadata,
-		isDataValid
-	]);
-};
-//#endregion
-//#region src/providers/chart-context/hooks/use-global-charts-theme.ts
-/**
-* Hook to get the global chart theme from GlobalChartsProvider
-*
-* @return The global chart theme
-*/
-const useGlobalChartsTheme = () => {
-	return useContext(GlobalChartsContext)?.theme ?? defaultTheme;
-};
-//#endregion
-//#region ../../../node_modules/.pnpm/is-plain-object@5.0.0/node_modules/is-plain-object/dist/is-plain-object.mjs
-/*!
-* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
-*
-* Copyright (c) 2014-2017, Jon Schlinkert.
-* Released under the MIT License.
-*/
-function isObject(o) {
-	return Object.prototype.toString.call(o) === "[object Object]";
-}
-function isPlainObject(o) {
-	var ctor, prot;
-	if (isObject(o) === false) return false;
-	ctor = o.constructor;
-	if (ctor === void 0) return true;
-	prot = ctor.prototype;
-	if (isObject(prot) === false) return false;
-	if (prot.hasOwnProperty("isPrototypeOf") === false) return false;
-	return true;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/lower-case@2.0.2/node_modules/lower-case/dist.es2015/index.js
-/**
-* Lower case as a function.
-*/
-function lowerCase(str) {
-	return str.toLowerCase();
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist.es2015/index.js
-var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
-var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
-/**
-* Normalize the string into something other libraries can manipulate easier.
-*/
-function noCase(input, options) {
-	if (options === void 0) options = {};
-	var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
-	var result = replace$1(replace$1(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
-	var start = 0;
-	var end = result.length;
-	while (result.charAt(start) === "\0") start++;
-	while (result.charAt(end - 1) === "\0") end--;
-	return result.slice(start, end).split("\0").map(transform).join(delimiter);
-}
-/**
-* Replace `re` in the input string with the replacement value.
-*/
-function replace$1(input, re, value) {
-	if (re instanceof RegExp) return input.replace(re, value);
-	return re.reduce(function(input, re) {
-		return input.replace(re, value);
-	}, input);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist.es2015/index.js
-function dotCase(input, options) {
-	if (options === void 0) options = {};
-	return noCase(input, __assign({ delimiter: "." }, options));
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist.es2015/index.js
-function paramCase(input, options) {
-	if (options === void 0) options = {};
-	return dotCase(input, __assign({ delimiter: "-" }, options));
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/error.mjs
-let set$1;
-if (process.env.NODE_ENV !== "production") set$1 = /* @__PURE__ */ new Set();
-function error(...messages) {
-	if (process.env.NODE_ENV !== "production") {
-		const messageKey = messages.join(" ");
-		if (!set$1.has(messageKey)) {
-			set$1.add(messageKey);
-			console.error(`Base UI: ${messageKey}`);
-		}
-	}
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/safeReact.mjs
-/**
-* A clone of the React namespace for reading APIs that may be missing in older
-* supported React versions. Bundlers can rewrite direct `React.someNewApi`
-* reads into named imports, which breaks React 17. Reading from this cloned
-* object keeps those lookups optional.
-*
-* @see https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
-*/
-const SafeReact = { ...React };
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/useRefWithInit.mjs
-const UNINITIALIZED = {};
-/**
-* A React.useRef() that is initialized with a function. Note that it accepts an optional
-* initialization argument, so the initialization function doesn't need to be an inline closure.
-*
-* @usage
-*   const ref = useRefWithInit(sortColumns, columns)
-*/
-function useRefWithInit(init, initArg) {
-	const ref = React.useRef(UNINITIALIZED);
-	if (ref.current === UNINITIALIZED) ref.current = init(initArg);
-	return ref;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/useStableCallback.mjs
-const useInsertionEffect$1 = SafeReact.useInsertionEffect;
-const useSafeInsertionEffect = useInsertionEffect$1 && useInsertionEffect$1 !== SafeReact.useLayoutEffect ? useInsertionEffect$1 : (fn) => fn();
-/**
-* Stabilizes the function passed so it's always the same between renders.
-*
-* The function becomes non-reactive to any values it captures.
-* It can safely be passed as a dependency of `React.useMemo` and `React.useEffect` without re-triggering them if its captured values change.
-*
-* The function must only be called inside effects and event handlers, never during render (which throws an error).
-*
-* This hook is a more permissive version of React 19.2's `React.useEffectEvent` in that it can be passed through contexts and called in event handler props, not just effects.
-*/
-function useStableCallback(callback) {
-	const stable = useRefWithInit(createStableCallback).current;
-	stable.next = callback;
-	useSafeInsertionEffect(stable.effect);
-	return stable.trampoline;
-}
-function createStableCallback() {
-	const stable = {
-		next: void 0,
-		callback: assertNotCalled,
-		trampoline: (...args) => stable.callback?.(...args),
-		effect: () => {
-			stable.callback = stable.next;
-		}
-	};
-	return stable;
-}
-function assertNotCalled() {
-	if (process.env.NODE_ENV !== "production") throw new Error("Base UI: Cannot call an event handler while rendering.");
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/useIsoLayoutEffect.mjs
-const noop = () => {};
-const useIsoLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : noop;
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/warn.mjs
-let set;
-if (process.env.NODE_ENV !== "production") set = /* @__PURE__ */ new Set();
-function warn(...messages) {
-	if (process.env.NODE_ENV !== "production") {
-		const messageKey = messages.join(" ");
-		if (!set.has(messageKey)) {
-			set.add(messageKey);
-			console.warn(`Base UI: ${messageKey}`);
-		}
-	}
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/formatErrorMessage.mjs
-/**
-* Creates a formatErrorMessage function with a custom URL and prefix.
-* @param baseUrl - The base URL for the error page (e.g., 'https://base-ui.com/production-error')
-* @param prefix - The prefix for the error message (e.g., 'Base UI')
-* @returns A function that formats error messages with the given URL and prefix
-*/
-function createFormatErrorMessage(baseUrl, prefix) {
-	return function formatErrorMessage(code, ...args) {
-		const url = new URL(baseUrl);
-		url.searchParams.set("code", code.toString());
-		args.forEach((arg) => url.searchParams.append("args[]", arg));
-		return `${prefix} error #${code}; visit ${url} for the full message.`;
-	};
-}
-/**
-* WARNING: Don't import this directly. It's imported by the code generated by
-* `@mui/internal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
-* constructors to ensure the plugin works as expected. Supported patterns include:
-*   throw new Error('My message');
-*   throw new Error(`My message: ${foo}`);
-*   throw new Error(`My message: ${foo}` + 'another string');
-*   ...
-*/
-const formatErrorMessage = createFormatErrorMessage("https://base-ui.com/production-error", "Base UI");
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/useMergedRefs.mjs
-/**
-* Merges refs into a single memoized callback ref or `null`.
-* This makes sure multiple refs are updated together and have the same value.
-*
-* This function accepts up to four refs. If you need to merge more, or have an unspecified number of refs to merge,
-* use `useMergedRefsN` instead.
-*/
-function useMergedRefs(a, b, c, d) {
-	const forkRef = useRefWithInit(createForkRef).current;
-	if (didChange(forkRef, a, b, c, d)) update(forkRef, [
-		a,
-		b,
-		c,
-		d
-	]);
-	return forkRef.callback;
-}
-/**
-* Merges an array of refs into a single memoized callback ref or `null`.
-*
-* If you need to merge a fixed number (up to four) of refs, use `useMergedRefs` instead for better performance.
-*/
-function useMergedRefsN(refs) {
-	const forkRef = useRefWithInit(createForkRef).current;
-	if (didChangeN(forkRef, refs)) update(forkRef, refs);
-	return forkRef.callback;
-}
-function createForkRef() {
-	return {
-		callback: null,
-		cleanup: null,
-		refs: []
-	};
-}
-function didChange(forkRef, a, b, c, d) {
-	return forkRef.refs[0] !== a || forkRef.refs[1] !== b || forkRef.refs[2] !== c || forkRef.refs[3] !== d;
-}
-function didChangeN(forkRef, newRefs) {
-	return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]);
-}
-function update(forkRef, refs) {
-	forkRef.refs = refs;
-	if (refs.every((ref) => ref == null)) {
-		forkRef.callback = null;
-		return;
-	}
-	forkRef.callback = (instance) => {
-		if (forkRef.cleanup) {
-			forkRef.cleanup();
-			forkRef.cleanup = null;
-		}
-		if (instance != null) {
-			const cleanupCallbacks = Array(refs.length).fill(null);
-			for (let i = 0; i < refs.length; i += 1) {
-				const ref = refs[i];
-				if (ref == null) continue;
-				switch (typeof ref) {
-					case "function": {
-						const refCleanup = ref(instance);
-						if (typeof refCleanup === "function") cleanupCallbacks[i] = refCleanup;
-						break;
-					}
-					case "object":
-						ref.current = instance;
-						break;
-					default:
-				}
-			}
-			forkRef.cleanup = () => {
-				for (let i = 0; i < refs.length; i += 1) {
-					const ref = refs[i];
-					if (ref == null) continue;
-					switch (typeof ref) {
-						case "function": {
-							const cleanupCallback = cleanupCallbacks[i];
-							if (typeof cleanupCallback === "function") cleanupCallback();
-							else ref(null);
-							break;
-						}
-						case "object":
-							ref.current = null;
-							break;
-						default:
-					}
-				}
-			};
-		}
-	};
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/reactVersion.mjs
-const majorVersion = parseInt(React.version, 10);
-function isReactVersionAtLeast(reactVersionToCheck) {
-	return majorVersion >= reactVersionToCheck;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/getReactElementRef.mjs
-/**
-* Extracts the `ref` from a React element, handling different React versions.
-*/
-function getReactElementRef(element) {
-	if (!/*#__PURE__*/ React.isValidElement(element)) return null;
-	const reactElement = element;
-	const propsWithRef = reactElement.props;
-	return (isReactVersionAtLeast(19) ? propsWithRef?.ref : reactElement.ref) ?? null;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+utils@0.3.1_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/mergeObjects.mjs
-function mergeObjects(a, b) {
-	if (a && !b) return a;
-	if (!a && b) return b;
-	if (a || b) return {
-		...a,
-		...b
-	};
-}
-Object.freeze([]);
-const EMPTY_OBJECT = Object.freeze({});
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/internals/getStateAttributesProps.mjs
-function getStateAttributesProps(state, customMapping) {
-	const props = {};
-	for (const key in state) {
-		const value = state[key];
-		if (customMapping?.hasOwnProperty(key)) {
-			const customProps = customMapping[key](value);
-			if (customProps != null) Object.assign(props, customProps);
-			continue;
-		}
-		if (value === true) props[`data-${key.toLowerCase()}`] = "";
-		else if (value) props[`data-${key.toLowerCase()}`] = value.toString();
-	}
-	return props;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/utils/resolveClassName.mjs
-/**
-* If the provided className is a string, it will be returned as is.
-* Otherwise, the function will call the className function with the state as the first argument.
-*
-* @param className
-* @param state
-*/
-function resolveClassName(className, state) {
-	return typeof className === "function" ? className(state) : className;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/utils/resolveStyle.mjs
-/**
-* If the provided style is an object, it will be returned as is.
-* Otherwise, the function will call the style function with the state as the first argument.
-*
-* @param style
-* @param state
-*/
-function resolveStyle(style, state) {
-	return typeof style === "function" ? style(state) : style;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/merge-props/mergeProps.mjs
-const EMPTY_PROPS = {};
-/**
-* Merges multiple sets of React props. It follows the Object.assign pattern where the rightmost object's fields overwrite
-* the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.
-*
-* Event handlers are merged and called in right-to-left order (rightmost handler executes first, leftmost last).
-* For React synthetic events, the rightmost handler can prevent prior (left-positioned) handlers from executing
-* by calling `event.preventBaseUIHandler()`. For non-synthetic events (custom events with primitive/object values),
-* all handlers always execute without prevention capability.
-*
-* The `className` prop is merged by concatenating classes in right-to-left order (rightmost class appears first in the string).
-* The `style` prop is merged with rightmost styles overwriting the prior ones.
-*
-* Props can either be provided as objects or as functions that take the previous props as an argument.
-* The function will receive the merged props up to that point (going from left to right):
-* so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
-* The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
-*
-* Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
-* They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
-*
-* @important **`ref` is not merged.**
-* @param a Props object to merge.
-* @param b Props object to merge. The function will overwrite conflicting props from `a`.
-* @param c Props object to merge. The function will overwrite conflicting props from previous parameters.
-* @param d Props object to merge. The function will overwrite conflicting props from previous parameters.
-* @param e Props object to merge. The function will overwrite conflicting props from previous parameters.
-* @returns The merged props.
-* @public
-*/
-function mergeProps(a, b, c, d, e) {
-	if (!c && !d && !e && !a) return createInitialMergedProps(b);
-	let merged = createInitialMergedProps(a);
-	if (b) merged = mergeInto(merged, b);
-	if (c) merged = mergeInto(merged, c);
-	if (d) merged = mergeInto(merged, d);
-	if (e) merged = mergeInto(merged, e);
-	return merged;
-}
-/**
-* Merges an arbitrary number of React props using the same logic as {@link mergeProps}.
-* This function accepts an array of props instead of individual arguments.
-*
-* This has slightly lower performance than {@link mergeProps} due to accepting an array
-* instead of a fixed number of arguments. Prefer {@link mergeProps} when merging 5 or
-* fewer prop sets for better performance.
-*
-* @param props Array of props to merge.
-* @returns The merged props.
-* @see mergeProps
-* @public
-*/
-function mergePropsN(props) {
-	if (props.length === 0) return EMPTY_PROPS;
-	if (props.length === 1) return createInitialMergedProps(props[0]);
-	let merged = createInitialMergedProps(props[0]);
-	for (let i = 1; i < props.length; i += 1) merged = mergeInto(merged, props[i]);
-	return merged;
-}
-function createInitialMergedProps(inputProps) {
-	if (isPropsGetter(inputProps)) return { ...resolvePropsGetter(inputProps, EMPTY_PROPS) };
-	return copyInitialProps(inputProps);
-}
-function mergeInto(merged, inputProps) {
-	if (isPropsGetter(inputProps)) return resolvePropsGetter(inputProps, merged);
-	return mutablyMergeInto(merged, inputProps);
-}
-function copyInitialProps(inputProps) {
-	const copiedProps = { ...inputProps };
-	for (const propName in copiedProps) {
-		const propValue = copiedProps[propName];
-		if (isEventHandler(propName, propValue)) copiedProps[propName] = wrapEventHandler(propValue);
-	}
-	return copiedProps;
-}
-/**
-* Merges two sets of props. In case of conflicts, the external props take precedence.
-*/
-function mutablyMergeInto(mergedProps, externalProps) {
-	if (!externalProps) return mergedProps;
-	for (const propName in externalProps) {
-		const externalPropValue = externalProps[propName];
-		switch (propName) {
-			case "style":
-				mergedProps[propName] = mergeObjects(mergedProps.style, externalPropValue);
-				break;
-			case "className":
-				mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue);
-				break;
-			default: if (isEventHandler(propName, externalPropValue)) mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue);
-			else mergedProps[propName] = externalPropValue;
-		}
-	}
-	return mergedProps;
-}
-function isEventHandler(key, value) {
-	const code0 = key.charCodeAt(0);
-	const code1 = key.charCodeAt(1);
-	const code2 = key.charCodeAt(2);
-	return code0 === 111 && code1 === 110 && code2 >= 65 && code2 <= 90 && (typeof value === "function" || typeof value === "undefined");
-}
-function isPropsGetter(inputProps) {
-	return typeof inputProps === "function";
-}
-function resolvePropsGetter(inputProps, previousProps) {
-	if (isPropsGetter(inputProps)) return inputProps(previousProps);
-	return inputProps ?? EMPTY_PROPS;
-}
-function mergeEventHandlers(ourHandler, theirHandler) {
-	if (!theirHandler) return ourHandler;
-	if (!ourHandler) return wrapEventHandler(theirHandler);
-	return (...args) => {
-		const event = args[0];
-		if (isSyntheticEvent(event)) {
-			const baseUIEvent = event;
-			makeEventPreventable(baseUIEvent);
-			const result = theirHandler(...args);
-			if (!baseUIEvent.baseUIHandlerPrevented) ourHandler?.(...args);
-			return result;
-		}
-		const result = theirHandler(...args);
-		ourHandler?.(...args);
-		return result;
-	};
-}
-function wrapEventHandler(handler) {
-	if (!handler) return handler;
-	return (...args) => {
-		const event = args[0];
-		if (isSyntheticEvent(event)) makeEventPreventable(event);
-		return handler(...args);
-	};
-}
-function makeEventPreventable(event) {
-	event.preventBaseUIHandler = () => {
-		event.baseUIHandlerPrevented = true;
-	};
-	return event;
-}
-function mergeClassNames(ourClassName, theirClassName) {
-	if (theirClassName) {
-		if (ourClassName) return theirClassName + " " + ourClassName;
-		return theirClassName;
-	}
-	return ourClassName;
-}
-function isSyntheticEvent(event) {
-	return event != null && typeof event === "object" && "nativeEvent" in event;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/internals/useRenderElement.mjs
-/**
-* Renders a Base UI element.
-*
-* @param element The default HTML element to render. Can be overridden by the `render` prop.
-* @param componentProps An object containing the `render` and `className` props to be used for element customization. Other props are ignored.
-* @param params Additional parameters for rendering the element.
-*/
-function useRenderElement(element, componentProps, params = {}) {
-	const renderProp = componentProps.render;
-	const outProps = useRenderElementProps(componentProps, params);
-	if (params.enabled === false) return null;
-	return evaluateRenderProp(element, renderProp, outProps, params.state ?? EMPTY_OBJECT);
-}
-/**
-* Computes render element final props.
-*/
-function useRenderElementProps(componentProps, params = {}) {
-	const { className: classNameProp, style: styleProp, render: renderProp } = componentProps;
-	const { state = EMPTY_OBJECT, ref, props, stateAttributesMapping, enabled = true } = params;
-	const className = enabled ? resolveClassName(classNameProp, state) : void 0;
-	const style = enabled ? resolveStyle(styleProp, state) : void 0;
-	const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
-	const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : void 0;
-	const outProps = enabled ? mergeObjects(stateProps, resolvedProps) ?? {} : EMPTY_OBJECT;
-	if (typeof document !== "undefined") if (!enabled) useMergedRefs(null, null);
-	else if (Array.isArray(ref)) outProps.ref = useMergedRefsN([
-		outProps.ref,
-		getReactElementRef(renderProp),
-		...ref
-	]);
-	else outProps.ref = useMergedRefs(outProps.ref, getReactElementRef(renderProp), ref);
-	if (!enabled) return EMPTY_OBJECT;
-	if (className !== void 0) outProps.className = mergeClassNames(outProps.className, className);
-	if (style !== void 0) outProps.style = mergeObjects(outProps.style, style);
-	return outProps;
-}
-function resolveRenderFunctionProps(props) {
-	if (Array.isArray(props)) return mergePropsN(props);
-	return mergeProps(void 0, props);
-}
-const REACT_LAZY_TYPE = Symbol.for("react.lazy");
-const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
-const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
-function evaluateRenderProp(element, render, props, state) {
-	if (render) {
-		if (typeof render === "function") {
-			if (process.env.NODE_ENV !== "production") warnIfRenderPropLooksLikeComponent(render);
-			return render(props, state);
-		}
-		const mergedProps = mergeProps(props, render.props);
-		mergedProps.ref = props.ref;
-		let newElement = render;
-		if (newElement?.$$typeof === REACT_LAZY_TYPE) newElement = React.Children.toArray(render)[0];
-		if (process.env.NODE_ENV !== "production") {
-			if (!/*#__PURE__*/ React.isValidElement(newElement)) throw new Error([
-				"Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.",
-				"A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.",
-				"https://base-ui.com/r/invalid-render-prop"
-			].join("\n"));
-		}
-		return /*#__PURE__*/ React.cloneElement(newElement, mergedProps);
-	}
-	if (element) {
-		if (typeof element === "string") return renderTag(element, props);
-	}
-	throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: Render element or function are not defined." : formatErrorMessage(8));
-}
-function warnIfRenderPropLooksLikeComponent(renderFn) {
-	const functionName = renderFn.name;
-	if (functionName.length === 0) return;
-	if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) return;
-	if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) return;
-	warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, "This usually means a React component was passed directly as `render={Component}`.", "Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.", "If this is an intentional render callback, rename it to start with a lowercase letter.", "Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.", "https://base-ui.com/r/invalid-render-prop");
-}
-function renderTag(Tag, props) {
-	if (Tag === "button") return /*#__PURE__*/ createElement("button", {
-		type: "button",
-		...props,
-		key: props.key
-	});
-	if (Tag === "img") return /*#__PURE__*/ createElement("img", {
-		alt: "",
-		...props,
-		key: props.key
-	});
-	return /*#__PURE__*/ React.createElement(Tag, props);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@floating-ui+utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
-function hasWindow() {
-	return typeof window !== "undefined";
-}
-function getWindow(node) {
-	var _node$ownerDocument;
-	return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-}
-function isHTMLElement(value) {
-	if (!hasWindow()) return false;
-	return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/internals/composite/root/CompositeRootContext.mjs
-const CompositeRootContext = /*#__PURE__*/ React.createContext(void 0);
-if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
-function useCompositeRootContext(optional = false) {
-	const context = React.useContext(CompositeRootContext);
-	if (context === void 0 && !optional) throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>." : formatErrorMessage(16));
-	return context;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/utils/useFocusableWhenDisabled.mjs
-function useFocusableWhenDisabled(parameters) {
-	const { focusableWhenDisabled, disabled, composite = false, tabIndex: tabIndexProp = 0, isNativeButton } = parameters;
-	const isFocusableComposite = composite && focusableWhenDisabled !== false;
-	const isNonFocusableComposite = composite && focusableWhenDisabled === false;
-	return { props: React.useMemo(() => {
-		const additionalProps = { onKeyDown(event) {
-			if (disabled && focusableWhenDisabled && event.key !== "Tab") event.preventDefault();
-		} };
-		if (!composite) {
-			additionalProps.tabIndex = tabIndexProp;
-			if (!isNativeButton && disabled) additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
-		}
-		if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) additionalProps["aria-disabled"] = disabled;
-		if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) additionalProps.disabled = disabled;
-		return additionalProps;
-	}, [
-		composite,
-		disabled,
-		focusableWhenDisabled,
-		isFocusableComposite,
-		isNonFocusableComposite,
-		isNativeButton,
-		tabIndexProp
-	]) };
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/internals/use-button/useButton.mjs
-function useButton(parameters = {}) {
-	const { disabled = false, focusableWhenDisabled, tabIndex = 0, native: isNativeButton = true, composite: compositeProp } = parameters;
-	const elementRef = React.useRef(null);
-	const compositeRootContext = useCompositeRootContext(true);
-	const isCompositeItem = compositeProp ?? compositeRootContext !== void 0;
-	const { props: focusableWhenDisabledProps } = useFocusableWhenDisabled({
-		focusableWhenDisabled,
-		disabled,
-		composite: isCompositeItem,
-		tabIndex,
-		isNativeButton
-	});
-	if (process.env.NODE_ENV !== "production") React.useEffect(() => {
-		if (!elementRef.current) return;
-		const isButtonTag = isButtonElement(elementRef.current);
-		if (isNativeButton) {
-			if (!isButtonTag) error(`A component that acts as a button expected a native <button> because the \`nativeButton\` prop is true. Rendering a non-<button> removes native button semantics, which can impact forms and accessibility. Use a real <button> in the \`render\` prop, or set \`nativeButton\` to \`false\`.${SafeReact.captureOwnerStack?.() || ""}`);
-		} else if (isButtonTag) error(`A component that acts as a button expected a non-<button> because the \`nativeButton\` prop is false. Rendering a <button> keeps native behavior while Base UI applies non-native attributes and handlers, which can add unintended extra attributes (such as \`role\` or \`aria-disabled\`). Use a non-<button> in the \`render\` prop, or set \`nativeButton\` to \`true\`.${SafeReact.captureOwnerStack?.() || ""}`);
-	}, [isNativeButton]);
-	const updateDisabled = React.useCallback(() => {
-		const element = elementRef.current;
-		if (!isButtonElement(element)) return;
-		if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === void 0 && element.disabled) element.disabled = false;
-	}, [
-		disabled,
-		focusableWhenDisabledProps.disabled,
-		isCompositeItem
-	]);
-	useIsoLayoutEffect(updateDisabled, [updateDisabled]);
-	return {
-		getButtonProps: React.useCallback((externalProps = {}) => {
-			const { onClick: externalOnClick, onMouseDown: externalOnMouseDown, onKeyUp: externalOnKeyUp, onKeyDown: externalOnKeyDown, onPointerDown: externalOnPointerDown, ...otherExternalProps } = externalProps;
-			return mergeProps({
-				onClick(event) {
-					if (disabled) {
-						event.preventDefault();
-						return;
-					}
-					externalOnClick?.(event);
-				},
-				onMouseDown(event) {
-					if (!disabled) externalOnMouseDown?.(event);
-				},
-				onKeyDown(event) {
-					if (disabled) return;
-					makeEventPreventable(event);
-					externalOnKeyDown?.(event);
-					if (event.baseUIHandlerPrevented) return;
-					const isCurrentTarget = event.target === event.currentTarget;
-					const currentTarget = event.currentTarget;
-					const isButton = isButtonElement(currentTarget);
-					const isLink = !isNativeButton && isValidLinkElement(currentTarget);
-					const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
-					const isEnterKey = event.key === "Enter";
-					const isSpaceKey = event.key === " ";
-					const role = currentTarget.getAttribute("role");
-					const isTextNavigationRole = role?.startsWith("menuitem") || role === "option" || role === "gridcell";
-					if (isCurrentTarget && isCompositeItem && isSpaceKey) {
-						if (event.defaultPrevented && isTextNavigationRole) return;
-						event.preventDefault();
-						if (isLink || isNativeButton && isButton) {
-							currentTarget.click();
-							event.preventBaseUIHandler();
-						} else if (shouldClick) {
-							externalOnClick?.(event);
-							event.preventBaseUIHandler();
-						}
-						return;
-					}
-					if (shouldClick) {
-						if (!isNativeButton && (isSpaceKey || isEnterKey)) event.preventDefault();
-						if (!isNativeButton && isEnterKey) externalOnClick?.(event);
-					}
-				},
-				onKeyUp(event) {
-					if (disabled) return;
-					makeEventPreventable(event);
-					externalOnKeyUp?.(event);
-					if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === " ") {
-						event.preventDefault();
-						return;
-					}
-					if (event.baseUIHandlerPrevented) return;
-					if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === " ") externalOnClick?.(event);
-				},
-				onPointerDown(event) {
-					if (disabled) {
-						event.preventDefault();
-						return;
-					}
-					externalOnPointerDown?.(event);
-				}
-			}, isNativeButton ? { type: "button" } : { role: "button" }, focusableWhenDisabledProps, otherExternalProps);
-		}, [
-			disabled,
-			focusableWhenDisabledProps,
-			isCompositeItem,
-			isNativeButton
-		]),
-		buttonRef: useStableCallback((element) => {
-			elementRef.current = element;
-			updateDisabled();
-		})
-	};
-}
-function isButtonElement(elem) {
-	return isHTMLElement(elem) && elem.tagName === "BUTTON";
-}
-function isValidLinkElement(elem) {
-	return Boolean(elem?.tagName === "A" && elem?.href);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/button/Button.mjs
-/**
-* A button component that can be used to trigger actions.
-* Renders a `<button>` element.
-*
-* Documentation: [Base UI Button](https://base-ui.com/react/components/button)
-*/
-const Button$2 = /*#__PURE__*/ React.forwardRef(function Button(componentProps, forwardedRef) {
-	const { render, className, disabled = false, focusableWhenDisabled = false, nativeButton = true, style, ...elementProps } = componentProps;
-	const { getButtonProps, buttonRef } = useButton({
-		disabled,
-		focusableWhenDisabled,
-		native: nativeButton
-	});
-	return useRenderElement("button", componentProps, {
-		state: { disabled },
-		ref: [forwardedRef, buttonRef],
-		props: [elementProps, getButtonProps]
-	});
-});
-if (process.env.NODE_ENV !== "production") Button$2.displayName = "Button";
-//#endregion
-//#region ../../../node_modules/.pnpm/@base-ui+react@1.6.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/use-render/useRender.mjs
-/**
-* Renders a Base UI element.
-*
-* @public
-*/
-function useRender(params) {
-	return useRenderElement(params.defaultTagName ?? "div", params, params);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/text/text.mjs
-var STYLE_HASH_ATTRIBUTE$3 = "data-wp-hash";
-function getRuntime$3() {
-	const globalScope = globalThis;
-	if (globalScope.__wpStyleRuntime) return globalScope.__wpStyleRuntime;
-	globalScope.__wpStyleRuntime = {
-		documents: /* @__PURE__ */ new Map(),
-		styles: /* @__PURE__ */ new Map(),
-		injectedStyles: /* @__PURE__ */ new WeakMap()
-	};
-	if (typeof document !== "undefined") registerDocument$3(document);
-	return globalScope.__wpStyleRuntime;
-}
-function documentContainsStyleHash$3(targetDocument, hash) {
-	if (!targetDocument.head) return false;
-	for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE$3}]`)) if (style.getAttribute(STYLE_HASH_ATTRIBUTE$3) === hash) return true;
-	return false;
-}
-function injectStyle$3(targetDocument, hash, css) {
-	if (!targetDocument.head) return;
-	const runtime = getRuntime$3();
-	let injectedStyles = runtime.injectedStyles.get(targetDocument);
-	if (!injectedStyles) {
-		injectedStyles = /* @__PURE__ */ new Set();
-		runtime.injectedStyles.set(targetDocument, injectedStyles);
-	}
-	if (injectedStyles.has(hash)) return;
-	if (documentContainsStyleHash$3(targetDocument, hash)) {
-		injectedStyles.add(hash);
-		return;
-	}
-	const style = targetDocument.createElement("style");
-	style.setAttribute(STYLE_HASH_ATTRIBUTE$3, hash);
-	style.appendChild(targetDocument.createTextNode(css));
-	targetDocument.head.appendChild(style);
-	injectedStyles.add(hash);
-}
-function registerDocument$3(targetDocument) {
-	const runtime = getRuntime$3();
-	runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
-	for (const [hash, css] of runtime.styles) injectStyle$3(targetDocument, hash, css);
-	return () => {
-		const count = runtime.documents.get(targetDocument);
-		if (count === void 0) return;
-		if (count <= 1) {
-			runtime.documents.delete(targetDocument);
-			return;
-		}
-		runtime.documents.set(targetDocument, count - 1);
-	};
-}
-function registerStyle$3(hash, css) {
-	const runtime = getRuntime$3();
-	runtime.styles.set(hash, css);
-	for (const targetDocument of runtime.documents.keys()) injectStyle$3(targetDocument, hash, css);
-}
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$3("0c5702ddca", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._83ed8a8da5dd50ea__text{margin:0}._14437cfb77831647__heading-2xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-p-line-height:var(--wpds-typography-line-height-2xl,40px);font-size:var(--wpds-typography-font-size-2xl,32px);line-height:var(--wpds-typography-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-md,24px)}.aa58f227716bcde2__heading-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-xl,32px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-lg,15px);line-height:var(--wpds-typography-line-height-md,24px)}._131101940be12424__body-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-size:var(--wpds-typography-font-size-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}}");
-var style_default$3 = {
-	"text": "_83ed8a8da5dd50ea__text",
-	"heading-2xl": "_14437cfb77831647__heading-2xl",
-	"heading-xl": "_3c78b7fa9b4072dd__heading-xl",
-	"heading-lg": "aa58f227716bcde2__heading-lg",
-	"heading-md": "fc4da56d8dfe52c4__heading-md",
-	"heading-sm": "a9b78c7c82e8dff7__heading-sm",
-	"body-xl": "_305ff559e52180d5__body-xl",
-	"body-lg": "ca1aa3fc2029e958__body-lg",
-	"body-md": "_131101940be12424__body-md",
-	"body-sm": "_0e8d87a42c1f75fa__body-sm"
-};
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$3("d390e935a7", "._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,transparent);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 transparent);color:var(--_gcd-input-color,var(--wpds-color-foreground-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,transparent);border-color:var(--_gcd-input-border-color-disabled,transparent);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid transparent)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid transparent);transition:var(--_gcd-a-transition,none)}");
-var global_css_defense_default$1 = {
-	"button": "_6defc79820e382c6__button",
-	"input": "d2cff2e5dea83bd1__input",
-	"textarea": "_547d86373d02e108__textarea",
-	"div": "_8c15fd0ed9f28ba4__div",
-	"p": "_43cec3e1eec1066d__p",
-	"heading": "e97669c6d9a38497__heading",
-	"a": "_2c0831b0499dbd6e__a"
-};
-var Text$1 = forwardRef$1(function Text2({ variant = "body-md", render, className, ...props }, ref) {
-	return useRender({
-		render,
-		defaultTagName: "span",
-		ref,
-		props: mergeProps(props, { className: clsx(style_default$3.text, global_css_defense_default$1.heading, global_css_defense_default$1.p, style_default$3[variant], className) })
-	});
-});
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+dom-ready@4.51.0/node_modules/@wordpress/dom-ready/build-module/index.mjs
-function domReady(callback) {
-	if (typeof document === "undefined") return;
-	if (document.readyState === "complete" || document.readyState === "interactive") {
-		callback();
-		return;
-	}
-	document.addEventListener("DOMContentLoaded", callback);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+a11y@4.51.0/node_modules/@wordpress/a11y/build-module/script/add-container.mjs
-function addContainer(ariaLive = "polite") {
-	const container = document.createElement("div");
-	container.id = `a11y-speak-${ariaLive}`;
-	container.className = "a11y-speak-region";
-	container.setAttribute("style", "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;word-break:normal !important;");
-	container.setAttribute("aria-live", ariaLive);
-	container.setAttribute("aria-relevant", "additions text");
-	container.setAttribute("aria-atomic", "true");
-	const { body } = document;
-	if (body) body.appendChild(container);
-	return container;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+a11y@4.51.0/node_modules/@wordpress/a11y/build-module/script/add-intro-text.mjs
-function addIntroText() {
-	const introText = document.createElement("p");
-	introText.id = "a11y-speak-intro-text";
-	introText.className = "a11y-speak-intro-text";
-	introText.textContent = __("Notifications");
-	introText.setAttribute("style", "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;word-break:normal !important;");
-	introText.setAttribute("hidden", "");
-	const { body } = document;
-	if (body) body.appendChild(introText);
-	return introText;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+a11y@4.51.0/node_modules/@wordpress/a11y/build-module/shared/clear.mjs
-function clear() {
-	const regions = document.getElementsByClassName("a11y-speak-region");
-	const introText = document.getElementById("a11y-speak-intro-text");
-	for (let i = 0; i < regions.length; i++) regions[i].textContent = "";
-	if (introText) introText.setAttribute("hidden", "hidden");
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+a11y@4.51.0/node_modules/@wordpress/a11y/build-module/shared/filter-message.mjs
-var previousMessage = "";
-function filterMessage(message) {
-	message = message.replace(/<[^<>]+>/g, " ");
-	if (previousMessage === message) message += "\xA0";
-	previousMessage = message;
-	return message;
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+a11y@4.51.0/node_modules/@wordpress/a11y/build-module/shared/index.mjs
-function speak(message, ariaLive) {
-	clear();
-	message = filterMessage(message);
-	const introText = document.getElementById("a11y-speak-intro-text");
-	const containerAssertive = document.getElementById("a11y-speak-assertive");
-	const containerPolite = document.getElementById("a11y-speak-polite");
-	if (containerAssertive && ariaLive === "assertive") containerAssertive.textContent = message;
-	else if (containerPolite) containerPolite.textContent = message;
-	if (introText) introText.removeAttribute("hidden");
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+a11y@4.51.0/node_modules/@wordpress/a11y/build-module/index.mjs
-function setup() {
-	const introText = document.getElementById("a11y-speak-intro-text");
-	const containerAssertive = document.getElementById("a11y-speak-assertive");
-	const containerPolite = document.getElementById("a11y-speak-polite");
-	if (introText === null) addIntroText();
-	if (containerAssertive === null) addContainer("assertive");
-	if (containerPolite === null) addContainer("polite");
-}
-domReady(setup);
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/button/button.mjs
-var STYLE_HASH_ATTRIBUTE$2 = "data-wp-hash";
-function getRuntime$2() {
-	const globalScope = globalThis;
-	if (globalScope.__wpStyleRuntime) return globalScope.__wpStyleRuntime;
-	globalScope.__wpStyleRuntime = {
-		documents: /* @__PURE__ */ new Map(),
-		styles: /* @__PURE__ */ new Map(),
-		injectedStyles: /* @__PURE__ */ new WeakMap()
-	};
-	if (typeof document !== "undefined") registerDocument$2(document);
-	return globalScope.__wpStyleRuntime;
-}
-function documentContainsStyleHash$2(targetDocument, hash) {
-	if (!targetDocument.head) return false;
-	for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE$2}]`)) if (style.getAttribute(STYLE_HASH_ATTRIBUTE$2) === hash) return true;
-	return false;
-}
-function injectStyle$2(targetDocument, hash, css) {
-	if (!targetDocument.head) return;
-	const runtime = getRuntime$2();
-	let injectedStyles = runtime.injectedStyles.get(targetDocument);
-	if (!injectedStyles) {
-		injectedStyles = /* @__PURE__ */ new Set();
-		runtime.injectedStyles.set(targetDocument, injectedStyles);
-	}
-	if (injectedStyles.has(hash)) return;
-	if (documentContainsStyleHash$2(targetDocument, hash)) {
-		injectedStyles.add(hash);
-		return;
-	}
-	const style = targetDocument.createElement("style");
-	style.setAttribute(STYLE_HASH_ATTRIBUTE$2, hash);
-	style.appendChild(targetDocument.createTextNode(css));
-	targetDocument.head.appendChild(style);
-	injectedStyles.add(hash);
-}
-function registerDocument$2(targetDocument) {
-	const runtime = getRuntime$2();
-	runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
-	for (const [hash, css] of runtime.styles) injectStyle$2(targetDocument, hash, css);
-	return () => {
-		const count = runtime.documents.get(targetDocument);
-		if (count === void 0) return;
-		if (count <= 1) {
-			runtime.documents.delete(targetDocument);
-			return;
-		}
-		runtime.documents.set(targetDocument, count - 1);
+		allSegmentsHidden: useMemo(() => {
+			return legendInteractive && visibleData.length === 0;
+		}, [legendInteractive, visibleData]),
+		legendData: useMemo(() => {
+			if (!legendInteractive || !chartId) return data;
+			const visibleDataMap = new Map(visibleData.map((d) => [d.label, d]));
+			return data.map((segment) => {
+				if (!isSeriesVisible(chartId, segment.label)) return segment;
+				return visibleDataMap.get(segment.label) || segment;
+			});
+		}, [
+			data,
+			visibleData,
+			legendInteractive,
+			chartId,
+			isSeriesVisible
+		])
 	};
+};
+//#endregion
+//#region src/hooks/use-prefers-reduced-motion.ts
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const getInitialState = () => !window.matchMedia(QUERY).matches;
+/**
+* Custom hook to determine if the user prefers reduced motion.
+* @return {boolean} A boolean indicating the user's preference for reduced motion.
+*/
+function usePrefersReducedMotion() {
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);
+	useEffect(() => {
+		const mediaQueryList = window.matchMedia(QUERY);
+		const listener = (event) => {
+			setPrefersReducedMotion(!event.matches);
+		};
+		mediaQueryList.addEventListener("change", listener);
+		return () => {
+			mediaQueryList.removeEventListener("change", listener);
+		};
+	}, []);
+	return prefersReducedMotion;
 }
-function registerStyle$2(hash, css) {
-	const runtime = getRuntime$2();
-	runtime.styles.set(hash, css);
-	for (const targetDocument of runtime.documents.keys()) injectStyle$2(targetDocument, hash, css);
-}
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$2("4c317b0736", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:var(--wpds-typography-font-weight-medium,499);--wp-ui-button-background-color:var(--wpds-color-background-interactive-brand-strong,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-brand-strong-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 93%,#000));--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-brand-strong-disabled,#e6e6e6);--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-brand-strong,#fff);--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-brand-strong-active,#fff);--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-brand-strong-disabled,#8d8d8d);--wp-ui-button-padding-block:var(--wpds-dimension-padding-xs,4px);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md,12px);--wp-ui-button-height:var(--wpds-dimension-size-lg,40px);--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-typography-font-size-md,13px);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-icon-margin:calc((var(--wpds-dimension-size-2xs, 16px) - var(--wpds-dimension-size-sm, 24px))/2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);--_gcd-button-font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);--_gcd-button-font-size:var(--wp-ui-button-font-size);--_gcd-button-font-weight:var(--wp-ui-button-font-weight);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm,2px);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm,8px);justify-content:center;line-height:var(--wpds-typography-line-height-sm,20px);max-width:100%;min-height:var(--wp-ui-button-height);min-width:var(--wp-ui-button-min-width);overflow-wrap:anywhere;padding-block:var(--wp-ui-button-padding-block);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-align:center;text-decoration:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([data-disabled]):is(:hover,:active,:focus){background-color:var(--wp-ui-button-background-color-active);border-color:var(--wp-ui-button-border-color-active);color:var(--wp-ui-button-foreground-color-active)}&[data-disabled]:not(._914b42f315c0e580__is-loading){background-color:var(--wp-ui-button-background-color-disabled);border-color:var(--wp-ui-button-border-color-disabled);color:var(--wp-ui-button-foreground-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid;border-block-end-color:transparent;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:transparent;border-radius:50%;box-sizing:border-box;content:\"\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}@media (forced-colors:active){border-block-end-style:none;border-bottom-color:ButtonText;border-inline-start-style:none;border-left-color:ButtonText;border-right-color:ButtonText;border-top-color:ButtonText}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-block:0;--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm,8px);--wp-ui-button-height:var(--wpds-dimension-size-sm,24px)}._9f6fc6553aeb36fe__icon{margin:var(--wp-ui-button-icon-margin)}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000));--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-brand-disabled,#8d8d8d)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-background-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-brand-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 85%,#000));--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-brand-disabled,#dbdbdb)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-background-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-brand-weak-disabled,#0000)}}.e722a8f96726aa99__is-neutral{&.ad0619a3217c6a5b__is-minimal[aria-pressed=true],&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-background-interactive-neutral-strong,#2d2d2d);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-neutral-strong-active,#1e1e1e);--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-neutral-strong-disabled,#e6e6e6);--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-neutral-strong,#f0f0f0);--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-neutral-strong-active,#f0f0f0);--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-neutral-strong-disabled,#8d8d8d)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal:not([aria-pressed=true]){--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-neutral,#1e1e1e);--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-neutral-active,#1e1e1e);--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-background-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-neutral-weak-active,#ededed);--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-neutral-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral,#8d8d8d);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active,#6e6e6e);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled,#dbdbdb)}&.ad0619a3217c6a5b__is-minimal:not([aria-pressed=true]){--wp-ui-button-background-color:var(--wpds-color-background-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-neutral-weak-active,#ededed);--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-neutral-weak-disabled,#0000)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:var(--wpds-dimension-size-md,32px)}._914b42f315c0e580__is-loading:not(.abbb272e2ce49bd6__is-unstyled){color:transparent;&:not([data-disabled]):is(:hover,:active,:focus){color:transparent}@media (forced-colors:active){color:ButtonFace}*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}}");
-var style_default$2 = {
-	"button": "_97b0fc33c028be1a__button",
-	"is-unstyled": "abbb272e2ce49bd6__is-unstyled",
-	"is-loading": "_914b42f315c0e580__is-loading",
-	"is-small": "_908205475f9f2a92__is-small",
-	"icon": "_9f6fc6553aeb36fe__icon",
-	"is-brand": "dd460c965226cc77__is-brand",
-	"is-outline": "_62d5a778b7b258ee__is-outline",
-	"is-minimal": "ad0619a3217c6a5b__is-minimal",
-	"is-neutral": "e722a8f96726aa99__is-neutral",
-	"is-solid": "b50b3358c5fb4d0b__is-solid",
-	"is-compact": "cf59cf1b69629838__is-compact",
-	"loading-animation": "_5a1d53da6f830c8d__loading-animation"
-};
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$2("10f3806643", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}}");
-var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$2("5f8e7aa0bc", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer utilities{._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active),:focus-visible .ecadb9e080e2dfa5__outset-ring--focus-parent-visible{--_gcd-a-outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));--_gcd-div-outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}}");
-var focus_default = {
-	"outset-ring--focus": "_08e8a2e44959f892__outset-ring--focus",
-	"outset-ring--focus-except-active": "e25b2bdd7aa21721__outset-ring--focus-except-active",
-	"outset-ring--focus-visible": "d0541bc9dd9dc7b6__outset-ring--focus-visible",
-	"outset-ring--focus-within": "cd83dfc2126a0846__outset-ring--focus-within",
-	"outset-ring--focus-within-except-active": "_970d04df7376df67__outset-ring--focus-within-except-active",
-	"outset-ring--focus-within-visible": "c5cb3ee4bddaa8e4__outset-ring--focus-within-visible",
-	"outset-ring--focus-parent-visible": "ecadb9e080e2dfa5__outset-ring--focus-parent-visible"
-};
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$2("d390e935a7", "._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,transparent);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 transparent);color:var(--_gcd-input-color,var(--wpds-color-foreground-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,transparent);border-color:var(--_gcd-input-border-color-disabled,transparent);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid transparent)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid transparent);transition:var(--_gcd-a-transition,none)}");
-var global_css_defense_default = {
-	"button": "_6defc79820e382c6__button",
-	"input": "d2cff2e5dea83bd1__input",
-	"textarea": "_547d86373d02e108__textarea",
-	"div": "_8c15fd0ed9f28ba4__div",
-	"p": "_43cec3e1eec1066d__p",
-	"heading": "e97669c6d9a38497__heading",
-	"a": "_2c0831b0499dbd6e__a"
-};
-var Button$1 = forwardRef$1(function Button2({ tone = "brand", variant = "solid", size = "default", className, focusableWhenDisabled = true, disabled, loading, loadingAnnouncement = __("Loading"), children, ...props }, ref) {
-	const mergedClassName = clsx(global_css_defense_default.button, resets_default["box-sizing"], focus_default["outset-ring--focus-except-active"], variant !== "unstyled" && style_default$2.button, style_default$2[`is-${tone}`], style_default$2[`is-${variant}`], style_default$2[`is-${size}`], loading && style_default$2["is-loading"], className);
-	useEffect$1(() => {
-		if (loading && loadingAnnouncement) speak(loadingAnnouncement);
-	}, [loading, loadingAnnouncement]);
-	return /* @__PURE__ */ jsx(Button$2, {
-		ref,
-		className: mergedClassName,
-		focusableWhenDisabled,
-		disabled: disabled ?? loading,
-		...props,
-		children
-	});
-});
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+primitives@4.51.0_@types+react@18.3.28_react@18.3.1/node_modules/@wordpress/primitives/build-module/svg/index.mjs
-var SVG = forwardRef$1(
-	/**
-	* @param {SVGProps}                          props isPressed indicates whether the SVG should appear as pressed.
-	*                                                  Other props will be passed through to svg component.
-	* @param {React.ForwardedRef<SVGSVGElement>} ref   The forwarded ref to the SVG element.
-	*
-	* @return {React.JSX.Element} Stop component
-	*/
-	({ className, isPressed, ...props }, ref) => {
-		return /* @__PURE__ */ jsx("svg", {
-			...props,
-			className: clsx(className, { "is-pressed": isPressed }) || void 0,
-			"aria-hidden": true,
-			focusable: false,
-			ref
+//#region src/providers/chart-context/hooks/use-chart-registration.ts
+const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, metadata }) => {
+	const { registerChart, unregisterChart } = useGlobalChartsContext();
+	const stableLegendItems = useDeepMemo(legendItems);
+	const memoizedMetadata = useMemo(() => metadata, [metadata]);
+	useEffect(() => {
+		if (isDataValid) registerChart(chartId, {
+			legendItems: stableLegendItems,
+			chartType,
+			metadata: memoizedMetadata
 		});
-	}
-);
-SVG.displayName = "SVG";
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/icon/icon.mjs
-var Icon$2 = forwardRef$1(function Icon2({ icon, size = 24, ...restProps }, ref) {
-	return /* @__PURE__ */ jsx(SVG, {
-		ref,
-		...icon.props,
-		...restProps,
-		width: size,
-		height: size
-	});
-});
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/button/icon.mjs
-var STYLE_HASH_ATTRIBUTE$1 = "data-wp-hash";
-function getRuntime$1() {
-	const globalScope = globalThis;
-	if (globalScope.__wpStyleRuntime) return globalScope.__wpStyleRuntime;
-	globalScope.__wpStyleRuntime = {
-		documents: /* @__PURE__ */ new Map(),
-		styles: /* @__PURE__ */ new Map(),
-		injectedStyles: /* @__PURE__ */ new WeakMap()
-	};
-	if (typeof document !== "undefined") registerDocument$1(document);
-	return globalScope.__wpStyleRuntime;
-}
-function documentContainsStyleHash$1(targetDocument, hash) {
-	if (!targetDocument.head) return false;
-	for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE$1}]`)) if (style.getAttribute(STYLE_HASH_ATTRIBUTE$1) === hash) return true;
-	return false;
-}
-function injectStyle$1(targetDocument, hash, css) {
-	if (!targetDocument.head) return;
-	const runtime = getRuntime$1();
-	let injectedStyles = runtime.injectedStyles.get(targetDocument);
-	if (!injectedStyles) {
-		injectedStyles = /* @__PURE__ */ new Set();
-		runtime.injectedStyles.set(targetDocument, injectedStyles);
-	}
-	if (injectedStyles.has(hash)) return;
-	if (documentContainsStyleHash$1(targetDocument, hash)) {
-		injectedStyles.add(hash);
-		return;
-	}
-	const style = targetDocument.createElement("style");
-	style.setAttribute(STYLE_HASH_ATTRIBUTE$1, hash);
-	style.appendChild(targetDocument.createTextNode(css));
-	targetDocument.head.appendChild(style);
-	injectedStyles.add(hash);
-}
-function registerDocument$1(targetDocument) {
-	const runtime = getRuntime$1();
-	runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
-	for (const [hash, css] of runtime.styles) injectStyle$1(targetDocument, hash, css);
-	return () => {
-		const count = runtime.documents.get(targetDocument);
-		if (count === void 0) return;
-		if (count <= 1) {
-			runtime.documents.delete(targetDocument);
-			return;
-		}
-		runtime.documents.set(targetDocument, count - 1);
-	};
-}
-function registerStyle$1(hash, css) {
-	const runtime = getRuntime$1();
-	runtime.styles.set(hash, css);
-	for (const targetDocument of runtime.documents.keys()) injectStyle$1(targetDocument, hash, css);
-}
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$1("4c317b0736", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:var(--wpds-typography-font-weight-medium,499);--wp-ui-button-background-color:var(--wpds-color-background-interactive-brand-strong,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-brand-strong-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 93%,#000));--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-brand-strong-disabled,#e6e6e6);--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-brand-strong,#fff);--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-brand-strong-active,#fff);--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-brand-strong-disabled,#8d8d8d);--wp-ui-button-padding-block:var(--wpds-dimension-padding-xs,4px);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md,12px);--wp-ui-button-height:var(--wpds-dimension-size-lg,40px);--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-typography-font-size-md,13px);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-icon-margin:calc((var(--wpds-dimension-size-2xs, 16px) - var(--wpds-dimension-size-sm, 24px))/2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);--_gcd-button-font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);--_gcd-button-font-size:var(--wp-ui-button-font-size);--_gcd-button-font-weight:var(--wp-ui-button-font-weight);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm,2px);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm,8px);justify-content:center;line-height:var(--wpds-typography-line-height-sm,20px);max-width:100%;min-height:var(--wp-ui-button-height);min-width:var(--wp-ui-button-min-width);overflow-wrap:anywhere;padding-block:var(--wp-ui-button-padding-block);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-align:center;text-decoration:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([data-disabled]):is(:hover,:active,:focus){background-color:var(--wp-ui-button-background-color-active);border-color:var(--wp-ui-button-border-color-active);color:var(--wp-ui-button-foreground-color-active)}&[data-disabled]:not(._914b42f315c0e580__is-loading){background-color:var(--wp-ui-button-background-color-disabled);border-color:var(--wp-ui-button-border-color-disabled);color:var(--wp-ui-button-foreground-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid;border-block-end-color:transparent;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:transparent;border-radius:50%;box-sizing:border-box;content:\"\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}@media (forced-colors:active){border-block-end-style:none;border-bottom-color:ButtonText;border-inline-start-style:none;border-left-color:ButtonText;border-right-color:ButtonText;border-top-color:ButtonText}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-block:0;--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm,8px);--wp-ui-button-height:var(--wpds-dimension-size-sm,24px)}._9f6fc6553aeb36fe__icon{margin:var(--wp-ui-button-icon-margin)}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000));--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-brand-disabled,#8d8d8d)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-background-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-brand-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 85%,#000));--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-brand-disabled,#dbdbdb)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-background-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-brand-weak-disabled,#0000)}}.e722a8f96726aa99__is-neutral{&.ad0619a3217c6a5b__is-minimal[aria-pressed=true],&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-background-interactive-neutral-strong,#2d2d2d);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-neutral-strong-active,#1e1e1e);--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-neutral-strong-disabled,#e6e6e6);--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-neutral-strong,#f0f0f0);--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-neutral-strong-active,#f0f0f0);--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-neutral-strong-disabled,#8d8d8d)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal:not([aria-pressed=true]){--wp-ui-button-foreground-color:var(--wpds-color-foreground-interactive-neutral,#1e1e1e);--wp-ui-button-foreground-color-active:var(--wpds-color-foreground-interactive-neutral-active,#1e1e1e);--wp-ui-button-foreground-color-disabled:var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-background-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-neutral-weak-active,#ededed);--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-neutral-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral,#8d8d8d);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active,#6e6e6e);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled,#dbdbdb)}&.ad0619a3217c6a5b__is-minimal:not([aria-pressed=true]){--wp-ui-button-background-color:var(--wpds-color-background-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-background-interactive-neutral-weak-active,#ededed);--wp-ui-button-background-color-disabled:var(--wpds-color-background-interactive-neutral-weak-disabled,#0000)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:var(--wpds-dimension-size-md,32px)}._914b42f315c0e580__is-loading:not(.abbb272e2ce49bd6__is-unstyled){color:transparent;&:not([data-disabled]):is(:hover,:active,:focus){color:transparent}@media (forced-colors:active){color:ButtonFace}*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}}");
-var style_default$1 = {
-	"button": "_97b0fc33c028be1a__button",
-	"is-unstyled": "abbb272e2ce49bd6__is-unstyled",
-	"is-loading": "_914b42f315c0e580__is-loading",
-	"is-small": "_908205475f9f2a92__is-small",
-	"icon": "_9f6fc6553aeb36fe__icon",
-	"is-brand": "dd460c965226cc77__is-brand",
-	"is-outline": "_62d5a778b7b258ee__is-outline",
-	"is-minimal": "ad0619a3217c6a5b__is-minimal",
-	"is-neutral": "e722a8f96726aa99__is-neutral",
-	"is-solid": "b50b3358c5fb4d0b__is-solid",
-	"is-compact": "cf59cf1b69629838__is-compact",
-	"loading-animation": "_5a1d53da6f830c8d__loading-animation"
-};
-var ButtonIcon = forwardRef$1(function ButtonIcon2({ className, icon, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Icon$2, {
-		ref,
-		icon,
-		className: clsx(style_default$1.icon, className),
-		size: 24,
-		...props
-	});
-});
+		return () => {
+			unregisterChart(chartId);
+		};
+	}, [
+		chartId,
+		stableLegendItems,
+		chartType,
+		memoizedMetadata,
+		isDataValid
+	]);
+};
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/button/index.mjs
-ButtonIcon.displayName = "Button.Icon";
-var Button = Object.assign(Button$1, { 
+//#region src/providers/chart-context/hooks/use-global-charts-theme.ts
 /**
-* An icon component specifically designed to work well when rendered inside
-* a `Button` component.
+* Hook to get the global chart theme from GlobalChartsProvider
+*
+* @return The global chart theme
 */
-Icon: ButtonIcon });
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
-var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
-function getRuntime() {
-	const globalScope = globalThis;
-	if (globalScope.__wpStyleRuntime) return globalScope.__wpStyleRuntime;
-	globalScope.__wpStyleRuntime = {
-		documents: /* @__PURE__ */ new Map(),
-		styles: /* @__PURE__ */ new Map(),
-		injectedStyles: /* @__PURE__ */ new WeakMap()
-	};
-	if (typeof document !== "undefined") registerDocument(document);
-	return globalScope.__wpStyleRuntime;
-}
-function documentContainsStyleHash(targetDocument, hash) {
-	if (!targetDocument.head) return false;
-	for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) return true;
-	return false;
-}
-function injectStyle(targetDocument, hash, css) {
-	if (!targetDocument.head) return;
-	const runtime = getRuntime();
-	let injectedStyles = runtime.injectedStyles.get(targetDocument);
-	if (!injectedStyles) {
-		injectedStyles = /* @__PURE__ */ new Set();
-		runtime.injectedStyles.set(targetDocument, injectedStyles);
-	}
-	if (injectedStyles.has(hash)) return;
-	if (documentContainsStyleHash(targetDocument, hash)) {
-		injectedStyles.add(hash);
-		return;
-	}
-	const style = targetDocument.createElement("style");
-	style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
-	style.appendChild(targetDocument.createTextNode(css));
-	targetDocument.head.appendChild(style);
-	injectedStyles.add(hash);
-}
-function registerDocument(targetDocument) {
-	const runtime = getRuntime();
-	runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
-	for (const [hash, css] of runtime.styles) injectStyle(targetDocument, hash, css);
-	return () => {
-		const count = runtime.documents.get(targetDocument);
-		if (count === void 0) return;
-		if (count <= 1) {
-			runtime.documents.delete(targetDocument);
-			return;
-		}
-		runtime.documents.set(targetDocument, count - 1);
-	};
-}
-function registerStyle(hash, css) {
-	const runtime = getRuntime();
-	runtime.styles.set(hash, css);
-	for (const targetDocument of runtime.documents.keys()) injectStyle(targetDocument, hash, css);
-}
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("32aba35fe1", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._19ce0419607e1896__stack{display:flex}}}");
-var style_default = { "stack": "_19ce0419607e1896__stack" };
-var gapTokens = {
-	xs: "var(--wpds-dimension-gap-xs, 4px)",
-	sm: "var(--wpds-dimension-gap-sm, 8px)",
-	md: "var(--wpds-dimension-gap-md, 12px)",
-	lg: "var(--wpds-dimension-gap-lg, 16px)",
-	xl: "var(--wpds-dimension-gap-xl, 24px)",
-	"2xl": "var(--wpds-dimension-gap-2xl, 32px)",
-	"3xl": "var(--wpds-dimension-gap-3xl, 40px)"
-};
-var Stack = forwardRef$1(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
-	return useRender({
-		render,
-		ref,
-		props: mergeProps(props, {
-			style: {
-				gap: gap && gapTokens[gap],
-				alignItems: align,
-				justifyContent: justify,
-				flexDirection: direction,
-				flexWrap: wrap
-			},
-			className: style_default.stack
-		})
-	});
-});
+const useGlobalChartsTheme = () => {
+	return useContext(GlobalChartsContext)?.theme ?? defaultTheme;
+};
 //#endregion
 //#region src/components/legend/utils/value-or-identity.ts
 /**
@@ -3486,30 +2262,130 @@ const getCurveType = (type, smoothing) => {
 		default: return curveLinear;
 	}
 };
-const formatYearTick = (timestamp) => {
-	return new Date(timestamp).toLocaleDateString(void 0, { year: "numeric" });
-};
-const formatDateTick$1 = (timestamp) => {
-	return new Date(timestamp).toLocaleDateString(void 0, {
-		month: "short",
-		day: "numeric"
-	});
+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 formatHourTick = (timestamp) => {
-	return new Date(timestamp).toLocaleTimeString(void 0, {
-		hour: "numeric",
-		hour12: true
-	});
+const formatYearTick = dateTimeFormat({ year: "numeric" });
+const formatDateTick = dateTimeFormat({
+	month: "short",
+	day: "numeric"
+});
+const formatHourTick = dateTimeFormat({
+	hour: "numeric",
+	hour12: true
+});
+const formatMonthTick = dateTimeFormat({ 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 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);
+	if (!bounds.length) return null;
+	return {
+		minX: Math.min(...bounds.map(([first]) => Number(first))),
+		maxX: Math.max(...bounds.map(([, last]) => Number(last)))
+	};
 };
-const getFormatter = (sortedData) => {
-	const minX = Math.min(...sortedData.map((datom) => datom.data.at(0)?.date));
-	const maxX = Math.max(...sortedData.map((datom) => datom.data.at(-1)?.date));
-	if (Math.abs(differenceInHours(maxX, minX)) <= 24) return formatHourTick;
-	if (Math.abs(differenceInYears(maxX, minX)) <= 1) return formatDateTick$1;
-	return formatYearTick;
+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) => {
+	const resolution = getBucketResolution(sortedData, tickResolution);
+	if (resolution === "year") return formatYearTick;
+	if (resolution === "month") return formatMonthOrYearTick;
+	const span = getSpan(sortedData);
+	if (!span) return formatDateTick;
+	const diffInHours = Math.abs(differenceInHours(span.maxX, span.minX));
+	if (resolution === "hour") {
+		if (diffInHours <= 24) return formatHourTick;
+		if (diffInHours <= 168) return formatDateOrHourTick;
+	}
+	return Math.abs(differenceInYears(span.maxX, span.minX)) <= 1 ? formatDateTick : formatYearTick;
+};
+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--) {
+		steps.add(Math.max(1, Math.floor((length - 1) / (count - 1))));
+		steps.add(Math.max(1, Math.ceil((length - 1) / (count - 1))));
+	}
+	if (anchorSpacing) {
+		for (let divisor = 1; divisor <= anchorSpacing; divisor++) if (anchorSpacing % divisor === 0) steps.add(anchorSpacing / divisor);
+		const minStep = Math.floor((length - 1) / Math.max(1, maxTicks)) + 1;
+		steps.add(Math.ceil(minStep / anchorSpacing) * anchorSpacing);
+	}
+	return steps;
+};
+/**
+* Tick values for a band time axis.
+*
+* 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.
+*
+* @param domain        - Band domain, 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 candidates = [];
+	const consider = (indices) => {
+		if (!indices.length || indices.length > maxTicks) return;
+		if (!indices.some((index, position) => position > 0 && domainLabels[index] === domainLabels[indices[position - 1]])) candidates.push(indices);
+	};
+	const anchorSpacing = anchorIndices.length > 1 ? anchorIndices[1] - anchorIndices[0] : null;
+	for (const step of getCandidateSteps(domain.length, maxTicks, anchorSpacing)) for (let offset = 0; offset < step; offset++) {
+		const indices = [];
+		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));
+	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;
+	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]);
 };
 const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
-	const xScale = scaleTime({ domain: [Math.min(...data.map((datom) => datom.data.at(0)?.date)), Math.max(...data.map((datom) => datom.data.at(-1)?.date))] });
+	const span = getSpan(data);
+	if (!span) return 1;
+	const xScale = scaleTime({ domain: [span.minX, span.maxX] });
 	const upperBound = Math.min(data[0]?.data.length || 3, Math.ceil(chartWidth / X_TICK_WIDTH));
 	let secondBestGuess = 1;
 	for (let numTicks = upperBound; numTicks > 1; --numTicks) {
@@ -3742,14 +2618,8 @@ function ZoomClip({ active, chartId, children }) {
 }
 /**
 * Visible icon-only reset control rendered as an HTML overlay on top of the
-* chart container, using the WPDS `Button`. The host should wrap its SVG in a
-* `position: relative` container so the button anchors correctly.
-*
-* `IconButton` would be the natural fit, but it renders a Base UI tooltip whose
-* CommonJS `use-sync-external-store` dependency makes Rolldown emit a dynamic
-* `require()` into `dist`, which throws on evaluation in WordPress Script
-* Module consumers. `Button` gives the same treatment without that dependency;
-* the tooltip is replaced by `aria-label` + `title`.
+* chart container, using the WPDS `IconButton`. The host should wrap its SVG in
+* a `position: relative` container so the button anchors correctly.
 *
 * @param props         - Props.
 * @param props.onClick - Click handler. Typically the `reset` from `useXZoom`.
@@ -3759,17 +2629,15 @@ function ZoomResetButton({ onClick }) {
 	const stopActivationKeys = useCallback((event) => {
 		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
 	}, []);
-	const label = __("Reset zoom", "jetpack-charts");
-	return /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ jsx(IconButton, {
 		className: x_zoom_module_default["x-zoom__reset"],
 		onKeyDown: stopActivationKeys,
-		"aria-label": label,
-		title: label,
+		label: __("Reset zoom", "jetpack-charts"),
 		variant: "outline",
 		tone: "neutral",
 		size: "small",
 		onClick,
-		children: /* @__PURE__ */ jsx(Button.Icon, { icon: /* @__PURE__ */ jsx("svg", {
+		icon: /* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 24 24",
 			fill: "none",
 			stroke: "currentColor",
@@ -3800,7 +2668,7 @@ function ZoomResetButton({ onClick }) {
 					})
 				]
 			})
-		}) })
+		})
 	});
 }
 //#endregion
@@ -4295,8 +3163,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const providerTheme = useGlobalChartsTheme();
-	const resolvedBackgroundColor = resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor;
 	const theme = useXYChartTheme(data);
+	const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
 	const chartId = useChartId(providedChartId);
 	const chartRef = useRef(null);
 	const [selectedIndex, setSelectedIndex] = useState(void 0);
@@ -4372,7 +3240,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const chartOptions = useMemo(() => {
-		const formatter = options?.axis?.x?.tickFormat || getFormatter(dataSorted);
+		const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
+		const formatter = xAxisOptions.tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
 				x: {
@@ -4380,7 +3249,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
 					tickFormat: formatter,
 					display: true,
-					...options?.axis?.x
+					...xAxisOptions
 				},
 				y: {
 					orientation: "left",
@@ -4846,7 +3715,8 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		rescaleYOnVisibility
 	]);
 	const chartOptions = useMemo(() => {
-		const formatter = options?.axis?.x?.tickFormat || getFormatter(dataSorted);
+		const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
+		const formatter = xAxisOptions.tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
 				x: {
@@ -4854,7 +3724,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
 					tickFormat: formatter,
 					display: true,
-					...options?.axis?.x
+					...xAxisOptions
 				},
 				y: {
 					orientation: "left",
@@ -5070,7 +3940,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor
+									strokeColor: theme.backgroundColor ?? providerTheme.backgroundColor
 								})] }),
 								/* @__PURE__ */ jsx(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -5230,11 +4100,73 @@ const TruncatedYTickComponent = createTruncatedTickComponent("y");
 const BASE_BAND_PADDING = .2;
 /** Inner padding of the category band scale (the base gap between ticks). */
 const BASE_BAND_PADDING_INNER = .1;
-const formatDateTick = (timestamp) => {
-	return new Date(timestamp).toLocaleDateString(void 0, {
-		month: "short",
+/** Ticks each axis carries unless the caller asks for a different count. */
+const DEFAULT_NUM_TICKS = 4;
+const ALL_RENDERED = () => true;
+const TOOLTIP_FORMAT_BY_RESOLUTION = {
+	hour: {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+		hour: "numeric",
+		hour12: true
+	},
+	day: {
+		year: "numeric",
+		month: "long",
 		day: "numeric"
-	});
+	},
+	month: {
+		year: "numeric",
+		month: "long"
+	},
+	year: { year: "numeric" }
+};
+/**
+* Labels one bar's bucket, at the bucket's own granularity — finer than the
+* ticks whenever the overall time span coarsens the axis.
+*
+* @param data           - Date-based series, already parsed and sorted by `useChartDataTransform`.
+* @param tickResolution - Caller-declared bucket resolution, when known.
+* @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 format = TOOLTIP_FORMAT_BY_RESOLUTION[getBucketResolution(data, tickResolution)] ?? TOOLTIP_FORMAT_BY_RESOLUTION.day;
+	return (timestamp) => new Date(timestamp).toLocaleString(void 0, format);
+};
+const identity = (label) => label;
+const byBucket = (format) => (bucket) => typeof bucket === "string" ? bucket : format(Number(bucket));
+const bucketAccessor = (d) => d?.label || d?.date;
+/**
+* The buckets the band axis can put a tick on.
+*
+* Built from the accessor visx is given, over the same series in the same order,
+* so that a tick value is a key the scale actually holds; `scaleBand` returns
+* `undefined` for one it does not, which parks the tick at the origin. Null
+* rather than a partial list when any bucket is labelled instead of dated.
+*
+* @param data             - Every series handed to the chart.
+* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+* @return Bucket dates in axis order, or null if the axis cannot be ticked by date.
+*/
+const getBandDomain = (data, isSeriesRendered) => {
+	const registry = {};
+	for (const series of data) {
+		if (series.options?.type === "comparison" || !isSeriesRendered(series)) continue;
+		registry[series.label] = series;
+	}
+	const byTimestamp = /* @__PURE__ */ new Map();
+	for (const key of Object.keys(registry)) for (const point of registry[key].data) {
+		const bucket = bucketAccessor(point);
+		if (!(bucket instanceof Date)) return null;
+		if (!byTimestamp.has(bucket.getTime())) byTimestamp.set(bucket.getTime(), bucket);
+	}
+	return byTimestamp.size ? [...byTimestamp.values()] : null;
 };
 /**
 * Get the group padding of a scale.
@@ -5248,12 +4180,26 @@ const getGroupPadding = (scale) => {
 /**
 * Returns the merged options for the bar chart, including axis and scale configuration based on the orientation.
 *
-* @param data       - The data to be displayed in the chart.
-* @param horizontal - Whether the chart is horizontal or vertical.
-* @param options    - The options for the chart.
+* @param data             - The data to be displayed in the chart.
+* @param horizontal       - Whether the chart is horizontal or vertical.
+* @param options          - The options for the chart.
+* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
 * @return The merged options for the chart.
 */
-function useBarChartOptions(data, horizontal, options = {}) {
+function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
+	const stableOptions = useDeepMemo(options);
+	const axisConfig = useMemo(() => {
+		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, ...xAxisOptions } = stableOptions.axis?.x || {};
+		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, ...yAxisOptions } = stableOptions.axis?.y || {};
+		return {
+			xLabelOverflow,
+			yLabelOverflow,
+			xAxisOptions,
+			yAxisOptions,
+			tickResolution: horizontal ? yTickResolution : xTickResolution
+		};
+	}, [stableOptions, horizontal]);
+	const { tickResolution } = axisConfig;
 	const defaultOptions = useMemo(() => {
 		const bandScale = {
 			type: "band",
@@ -5265,19 +4211,26 @@ function useBarChartOptions(data, horizontal, options = {}) {
 			nice: true,
 			zero: false
 		};
-		const labelFormatter = data?.[0]?.data?.[0]?.label ? (label) => label : formatDateTick;
+		const hasLabels = Boolean(data?.[0]?.data?.[0]?.label);
+		const timeTickFormatter = hasLabels ? null : getFormatter(data, tickResolution);
+		const labelFormatter = timeTickFormatter ? byBucket(timeTickFormatter) : identity;
+		const tooltipDatumFormatter = hasLabels ? labelFormatter : byBucket(getTooltipFormatter(data, tickResolution));
 		const valueFormatter = formatNumberCompact;
-		const labelAccessor = (d) => d?.label || d?.date;
+		const bandDomain = timeTickFormatter ? getBandDomain(data, isSeriesRendered) : null;
 		const valueAccessor = (d) => {
 			const enhancedPoint = d;
 			return enhancedPoint?.visualValue !== void 0 ? enhancedPoint.visualValue : d?.value;
 		};
 		return {
+			timeAxis: bandDomain && timeTickFormatter && {
+				domain: bandDomain,
+				tickFormatter: timeTickFormatter
+			},
 			vertical: {
 				xTickFormat: labelFormatter,
 				yTickFormat: valueFormatter,
-				tooltipLabelFormatter: labelFormatter,
-				xAccessor: labelAccessor,
+				tooltipLabelFormatter: tooltipDatumFormatter,
+				xAccessor: bucketAccessor,
 				yAccessor: valueAccessor,
 				gridVisibility: "x",
 				xScale: bandScale,
@@ -5286,20 +4239,24 @@ function useBarChartOptions(data, horizontal, options = {}) {
 			horizontal: {
 				xTickFormat: valueFormatter,
 				yTickFormat: labelFormatter,
-				tooltipLabelFormatter: labelFormatter,
+				tooltipLabelFormatter: tooltipDatumFormatter,
 				xAccessor: valueAccessor,
-				yAccessor: labelAccessor,
+				yAccessor: bucketAccessor,
 				gridVisibility: "y",
 				xScale: linearScale,
 				yScale: bandScale
 			}
 		};
-	}, [data]);
+	}, [
+		data,
+		tickResolution,
+		isSeriesRendered
+	]);
 	return useMemo(() => {
 		const { xTickFormat, yTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
 		let valueScaleDomainOverride = {};
 		if (data.some((s) => s.options?.type === "comparison")) {
-			if (!(!horizontal ? options.yScale?.domain : options.xScale?.domain)) {
+			if (!(!horizontal ? stableOptions.yScale?.domain : stableOptions.xScale?.domain)) {
 				const allValues = [];
 				data.forEach((series) => {
 					series.data.forEach((d) => {
@@ -5313,17 +4270,20 @@ function useBarChartOptions(data, horizontal, options = {}) {
 		}
 		const xScale = {
 			...baseXScale,
-			...options.xScale || {},
+			...stableOptions.xScale || {},
 			...horizontal ? valueScaleDomainOverride : {}
 		};
 		const yScale = {
 			...baseYScale,
-			...options.yScale || {},
+			...stableOptions.yScale || {},
 			...!horizontal ? valueScaleDomainOverride : {}
 		};
-		const providedToolTipLabelFormatter = horizontal ? options.axis?.y?.tickFormat : options.axis?.x?.tickFormat;
-		const { labelOverflow: xLabelOverflow, ...xAxisOptions } = options.axis?.x || {};
-		const { labelOverflow: yLabelOverflow, ...yAxisOptions } = options.axis?.y || {};
+		const { xLabelOverflow, yLabelOverflow, xAxisOptions, yAxisOptions } = axisConfig;
+		const providedToolTipLabelFormatter = horizontal ? yAxisOptions.tickFormat : xAxisOptions.tickFormat;
+		const { timeAxis } = defaultOptions;
+		const dateAxisOptions = horizontal ? yAxisOptions : xAxisOptions;
+		const bandTickValues = timeAxis && !dateAxisOptions.tickFormat ? getBandTickValues(timeAxis.domain, timeAxis.tickFormatter, dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS) : null;
+		const dateAxisTickValues = bandTickValues ? { tickValues: bandTickValues } : {};
 		return {
 			gridVisibility,
 			xScale,
@@ -5335,15 +4295,17 @@ function useBarChartOptions(data, horizontal, options = {}) {
 			axis: {
 				x: {
 					orientation: "bottom",
-					numTicks: 4,
+					numTicks: DEFAULT_NUM_TICKS,
 					tickFormat: xTickFormat,
+					...horizontal ? {} : dateAxisTickValues,
 					...xLabelOverflow === "ellipsis" ? { tickComponent: TruncatedXTickComponent } : {},
 					...xAxisOptions
 				},
 				y: {
 					orientation: "left",
-					numTicks: 4,
+					numTicks: DEFAULT_NUM_TICKS,
 					tickFormat: yTickFormat,
+					...horizontal ? dateAxisTickValues : {},
 					...yLabelOverflow === "ellipsis" ? { tickComponent: TruncatedYTickComponent } : {},
 					...yAxisOptions
 				}
@@ -5353,7 +4315,8 @@ function useBarChartOptions(data, horizontal, options = {}) {
 		};
 	}, [
 		defaultOptions,
-		options,
+		axisConfig,
+		stableOptions,
 		horizontal,
 		data
 	]);
@@ -5515,7 +4478,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		valueAxisLength: horizontal ? width : height
 	});
 	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
-	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const isSeriesRendered = useCallback((series) => !chartId || !legendInteractive || isSeriesVisible(chartId, series.label), [
+		chartId,
+		legendInteractive,
+		isSeriesVisible
+	]);
+	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = useRef(null);
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "BarChart");
@@ -5534,24 +4503,11 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartRef,
 		totalPoints: Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length
 	});
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const seriesWithVisibility = useMemo(() => {
-		if (!chartId || !legendInteractive) return dataWithVisibleZeros.map((series, index) => ({
-			series,
-			index,
-			isVisible: true
-		}));
-		return dataWithVisibleZeros.map((series, index) => ({
-			series,
-			index,
-			isVisible: isSeriesVisible(chartId, series.label)
-		}));
-	}, [
-		dataWithVisibleZeros,
-		chartId,
-		isSeriesVisible,
-		legendInteractive
-	]);
+	const seriesWithVisibility = useMemo(() => dataWithVisibleZeros.map((series, index) => ({
+		series,
+		index,
+		isVisible: isSeriesRendered(series)
+	})), [dataWithVisibleZeros, isSeriesRendered]);
 	const allSeriesHidden = useMemo(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
@@ -7067,6 +6023,73 @@ 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
+/*!
+* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+*
+* Copyright (c) 2014-2017, Jon Schlinkert.
+* Released under the MIT License.
+*/
+function isObject(o) {
+	return Object.prototype.toString.call(o) === "[object Object]";
+}
+function isPlainObject(o) {
+	var ctor, prot;
+	if (isObject(o) === false) return false;
+	ctor = o.constructor;
+	if (ctor === void 0) return true;
+	prot = ctor.prototype;
+	if (isObject(prot) === false) return false;
+	if (prot.hasOwnProperty("isPrototypeOf") === false) return false;
+	return true;
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/lower-case@2.0.2/node_modules/lower-case/dist.es2015/index.js
+/**
+* Lower case as a function.
+*/
+function lowerCase(str) {
+	return str.toLowerCase();
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist.es2015/index.js
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+/**
+* Normalize the string into something other libraries can manipulate easier.
+*/
+function noCase(input, options) {
+	if (options === void 0) options = {};
+	var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+	var result = replace$1(replace$1(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+	var start = 0;
+	var end = result.length;
+	while (result.charAt(start) === "\0") start++;
+	while (result.charAt(end - 1) === "\0") end--;
+	return result.slice(start, end).split("\0").map(transform).join(delimiter);
+}
+/**
+* Replace `re` in the input string with the replacement value.
+*/
+function replace$1(input, re, value) {
+	if (re instanceof RegExp) return input.replace(re, value);
+	return re.reduce(function(input, re) {
+		return input.replace(re, value);
+	}, input);
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist.es2015/index.js
+function dotCase(input, options) {
+	if (options === void 0) options = {};
+	return noCase(input, __assign({ delimiter: "." }, options));
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist.es2015/index.js
+function paramCase(input, options) {
+	if (options === void 0) options = {};
+	return dotCase(input, __assign({ delimiter: "-" }, options));
+}
+//#endregion
 //#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
@@ -8931,10 +7954,10 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	};
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.51.0/node_modules/@wordpress/warning/build-module/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.52.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.51.0/node_modules/@wordpress/warning/build-module/index.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.52.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }