@automattic/charts 4.9.0 → 4.11.0

package/dist/index.js

@@ -28,7 +28,6 @@ import { Chart } from "react-google-charts";
 import DOMPurify from "dompurify";
 import { __assign } from "tslib";
 import "@babel/runtime/helpers/esm/extends";
-import "@babel/runtime/helpers/extends";
 import { Icon, chevronRight } from "@wordpress/icons";
 import { arc, pie } from "@visx/shape";
 //#region \0rolldown/runtime.js
@@ -38,7 +37,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod, mod.exports), cb = null), mod.exports);
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
 		key = keys[i];
@@ -669,16 +668,17 @@ function readCustomProperty(varName, styles) {
 }
 //#endregion
 //#region src/utils/resolve-font-size.ts
+const toFontSize = (size) => Number.isFinite(size) && size >= 0 ? size : void 0;
 /**
 * Resolve a theme `fontSize` value into a plain number suitable for
 * canvas-based measurement (e.g. `getStringWidth`).
 *
 * Accepts:
-* - A number — returned as-is
+* - A finite, non-negative number — returned as-is
 * - A pixel string like `"12px"` — parsed and returned as a number
 *
-* Returns `undefined` for any other input (missing value, NaN, or
-* relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
+* Returns `undefined` for any other input (missing value, a non-finite or
+* negative size, or relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
 * their own default. Relative units are intentionally rejected because
 * we cannot resolve them to absolute pixels here without a parent
 * computed style, and silently returning the unitless prefix
@@ -688,12 +688,10 @@ function readCustomProperty(varName, styles) {
 * @return Parsed numeric font size in pixels, or `undefined` when unresolvable
 */
 const resolveFontSize = (val) => {
-	if (typeof val === "number") return isNaN(val) ? void 0 : val;
+	if (typeof val === "number") return toFontSize(val);
 	if (typeof val === "string") {
-		const match = val.trim().match(/^(-?\d+\.?\d*|-?\.\d+)(px)?$/);
-		if (!match) return;
-		const parsed = parseFloat(match[1]);
-		return isNaN(parsed) ? void 0 : parsed;
+		const match = val.trim().match(/^\+?((?:\d*\.)?\d+)(px)?$/);
+		return match ? toFontSize(parseFloat(match[1])) : void 0;
 	}
 };
 //#endregion
@@ -1572,6 +1570,20 @@ const useChartScopeElement = () => useContext(ChartScopeContext);
 const useStandaloneScopeClass = () => useContext(GlobalChartsContext) ? void 0 : CHART_SCOPE_CLASS;
 //#endregion
 //#region src/hooks/use-xychart-theme.ts
+const STARTS_LIKE_A_NUMBER = /^[+-]?[\d.]/;
+const NON_NEGATIVE_CSS_NUMBER = /^\+?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+|%)?$/i;
+const isRenderableFontSize = (fontSize) => {
+	if (typeof fontSize === "number") return resolveFontSize(fontSize) !== void 0;
+	const value = fontSize.trim();
+	if (!STARTS_LIKE_A_NUMBER.test(value)) return true;
+	return NON_NEGATIVE_CSS_NUMBER.test(value) && Number.isFinite(parseFloat(value));
+};
+const withRenderableFontSize = (style) => {
+	if (style?.fontSize === void 0 || isRenderableFontSize(style.fontSize)) return style;
+	const rest = { ...style };
+	delete rest.fontSize;
+	return rest;
+};
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
 	const scopeElement = useChartScopeElement();
@@ -1602,9 +1614,10 @@ const useXYChartTheme = (data) => {
 			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
 			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
 			svgLabelSmall: {
-				...theme.svgLabelSmall,
+				...withRenderableFontSize(theme.svgLabelSmall),
 				fill: CATALOG_POINTERS.labelAxis
-			}
+			},
+			svgLabelBig: withRenderableFontSize(theme.svgLabelBig)
 		});
 	}, [
 		theme,
@@ -2079,6 +2092,7 @@ function valueOrIdentityString(_) {
 //#region src/components/legend/private/base-legend.module.scss
 var base_legend_module_default = {
 	"legend": "a8ccharts-04TogW-legend",
+	"legend--horizontal": "a8ccharts-04TogW-legend--horizontal",
 	"legend-item": "a8ccharts-04TogW-legend-item",
 	"legend-item--inactive": "a8ccharts-04TogW-legend-item--inactive",
 	"legend-item--interactive": "a8ccharts-04TogW-legend-item--interactive",
@@ -2117,7 +2131,7 @@ const getLegendItemAriaLabel = (text, value, visible, interactive) => {
 	if (visible) return;
 	return sprintf(_x("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
 };
-const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
+const BaseLegend = forwardRef(({ items: allItems, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
 	const { margin: itemMargin = "0", flexDirection: itemDirection = "row" } = itemStyles ?? {};
 	const { justifyContent: labelJustifyContent = "flex-start", flex: labelFlex = "0 0 auto", margin: labelMargin = "0 4px", maxWidth, textOverflow = "wrap" } = labelStyles ?? {};
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
@@ -2125,6 +2139,16 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 	const context = useContext(GlobalChartsContext);
 	const chartInstanceContext = useContext(ChartInstanceContext);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const isSeriesVisible = useCallback((seriesLabel) => {
+		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
+		if (!chartId || !context) return true;
+		return context.isSeriesVisible(chartId, seriesLabel);
+	}, [
+		chartId,
+		chartInstanceContext,
+		context
+	]);
+	const items = useMemo(() => allItems.filter((item) => item.interactive !== false || !item.describesSeries || isSeriesVisible(item.describesSeries)), [allItems, isSeriesVisible]);
 	const domain = items.map((item) => item.label);
 	const legendScale = scaleOrdinal({
 		domain,
@@ -2147,15 +2171,6 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 		chartId,
 		context
 	]);
-	const isSeriesVisible = useCallback((seriesLabel) => {
-		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
-		if (!chartId || !context) return true;
-		return context.isSeriesVisible(chartId, seriesLabel);
-	}, [
-		chartId,
-		chartInstanceContext,
-		context
-	]);
 	const createClickHandler = useCallback((seriesLabels, itemInteractive) => {
 		if (!itemInteractive) return;
 		return () => handleLegendClick(seriesLabels);
@@ -2179,12 +2194,12 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 		children: (labels) => /* @__PURE__ */ jsx(Stack, {
 			ref,
 			direction: orientation === "vertical" ? "column" : "row",
-			gap: orientation === "vertical" ? "sm" : "lg",
+			gap: orientation === "vertical" ? "sm" : void 0,
 			align: orientation === "vertical" ? flexAlignment : void 0,
 			justify: orientation === "horizontal" ? flexAlignment : void 0,
 			wrap: orientation === "horizontal" ? "wrap" : void 0,
 			role: interactive ? void 0 : "list",
-			className: clsx(standaloneScopeClass, base_legend_module_default.legend, className),
+			className: clsx(standaloneScopeClass, base_legend_module_default.legend, orientation === "horizontal" && base_legend_module_default["legend--horizontal"], className),
 			style: theme.legend?.containerStyles,
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
@@ -2430,6 +2445,34 @@ function buildComparisonLegendItem(seriesData, items, label, getElementStyles, l
 	};
 }
 /**
+* Builds one static item per comparison series folded into another series' item, named after
+* that item and styled like the comparison series itself.
+* @param seriesData       - The series data to search for comparison series
+* @param items            - The legend items already built from the series
+* @param formatLabel      - Names an item after the label of the item it was folded into
+* @param getElementStyles - Function to get element styles
+* @param legendShape      - The shape type for legend items (string literal or React component)
+* @return The legend items, in series order
+*/
+function buildPerSeriesComparisonItems(seriesData, items, formatLabel, getElementStyles, legendShape) {
+	return seriesData.flatMap((series, index) => {
+		const owner = items.find((item) => item.seriesLabels?.includes(series.label));
+		if (series.options?.type !== "comparison" || !owner || owner.seriesLabels?.[0] === series.label) return [];
+		const { color, shapeStyles } = getElementStyles({
+			data: series,
+			index,
+			legendShape
+		});
+		return [{
+			label: formatLabel(owner.label),
+			color,
+			shapeStyle: shapeStyles,
+			interactive: false,
+			describesSeries: series.label
+		}];
+	});
+}
+/**
 * Processes point data into legend items
 * @param pointData          - The point data to process
 * @param getElementStyles   - Function to get element styles
@@ -2465,13 +2508,14 @@ 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, collapseGroups = false, comparisonItem = false, renderGlyph } = options;
+	const { showValues = false, legendValueDisplay = "percentage", withGlyph = false, glyphSize = 8, collapseGroups = false, comparisonItem = false, comparisonSeriesItems, renderGlyph } = options;
 	const { getElementStyles } = useGlobalChartsContext();
 	return useMemo(() => {
 		if (!data || !Array.isArray(data) || data.length === 0) return [];
 		if ("data" in data[0]) {
 			const seriesData = data;
 			const items = processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, collapseGroups, renderGlyph, legendShape);
+			if (comparisonSeriesItems) return [...items, ...buildPerSeriesComparisonItems(seriesData, items, comparisonSeriesItems, getElementStyles, legendShape)];
 			const comparison = comparisonItem ? buildComparisonLegendItem(seriesData, items, typeof comparisonItem === "string" ? comparisonItem : __("Comparison period", "jetpack-charts"), getElementStyles, legendShape) : null;
 			return comparison ? [...items, comparison] : items;
 		}
@@ -2485,6 +2529,7 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		glyphSize,
 		collapseGroups,
 		comparisonItem,
+		comparisonSeriesItems,
 		renderGlyph,
 		legendShape
 	]);
@@ -2579,9 +2624,6 @@ const BaseTooltip = ({ data, top, left, component: Component = LabelValueContent
 		children: content
 	});
 };
-//#endregion
-//#region src/components/tooltip/private/bounded-tooltip.tsx
-const DEFAULT_OFFSET = 10;
 const POINTER_HEIGHT = 6;
 const clamp = (position, min, max, size) => Math.min(Math.max(position, min), Math.max(min, max - size));
 const isClipping = (element) => {
@@ -2678,7 +2720,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 * @param props.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
 * @return The tooltip box.
 */
-const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style, unstyled = false, className, children, placement = "auto", ...rest }) => {
+const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = 10, offsetTop = 10, style, unstyled = false, className, children, placement = "auto", ...rest }) => {
 	const nodeRef = useRef(null);
 	const clipRef = useRef(null);
 	const [position, setPosition] = useState(null);
@@ -4726,6 +4768,7 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendComparisonItem = legend.comparisonItem ?? false;
+	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const formatting = useChartFormatting();
@@ -4910,12 +4953,14 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
 		collapseGroups: legendCollapseGroups,
 		comparisonItem: legendComparisonItem,
+		comparisonSeriesItems: legendComparisonSeriesItems,
 		renderGlyph
 	}), [
 		withLegendGlyph,
 		glyphStyle?.radius,
 		legendCollapseGroups,
 		legendComparisonItem,
+		legendComparisonSeriesItems,
 		renderGlyph
 	]), legendShape);
 	const chartMetadata = useMemo(() => ({
@@ -5384,8 +5429,13 @@ const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		withGlyph: false,
 		glyphSize: 0,
 		collapseGroups: legend.collapseGroups ?? false,
-		comparisonItem: legend.comparisonItem ?? false
-	}), [legend.collapseGroups, legend.comparisonItem]), legendShape);
+		comparisonItem: legend.comparisonItem ?? false,
+		comparisonSeriesItems: legend.comparisonSeriesItems
+	}), [
+		legend.collapseGroups,
+		legend.comparisonItem,
+		legend.comparisonSeriesItems
+	]), legendShape);
 	const chartMetadata = useMemo(() => ({
 		stacked,
 		stackOffset,
@@ -6378,6 +6428,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendComparisonItem = legend.comparisonItem ?? false;
+	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const horizontal = orientation === "horizontal";
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
@@ -6390,8 +6441,13 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	});
 	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({
 		collapseGroups: legendCollapseGroups,
-		comparisonItem: legendComparisonItem
-	}), [legendCollapseGroups, legendComparisonItem]));
+		comparisonItem: legendComparisonItem,
+		comparisonSeriesItems: legendComparisonSeriesItems
+	}), [
+		legendCollapseGroups,
+		legendComparisonItem,
+		legendComparisonSeriesItems
+	]));
 	const { getElementStyles } = useGlobalChartsContext();
 	const isSeriesRendered = useCallback((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const hasWholeNumberValues = useMemo(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
@@ -6902,7 +6958,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 	right: 20,
 	bottom: 0,
 	top: 0
-}, className, ...rest }) => {
+}, className, ariaLabel, ...rest }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const tintedData = useMemo(() => {
 		if (data.length > 1) return data;
@@ -6977,6 +7033,7 @@ const BarListChartInternal = ({ data, width, height, options = {}, margin = {
 			xScale: chartOptions.xScale,
 			yScale: chartOptions.yScale
 		},
+		ariaLabel: ariaLabel ?? __("Bar list chart", "jetpack-charts"),
 		...rest
 	});
 };
@@ -7052,6 +7109,8 @@ const useFunnelSelection = (hideTooltip) => {
 };
 //#endregion
 //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+/** Chart height (px) below which the funnel tightens its gaps so the bars keep their room. */
+const SHORT_CHART_HEIGHT = 180;
 /**
 * Internal ConversionFunnelChart component with chart registration
 *
@@ -7063,6 +7122,7 @@ const useFunnelSelection = (hideTooltip) => {
 * @param props.loading          - Whether the chart is in loading state
 * @param props.animation        - Whether to show chart animation on initial render or not
 * @param props.className        - Additional CSS class name
+* @param props.ariaLabel        - Accessible name for the chart group
 * @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
 * @param props.style            - Custom styling
 * @param props.renderStepLabel  - Custom render function for step labels
@@ -7072,7 +7132,7 @@ const useFunnelSelection = (hideTooltip) => {
 * @param props.tooltipStyle     - Inline styles merged over the tooltip box defaults
 * @return JSX element representing the conversion funnel chart
 */
-const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
+const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, ariaLabel, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
 	const chartId = useChartId(providedChartId);
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
@@ -7081,10 +7141,13 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
 	const standaloneScopeClass = useStandaloneScopeClass();
+	const [measureChartRef, , chartHeight] = useElementSize();
+	const gap = chartHeight > 0 && chartHeight < SHORT_CHART_HEIGHT ? "sm" : "xl";
 	const setChartRef = useCallback((node) => {
 		chartRef.current = node;
 		setScopeNode(node);
-	}, []);
+		measureChartRef(node);
+	}, [measureChartRef]);
 	const clearSelectionAndRef = useCallback(() => {
 		clearSelection();
 		selectedBarRef.current = null;
@@ -7232,7 +7295,9 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 	const maxRate = Math.max(...steps.map((step) => step.rate));
 	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "column",
-		gap: "xl",
+		gap,
+		role: "group",
+		"aria-label": ariaLabel ?? __("Conversion funnel chart", "jetpack-charts"),
 		ref: setChartRef,
 		className: clsx("conversion-funnel-chart", conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
 		style: {
@@ -7263,7 +7328,7 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 					return /* @__PURE__ */ jsxs(Stack, {
 						direction: "column",
 						className: clsx(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
-						gap: "xl",
+						gap,
 						children: [/* @__PURE__ */ jsxs(Stack, {
 							direction: "column",
 							gap: "xs",
@@ -7387,6 +7452,91 @@ function sanitizeHtml(html) {
 //#region src/charts/geo-chart/geo-chart.module.scss
 var geo_chart_module_default = { "container": "a8ccharts-8hS2IW-container" };
 //#endregion
+//#region src/charts/geo-chart/private/use-tooltip-position.ts
+const TOOLTIP_CLASS = "google-visualization-tooltip";
+const isTooltip = (node) => node instanceof HTMLElement && node.classList.contains(TOOLTIP_CLASS);
+/**
+* Moves Google's HTML tooltip to where the other chart tooltips sit, just off the cursor. Google places it about 30px away and has no option for it.
+*
+* @param containerRef - The element Google draws the chart into.
+*/
+function useTooltipPosition(containerRef) {
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || typeof MutationObserver === "undefined") return;
+		let pointer = null;
+		let clip = null;
+		const ownStyles = /* @__PURE__ */ new WeakMap();
+		const place = (tooltip) => {
+			const parent = tooltip.offsetParent;
+			if (!pointer || !parent) return;
+			if (clip?.parent !== parent) clip = {
+				parent,
+				element: findClippingAncestor(parent)
+			};
+			const parentRect = parent.getBoundingClientRect();
+			const clipRect = clip.element?.getBoundingClientRect() ?? {
+				left: 0,
+				top: 0,
+				right: window.innerWidth,
+				bottom: window.innerHeight
+			};
+			const { x, y } = getBoundedPosition({
+				left: pointer.x - parentRect.left,
+				top: pointer.y - parentRect.top,
+				offsetLeft: 10,
+				offsetTop: 10,
+				box: {
+					width: tooltip.offsetWidth,
+					height: tooltip.offsetHeight
+				},
+				wrapper: {
+					left: 0,
+					top: 0,
+					right: parentRect.width,
+					bottom: parentRect.height
+				},
+				bounds: {
+					left: clipRect.left - parentRect.left,
+					top: clipRect.top - parentRect.top,
+					right: clipRect.right - parentRect.left,
+					bottom: clipRect.bottom - parentRect.top
+				}
+			});
+			tooltip.style.left = `${x}px`;
+			tooltip.style.top = `${y}px`;
+			ownStyles.set(tooltip, tooltip.style.cssText);
+		};
+		const trackPointer = (event) => {
+			pointer = {
+				x: event.clientX,
+				y: event.clientY
+			};
+		};
+		const observer = new MutationObserver((records) => {
+			const tooltips = /* @__PURE__ */ new Set();
+			for (const record of records) {
+				if (isTooltip(record.target)) tooltips.add(record.target);
+				record.addedNodes.forEach((node) => isTooltip(node) && tooltips.add(node));
+			}
+			for (const tooltip of tooltips) if (ownStyles.get(tooltip) !== tooltip.style.cssText) place(tooltip);
+		});
+		container.addEventListener("mouseover", trackPointer, true);
+		container.addEventListener("mousemove", trackPointer, true);
+		observer.observe(container, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["style"]
+		});
+		return () => {
+			container.removeEventListener("mouseover", trackPointer, true);
+			container.removeEventListener("mousemove", trackPointer, true);
+			observer.disconnect();
+		};
+	}, [containerRef]);
+}
+//#endregion
 //#region src/charts/geo-chart/geo-chart.tsx
 /**
 * External dependencies
@@ -7429,6 +7579,23 @@ function involvesGeoChartErrorElement(node) {
 	if (!(node instanceof HTMLElement)) return false;
 	return node.id.startsWith(GOOGLE_CHARTS_ERROR_ID_PREFIX) || node.querySelector(`[id^="${GOOGLE_CHARTS_ERROR_ID_PREFIX}"]`) !== null;
 }
+const isTooltipColumn = (column) => typeof column === "object" && column !== null && "role" in column && column.role === "tooltip";
+const hasHtmlFlag = (columnOrCell) => typeof columnOrCell === "object" && columnOrCell !== null && "p" in columnOrCell && typeof columnOrCell.p === "object" && columnOrCell.p !== null && "html" in columnOrCell.p && !!columnOrCell.p.html;
+const sanitizeIfString = (value) => typeof value === "string" ? sanitizeHtml(value) : value;
+/**
+* Sanitizes a tooltip cell Google will render as markup, whether a string or a `{ v, f, p }` object.
+*
+* @param cell - The tooltip cell.
+* @return The cell with its markup sanitized.
+*/
+function sanitizeTooltipCell(cell) {
+	if (typeof cell !== "object" || cell === null) return sanitizeIfString(cell);
+	return {
+		...cell,
+		..."v" in cell && { v: sanitizeIfString(cell.v) },
+		..."f" in cell && { f: sanitizeIfString(cell.f) }
+	};
+}
 /**
 * Normalizes the raw Google Charts error event into the GeoChart error shape.
 *
@@ -7457,6 +7624,7 @@ function normalizeGeoChartError(eventArgs) {
 *
 * @param props                   - The props for the GeoChart component
 * @param props.data              - Data in Google Charts format (array of arrays with headers)
+* @param props.ariaLabel         - Accessible name of the chart
 * @param props.width             - Width of the chart in pixels
 * @param props.height            - Height of the chart in pixels
 * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
@@ -7468,11 +7636,12 @@ function normalizeGeoChartError(eventArgs) {
 * @param props.renderPlaceholder - Optional render function for the loading placeholder
 * @return A React component displaying an interactive map with data visualization
 */
-const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", displayMode = "regions", domain, onError, renderPlaceholder }) => {
+const GeoChartInternal = ({ className, data, ariaLabel, width, height, region = "world", resolution = "countries", displayMode = "regions", domain, onError, renderPlaceholder }) => {
 	const { getElementStyles } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef(null);
 	const reportedErrorIdsRef = useRef(/* @__PURE__ */ new Set());
+	const [isLoaded, setIsLoaded] = useState(false);
 	useEffect(() => {
 		const container = containerRef.current;
 		if (!onError || !container || typeof MutationObserver === "undefined") return;
@@ -7493,6 +7662,8 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		reportRenderedErrors();
 		return () => observer.disconnect();
 	}, [onError]);
+	useTooltipPosition(containerRef);
+	const handleLoad = useCallback(() => setIsLoaded(true), []);
 	const loadingPlaceholder = /* @__PURE__ */ jsx(Center, {
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
@@ -7506,28 +7677,18 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 	const backgroundColorHex = normalizeColorToHex(CATALOG_POINTERS.background, scopeElement, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
 	const defaultFillColorHex = normalizeColorToHex(CATALOG_POINTERS.surfaceSecondary, scopeElement, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
 	const sanitizedData = useMemo(() => {
-		if (data.length === 0) return {
-			data,
-			hasHtmlTooltips: false
-		};
-		const htmlTooltipIndices = [];
-		for (let i = 0; i < data[0].length; i++) {
-			const col = data[0][i];
-			if (typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true) htmlTooltipIndices.push(i);
-		}
-		if (htmlTooltipIndices.length === 0) return {
-			data,
-			hasHtmlTooltips: false
-		};
+		if (data.length === 0) return data;
+		const tooltipColumns = data[0].flatMap((column, index) => isTooltipColumn(column) ? [{
+			index,
+			isHtml: hasHtmlFlag(column)
+		}] : []);
+		if (tooltipColumns.length === 0) return data;
 		const sanitizedRows = data.slice(1).map((row) => {
 			const newRow = [...row];
-			for (const colIndex of htmlTooltipIndices) if (typeof newRow[colIndex] === "string") newRow[colIndex] = sanitizeHtml(newRow[colIndex]);
+			for (const { index, isHtml } of tooltipColumns) if (isHtml || hasHtmlFlag(newRow[index])) newRow[index] = sanitizeTooltipCell(newRow[index]);
 			return newRow;
 		});
-		return {
-			data: [data[0], ...sanitizedRows],
-			hasHtmlTooltips: true
-		};
+		return [data[0], ...sanitizedRows];
 	}, [data]);
 	const options = useMemo(() => ({
 		...region !== "world" && { region },
@@ -7540,7 +7701,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		defaultColor: defaultFillColorHex,
 		tooltip: {
 			trigger: "focus",
-			isHtml: sanitizedData.hasHtmlTooltips
+			isHtml: true
 		},
 		legend: "none",
 		keepAspectRatio: true
@@ -7552,35 +7713,42 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		lightColorHex,
 		fullColorHex,
 		backgroundColorHex,
-		defaultFillColorHex,
-		sanitizedData.hasHtmlTooltips
+		defaultFillColorHex
 	]);
 	const chartEvents = useMemo(() => {
-		if (!onError) return;
-		return [{
+		const readyEvent = {
+			eventName: "ready",
+			callback: () => {
+				containerRef.current?.querySelectorAll("svg").forEach((svg) => svg.setAttribute("aria-hidden", "true"));
+			}
+		};
+		if (!onError) return [readyEvent];
+		return [readyEvent, {
 			eventName: "error",
 			callback: ({ eventArgs }) => {
 				onError(normalizeGeoChartError(eventArgs));
 			}
 		}];
 	}, [onError]);
-	return /* @__PURE__ */ jsx(Center, {
+	return /* @__PURE__ */ jsxs(Center, {
 		ref: containerRef,
+		role: "group",
+		"aria-label": ariaLabel ?? __("Geo chart", "jetpack-charts"),
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
 			height
 		},
-		children: /* @__PURE__ */ jsx(Chart, {
+		children: [!isLoaded && loadingPlaceholder, /* @__PURE__ */ jsx(TooltipTheme, { children: /* @__PURE__ */ jsx(Chart, {
 			chartType: "GeoChart",
 			chartPackages: GEO_CHART_PACKAGES,
 			width,
 			height,
-			data: sanitizedData.data,
+			data: sanitizedData,
 			options,
 			chartEvents,
-			loader: loadingPlaceholder
-		})
+			onLoad: handleLoad
+		}) })]
 	});
 };
 const GeoChartWithProvider = (props) => {
@@ -7755,16 +7923,10 @@ const getNormalizedValue = (value, extent) => {
 	return Math.min(1, Math.max(0, (value - min) / (max - min)));
 };
 const STEPS = 200;
-const firstMeeting = (from, to, meets) => {
-	for (let step = 0; step <= STEPS; step++) {
-		const color = mixHexColors(from, to, step / STEPS);
-		if (meets(color)) return color;
-	}
-	return null;
-};
+const ramp = (from, to) => Array.from({ length: 201 }, (_, step) => mixHexColors(from, to, step / STEPS));
 /**
-* The two ends of the heatmap fill scale: 3:1 against the background and the empty cell at the
-* low end, toward 9:1 against the background at the high end.
+* The two ends of the heatmap fill scale: toward 2.5:1 against the background and the empty cell at
+* the low end, never under 2:1 against the background or the high end, and toward 6:1 at the high end.
 *
 * @param primary    - The resolved primary color, as six-digit hex.
 * @param background - The resolved chart background, as six-digit hex.
@@ -7772,16 +7934,19 @@ const firstMeeting = (from, to, meets) => {
 * @return The scale ends, as six-digit hex.
 */
 const getHeatmapScale = (primary, background, emptyCell) => {
-	const primaryStandsOut = contrastRatio(primary, background) >= 3;
-	const extreme = (primaryStandsOut ? relativeLuminance(primary) > relativeLuminance(background) : contrastRatio("#ffffff", background) > contrastRatio("#000000", background)) ? "#ffffff" : "#000000";
-	const lowAgainst = (references) => {
-		const meets = (color) => references.every((reference) => contrastRatio(color, reference) >= 3);
-		return (primaryStandsOut ? firstMeeting(background, primary, meets) : null) ?? firstMeeting(primary, extreme, meets);
-	};
-	const high = firstMeeting(primary, extreme, (color) => contrastRatio(color, background) >= 9) ?? extreme;
-	const againstEmptyCell = emptyCell ? lowAgainst([background, emptyCell]) : null;
+	const backgroundLuminance = relativeLuminance(background);
+	const ownSide = relativeLuminance(primary) > backgroundLuminance ? "#ffffff" : "#000000";
+	const otherSide = ownSide === "#ffffff" ? "#000000" : "#ffffff";
+	const extreme = contrastRatio(ownSide, background) >= 6 || contrastRatio(ownSide, background) >= contrastRatio(otherSide, background) ? ownSide : otherSide;
+	const onExtremeSide = (color) => extreme === "#ffffff" ? relativeLuminance(color) > backgroundLuminance : relativeLuminance(color) < backgroundLuminance;
+	const deepening = ramp(primary, extreme);
+	const high = deepening.find((color) => contrastRatio(color, background) >= 6) ?? extreme;
+	const path = [...ramp(background, primary), ...deepening];
+	const spread = path.slice(0, path.indexOf(high) + 1).filter((color) => onExtremeSide(color) && contrastRatio(color, background) >= 2 && contrastRatio(color, high) >= 2);
+	const surroundings = emptyCell ? [background, emptyCell] : [background];
+	const weakest = (color) => Math.min(...surroundings.map((other) => contrastRatio(color, other)));
 	return {
-		low: (againstEmptyCell && contrastRatio(againstEmptyCell, background) <= contrastRatio(high, background) ? againstEmptyCell : lowAgainst([background])) ?? extreme,
+		low: spread.find((color) => weakest(color) >= 2.5) ?? spread.find((color) => weakest(color) >= 2) ?? spread.reduce((best, color) => weakest(color) > weakest(best) ? color : best),
 		high
 	};
 };
@@ -8120,7 +8285,7 @@ const CELL_VALUE_MODIFIER = {
 	white: heatmap_chart_module_default["heatmap-chart__cell-value--white"]
 };
 const NO_ROW_LABELS = [];
-const TOOLTIP_BOX_STYLE = { zIndex: 3 };
+const TOOLTIP_BOX_STYLE$1 = { zIndex: 3 };
 const largest = (root, selector, size) => Math.max(0, ...Array.from(root.querySelectorAll(selector), (el) => el[size]));
 const gridBox = (chart, grid) => {
 	let height = chart.clientHeight;
@@ -8143,9 +8308,9 @@ const cellName = (info) => info.cellLabel || [
 const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, fitCells = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipStyle, children }) => {
 	const chartId = useChartId(providedChartId);
 	const tooltipBoxStyle = tooltipStyle ? {
-		...TOOLTIP_BOX_STYLE,
+		...TOOLTIP_BOX_STYLE$1,
 		...tooltipStyle
-	} : TOOLTIP_BOX_STYLE;
+	} : TOOLTIP_BOX_STYLE$1;
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
@@ -9037,10 +9202,10 @@ function paramCase(input, options) {
 	return dotCase(input, __assign({ delimiter: "-" }, options));
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.55.0/node_modules/@wordpress/warning/build-module/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.55.0/node_modules/@wordpress/warning/build-module/index.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -9054,7 +9219,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
 	useEffect$1(() => {
@@ -9878,356 +10043,6 @@ var createCache = function createCache(options) {
 	return cache;
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js
-/** @license React v16.13.1
-* react-is.production.min.js
-*
-* Copyright (c) Facebook, Inc. and its affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var require_react_is_production_min = /* @__PURE__ */ __commonJSMin(((exports) => {
-	var b = "function" === typeof Symbol && Symbol.for;
-	var c = b ? Symbol.for("react.element") : 60103;
-	var d = b ? Symbol.for("react.portal") : 60106;
-	var e = b ? Symbol.for("react.fragment") : 60107;
-	var f = b ? Symbol.for("react.strict_mode") : 60108;
-	var g = b ? Symbol.for("react.profiler") : 60114;
-	var h = b ? Symbol.for("react.provider") : 60109;
-	var k = b ? Symbol.for("react.context") : 60110;
-	var l = b ? Symbol.for("react.async_mode") : 60111;
-	var m = b ? Symbol.for("react.concurrent_mode") : 60111;
-	var n = b ? Symbol.for("react.forward_ref") : 60112;
-	var p = b ? Symbol.for("react.suspense") : 60113;
-	var q = b ? Symbol.for("react.suspense_list") : 60120;
-	var r = b ? Symbol.for("react.memo") : 60115;
-	var t = b ? Symbol.for("react.lazy") : 60116;
-	var v = b ? Symbol.for("react.block") : 60121;
-	var w = b ? Symbol.for("react.fundamental") : 60117;
-	var x = b ? Symbol.for("react.responder") : 60118;
-	var y = b ? Symbol.for("react.scope") : 60119;
-	function z(a) {
-		if ("object" === typeof a && null !== a) {
-			var u = a.$$typeof;
-			switch (u) {
-				case c: switch (a = a.type, a) {
-					case l:
-					case m:
-					case e:
-					case g:
-					case f:
-					case p: return a;
-					default: switch (a = a && a.$$typeof, a) {
-						case k:
-						case n:
-						case t:
-						case r:
-						case h: return a;
-						default: return u;
-					}
-				}
-				case d: return u;
-			}
-		}
-	}
-	function A(a) {
-		return z(a) === m;
-	}
-	exports.AsyncMode = l;
-	exports.ConcurrentMode = m;
-	exports.ContextConsumer = k;
-	exports.ContextProvider = h;
-	exports.Element = c;
-	exports.ForwardRef = n;
-	exports.Fragment = e;
-	exports.Lazy = t;
-	exports.Memo = r;
-	exports.Portal = d;
-	exports.Profiler = g;
-	exports.StrictMode = f;
-	exports.Suspense = p;
-	exports.isAsyncMode = function(a) {
-		return A(a) || z(a) === l;
-	};
-	exports.isConcurrentMode = A;
-	exports.isContextConsumer = function(a) {
-		return z(a) === k;
-	};
-	exports.isContextProvider = function(a) {
-		return z(a) === h;
-	};
-	exports.isElement = function(a) {
-		return "object" === typeof a && null !== a && a.$$typeof === c;
-	};
-	exports.isForwardRef = function(a) {
-		return z(a) === n;
-	};
-	exports.isFragment = function(a) {
-		return z(a) === e;
-	};
-	exports.isLazy = function(a) {
-		return z(a) === t;
-	};
-	exports.isMemo = function(a) {
-		return z(a) === r;
-	};
-	exports.isPortal = function(a) {
-		return z(a) === d;
-	};
-	exports.isProfiler = function(a) {
-		return z(a) === g;
-	};
-	exports.isStrictMode = function(a) {
-		return z(a) === f;
-	};
-	exports.isSuspense = function(a) {
-		return z(a) === p;
-	};
-	exports.isValidElementType = function(a) {
-		return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
-	};
-	exports.typeOf = z;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.development.js
-/** @license React v16.13.1
-* react-is.development.js
-*
-* Copyright (c) Facebook, Inc. and its affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var require_react_is_development = /* @__PURE__ */ __commonJSMin(((exports) => {
-	if (process.env.NODE_ENV !== "production") (function() {
-		"use strict";
-		var hasSymbol = typeof Symbol === "function" && Symbol.for;
-		var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103;
-		var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106;
-		var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for("react.fragment") : 60107;
-		var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for("react.strict_mode") : 60108;
-		var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for("react.profiler") : 60114;
-		var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for("react.provider") : 60109;
-		var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for("react.context") : 60110;
-		var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for("react.async_mode") : 60111;
-		var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for("react.concurrent_mode") : 60111;
-		var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for("react.forward_ref") : 60112;
-		var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for("react.suspense") : 60113;
-		var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for("react.suspense_list") : 60120;
-		var REACT_MEMO_TYPE = hasSymbol ? Symbol.for("react.memo") : 60115;
-		var REACT_LAZY_TYPE = hasSymbol ? Symbol.for("react.lazy") : 60116;
-		var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for("react.block") : 60121;
-		var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for("react.fundamental") : 60117;
-		var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for("react.responder") : 60118;
-		var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for("react.scope") : 60119;
-		function isValidElementType(type) {
-			return typeof type === "string" || typeof type === "function" || type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === "object" && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-		}
-		function typeOf(object) {
-			if (typeof object === "object" && object !== null) {
-				var $$typeof = object.$$typeof;
-				switch ($$typeof) {
-					case REACT_ELEMENT_TYPE:
-						var type = object.type;
-						switch (type) {
-							case REACT_ASYNC_MODE_TYPE:
-							case REACT_CONCURRENT_MODE_TYPE:
-							case REACT_FRAGMENT_TYPE:
-							case REACT_PROFILER_TYPE:
-							case REACT_STRICT_MODE_TYPE:
-							case REACT_SUSPENSE_TYPE: return type;
-							default:
-								var $$typeofType = type && type.$$typeof;
-								switch ($$typeofType) {
-									case REACT_CONTEXT_TYPE:
-									case REACT_FORWARD_REF_TYPE:
-									case REACT_LAZY_TYPE:
-									case REACT_MEMO_TYPE:
-									case REACT_PROVIDER_TYPE: return $$typeofType;
-									default: return $$typeof;
-								}
-						}
-					case REACT_PORTAL_TYPE: return $$typeof;
-				}
-			}
-		}
-		var AsyncMode = REACT_ASYNC_MODE_TYPE;
-		var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-		var ContextConsumer = REACT_CONTEXT_TYPE;
-		var ContextProvider = REACT_PROVIDER_TYPE;
-		var Element = REACT_ELEMENT_TYPE;
-		var ForwardRef = REACT_FORWARD_REF_TYPE;
-		var Fragment = REACT_FRAGMENT_TYPE;
-		var Lazy = REACT_LAZY_TYPE;
-		var Memo = REACT_MEMO_TYPE;
-		var Portal = REACT_PORTAL_TYPE;
-		var Profiler = REACT_PROFILER_TYPE;
-		var StrictMode = REACT_STRICT_MODE_TYPE;
-		var Suspense = REACT_SUSPENSE_TYPE;
-		var hasWarnedAboutDeprecatedIsAsyncMode = false;
-		function isAsyncMode(object) {
-			if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-				hasWarnedAboutDeprecatedIsAsyncMode = true;
-				console["warn"]("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.");
-			}
-			return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-		}
-		function isConcurrentMode(object) {
-			return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-		}
-		function isContextConsumer(object) {
-			return typeOf(object) === REACT_CONTEXT_TYPE;
-		}
-		function isContextProvider(object) {
-			return typeOf(object) === REACT_PROVIDER_TYPE;
-		}
-		function isElement(object) {
-			return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-		}
-		function isForwardRef(object) {
-			return typeOf(object) === REACT_FORWARD_REF_TYPE;
-		}
-		function isFragment(object) {
-			return typeOf(object) === REACT_FRAGMENT_TYPE;
-		}
-		function isLazy(object) {
-			return typeOf(object) === REACT_LAZY_TYPE;
-		}
-		function isMemo(object) {
-			return typeOf(object) === REACT_MEMO_TYPE;
-		}
-		function isPortal(object) {
-			return typeOf(object) === REACT_PORTAL_TYPE;
-		}
-		function isProfiler(object) {
-			return typeOf(object) === REACT_PROFILER_TYPE;
-		}
-		function isStrictMode(object) {
-			return typeOf(object) === REACT_STRICT_MODE_TYPE;
-		}
-		function isSuspense(object) {
-			return typeOf(object) === REACT_SUSPENSE_TYPE;
-		}
-		exports.AsyncMode = AsyncMode;
-		exports.ConcurrentMode = ConcurrentMode;
-		exports.ContextConsumer = ContextConsumer;
-		exports.ContextProvider = ContextProvider;
-		exports.Element = Element;
-		exports.ForwardRef = ForwardRef;
-		exports.Fragment = Fragment;
-		exports.Lazy = Lazy;
-		exports.Memo = Memo;
-		exports.Portal = Portal;
-		exports.Profiler = Profiler;
-		exports.StrictMode = StrictMode;
-		exports.Suspense = Suspense;
-		exports.isAsyncMode = isAsyncMode;
-		exports.isConcurrentMode = isConcurrentMode;
-		exports.isContextConsumer = isContextConsumer;
-		exports.isContextProvider = isContextProvider;
-		exports.isElement = isElement;
-		exports.isForwardRef = isForwardRef;
-		exports.isFragment = isFragment;
-		exports.isLazy = isLazy;
-		exports.isMemo = isMemo;
-		exports.isPortal = isPortal;
-		exports.isProfiler = isProfiler;
-		exports.isStrictMode = isStrictMode;
-		exports.isSuspense = isSuspense;
-		exports.isValidElementType = isValidElementType;
-		exports.typeOf = typeOf;
-	})();
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/index.js
-var require_react_is = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	if (process.env.NODE_ENV === "production") module.exports = require_react_is_production_min();
-	else module.exports = require_react_is_development();
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/hoist-non-react-statics@3.3.2/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
-var require_hoist_non_react_statics_cjs = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	var reactIs = require_react_is();
-	/**
-	* Copyright 2015, Yahoo! Inc.
-	* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
-	*/
-	var REACT_STATICS = {
-		childContextTypes: true,
-		contextType: true,
-		contextTypes: true,
-		defaultProps: true,
-		displayName: true,
-		getDefaultProps: true,
-		getDerivedStateFromError: true,
-		getDerivedStateFromProps: true,
-		mixins: true,
-		propTypes: true,
-		type: true
-	};
-	var KNOWN_STATICS = {
-		name: true,
-		length: true,
-		prototype: true,
-		caller: true,
-		callee: true,
-		arguments: true,
-		arity: true
-	};
-	var FORWARD_REF_STATICS = {
-		"$$typeof": true,
-		render: true,
-		defaultProps: true,
-		displayName: true,
-		propTypes: true
-	};
-	var MEMO_STATICS = {
-		"$$typeof": true,
-		compare: true,
-		defaultProps: true,
-		displayName: true,
-		propTypes: true,
-		type: true
-	};
-	var TYPE_STATICS = {};
-	TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
-	TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
-	function getStatics(component) {
-		if (reactIs.isMemo(component)) return MEMO_STATICS;
-		return TYPE_STATICS[component["$$typeof"]] || REACT_STATICS;
-	}
-	var defineProperty = Object.defineProperty;
-	var getOwnPropertyNames = Object.getOwnPropertyNames;
-	var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-	var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-	var getPrototypeOf = Object.getPrototypeOf;
-	var objectPrototype = Object.prototype;
-	function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
-		if (typeof sourceComponent !== "string") {
-			if (objectPrototype) {
-				var inheritedComponent = getPrototypeOf(sourceComponent);
-				if (inheritedComponent && inheritedComponent !== objectPrototype) hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
-			}
-			var keys = getOwnPropertyNames(sourceComponent);
-			if (getOwnPropertySymbols) keys = keys.concat(getOwnPropertySymbols(sourceComponent));
-			var targetStatics = getStatics(targetComponent);
-			var sourceStatics = getStatics(sourceComponent);
-			for (var i = 0; i < keys.length; ++i) {
-				var key = keys[i];
-				if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
-					var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
-					try {
-						defineProperty(targetComponent, key, descriptor);
-					} catch (e) {}
-				}
-			}
-		}
-		return targetComponent;
-	}
-	module.exports = hoistNonReactStatics;
-}));
-//#endregion
 //#region ../../../node_modules/.pnpm/@emotion+utils@1.4.2/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
 function getRegisteredStyles$1(registered, registeredStyles, classNames) {
 	var rawClassName = "";
@@ -10327,7 +10142,7 @@ var unitlessKeys = {
 };
 //#endregion
 //#region ../../../node_modules/.pnpm/@emotion+serialize@1.3.3/node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
-var isDevelopment$1 = false;
+var isDevelopment = false;
 var hyphenateRegex = /[A-Z]|^ms/g;
 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 var isCustomProperty = function isCustomProperty(property) {
@@ -10407,7 +10222,7 @@ function createStringFromObject(mergedProps, registered, obj) {
 			if (registered != null && registered[asString] !== void 0) string += key + "{" + registered[asString] + "}";
 			else if (isProcessableValue(asString)) string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
 		} else {
-			if (key === "NO_COMPONENT_SELECTOR" && isDevelopment$1) throw new Error(noComponentSelectorMessage);
+			if (key === "NO_COMPONENT_SELECTOR" && isDevelopment) throw new Error(noComponentSelectorMessage);
 			if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
 				for (var _i = 0; _i < value.length; _i++) if (isProcessableValue(value[_i])) string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
 			} else {
@@ -10450,80 +10265,15 @@ function serializeStyles(args, registered, mergedProps) {
 		next: cursor
 	};
 }
+React["useInsertionEffect"] && React["useInsertionEffect"] || React.useLayoutEffect;
 //#endregion
-//#region ../../../node_modules/.pnpm/@emotion+use-insertion-effect-with-fallbacks@1.2.0_react@18.3.1/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
-var syncFallback = function syncFallback(create) {
-	return create();
-};
-var useInsertionEffect = React["useInsertionEffect"] ? React["useInsertionEffect"] : false;
-var useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;
-useInsertionEffect || React.useLayoutEffect;
+//#region ../../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@18.3.31_react@18.3.1/node_modules/@emotion/react/dist/emotion-element-f0de968e.browser.esm.js
 var EmotionCacheContext = /* #__PURE__ */ React.createContext(typeof HTMLElement !== "undefined" ? /* #__PURE__ */ createCache({ key: "css" }) : null);
 EmotionCacheContext.Provider;
 var __unsafe_useEmotionCache = function useEmotionCache() {
 	return useContext(EmotionCacheContext);
 };
-var withEmotionCache = function withEmotionCache(func) {
-	return /*#__PURE__*/ forwardRef(function(props, ref) {
-		return func(props, useContext(EmotionCacheContext), ref);
-	});
-};
-var ThemeContext = /* #__PURE__ */ React.createContext({});
-var hasOwn = {}.hasOwnProperty;
-var typePropName = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__";
-var createEmotionProps = function createEmotionProps(type, props) {
-	var newProps = {};
-	for (var _key in props) if (hasOwn.call(props, _key)) newProps[_key] = props[_key];
-	newProps[typePropName] = type;
-	return newProps;
-};
-var Insertion = function Insertion(_ref) {
-	var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
-	registerStyles(cache, serialized, isStringTag);
-	useInsertionEffectAlwaysWithSyncFallback(function() {
-		return insertStyles(cache, serialized, isStringTag);
-	});
-	return null;
-};
-var Emotion$1 = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
-	var cssProp = props.css;
-	if (typeof cssProp === "string" && cache.registered[cssProp] !== void 0) cssProp = cache.registered[cssProp];
-	var WrappedComponent = props[typePropName];
-	var registeredStyles = [cssProp];
-	var className = "";
-	if (typeof props.className === "string") className = getRegisteredStyles$1(cache.registered, registeredStyles, props.className);
-	else if (props.className != null) className = props.className + " ";
-	var serialized = serializeStyles(registeredStyles, void 0, React.useContext(ThemeContext));
-	className += cache.key + "-" + serialized.name;
-	var newProps = {};
-	for (var _key2 in props) if (hasOwn.call(props, _key2) && _key2 !== "css" && _key2 !== typePropName && true) newProps[_key2] = props[_key2];
-	newProps.className = className;
-	if (ref) newProps.ref = ref;
-	return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Insertion, {
-		cache,
-		serialized,
-		isStringTag: typeof WrappedComponent === "string"
-	}), /*#__PURE__*/ React.createElement(WrappedComponent, newProps));
-});
-require_hoist_non_react_statics_cjs();
-var jsx$1 = function jsx(type, props) {
-	var args = arguments;
-	if (props == null || !hasOwn.call(props, "css")) return React.createElement.apply(void 0, args);
-	var argsLength = args.length;
-	var createElementArgArray = new Array(argsLength);
-	createElementArgArray[0] = Emotion$1;
-	createElementArgArray[1] = createEmotionProps(type, props);
-	for (var i = 2; i < argsLength; i++) createElementArgArray[i] = args[i];
-	return React.createElement.apply(null, createElementArgArray);
-};
-(function(_jsx) {
-	var JSX;
-	JSX || (JSX = _jsx.JSX || (_jsx.JSX = {}));
-})(jsx$1 || (jsx$1 = {}));
-function css$1() {
-	for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-	return serializeStyles(args);
-}
+({}).hasOwnProperty;
 //#endregion
 //#region ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
 function insertWithoutScoping(cache, serialized) {
@@ -10624,7 +10374,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
 var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
 var useCx = () => {
 	const cache = __unsafe_useEmotionCache();
@@ -10731,140 +10481,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
-var white = "#fff";
-var GRAY = {
-	900: "#1e1e1e",
-	800: "#2f2f2f",
-	/** Meets 4.6:1 text contrast against white. */
-	700: "#757575",
-	/** Meets 3:1 UI or large text contrast against white. */
-	600: "#949494",
-	400: "#ccc",
-	/** Used for most borders. */
-	300: "#ddd",
-	/** Used sparingly for light borders. */
-	200: "#e0e0e0",
-	/** Used for light gray backgrounds. */
-	100: "#f0f0f0"
-};
-var ALERT = {
-	yellow: "#f0b849",
-	red: "#d94f4f",
-	green: "#4ab866"
-};
-var THEME = {
-	accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
-	accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
-	accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
-	/** Used when placing text on the accent color. */
-	accentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,
-	background: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,
-	foreground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
-	/** Used when placing text on the foreground color. */
-	foregroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,
-	gray: {
-		/** @deprecated Use `COLORS.theme.foreground` instead. */
-		900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
-		800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
-		700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,
-		600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
-		400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
-		300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
-		200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
-		100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`
-	}
-};
-var UI = {
-	background: THEME.background,
-	backgroundDisabled: THEME.gray[100],
-	border: THEME.gray[600],
-	borderHover: THEME.gray[700],
-	borderFocus: THEME.accent,
-	borderDisabled: `var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb)`,
-	textDisabled: `var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)`,
-	darkGrayPlaceholder: `color-mix(in srgb, ${THEME.foreground}, transparent 38%)`,
-	lightGrayPlaceholder: `color-mix(in srgb, ${THEME.background}, transparent 35%)`
-};
-var COLORS = Object.freeze({
-	/**
-	* The main gray color object.
-	*
-	* @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
-	*/
-	gray: GRAY,
-	/**
-	* @deprecated Prefer theme-ready variables in `COLORS.theme`.
-	*/
-	white,
-	alert: ALERT,
-	/**
-	* Theme-ready variables with fallbacks.
-	*
-	* Prefer semantic aliases in `COLORS.ui` when applicable.
-	*/
-	theme: THEME,
-	/**
-	* Semantic aliases (prefer these over raw variables when applicable).
-	*/
-	ui: UI
-});
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/config-values.mjs
-var CONTROL_HEIGHT = "36px";
-var CONTROL_PROPS = {
-	controlPaddingX: 12,
-	controlPaddingXSmall: 8,
-	controlPaddingXLarge: 12 * 1.3334,
-	controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,
-	controlHeight: CONTROL_HEIGHT,
-	controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,
-	controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,
-	controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,
-	controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`
-};
-var config_values_default = Object.assign({}, CONTROL_PROPS, {
-	colorDivider: "rgba(0, 0, 0, 0.1)",
-	elevationIntensity: 1,
-	radiusXSmall: "1px",
-	radiusSmall: "2px",
-	radiusMedium: "4px",
-	radiusLarge: "8px",
-	radiusFull: "9999px",
-	radiusRound: "50%",
-	borderWidth: "1px",
-	borderWidthFocus: "1.5px",
-	borderWidthTab: "4px",
-	fontSize: "13px",
-	fontSizeH1: "calc(2.44 * 13px)",
-	fontSizeH2: "calc(1.95 * 13px)",
-	fontSizeH3: "calc(1.56 * 13px)",
-	fontSizeH4: "calc(1.25 * 13px)",
-	fontSizeH5: "13px",
-	fontSizeH6: "calc(0.8 * 13px)",
-	fontSizeInputMobile: "16px",
-	fontSizeMobile: "15px",
-	fontSizeSmall: "calc(0.92 * 13px)",
-	fontSizeXSmall: "calc(0.75 * 13px)",
-	fontLineHeightBase: "1.4",
-	fontWeight: "normal",
-	fontWeightEmphasis: "600",
-	gridBase: "4px",
-	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
-	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
-	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
-	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
-	surfaceBorderColor: "rgba(0, 0, 0, 0.1)",
-	surfaceColor: COLORS.white,
-	transitionDuration: "200ms",
-	transitionDurationFast: "160ms",
-	transitionDurationFaster: "120ms",
-	transitionDurationFastest: "100ms",
-	transitionTimingFunction: "cubic-bezier(0.08, 0.52, 0.52, 1)",
-	transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
-});
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 var import_es6 = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = function equal(a, b) {
 		if (a === b) return true;
@@ -10932,18 +10549,18 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 memo(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/constants.mjs
 var COMPONENT_NAMESPACE = "data-wp-component";
 var CONNECTED_NAMESPACE = "data-wp-c16t";
 var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 function getStyledClassName(namespace) {
 	return `components-${paramCase(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -10960,7 +10577,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -10968,7 +10585,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
 	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
@@ -10990,7 +10607,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -11006,7 +10623,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
 var customAttributeRegExp = /^(data|aria|x)-/i;
 var eventHandlerRegExp = /^on[A-Z]/;
 var svgElementNames = new Set(`animate animateMotion animateTransform circle clipPath defs desc ellipse
@@ -11096,7 +10713,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/view/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ jsx(PolymorphicElement, {
 		ref,
@@ -11105,7 +10722,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 }
 var component_default$2 = Object.assign(forwardRef$1(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -11120,18 +10737,19 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
 	"64em"
 ];
 var useBreakpointIndex = (options = {}) => {
-	const { defaultIndex = 0 } = options;
+	const { defaultIndex = 0, enabled = true } = options;
 	if (typeof defaultIndex !== "number") throw new TypeError(`Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`);
 	else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) throw new RangeError(`Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`);
 	const [value, setValue] = useState$1(defaultIndex);
 	useEffect$1(() => {
+		if (!enabled) return;
 		const getIndex = () => breakpoints.filter((bp) => {
 			return typeof window !== "undefined" ? window.matchMedia(`screen and (min-width: ${bp})`).matches : false;
 		}).length;
@@ -11144,17 +10762,21 @@ var useBreakpointIndex = (options = {}) => {
 		return () => {
 			if (typeof window !== "undefined") window.removeEventListener("resize", onResize);
 		};
-	}, [value]);
+	}, [value, enabled]);
 	return value;
 };
 function useResponsiveValue(values, options = {}) {
-	const index = useBreakpointIndex(options);
+	const isResponsive = Array.isArray(values) && values.length > 1;
+	const index = useBreakpointIndex({
+		...options,
+		enabled: isResponsive
+	});
 	if (!Array.isArray(values) && typeof values !== "function") return values;
 	const array = values || [];
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -11199,52 +10821,155 @@ var ALIGNMENTS = {
 	}
 };
 function getAlignmentProps(alignment) {
-	return alignment ? ALIGNMENTS[alignment] : {};
+	return alignment ? ALIGNMENTS[alignment] ?? {} : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/grid/hook.mjs
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+	const globalScope = globalThis;
+	if (globalScope.__wpStyleRuntime) return globalScope.__wpStyleRuntime;
+	globalScope.__wpStyleRuntime = {
+		documents: /* @__PURE__ */ new Map(),
+		styles: /* @__PURE__ */ new Map(),
+		injectedStyles: /* @__PURE__ */ new WeakMap()
+	};
+	if (typeof document !== "undefined") registerDocument(document);
+	return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+	if (!targetDocument.head) return false;
+	for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) return true;
+	return false;
+}
+function injectStyle(targetDocument, hash, css) {
+	if (!targetDocument.head) return;
+	const runtime = getRuntime();
+	let injectedStyles = runtime.injectedStyles.get(targetDocument);
+	if (!injectedStyles) {
+		injectedStyles = /* @__PURE__ */ new Set();
+		runtime.injectedStyles.set(targetDocument, injectedStyles);
+	}
+	if (injectedStyles.has(hash)) return;
+	if (documentContainsStyleHash(targetDocument, hash)) {
+		injectedStyles.add(hash);
+		return;
+	}
+	const style = targetDocument.createElement("style");
+	style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+	style.appendChild(targetDocument.createTextNode(css));
+	targetDocument.head.appendChild(style);
+	injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+	const runtime = getRuntime();
+	runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+	for (const [hash, css] of runtime.styles) injectStyle(targetDocument, hash, css);
+	return () => {
+		const count = runtime.documents.get(targetDocument);
+		if (count === void 0) return;
+		if (count <= 1) {
+			runtime.documents.delete(targetDocument);
+			return;
+		}
+		runtime.documents.set(targetDocument, count - 1);
+	};
+}
+function registerStyle(hash, css) {
+	const runtime = getRuntime();
+	runtime.styles.set(hash, css);
+	for (const targetDocument of runtime.documents.keys()) injectStyle(targetDocument, hash, css);
+}
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("79bac25858", "._631b7063b4047c89__grid{--wp-components-grid-align:initial;--wp-components-grid-justify:initial;--wp-components-grid-gap:initial;--wp-components-grid-template-columns:initial;--wp-components-grid-template-rows:initial;--wp-components-grid-row-gap:initial;--wp-components-grid-column-gap:initial;display:grid}._631b7063b4047c89__grid:not(:where(._51fa5e5688d538e7__row-gap-inherit,._3940112538797bb2__row-gap-initial,._9dc0e80dad95eb11__row-gap-unset,._964ec4132d3d0776__row-gap-revert,._9219888d7c4749d5__row-gap-revert-layer)){row-gap:var(--wp-components-grid-row-gap,calc(4px*var(--wp-components-grid-gap)))}._631b7063b4047c89__grid:not(:where(._149fd947497e8690__column-gap-inherit,.a018e74b0f04c517__column-gap-initial,.b1e45f9587eb70e5__column-gap-unset,._4da312511f64af94__column-gap-revert,.b51ead67217c210a__column-gap-revert-layer)){column-gap:var(--wp-components-grid-column-gap,calc(4px*var(--wp-components-grid-gap)))}._4cae76607d36422b__has-align:not(:where(._2c693b642b24e0d9__align-inherit,.fd4c5676ad7e83d4__align-initial,.c4c0cde44ab0ed21__align-unset,._8c23efb61db2f04e__align-revert,.c3adc4c41efa56d1__align-revert-layer)){align-items:var(--wp-components-grid-align)}._9bcd99517d001b4b__has-justify:not(:where(.a72d35ee0eda5e6b__justify-inherit,.d386403fd02ebc45__justify-initial,._7d60510a69e8ddf9__justify-unset,._857dfb6521d0cae3__justify-revert,._1537fff8402f1ca1__justify-revert-layer)){justify-content:var(--wp-components-grid-justify)}._983f7df07cd35a72__has-template-columns:not(:where(.df2216db1a717825__template-columns-inherit,._9016934ed273a0b8__template-columns-initial,._74966333f352d829__template-columns-unset,.b3ce45d005011688__template-columns-revert,._9ff0250b9bed5764__template-columns-revert-layer)){grid-template-columns:var(--wp-components-grid-template-columns)}._7e0fa0c081c20f6e__has-template-rows:not(:where(._10cfd24f62672d27__template-rows-inherit,.da1333be6b2af8c3__template-rows-initial,._919938d55c0cf234__template-rows-unset,.db40efe5796b7ffb__template-rows-revert,._1080cc5b99823c58__template-rows-revert-layer)){grid-template-rows:var(--wp-components-grid-template-rows)}.f4729d54fca65af1__is-inline{display:inline-grid;vertical-align:middle}._2c693b642b24e0d9__align-inherit{align-items:inherit}.fd4c5676ad7e83d4__align-initial{align-items:normal}.c4c0cde44ab0ed21__align-unset{align-items:unset}._8c23efb61db2f04e__align-revert{align-items:revert}.c3adc4c41efa56d1__align-revert-layer{align-items:revert-layer}.a72d35ee0eda5e6b__justify-inherit{justify-content:inherit}.d386403fd02ebc45__justify-initial{justify-content:normal}._7d60510a69e8ddf9__justify-unset{justify-content:unset}._857dfb6521d0cae3__justify-revert{justify-content:revert}._1537fff8402f1ca1__justify-revert-layer{justify-content:revert-layer}.df2216db1a717825__template-columns-inherit{grid-template-columns:inherit}._9016934ed273a0b8__template-columns-initial{grid-template-columns:none}._74966333f352d829__template-columns-unset{grid-template-columns:unset}.b3ce45d005011688__template-columns-revert{grid-template-columns:revert}._9ff0250b9bed5764__template-columns-revert-layer{grid-template-columns:revert-layer}._10cfd24f62672d27__template-rows-inherit{grid-template-rows:inherit}.da1333be6b2af8c3__template-rows-initial{grid-template-rows:none}._919938d55c0cf234__template-rows-unset{grid-template-rows:unset}.db40efe5796b7ffb__template-rows-revert{grid-template-rows:revert}._1080cc5b99823c58__template-rows-revert-layer{grid-template-rows:revert-layer}._51fa5e5688d538e7__row-gap-inherit{row-gap:inherit}._3940112538797bb2__row-gap-initial{row-gap:normal}._9dc0e80dad95eb11__row-gap-unset{row-gap:unset}._964ec4132d3d0776__row-gap-revert{row-gap:revert}._9219888d7c4749d5__row-gap-revert-layer{row-gap:revert-layer}._149fd947497e8690__column-gap-inherit{column-gap:inherit}.a018e74b0f04c517__column-gap-initial{column-gap:normal}.b1e45f9587eb70e5__column-gap-unset{column-gap:unset}._4da312511f64af94__column-gap-revert{column-gap:revert}.b51ead67217c210a__column-gap-revert-layer{column-gap:revert-layer}");
+var style_module_default = {
+	"grid": "_631b7063b4047c89__grid",
+	"row-gap-inherit": "_51fa5e5688d538e7__row-gap-inherit",
+	"row-gap-initial": "_3940112538797bb2__row-gap-initial",
+	"row-gap-unset": "_9dc0e80dad95eb11__row-gap-unset",
+	"row-gap-revert": "_964ec4132d3d0776__row-gap-revert",
+	"row-gap-revert-layer": "_9219888d7c4749d5__row-gap-revert-layer",
+	"column-gap-inherit": "_149fd947497e8690__column-gap-inherit",
+	"column-gap-initial": "a018e74b0f04c517__column-gap-initial",
+	"column-gap-unset": "b1e45f9587eb70e5__column-gap-unset",
+	"column-gap-revert": "_4da312511f64af94__column-gap-revert",
+	"column-gap-revert-layer": "b51ead67217c210a__column-gap-revert-layer",
+	"has-align": "_4cae76607d36422b__has-align",
+	"align-inherit": "_2c693b642b24e0d9__align-inherit",
+	"align-initial": "fd4c5676ad7e83d4__align-initial",
+	"align-unset": "c4c0cde44ab0ed21__align-unset",
+	"align-revert": "_8c23efb61db2f04e__align-revert",
+	"align-revert-layer": "c3adc4c41efa56d1__align-revert-layer",
+	"has-justify": "_9bcd99517d001b4b__has-justify",
+	"justify-inherit": "a72d35ee0eda5e6b__justify-inherit",
+	"justify-initial": "d386403fd02ebc45__justify-initial",
+	"justify-unset": "_7d60510a69e8ddf9__justify-unset",
+	"justify-revert": "_857dfb6521d0cae3__justify-revert",
+	"justify-revert-layer": "_1537fff8402f1ca1__justify-revert-layer",
+	"has-template-columns": "_983f7df07cd35a72__has-template-columns",
+	"template-columns-inherit": "df2216db1a717825__template-columns-inherit",
+	"template-columns-initial": "_9016934ed273a0b8__template-columns-initial",
+	"template-columns-unset": "_74966333f352d829__template-columns-unset",
+	"template-columns-revert": "b3ce45d005011688__template-columns-revert",
+	"template-columns-revert-layer": "_9ff0250b9bed5764__template-columns-revert-layer",
+	"has-template-rows": "_7e0fa0c081c20f6e__has-template-rows",
+	"template-rows-inherit": "_10cfd24f62672d27__template-rows-inherit",
+	"template-rows-initial": "da1333be6b2af8c3__template-rows-initial",
+	"template-rows-unset": "_919938d55c0cf234__template-rows-unset",
+	"template-rows-revert": "db40efe5796b7ffb__template-rows-revert",
+	"template-rows-revert-layer": "_1080cc5b99823c58__template-rows-revert-layer",
+	"is-inline": "f4729d54fca65af1__is-inline"
+};
+var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer"
+]);
+function toCSSValue(value) {
+	return typeof value === "number" ? `${value}px` : value?.trim() || void 0;
+}
 function useGrid(props) {
-	const { align, alignment, className, columnGap, columns = 2, gap = 3, isInline = false, justify, rowGap, rows, templateColumns, templateRows, ...otherProps } = useContextSystem(props, "Grid");
+	const { align, alignment, className, columnGap, columns = 2, gap = 3, isInline = false, justify, rowGap, rows, style, templateColumns, templateRows, ...otherProps } = useContextSystem(props, "Grid");
 	const column = useResponsiveValue(Array.isArray(columns) ? columns : [columns]);
 	const row = useResponsiveValue(Array.isArray(rows) ? rows : [rows]);
-	const gridTemplateColumns = templateColumns || !!columns && `repeat( ${column}, 1fr )`;
-	const gridTemplateRows = templateRows || !!rows && `repeat( ${row}, 1fr )`;
-	const cx = useCx();
-	const classes = useMemo$1(() => {
-		const alignmentProps = getAlignmentProps(alignment);
-		const gridClasses = /* @__PURE__ */ css$1({
-			alignItems: align,
-			display: isInline ? "inline-grid" : "grid",
-			gap: `calc( ${config_values_default.gridBase} * ${gap} )`,
-			gridTemplateColumns: gridTemplateColumns || void 0,
-			gridTemplateRows: gridTemplateRows || void 0,
-			gridRowGap: rowGap,
-			gridColumnGap: columnGap,
-			justifyContent: justify,
-			verticalAlign: isInline ? "middle" : void 0,
-			...alignmentProps
-		}, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDb250ZXh0U3lzdGVtIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyBnZXRBbGlnbm1lbnRQcm9wcyB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlUmVzcG9uc2l2ZVZhbHVlIH0gZnJvbSAnLi4vdXRpbHMvdXNlLXJlc3BvbnNpdmUtdmFsdWUnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB0eXBlIHsgR3JpZFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUdyaWQoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgR3JpZFByb3BzLCAnZGl2JyA+XG4pIHtcblx0Y29uc3Qge1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGNvbHVtbnMgPSAyLFxuXHRcdGdhcCA9IDMsXG5cdFx0aXNJbmxpbmUgPSBmYWxzZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XHRyb3dzLFxuXHRcdHRlbXBsYXRlQ29sdW1ucyxcblx0XHR0ZW1wbGF0ZVJvd3MsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdHcmlkJyApO1xuXG5cdGNvbnN0IGNvbHVtbnNBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggY29sdW1ucyApID8gY29sdW1ucyA6IFsgY29sdW1ucyBdO1xuXHRjb25zdCBjb2x1bW4gPSB1c2VSZXNwb25zaXZlVmFsdWUoIGNvbHVtbnNBc0FycmF5ICk7XG5cdGNvbnN0IHJvd3NBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggcm93cyApID8gcm93cyA6IFsgcm93cyBdO1xuXHRjb25zdCByb3cgPSB1c2VSZXNwb25zaXZlVmFsdWUoIHJvd3NBc0FycmF5ICk7XG5cblx0Y29uc3QgZ3JpZFRlbXBsYXRlQ29sdW1ucyA9XG5cdFx0dGVtcGxhdGVDb2x1bW5zIHx8ICggISEgY29sdW1ucyAmJiBgcmVwZWF0KCAkeyBjb2x1bW4gfSwgMWZyIClgICk7XG5cdGNvbnN0IGdyaWRUZW1wbGF0ZVJvd3MgPVxuXHRcdHRlbXBsYXRlUm93cyB8fCAoICEhIHJvd3MgJiYgYHJlcGVhdCggJHsgcm93IH0sIDFmciApYCApO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblxuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyggKCkgPT4ge1xuXHRcdGNvbnN0IGFsaWdubWVudFByb3BzID0gZ2V0QWxpZ25tZW50UHJvcHMoIGFsaWdubWVudCApO1xuXG5cdFx0Y29uc3QgZ3JpZENsYXNzZXMgPSBjc3MoIHtcblx0XHRcdGFsaWduSXRlbXM6IGFsaWduLFxuXHRcdFx0ZGlzcGxheTogaXNJbmxpbmUgPyAnaW5saW5lLWdyaWQnIDogJ2dyaWQnLFxuXHRcdFx0Z2FwOiBgY2FsYyggJHsgQ09ORklHLmdyaWRCYXNlIH0gKiAkeyBnYXAgfSApYCxcblx0XHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnM6IGdyaWRUZW1wbGF0ZUNvbHVtbnMgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFRlbXBsYXRlUm93czogZ3JpZFRlbXBsYXRlUm93cyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkUm93R2FwOiByb3dHYXAsXG5cdFx0XHRncmlkQ29sdW1uR2FwOiBjb2x1bW5HYXAsXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdHZlcnRpY2FsQWxpZ246IGlzSW5saW5lID8gJ21pZGRsZScgOiB1bmRlZmluZWQsXG5cdFx0XHQuLi5hbGlnbm1lbnRQcm9wcyxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goIGdyaWRDbGFzc2VzLCBjbGFzc05hbWUgKTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGN4LFxuXHRcdGdhcCxcblx0XHRncmlkVGVtcGxhdGVDb2x1bW5zLFxuXHRcdGdyaWRUZW1wbGF0ZVJvd3MsXG5cdFx0aXNJbmxpbmUsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMgfTtcbn1cbiJdfQ== */");
-		return cx(gridClasses, className);
-	}, [
-		align,
-		alignment,
-		className,
-		columnGap,
-		cx,
-		gap,
-		gridTemplateColumns,
-		gridTemplateRows,
-		isInline,
-		justify,
-		rowGap
-	]);
+	const gridTemplateColumns = templateColumns || !!column && `repeat( ${column}, 1fr )`;
+	const gridTemplateRows = templateRows || !!row && `repeat( ${row}, 1fr )`;
+	const alignmentProps = getAlignmentProps(alignment);
+	const values = {
+		align: alignmentProps.alignItems ?? align,
+		justify: alignmentProps.justifyContent ?? justify,
+		"template-columns": gridTemplateColumns || void 0,
+		"template-rows": gridTemplateRows || void 0,
+		"row-gap": rowGap,
+		"column-gap": columnGap
+	};
 	return {
 		...otherProps,
-		className: classes
+		className: clsx(style_module_default.grid, {
+			[style_module_default["is-inline"]]: isInline,
+			[style_module_default["has-align"]]: !!values.align?.trim(),
+			[style_module_default["has-justify"]]: !!values.justify?.trim(),
+			[style_module_default["has-template-columns"]]: !!toCSSValue(values["template-columns"]),
+			[style_module_default["has-template-rows"]]: !!toCSSValue(values["template-rows"])
+		}, Object.entries(values).map(([property, value]) => {
+			const keyword = typeof value === "string" ? value.trim().toLowerCase() : "";
+			return CSS_WIDE_KEYWORDS.has(keyword) && style_module_default[`${property}-${keyword}`];
+		}), className),
+		style: {
+			"--wp-components-grid-align": values.align,
+			"--wp-components-grid-justify": values.justify,
+			"--wp-components-grid-gap": gap,
+			"--wp-components-grid-template-columns": toCSSValue(values["template-columns"]),
+			"--wp-components-grid-template-rows": toCSSValue(values["template-rows"]),
+			"--wp-components-grid-row-gap": toCSSValue(rowGap),
+			"--wp-components-grid-column-gap": toCSSValue(columnGap),
+			...style
+		}
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_5beefdda355715e908adfea668830e1f/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
 	const gridProps = useGrid(props);
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -11270,8 +10995,8 @@ const SUBPIXEL_TOLERANCE = .5;
 * depends on `--a8c-charts-dimension-leaderboard-row-gap`, label wrapping, and
 * whatever a caller renders as a label, so any restated number would drift.
 *
-* Every row is a direct grid child marked with `data-row-index`; interactive rows
-* use a button wrapper and non-interactive rows use a div wrapper.
+* Every row is a `listitem` div, a direct grid child marked with `data-row-index`;
+* interactive rows hold a button inside it.
 *
 * @param enabled  - Whether to measure at all. When false every row fits.
 * @param rowCount - Total number of rows rendered.
@@ -11413,6 +11138,7 @@ var leaderboard_chart_module_default = {
 	"overlayLabel": "a8ccharts-GovfoW-overlayLabel",
 	"row": "a8ccharts-GovfoW-row",
 	"rowButton": "a8ccharts-GovfoW-rowButton",
+	"rowItem": "a8ccharts-GovfoW-rowItem",
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
@@ -11525,9 +11251,10 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.children         - Child components for composition API
 * @param props.className        - Additional CSS class name
 * @param props.style            - Custom styling for the chart container
+* @param props.ariaLabel        - Accessible name for the list, defaulting to "Leaderboard chart"
 * @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, fitRows = 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", ariaLabel, className, style, children }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
@@ -11658,6 +11385,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					className: leaderboard_chart_module_default.emptyState,
 					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ jsx(component_default, {
+					role: "list",
+					"aria-label": ariaLabel ?? __("Leaderboard chart", "jetpack-charts"),
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap: ROW_GAP,
 					columnGap: COLUMN_GAP,
@@ -11705,40 +11434,49 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								})
 							]
 						})] });
-						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ jsxs("div", {
+						if (entry.onClick && entry.hasInteractiveLabel) return /* @__PURE__ */ jsx("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
-							className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
-							onClick: forwardCellClickToRowButton,
-							children: [
-								rowCells,
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: leaderboard_chart_module_default.rowButton,
-									onClick: entry.onClick,
-									"aria-label": entry.ariaLabel
-								}),
-								/* @__PURE__ */ jsx(Icon, {
-									className: leaderboard_chart_module_default.chevron,
-									icon: chevronRight,
-									size: 24
-								})
-							]
+							className: leaderboard_chart_module_default.rowItem,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow, leaderboard_chart_module_default.layeredRow),
+								onClick: forwardCellClickToRowButton,
+								children: [
+									rowCells,
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: leaderboard_chart_module_default.rowButton,
+										onClick: entry.onClick,
+										"aria-label": entry.ariaLabel
+									}),
+									/* @__PURE__ */ jsx(Icon, {
+										className: leaderboard_chart_module_default.chevron,
+										icon: chevronRight,
+										size: 24
+									})
+								]
+							})
 						}, entry.id);
-						if (entry.onClick) return /* @__PURE__ */ jsxs("button", {
-							type: "button",
+						if (entry.onClick) return /* @__PURE__ */ jsx("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
-							className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
-							onClick: entry.onClick,
-							"aria-label": entry.ariaLabel,
-							children: [rowCells, /* @__PURE__ */ jsx(Icon, {
-								className: leaderboard_chart_module_default.chevron,
-								icon: chevronRight,
-								size: 24
-							})]
+							className: leaderboard_chart_module_default.rowItem,
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
+								onClick: entry.onClick,
+								"aria-label": entry.ariaLabel,
+								children: [rowCells, /* @__PURE__ */ jsx(Icon, {
+									className: leaderboard_chart_module_default.chevron,
+									icon: chevronRight,
+									size: 24
+								})]
+							})
 						}, entry.id);
 						return /* @__PURE__ */ jsx("div", {
+							role: "listitem",
 							"data-row-index": rowIndex,
 							style: rowStyle,
 							className: leaderboard_chart_module_default.row,
@@ -11775,11 +11513,13 @@ const PieSelectionAnnouncement = ({ data }) => /* @__PURE__ */ jsx(VisuallyHidde
 });
 //#endregion
 //#region src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
+const TOOLTIP_BOX_STYLE = { zIndex: 3 };
 const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
 	const standaloneScopeClass = useStandaloneScopeClass();
 	return /* @__PURE__ */ jsx(BoundedTooltip, {
 		top,
 		left,
+		style: TOOLTIP_BOX_STYLE,
 		children: selectedIndex === void 0 ? /* @__PURE__ */ jsx("div", {
 			className: standaloneScopeClass,
 			role: "tooltip",
@@ -12002,6 +11742,7 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 //#endregion
 //#region src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
+	"pie-chart": "a8ccharts-gnszbG-pie-chart",
 	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
 	"pie-chart__label-text": "a8ccharts-gnszbG-pie-chart__label-text",
 	"pie-chart__label-text--black": "a8ccharts-gnszbG-pie-chart__label-text--black",