@automattic/charts 1.10.3 → 1.12.0

package/dist/index.cjs

@@ -725,9 +725,9 @@ const getChartColor = (index, colorCache) => {
 * Default theme configuration
 */
 const defaultTheme = {
-	backgroundColor: "var(--wpds-color-background-surface-neutral-strong, #fff)",
+	backgroundColor: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))",
 	labelBackgroundColor: "transparent",
-	labelTextColor: "#FFFFFF",
+	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
 	colors: [
 		"#98C8DF",
 		"#006DAB",
@@ -736,59 +736,59 @@ const defaultTheme = {
 		"#FF8C8F"
 	],
 	gridStyles: {
-		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
+		stroke: "var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
 		strokeWidth: 1
 	},
 	tickLength: 4,
 	gridColor: "",
 	gridColorDark: "",
 	xTickLineStyles: {
-		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
+		stroke: "var(--a8c-charts-color-tick, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
 		strokeWidth: 1
 	},
 	xAxisLineStyles: {
-		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
+		stroke: "var(--a8c-charts-color-axis, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
 		strokeWidth: 1
 	},
 	legend: {
-		labelStyles: { color: "var(--wpds-color-foreground-content-neutral, #1e1e1e)" },
+		labelStyles: { color: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
 	svgLabelSmall: {
-		fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
+		fill: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
 		fontFamily: "inherit"
 	},
 	svgLabelBig: { fontFamily: "inherit" },
 	annotationStyles: {
 		label: {
-			anchorLineStroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
-			backgroundFill: "var(--wpds-color-background-surface-neutral-strong, #fff)"
+			anchorLineStroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
+			backgroundFill: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))"
 		},
-		connector: { stroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)" },
+		connector: { stroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
 		circleSubject: {
 			stroke: "transparent",
-			fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
+			fill: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
 			radius: 5
 		}
 	},
-	geoChart: { featureFillColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)" },
+	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))" },
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
 		labelSpacing: "xs",
 		deltaColors: [
-			"var(--wpds-color-foreground-content-error-weak, #cc1818)",
-			"var(--wpds-color-foreground-content-neutral-weak, #707070)",
-			"var(--wpds-color-foreground-content-success-weak, #008030)"
+			"var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))",
+			"var(--a8c-charts-color-trend-neutral, var(--wpds-color-foreground-content-neutral-weak, #707070))",
+			"var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))"
 		]
 	},
 	conversionFunnelChart: {
-		backgroundColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)",
-		positiveChangeColor: "var(--wpds-color-foreground-content-success-weak, #008030)",
-		negativeChangeColor: "var(--wpds-color-foreground-content-error-weak, #cc1818)"
+		backgroundColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))",
+		positiveChangeColor: "var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))",
+		negativeChangeColor: "var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))"
 	},
 	lineChart: { lineStyles: { comparison: {
 		strokeDasharray: "4 4",
@@ -1816,6 +1816,30 @@ var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => {
 	tslib_1.__exportStar(require_dist$1(), exports);
 }));
 //#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$1 };
+//#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 = {};
 /**
@@ -1831,6 +1855,44 @@ function useRefWithInit(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$1.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();
@@ -2270,6 +2332,190 @@ function renderTag(Tag, props) {
 	return /*#__PURE__*/ react$1.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$1.createContext(void 0);
+if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
+function useCompositeRootContext(optional = false) {
+	const context = react$1.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$1.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$1.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$1.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$1.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$1.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$1.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.
@@ -2281,8 +2527,8 @@ function useRender(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$1 = "data-wp-hash";
-function getRuntime$1() {
+var STYLE_HASH_ATTRIBUTE$3 = "data-wp-hash";
+function getRuntime$3() {
 	const globalScope = globalThis;
 	if (globalScope.__wpStyleRuntime) return globalScope.__wpStyleRuntime;
 	globalScope.__wpStyleRuntime = {
@@ -2290,37 +2536,37 @@ function getRuntime$1() {
 		styles: /* @__PURE__ */ new Map(),
 		injectedStyles: /* @__PURE__ */ new WeakMap()
 	};
-	if (typeof document !== "undefined") registerDocument$1(document);
+	if (typeof document !== "undefined") registerDocument$3(document);
 	return globalScope.__wpStyleRuntime;
 }
-function documentContainsStyleHash$1(targetDocument, hash) {
+function documentContainsStyleHash$3(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;
+	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$1(targetDocument, hash, css) {
+function injectStyle$3(targetDocument, hash, css) {
 	if (!targetDocument.head) return;
-	const runtime = getRuntime$1();
+	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$1(targetDocument, hash)) {
+	if (documentContainsStyleHash$3(targetDocument, hash)) {
 		injectedStyles.add(hash);
 		return;
 	}
 	const style = targetDocument.createElement("style");
-	style.setAttribute(STYLE_HASH_ATTRIBUTE$1, hash);
+	style.setAttribute(STYLE_HASH_ATTRIBUTE$3, hash);
 	style.appendChild(targetDocument.createTextNode(css));
 	targetDocument.head.appendChild(style);
 	injectedStyles.add(hash);
 }
-function registerDocument$1(targetDocument) {
-	const runtime = getRuntime$1();
+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$1(targetDocument, hash, css);
+	for (const [hash, css] of runtime.styles) injectStyle$3(targetDocument, hash, css);
 	return () => {
 		const count = runtime.documents.get(targetDocument);
 		if (count === void 0) return;
@@ -2331,13 +2577,13 @@ function registerDocument$1(targetDocument) {
 		runtime.documents.set(targetDocument, count - 1);
 	};
 }
-function registerStyle$1(hash, css) {
-	const runtime = getRuntime$1();
+function registerStyle$3(hash, css) {
+	const runtime = getRuntime$3();
 	runtime.styles.set(hash, css);
-	for (const targetDocument of runtime.documents.keys()) injectStyle$1(targetDocument, hash, css);
+	for (const targetDocument of runtime.documents.keys()) injectStyle$3(targetDocument, hash, css);
 }
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$1("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$1 = {
+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",
@@ -2349,8 +2595,8 @@ var style_default$1 = {
 	"body-md": "_131101940be12424__body-md",
 	"body-sm": "_0e8d87a42c1f75fa__body-sm"
 };
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$1("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 = {
+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",
@@ -2364,10 +2610,317 @@ var Text$2 = (0, react$1.forwardRef)(function Text2({ variant = "body-md", rende
 		render,
 		defaultTagName: "span",
 		ref,
-		props: mergeProps(props, { className: (0, clsx.default)(style_default$1.text, global_css_defense_default.heading, global_css_defense_default.p, style_default$1[variant], className) })
+		props: mergeProps(props, { className: (0, clsx.default)(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 = (0, _wordpress_i18n.__)("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);
+	};
+}
+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 = (0, react$1.forwardRef)(function Button2({ tone = "brand", variant = "solid", size = "default", className, focusableWhenDisabled = true, disabled, loading, loadingAnnouncement = (0, _wordpress_i18n.__)("Loading"), children, ...props }, ref) {
+	const mergedClassName = (0, clsx.default)(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);
+	(0, react$1.useEffect)(() => {
+		if (loading && loadingAnnouncement) speak(loadingAnnouncement);
+	}, [loading, loadingAnnouncement]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react$1.forwardRef)(
+	/**
+	* @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__ */ (0, react_jsx_runtime.jsx)("svg", {
+			...props,
+			className: (0, clsx.default)(className, { "is-pressed": isPressed }) || void 0,
+			"aria-hidden": true,
+			focusable: false,
+			ref
+		});
+	}
+);
+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 = (0, react$1.forwardRef)(function Icon2({ icon, size = 24, ...restProps }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react$1.forwardRef)(function ButtonIcon2({ className, icon, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$2, {
+		ref,
+		icon,
+		className: (0, clsx.default)(style_default$1.icon, className),
+		size: 24,
+		...props
+	});
+});
+//#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, { 
+/**
+* An icon component specifically designed to work well when rendered inside
+* a `Button` component.
+*/
+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() {
@@ -2532,8 +3085,13 @@ const BaseLegend = (0, react$1.forwardRef)(({ items, className, orientation = "h
 	});
 	const domain = legendScale.domain();
 	const getShapeStyle = (0, react$1.useCallback)(({ index }) => items[index]?.shapeStyle, [items]);
-	const handleLegendClick = (0, react$1.useCallback)((seriesLabel) => {
-		if (interactive && chartId && context) context.toggleSeriesVisibility(chartId, seriesLabel);
+	const handleLegendClick = (0, react$1.useCallback)((seriesLabels) => {
+		if (interactive && chartId && context) {
+			const representativeVisible = context.isSeriesVisible(chartId, seriesLabels[0]);
+			seriesLabels.forEach((label) => {
+				if (context.isSeriesVisible(chartId, label) === representativeVisible) context.toggleSeriesVisibility(chartId, label);
+			});
+		}
 	}, [
 		interactive,
 		chartId,
@@ -2547,16 +3105,16 @@ const BaseLegend = (0, react$1.forwardRef)(({ items, className, orientation = "h
 		chartId,
 		context
 	]);
-	const createClickHandler = (0, react$1.useCallback)((labelText) => {
+	const createClickHandler = (0, react$1.useCallback)((seriesLabels) => {
 		if (!interactive) return;
-		return () => handleLegendClick(labelText);
+		return () => handleLegendClick(seriesLabels);
 	}, [interactive, handleLegendClick]);
-	const createKeyDownHandler = (0, react$1.useCallback)((labelText) => {
+	const createKeyDownHandler = (0, react$1.useCallback)((seriesLabels) => {
 		if (!interactive) return;
 		return (event) => {
 			if (event.key === "Enter" || event.key === " ") {
 				event.preventDefault();
-				handleLegendClick(labelText);
+				handleLegendClick(seriesLabels);
 			}
 		};
 	}, [interactive, handleLegendClick]);
@@ -2576,10 +3134,11 @@ const BaseLegend = (0, react$1.forwardRef)(({ items, className, orientation = "h
 			className: (0, clsx.default)(base_legend_module_default.legend, className),
 			style: theme.legend?.containerStyles,
 			children: labels.map((label, i) => {
-				const visible = isSeriesVisible(label.text);
-				const handleClick = createClickHandler(label.text);
-				const handleKeyDown = createKeyDownHandler(label.text);
 				const matchedItem = items[i];
+				const seriesLabels = matchedItem?.seriesLabels?.length ? matchedItem.seriesLabels : [label.text];
+				const visible = isSeriesVisible(seriesLabels[0]);
+				const handleClick = createClickHandler(seriesLabels);
+				const handleKeyDown = createKeyDownHandler(seriesLabels);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_legend.LegendItem, {
 					className: (0, clsx.default)("visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
 					margin: itemMargin,
@@ -2707,31 +3266,88 @@ function applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSi
 	return baseItem;
 }
 /**
-* Processes SeriesData into legend items
+* Buckets series by their `group`, preserving first-appearance order. Series with no group — or a
+* group value unique to them — end up in a bucket of their own. Whether a multi-series bucket then
+* collapses to a single legend item is decided by the caller: with `collapseGroups` on, every
+* multi-member bucket collapses, and the comparison pattern only decides which member represents it.
+* @param seriesData - The series data to group
+* @return Ordered groups, each holding its member series with their original indices
+*/
+function groupSeriesForLegend(seriesData) {
+	const groups = [];
+	const groupIndexByKey = /* @__PURE__ */ new Map();
+	seriesData.forEach((series, index) => {
+		const member = {
+			series,
+			index
+		};
+		const key = series.group;
+		if (key === void 0) {
+			groups.push([member]);
+			return;
+		}
+		const existing = groupIndexByKey.get(key);
+		if (existing === void 0) {
+			groupIndexByKey.set(key, groups.length);
+			groups.push([member]);
+		} else groups[existing].push(member);
+	});
+	return groups;
+}
+/**
+* Builds a single legend item from a representative series, tagging it with the series it controls
+* @param member           - The series (with its original index) that provides the label/colour
+* @param seriesLabels     - Every series label this item toggles (grouped) or just its own
+* @param getElementStyles - Function to get element styles
+* @param showValues       - Whether to show values in legend
+* @param withGlyph        - Whether to include glyph rendering
+* @param glyphSize        - Size of the glyph
+* @param renderGlyph      - Component to render the glyph
+* @param legendShape      - The shape type for legend items (string literal or React component)
+* @return The processed legend item
+*/
+function buildSeriesLegendItem(member, seriesLabels, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape) {
+	const { color, glyph, shapeStyles } = getElementStyles({
+		data: member.series,
+		index: member.index,
+		legendShape
+	});
+	return applyGlyphToLegendItem({
+		label: member.series.label,
+		value: showValues ? member.series.data?.length?.toString() || "0" : "",
+		color,
+		shapeStyle: shapeStyles,
+		seriesLabels
+	}, withGlyph, glyph, renderGlyph, glyphSize);
+}
+/**
+* Processes SeriesData into legend items. Every series keeps its own legend entry unless
+* `collapseGroups` is set, in which case series sharing a `group` collapse to one item labelled by
+* the group's primary (its first non-comparison member).
 * @param seriesData       - The series data to process
 * @param getElementStyles - Function to get element styles
 * @param showValues       - Whether to show values in legend
 * @param withGlyph        - Whether to include glyph rendering
 * @param glyphSize        - Size of the glyph
+* @param collapseGroups   - Whether series sharing a group collapse to a single item
 * @param renderGlyph      - Component to render the glyph
 * @param legendShape      - The shape type for legend items (string literal or React component)
 * @return Array of processed legend items
 */
-function processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape) {
-	const mapper = (series, index) => {
-		const { color, glyph, shapeStyles } = getElementStyles({
-			data: series,
-			index,
-			legendShape
-		});
-		return applyGlyphToLegendItem({
-			label: series.label,
-			value: showValues ? series.data?.length?.toString() || "0" : "",
-			color,
-			shapeStyle: shapeStyles
-		}, withGlyph, glyph, renderGlyph, glyphSize);
-	};
-	return seriesData.map(mapper);
+function processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape) {
+	const buildItem = (member, seriesLabels) => buildSeriesLegendItem(member, seriesLabels, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape);
+	if (!collapseGroups) return seriesData.map((series, index) => buildItem({
+		series,
+		index
+	}, [series.label]));
+	return groupSeriesForLegend(seriesData).flatMap((members) => {
+		if (members.length > 1) {
+			const primary = members.find(({ series }) => series.options?.type !== "comparison") ?? members[0];
+			const seriesLabels = [primary.series.label, ...members.filter((member) => member !== primary).map(({ series }) => series.label)];
+			return [buildItem(primary, seriesLabels)];
+		}
+		return members.map((member) => buildItem(member, [member.series.label]));
+	});
 }
 /**
 * Processes point data into legend items
@@ -2769,11 +3385,11 @@ function processPointData(pointData, getElementStyles, showValues, legendValueDi
 * @return Array of legend items ready for display
 */
 function useChartLegendItems(data, options = {}, legendShape) {
-	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, renderGlyph } = options;
+	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, renderGlyph } = options;
 	const { getElementStyles } = useGlobalChartsContext();
 	return (0, react$1.useMemo)(() => {
 		if (!data || !Array.isArray(data) || data.length === 0) return [];
-		if ("data" in data[0]) return processSeriesData(data, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape);
+		if ("data" in data[0]) return processSeriesData(data, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
 		return processPointData(data, getElementStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape);
 	}, [
 		data,
@@ -2782,6 +3398,7 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		legendValueDisplay,
 		withGlyph,
 		glyphSize,
+		collapseGroups,
 		renderGlyph,
 		legendShape
 	]);
@@ -3288,14 +3905,13 @@ function withResponsive(WrappedComponent) {
 	};
 }
 //#endregion
-//#region src/charts/private/x-zoom.module.scss
+//#region src/charts/private/x-zoom/x-zoom.module.scss
 var x_zoom_module_default = {
-	"x-zoom__reset": "a8ccharts-y6bXNq-x-zoom__reset",
-	"x-zoom__reset-icon": "a8ccharts-y6bXNq-x-zoom__reset-icon",
-	"x-zoom__selection": "a8ccharts-y6bXNq-x-zoom__selection"
+	"x-zoom__reset": "a8ccharts-ur9dWW-x-zoom__reset",
+	"x-zoom__selection": "a8ccharts-ur9dWW-x-zoom__selection"
 };
 //#endregion
-//#region src/charts/private/x-zoom.tsx
+//#region src/charts/private/x-zoom/x-zoom.tsx
 const MIN_DRAG_PIXELS = 6;
 /**
 * Drag-to-zoom state + pointer handlers for an XY chart. Designed to be
@@ -3424,24 +4040,35 @@ function ZoomClip({ active, chartId, children }) {
 	})] });
 }
 /**
-* Visible icon-only reset button rendered as an HTML overlay on top of
-* the chart container. The host should wrap its SVG in a `position: relative`
-* container so the button anchors correctly.
+* 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`.
 *
 * @param props         - Props.
 * @param props.onClick - Click handler. Typically the `reset` from `useXZoom`.
 * @return JSX element.
 */
 function ZoomResetButton({ onClick }) {
+	const stopActivationKeys = (0, react$1.useCallback)((event) => {
+		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+	}, []);
 	const label = (0, _wordpress_i18n.__)("Reset zoom", "jetpack-charts");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		className: x_zoom_module_default["x-zoom__reset"],
-		onClick,
+		onKeyDown: stopActivationKeys,
 		"aria-label": label,
 		title: label,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-			className: x_zoom_module_default["x-zoom__reset-icon"],
+		variant: "outline",
+		tone: "neutral",
+		size: "small",
+		onClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button.Icon, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 			viewBox: "0 0 24 24",
 			fill: "none",
 			stroke: "currentColor",
@@ -3450,26 +4077,29 @@ function ZoomResetButton({ onClick }) {
 			strokeLinejoin: "round",
 			"aria-hidden": "true",
 			focusable: "false",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-					cx: "10",
-					cy: "10",
-					r: "6"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-					x1: "15",
-					y1: "15",
-					x2: "20",
-					y2: "20"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-					x1: "7",
-					y1: "10",
-					x2: "13",
-					y2: "10"
-				})
-			]
-		})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				transform: "translate(2.4 2.4) scale(0.8)",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "10",
+						cy: "10",
+						r: "6"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+						x1: "15",
+						y1: "15",
+						x2: "20",
+						y2: "20"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+						x1: "7",
+						y1: "10",
+						x2: "13",
+						y2: "10"
+					})
+				]
+			})
+		}) })
 	});
 }
 //#endregion
@@ -3958,8 +4588,9 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, rescaleYOnVisibilityChange = true, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
+	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const providerTheme = useGlobalChartsTheme();
@@ -4014,6 +4645,23 @@ const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 	const allSeriesHidden = (0, react$1.useMemo)(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
+	const stableYDomain = (0, react$1.useMemo)(() => {
+		if (!legendInteractive || rescaleYOnVisibilityChange) return;
+		let min = Infinity;
+		let max = -Infinity;
+		for (const series of dataSorted) for (const point of series.data ?? []) {
+			const value = point?.value;
+			if (typeof value === "number" && Number.isFinite(value)) {
+				min = Math.min(min, value);
+				max = Math.max(max, value);
+			}
+		}
+		return min < max ? [min, max] : void 0;
+	}, [
+		legendInteractive,
+		rescaleYOnVisibilityChange,
+		dataSorted
+	]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -4050,6 +4698,7 @@ const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 				type: "linear",
 				nice: true,
 				zero: false,
+				...stableYDomain ? { domain: stableYDomain } : {},
 				...options?.yScale
 			}
 		};
@@ -4057,7 +4706,8 @@ const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 		options,
 		dataSorted,
 		width,
-		zoom.domain
+		zoom.domain,
+		stableYDomain
 	]);
 	const tooltipRenderGlyph = (0, react$1.useMemo)(() => {
 		return (props) => {
@@ -4086,10 +4736,12 @@ const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 		legendItems: useChartLegendItems(dataSorted, (0, react$1.useMemo)(() => ({
 			withGlyph: withLegendGlyph,
 			glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
+			collapseGroups: legendCollapseGroups,
 			renderGlyph
 		}), [
 			withLegendGlyph,
 			glyphStyle?.radius,
+			legendCollapseGroups,
 			renderGlyph
 		]), legendShape),
 		chartType: "line",
@@ -4179,12 +4831,12 @@ const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 							onPointerOut,
 							pointerEventsDataKey: "nearest",
 							children: [
-								gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+								!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
 									columns: false,
 									numTicks: 4
 								}),
-								chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
-								chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y }),
+								!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
+								!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y }),
 								allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -4392,10 +5044,11 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnLegendToggle = true, children, gridVisibility, gap = "md" }, ref) => {
+const AreaChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange, rescaleYOnLegendToggle, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
 	const legendPosition = legend.position ?? "bottom";
+	const rescaleYOnVisibility = rescaleYOnVisibilityChange ?? rescaleYOnLegendToggle ?? true;
 	const providerTheme = useGlobalChartsTheme();
 	const theme = useXYChartTheme(data);
 	const chartId = useChartId(providedChartId);
@@ -4454,7 +5107,7 @@ const AreaChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const fixedYDomain = (0, react$1.useMemo)(() => {
-		if (rescaleYOnLegendToggle || !legendInteractive || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
+		if (rescaleYOnVisibility || !legendInteractive || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
 		if (stacked) {
 			const numPoints = Math.max(...dataSorted.map((s) => s.data.length));
 			let posMax = 0;
@@ -4489,7 +5142,7 @@ const AreaChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 		stacked,
 		stackOffset,
 		legendInteractive,
-		rescaleYOnLegendToggle
+		rescaleYOnVisibility
 	]);
 	const chartOptions = (0, react$1.useMemo)(() => {
 		const formatter = options?.axis?.x?.tickFormat || getFormatter(dataSorted);
@@ -4538,8 +5191,9 @@ const AreaChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 		chartId,
 		legendItems: useChartLegendItems(dataSorted, (0, react$1.useMemo)(() => ({
 			withGlyph: false,
-			glyphSize: 0
-		}), []), legendShape),
+			glyphSize: 0,
+			collapseGroups: legend.collapseGroups ?? false
+		}), [legend.collapseGroups]), legendShape),
 		chartType: "area",
 		isDataValid,
 		metadata: (0, react$1.useMemo)(() => ({
@@ -4676,12 +5330,12 @@ const AreaChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 							onPointerOut,
 							pointerEventsDataKey: "nearest",
 							children: [
-								gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+								!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
 									columns: false,
 									numTicks: 4
 								}),
-								chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
-								chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y }),
+								!allSeriesHidden && chartOptions.axis.x.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
+								!allSeriesHidden && chartOptions.axis.y.display && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y }),
 								allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEmptyState, {
 									x: width / 2,
 									y: chartHeight / 2,
@@ -5150,6 +5804,7 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 });
 const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, animation, children, gap = "md" }) => {
 	const legendInteractive = legend.interactive ?? false;
+	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const horizontal = orientation === "horizontal";
 	const chartId = useChartId(providedChartId);
 	const theme = useXYChartTheme(data);
@@ -5158,7 +5813,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		enabled: showZeroValues,
 		valueAxisLength: horizontal ? width : height
 	});
-	const legendItems = useChartLegendItems(dataSorted);
+	const legendItems = useChartLegendItems(dataSorted, (0, react$1.useMemo)(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = (0, react$1.useRef)(null);
@@ -5450,7 +6105,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 							horizontal,
 							pointerEventsDataKey: "nearest",
 							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
 									columns: gridVisibility.includes("y"),
 									rows: gridVisibility.includes("x"),
 									numTicks: 4
@@ -5490,8 +6145,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 										colorAccessor: getBarBackground(index)
 									}, seriesData?.label))
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y }),
+								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y })] }),
 								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
@@ -6427,9 +7081,9 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 						"aria-hidden": "true",
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
-							"--heatmap-primary": primaryColorHex,
-							"--heatmap-bg": backgroundColor,
-							"--intensity": intensity
+							"--a8c-charts-color-heatmap-primary": primaryColorHex,
+							"--a8c-charts-color-heatmap-background": backgroundColor,
+							"--a8c-charts-heatmap-cell-intensity": intensity
 						}
 					}, index);
 				})
@@ -6587,17 +7241,17 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 			children: (0, _wordpress_i18n.__)("No data available", "jetpack-charts")
 		})
 	});
-	const columnTrack = compact ? "var(--heatmap-cell-size)" : `minmax(${minCellWidth ?? 0}px, ${maxCellWidth ? `${maxCellWidth}px` : "1fr"})`;
-	const rowTrack = compact ? "var(--heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
+	const columnTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellWidth ?? 0}px, ${maxCellWidth ? `${maxCellWidth}px` : "1fr"})`;
+	const rowTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
 	const gridStyle = {
-		"--heatmap-primary": primaryColorHex,
-		"--heatmap-bg": theme.backgroundColor,
+		"--a8c-charts-color-heatmap-primary": primaryColorHex,
+		"--a8c-charts-color-heatmap-background": theme.backgroundColor,
 		gridTemplateColumns: `auto repeat(${columns}, ${columnTrack})`,
 		gridTemplateRows: `auto repeat(${rows}, ${rowTrack})`
 	};
 	if (compact) {
-		gridStyle["--heatmap-cell-gap"] = `${compactCellGap}px`;
-		gridStyle["--heatmap-cell-size"] = `${compactCellSize}px`;
+		gridStyle["--a8c-charts-dimension-heatmap-cell-gap"] = `${compactCellGap}px`;
+		gridStyle["--a8c-charts-dimension-heatmap-cell-size"] = `${compactCellSize}px`;
 	}
 	const activeDescendant = selectedIndex !== void 0 ? `${chartId}-cell-${Math.floor(selectedIndex / rows)}-${selectedIndex % rows}` : void 0;
 	const heightCapped = !compact && Boolean(maxCellHeight);
@@ -6674,7 +7328,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 										[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: present && cellHasLightText(normalized),
 										[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selectedIndex === flatIndex
 									}),
-									style: present ? { "--intensity": normalized } : void 0,
+									style: present ? { "--a8c-charts-heatmap-cell-intensity": normalized } : void 0,
 									onMouseMove: handleCellMouseMove,
 									onMouseLeave: handleCellMouseLeave,
 									children: drawValues && present && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -9007,6 +9661,90 @@ function UnconnectedGrid(props, forwardedRef) {
 }
 var component_default = contextConnect(UnconnectedGrid, "Grid");
 //#endregion
+//#region src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts
+/**
+* Fractional layout rounding can put a row's bottom a hair past the container's
+* without any visible clipping. Allow that much slack before hiding a row.
+*
+* Exported so tests and stories assert against the real tolerance rather than
+* restating it.
+*/
+const SUBPIXEL_TOLERANCE = .5;
+/**
+* Counts how many leading rows fit inside the content container.
+*
+* Rows are read from the DOM rather than derived from constants: row height
+* depends on the theme's row gap, label wrapping, and whatever a caller renders
+* as a label, so any restated number would drift.
+*
+* Every row is a direct grid child marked with `data-row-index`; interactive rows
+* use a button wrapper and non-interactive rows use a div wrapper.
+*
+* @param enabled  - Whether to measure at all. When false every row fits.
+* @param rowCount - Total number of rows rendered.
+* @param data     - Rendered row data, whose geometry may change without changing the count.
+* @return Ref for the content container and the number of leading rows that fit.
+*/
+function useFittedRowCount(enabled, rowCount, data) {
+	const contentRef = (0, react$1.useRef)(null);
+	const [fittedCount, setFittedCount] = (0, react$1.useState)(rowCount);
+	const [isMeasurable, setIsMeasurable] = (0, react$1.useState)(true);
+	const measure = (0, react$1.useCallback)(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		content.scrollTop = 0;
+		const rows = content.querySelectorAll(":scope > [data-leaderboard-grid] > [data-row-index]");
+		const rowBottoms = [];
+		rows.forEach((row) => {
+			const index = Number(row.getAttribute("data-row-index"));
+			if (!Number.isInteger(index) || index < 0 || index >= rowCount) return;
+			const { bottom } = row.getBoundingClientRect();
+			rowBottoms[index] = Math.max(rowBottoms[index] ?? -Infinity, bottom);
+		});
+		if (rowBottoms.length === 0) {
+			setIsMeasurable(false);
+			setFittedCount(rowCount);
+			return;
+		}
+		setIsMeasurable(true);
+		const contentBottom = content.getBoundingClientRect().bottom + SUBPIXEL_TOLERANCE;
+		let fits = 0;
+		while (fits < rowBottoms.length && rowBottoms[fits] <= contentBottom) fits++;
+		setFittedCount((current) => current === fits ? current : fits);
+	}, [rowCount]);
+	(0, react$1.useLayoutEffect)(() => {
+		if (!enabled) {
+			setFittedCount(rowCount);
+			return;
+		}
+		measure();
+	}, [
+		enabled,
+		rowCount,
+		data,
+		measure
+	]);
+	(0, react$1.useLayoutEffect)(() => {
+		if (!enabled) return;
+		const content = contentRef.current;
+		if (!content) return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(content);
+		const grid = content.querySelector(":scope > [data-leaderboard-grid]");
+		if (grid) observer.observe(grid);
+		return () => observer.disconnect();
+	}, [
+		enabled,
+		rowCount,
+		measure
+	]);
+	return {
+		contentRef,
+		fittedCount: enabled ? fittedCount : rowCount,
+		isMeasurable
+	};
+}
+//#endregion
 //#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts
 /**
 * Hook to create legend items from leaderboard data
@@ -9067,11 +9805,13 @@ var leaderboard_chart_module_default = {
 	"deltaPlaceholder": "a8ccharts-GovfoW-deltaPlaceholder",
 	"deltaValue": "a8ccharts-GovfoW-deltaValue",
 	"emptyState": "a8ccharts-GovfoW-emptyState",
+	"fitEmptyState": "a8ccharts-GovfoW-fitEmptyState",
 	"interactiveRow": "a8ccharts-GovfoW-interactiveRow",
 	"is-overlay": "a8ccharts-GovfoW-is-overlay",
 	"label": "a8ccharts-GovfoW-label",
 	"leaderboardChart": "a8ccharts-GovfoW-leaderboardChart",
 	"leaderboardChart__content": "a8ccharts-GovfoW-leaderboardChart__content",
+	"leaderboardChart__content--fit": "a8ccharts-GovfoW-leaderboardChart__content--fit",
 	"leaderboardChart--loading": "a8ccharts-GovfoW-leaderboardChart--loading",
 	"leaderboardChart--responsive": "a8ccharts-GovfoW-leaderboardChart--responsive",
 	"overlap": "a8ccharts-GovfoW-overlap",
@@ -9116,8 +9856,9 @@ const defaultDeltaFormatter = (value) => {
 * @param share - The bar's share of the row width, as a percentage.
 * @return A CSS width value.
 */
-const getBarWidth = (share) => `calc(${share}% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${share} / 100)`;
-const hasComparisonValue = (entry) => entry.previousValue != null && entry.previousShare != null && entry.delta != null;
+const getBarWidth = (share) => `calc(${share}% - var(--a8c-charts-dimension-leaderboard-bar-hover-inset, 0px) * ${share} / 100)`;
+const hasPreviousValue = (entry) => entry.previousValue != null && entry.previousShare != null;
+const hasDeltaValue = (entry) => hasPreviousValue(entry) && entry.delta != null;
 const BarLabel = ({ label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$2, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -9135,7 +9876,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 					backgroundColor: primaryColor
 				}
 			}),
-			showComparisonBar && hasComparisonValue(entry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: (0, clsx.default)(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
 				style: {
 					width: getBarWidth(entry.previousShare),
@@ -9161,6 +9902,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.valueFormatter   - Custom formatter for values
 * @param props.deltaFormatter   - Custom formatter for delta values
 * @param props.loading          - Whether the chart is in loading state
+* @param props.fitRows          - Whether to show only the rows that fit the chart's height
 * @param props.animation        - Whether the chart should animate on load
 * @param props.showLegend       - Whether to show legend
 * @param props.legend           - Legend configuration (orientation, position, alignment, shape, shapeStyles, interactive)
@@ -9171,7 +9913,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.style            - Custom styling for the chart container
 * @return JSX element representing the leaderboard chart
 */
-const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, showLegend = false, legend = {}, legendLabels, gap = "md", className, style, children }) => {
+const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", className, style, children }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
@@ -9240,6 +9982,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		}), [withComparison, withOverlayLabel])
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
+	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
+	const shouldFitRows = fitRows && isMeasurable;
 	if (!data || data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
@@ -9292,20 +10036,27 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 				height: propHeight || void 0
 			},
 			trailingContent: nonLegendChildren,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: leaderboard_chart_module_default.leaderboardChart__content,
-				children: allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: contentRef,
+				className: (0, clsx.default)(leaderboard_chart_module_default.leaderboardChart__content, { [leaderboard_chart_module_default["leaderboardChart__content--fit"]]: shouldFitRows }),
+				children: [shouldFitRows && fittedCount === 0 && !allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(leaderboard_chart_module_default.emptyState, leaderboard_chart_module_default.fitEmptyState),
+					children: (0, _wordpress_i18n.__)("Not enough space to display data", "jetpack-charts")
+				}), allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: leaderboard_chart_module_default.emptyState,
 					children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default, {
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap,
 					columnGap,
-					children: data.map((entry) => {
+					"data-leaderboard-grid": true,
+					children: data.map((entry, rowIndex) => {
+						const rowStyle = shouldFitRows && rowIndex >= fittedCount ? { visibility: "hidden" } : void 0;
 						const showComparisonColumn = withComparison && isComparisonVisible;
-						const hasDeltaValue = hasComparisonValue(entry);
-						const showComparisonValue = showComparisonColumn && hasDeltaValue;
-						const showComparisonPlaceholder = showComparisonColumn && !hasDeltaValue;
+						const hasPreviousPeriodValue = hasPreviousValue(entry);
+						const hasDelta = hasDeltaValue(entry);
+						const showComparisonValue = showComparisonColumn && hasDelta;
+						const showComparisonPlaceholder = showComparisonColumn && !hasDelta;
 						const colorIndex = showComparisonValue ? Math.sign(entry.delta) + 1 : 1;
 						const deltaColor = deltaColors[colorIndex];
 						const rowCells = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stack, {
@@ -9337,16 +10088,18 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 									style: { color: deltaColor },
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										"aria-hidden": "true",
-										children: "-"
+										children: "—"
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$1, {
 										as: "span",
-										children: (0, _wordpress_i18n.__)("No comparison data", "jetpack-charts")
+										children: hasPreviousPeriodValue ? (0, _wordpress_i18n.__)("Percentage change unavailable", "jetpack-charts") : (0, _wordpress_i18n.__)("No comparison data", "jetpack-charts")
 									})]
 								})
 							]
 						})] });
 						if (entry.onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
+							"data-row-index": rowIndex,
+							style: rowStyle,
 							className: (0, clsx.default)(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
 							onClick: entry.onClick,
 							"aria-label": entry.ariaLabel,
@@ -9357,11 +10110,13 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							})]
 						}, entry.id);
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-row-index": rowIndex,
+							style: rowStyle,
 							className: leaderboard_chart_module_default.row,
 							children: rowCells
 						}, entry.id);
 					})
-				})
+				})]
 			})
 		})
 	});