@automattic/charts 4.13.0 → 4.15.0

package/dist/index.cjs

@@ -27,7 +27,6 @@ let _wordpress_i18n = require("@wordpress/i18n");
 let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
 let react = require("react");
-react = __toESM(react);
 let date_fns = require("date-fns");
 let _date_fns_tz = require("@date-fns/tz");
 let _visx_text = require("@visx/text");
@@ -51,7 +50,6 @@ let _visx_pattern = require("@visx/pattern");
 let react_google_charts = require("react-google-charts");
 let dompurify = require("dompurify");
 dompurify = __toESM(dompurify, 1);
-require("@babel/runtime/helpers/esm/extends");
 let _wordpress_icons = require("@wordpress/icons");
 let _visx_shape = require("@visx/shape");
 // src/charts/private/chart-instance-context/chart-instance-context.ts
@@ -1285,6 +1283,15 @@ const defaultTheme = {
 		},
 		strokeWidth: 1.5
 	},
+	compactWhenShort: {
+		below: 140,
+		margin: {
+			top: 2,
+			right: 2,
+			bottom: 2,
+			left: 2
+		}
+	},
 	heatmapChart: {
 		compactCellGap: 2,
 		compactCellSize: 11,
@@ -2127,16 +2134,17 @@ const BaseLegend = (0, react.forwardRef)(({ items: allItems, className, orientat
 		chartId,
 		context
 	]);
-	const createClickHandler = (0, react.useCallback)((seriesLabels, itemInteractive) => {
+	const createClickHandler = (0, react.useCallback)((seriesLabels, itemInteractive, onToggle) => {
 		if (!itemInteractive) return;
-		return () => handleLegendClick(seriesLabels);
+		return onToggle ? () => onToggle() : () => handleLegendClick(seriesLabels);
 	}, [handleLegendClick]);
-	const createKeyDownHandler = (0, react.useCallback)((seriesLabels, itemInteractive) => {
+	const createKeyDownHandler = (0, react.useCallback)((seriesLabels, itemInteractive, onToggle) => {
 		if (!itemInteractive) return;
+		const toggle = onToggle ?? (() => handleLegendClick(seriesLabels));
 		return (event) => {
 			if (event.key === "Enter" || event.key === " ") {
 				event.preventDefault();
-				handleLegendClick(seriesLabels);
+				if (!event.repeat) toggle();
 			}
 		};
 	}, [handleLegendClick]);
@@ -2160,10 +2168,11 @@ const BaseLegend = (0, react.forwardRef)(({ items: allItems, className, orientat
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
 				const seriesLabels = matchedItem?.seriesLabels?.length ? matchedItem.seriesLabels : [label.text];
-				const visible = matchedItem?.interactive === false || isSeriesVisible(seriesLabels[0]);
 				const itemInteractive = interactive && matchedItem?.interactive !== false;
-				const handleClick = createClickHandler(seriesLabels, itemInteractive);
-				const handleKeyDown = createKeyDownHandler(seriesLabels, itemInteractive);
+				const onToggle = itemInteractive ? matchedItem?.onToggle : void 0;
+				const visible = matchedItem?.onToggle ? matchedItem.pressed : matchedItem?.interactive === false || isSeriesVisible(seriesLabels[0]);
+				const handleClick = createClickHandler(seriesLabels, itemInteractive, onToggle);
+				const handleKeyDown = createKeyDownHandler(seriesLabels, itemInteractive, onToggle);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_legend.LegendItem, {
 					className: (0, clsx.default)("visx-legend-item", base_legend_module_default["legend-item"], itemInteractive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
 					margin: itemMargin,
@@ -3558,6 +3567,89 @@ const getAllHiddenMessage = (interactive, itemType) => {
 	if (interactive) return (0, _wordpress_i18n._x)("All series are hidden. Click legend items to show data.", "chart empty state: interactive series", "jetpack-charts");
 	return (0, _wordpress_i18n._x)("All series are hidden.", "chart empty state: series", "jetpack-charts");
 };
+// src/charts/private/tick-decimals.tsx
+/**
+* Whether every reading in the series is a whole number.
+*
+* @param series - The series visx renders.
+* @return True when at least one reading exists and none has a fraction.
+*/
+const hasOnlyWholeNumbers = (series) => {
+	let sawReading = false;
+	for (const { data } of series) for (const point of data) {
+		const value = point?.value;
+		if (!isReading(value)) continue;
+		if (!Number.isInteger(value)) return false;
+		sawReading = true;
+	}
+	return sawReading;
+};
+const EPSILON = 1e-12;
+const tolerance = (scaled) => EPSILON * Math.max(1, Math.abs(scaled));
+const isValidDecimals = (decimals) => Number.isInteger(decimals) && decimals >= 0;
+const isOnDecimals = (value, decimals) => {
+	const scaled = value * 10 ** decimals;
+	return Math.abs(scaled - Math.round(scaled)) < tolerance(scaled);
+};
+/**
+* The scale's ticks with those finer than `decimals` places dropped.
+*
+* d3 steps by 1, 2 or 5 times a power of ten, so every multiple of 10^-decimals inside the domain is one of its ticks.
+*
+* @param scale    - The value scale visx built.
+* @param count    - Ticks to ask the scale for; undefined uses the scale's own default, as visx does.
+* @param decimals - Decimal places a tick may carry; 0 keeps whole numbers.
+* @return The kept ticks, or undefined when visx's own ticks need no change.
+*/
+const getTickDecimalValues = (scale, count, decimals = 0) => {
+	const ticks = scale?.ticks?.(count);
+	if (!ticks?.every((tick) => typeof tick === "number")) return;
+	const kept = ticks.filter((tick) => isOnDecimals(tick, decimals));
+	return kept.length > 1 && kept.length < ticks.length ? kept : void 0;
+};
+/**
+* A value domain widened to the nearest `decimals` steps when fewer than two fit inside it, so the axis shows at least two ticks.
+*
+* @param domain   - The domain the chart would scale to.
+* @param decimals - The axis's `tickDecimals`.
+* @return The widened domain, or undefined when `domain` needs no change.
+*/
+const getTickDecimalsDomain = (domain, decimals) => {
+	if (!domain || !isValidDecimals(decimals)) return;
+	const scale = 10 ** decimals;
+	const low = domain[0] * scale;
+	const high = domain[1] * scale;
+	if (Math.floor(high + tolerance(high)) - Math.ceil(low - tolerance(low)) >= 1) return;
+	const floor = Math.floor(low + tolerance(low));
+	const ceil = Math.max(Math.ceil(high - tolerance(high)), floor + 1);
+	return [floor / scale, ceil / scale];
+};
+/**
+* The decimals a value axis's ticks are held to: 0 for whole-number data, else the caller's `tickDecimals`.
+*
+* @param hasWholeNumberValues - Whether every plotted value is a whole number.
+* @param tickDecimals         - The axis's `tickDecimals`.
+* @return Decimal places, or undefined to keep visx's ticks.
+*/
+const getTickDecimals = (hasWholeNumberValues, tickDecimals) => {
+	if (hasWholeNumberValues) return 0;
+	return isValidDecimals(tickDecimals) ? tickDecimals : void 0;
+};
+/**
+* Hands its children the chart's value-scale ticks, held to `decimals` places.
+*
+* @param props          - Component props.
+* @param props.axis     - Which scale carries the values.
+* @param props.numTicks - Ticks to ask the scale for.
+* @param props.decimals - Decimal places a tick may carry, or undefined to keep visx's ticks.
+* @param props.children - Renders the axis and grid with the tick values.
+* @return The rendered children.
+*/
+const TickDecimals = ({ axis, numTicks, decimals, children }) => {
+	const { xScale, yScale } = (0, react.useContext)(_visx_xychart.DataContext);
+	const tickValues = decimals === void 0 ? void 0 : getTickDecimalValues(axis === "x" ? xScale : yScale, numTicks, decimals);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(tickValues) });
+};
 // src/charts/private/time-axis.ts
 const X_TICK_WIDTH = 60;
 const getCurveType = (type, smoothing) => {
@@ -3850,52 +3942,24 @@ const buildTimeAxisOptions = ({ dataSorted, width, axisOptions, scaleDomain, zoo
 		...numTicks === void 0 ? {} : { numTicks }
 	};
 };
-// src/charts/private/whole-number-ticks.tsx
-/**
-* Whether every reading in the series is a whole number.
-*
-* @param series - The series visx renders.
-* @return True when at least one reading exists and none has a fraction.
-*/
-const hasOnlyWholeNumbers = (series) => {
-	let sawReading = false;
-	for (const { data } of series) for (const point of data) {
-		const value = point?.value;
-		if (!isReading(value)) continue;
-		if (!Number.isInteger(value)) return false;
-		sawReading = true;
-	}
-	return sawReading;
-};
+// src/charts/private/use-compact-when-short.ts
 /**
-* The scale's ticks with the fractional ones dropped.
+* Whether a `compactWhenShort` chart is compact, and the margin it then defaults to.
 *
-* d3 steps by 1, 2 or 5 times a power of ten, so every whole number inside the domain is one of its ticks.
-*
-* @param scale - The value scale visx built.
-* @param count - Ticks to ask the scale for; undefined uses the scale's own default, as visx does.
-* @return Whole-number ticks, or undefined when visx's own ticks need no change.
-*/
-const getWholeNumberTickValues = (scale, count) => {
-	const ticks = scale?.ticks?.(count);
-	if (!ticks?.every((tick) => typeof tick === "number")) return;
-	const whole = ticks.filter((tick) => Number.isInteger(tick));
-	return whole.length > 1 && whole.length < ticks.length ? whole : void 0;
-};
-/**
-* Hands its children the whole-number ticks of the chart's value scale.
+* Reads the height the chart was given, not the measured plot area: that grows once the legend
+* is hidden and would flip the chart straight back. A zero height is unmeasured, not short.
 *
-* @param props          - Component props.
-* @param props.axis     - Which scale carries the values.
-* @param props.numTicks - Ticks to ask the scale for.
-* @param props.enabled  - Whether the plotted values are all whole numbers and the caller pinned neither the ticks nor the value domain.
-* @param props.children - Renders the axis and grid with the tick values.
-* @return The rendered children.
+* @param enabled - The chart's `compactWhenShort` prop.
+* @param height  - The height the chart was given.
+* @return Whether the chart is compact, and the compact margin when it is.
 */
-const WholeNumberTicks = ({ axis, numTicks, enabled, children }) => {
-	const { xScale, yScale } = (0, react.useContext)(_visx_xychart.DataContext);
-	const tickValues = enabled ? getWholeNumberTickValues(axis === "x" ? xScale : yScale, numTicks) : void 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(tickValues) });
+const useCompactWhenShort = (enabled, height) => {
+	const { compactWhenShort } = useGlobalChartsTheme();
+	const isCompact = enabled && (height ?? 0) > 0 && height < compactWhenShort.below;
+	return {
+		isCompact,
+		compactMargin: isCompact ? compactWhenShort.margin : void 0
+	};
 };
 // src/charts/private/with-responsive/with-responsive.module.scss
 var with_responsive_module_default = {
@@ -4782,7 +4846,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, tooltipPlacement, tooltipStyle, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, tooltipPlacement, tooltipStyle, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md", compactWhenShort = false }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendComparisonItem = legend.comparisonItem ?? false;
@@ -4809,6 +4873,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		}
 	});
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "LineChart");
+	const { isCompact, compactMargin } = useCompactWhenShort(compactWhenShort, height);
 	const [measuredChartHeight, setMeasuredChartHeight] = (0, react.useState)();
 	const handleContentHeightChange = (0, react.useCallback)((contentHeight) => {
 		setMeasuredChartHeight(contentHeight > 0 ? contentHeight : height);
@@ -4897,25 +4962,34 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		return min <= max ? [min, max] : void 0;
 	}, [dataSorted, isSeriesVisible]);
 	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(visibleSeries), [visibleSeries]);
+	const isLogScale = options?.yScale?.type === "log";
+	const callerTickDecimals = isLogScale ? void 0 : options?.axis?.y?.tickDecimals;
+	const yTickDecimals = getTickDecimals(hasWholeNumberValues, callerTickDecimals);
 	const chartOptions = (0, react.useMemo)(() => {
-		const fallbackYDomain = getFallbackYDomain(visibleReadingExtent, options?.yScale?.type === "log");
+		const fallbackYDomain = getFallbackYDomain(visibleReadingExtent, isLogScale);
+		const { tickDecimals, ...yAxisOptions } = options?.axis?.y ?? {};
+		const tickDecimalsDomain = isLogScale || tickDecimals === void 0 || options?.yScale?.domain || yAxisOptions.tickValues ? void 0 : getTickDecimalsDomain(yDomain ?? fallbackYDomain ?? visibleReadingExtent, yTickDecimals);
 		return {
 			axis: {
-				x: buildTimeAxisOptions({
-					dataSorted,
-					width,
-					axisOptions: options?.axis?.x,
-					scaleDomain: options?.xScale?.domain,
-					zoomDomain: zoom.domain,
-					formatting,
-					isSeriesRendered: (series) => isSeriesVisible(series.label)
-				}),
+				x: {
+					...buildTimeAxisOptions({
+						dataSorted,
+						width,
+						axisOptions: options?.axis?.x,
+						scaleDomain: options?.xScale?.domain,
+						zoomDomain: zoom.domain,
+						formatting,
+						isSeriesRendered: (series) => isSeriesVisible(series.label)
+					}),
+					...isCompact && { display: false }
+				},
 				y: {
 					orientation: "left",
 					numTicks: 4,
 					tickFormat: _automattic_number_formatters.formatNumberCompact,
 					display: true,
-					...options?.axis?.y
+					...yAxisOptions,
+					...isCompact && { display: false }
 				}
 			},
 			xScale: {
@@ -4929,6 +5003,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 				zero: false,
 				...fallbackYDomain ? { domain: fallbackYDomain } : {},
 				...yDomain ? { domain: yDomain } : {},
+				...tickDecimalsDomain ? { domain: tickDecimalsDomain } : {},
 				...options?.yScale
 			}
 		};
@@ -4939,8 +5014,11 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		zoom.domain,
 		yDomain,
 		visibleReadingExtent,
+		isLogScale,
+		yTickDecimals,
 		formatting,
-		isSeriesVisible
+		isSeriesVisible,
+		isCompact
 	]);
 	const bucketInfo = (0, react.useMemo)(() => getBucketInfo(visibleSeries, options?.axis?.x?.tickResolution), [visibleSeries, options?.axis?.x?.tickResolution]);
 	const tooltipRenderGlyph = (0, react.useMemo)(() => {
@@ -5015,7 +5093,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		className: (0, clsx.default)("line-chart", line_chart_module_default["line-chart"]),
 		children: error
 	});
-	const legendElement = showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
+	const legendElement = showLegend && !isCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
 		orientation: legend.orientation ?? "horizontal",
 		alignment: legend.alignment ?? "center",
 		position: legendPosition,
@@ -5039,7 +5117,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
 			legendElement,
-			legendChildren,
+			legendChildren: isCompact ? [] : legendChildren,
 			gap,
 			className: (0, clsx.default)("line-chart", line_chart_module_default["line-chart"], { [line_chart_module_default["line-chart--animated"]]: animation && !prefersReducedMotion }, className),
 			style: {
@@ -5067,6 +5145,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 							height: chartHeight,
 							margin: {
 								...defaultMargin,
+								...compactMargin,
 								...margin
 							},
 							xScale: chartOptions.xScale,
@@ -5074,12 +5153,12 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 							onPointerOut,
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NearestPointerEvents, { ...zoom.handlers }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TickDecimals, {
 									axis: "y",
 									numTicks: chartOptions.axis.y.numTicks,
-									enabled: hasWholeNumberValues && !chartOptions.axis.y.tickValues && !options?.yScale?.domain,
+									decimals: !chartOptions.axis.y.tickValues && !options?.yScale?.domain ? yTickDecimals : void 0,
 									children: (tickValues) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-										!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+										!allSeriesHidden && gridVisibility !== "none" && !isCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
 											columns: false,
 											numTicks: chartOptions.axis.y.numTicks,
 											tickValues: tickValues ?? chartOptions.axis.y.tickValues
@@ -5096,7 +5175,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: getAllHiddenMessage(legendInteractive, "series")
+									children: getAllHiddenMessage(legendInteractive && !isCompact, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomClip, {
 									active: zoomable && !!zoom.domain,
@@ -5298,7 +5377,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 	});
 };
 // src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md", compactWhenShort = false }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
 	const legendPosition = legend.position ?? "bottom";
@@ -5321,6 +5400,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		}
 	});
 	const { legendChildren, nonLegendChildren } = useChartChildren(children, "AreaChart");
+	const { isCompact, compactMargin } = useCompactWhenShort(compactWhenShort, height);
 	const [measuredChartHeight, setMeasuredChartHeight] = (0, react.useState)();
 	const handleContentHeightChange = (0, react.useCallback)((contentHeight) => {
 		setMeasuredChartHeight(contentHeight > 0 ? contentHeight : height);
@@ -5400,20 +5480,24 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 	const chartOptions = (0, react.useMemo)(() => {
 		return {
 			axis: {
-				x: buildTimeAxisOptions({
-					dataSorted,
-					width,
-					axisOptions: options?.axis?.x,
-					scaleDomain: options?.xScale?.domain,
-					zoomDomain: zoom.domain,
-					formatting
-				}),
+				x: {
+					...buildTimeAxisOptions({
+						dataSorted,
+						width,
+						axisOptions: options?.axis?.x,
+						scaleDomain: options?.xScale?.domain,
+						zoomDomain: zoom.domain,
+						formatting
+					}),
+					...isCompact && { display: false }
+				},
 				y: {
 					orientation: "left",
 					numTicks: 4,
 					tickFormat: _automattic_number_formatters.formatNumberCompact,
 					display: true,
-					...options?.axis?.y
+					...options?.axis?.y,
+					...isCompact && { display: false }
 				}
 			},
 			xScale: {
@@ -5436,7 +5520,8 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		stacked,
 		fixedYDomain,
 		zoom.domain,
-		formatting
+		formatting,
+		isCompact
 	]);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
 	const error = validateData$3(dataSorted);
@@ -5516,7 +5601,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		className: (0, clsx.default)("area-chart", area_chart_module_default["area-chart"]),
 		children: error
 	});
-	const legendElement = showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
+	const legendElement = showLegend && !isCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
 		orientation: legend.orientation ?? "horizontal",
 		alignment: legend.alignment ?? "center",
 		position: legendPosition,
@@ -5564,7 +5649,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
 			legendElement,
-			legendChildren,
+			legendChildren: isCompact ? [] : legendChildren,
 			gap,
 			className: (0, clsx.default)("area-chart", area_chart_module_default["area-chart"], { [area_chart_module_default["area-chart--animated"]]: animationEnabled }, className),
 			style: {
@@ -5592,6 +5677,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 							height: chartHeight,
 							margin: {
 								...defaultMargin,
+								...compactMargin,
 								...margin
 							},
 							xScale: chartOptions.xScale,
@@ -5602,12 +5688,12 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 							onPointerOut,
 							pointerEventsDataKey: "nearest",
 							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TickDecimals, {
 									axis: "y",
 									numTicks: chartOptions.axis.y.numTicks,
-									enabled: hasWholeNumberValues && !chartOptions.axis.y.tickValues && !options?.yScale?.domain,
+									decimals: hasWholeNumberValues && !chartOptions.axis.y.tickValues && !options?.yScale?.domain ? 0 : void 0,
 									children: (tickValues) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-										!allSeriesHidden && gridVisibility !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+										!allSeriesHidden && gridVisibility !== "none" && !isCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
 											columns: false,
 											numTicks: chartOptions.axis.y.numTicks,
 											tickValues: tickValues ?? chartOptions.axis.y.tickValues
@@ -5624,7 +5710,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: getAllHiddenMessage(legendInteractive, "series")
+									children: getAllHiddenMessage(legendInteractive && !isCompact, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ZoomClip, {
 									active: zoomable,
@@ -5687,9 +5773,145 @@ var bar_chart_module_default = {
 	"bar-chart": "a8ccharts-97yN9W-bar-chart",
 	"bar-chart--animated": "a8ccharts-97yN9W-bar-chart--animated",
 	"bar-chart--animated-horizontal": "a8ccharts-97yN9W-bar-chart--animated-horizontal",
+	"bar-chart--stacked": "a8ccharts-97yN9W-bar-chart--stacked",
 	"rise": "a8ccharts-97yN9W-rise",
 	"stretch": "a8ccharts-97yN9W-stretch"
 };
+// src/charts/bar-chart/private/category.ts
+/**
+* Whether two data points sit at the same category: the same label, or the same date.
+*
+* @param point    - A data point.
+* @param category - The data point naming the category.
+* @return Whether `point` is at `category`.
+*/
+function isSameCategory(point, category) {
+	return category.label ? point.label === category.label : !!category.date && !!point.date && point.date.getTime() === category.date.getTime();
+}
+/**
+* The category a data point sits at, as a key two points share when `isSameCategory` holds.
+*
+* @param point - A data point.
+* @return The category key.
+*/
+function categoryKey(point) {
+	return point.label ? `label:${point.label}` : `date:${point.date?.getTime()}`;
+}
+// src/charts/bar-chart/private/value-domain.ts
+/** Domain for a value axis that has nothing to scale, so its ticks still read 0 to 1. */
+const EMPTY_DOMAIN = [0, 1];
+/**
+* The value a bar is drawn at, preferring `visualValue` so a zero still shows a sliver.
+*
+* A missing reading is NaN, not null: `ComparisonBars` coerces the value with `Number()`,
+* which turns null into 0 and would draw a comparison shadow at the baseline.
+*
+* @param point - A data point handed to visx.
+* @return The bar value, or NaN when the bucket has no reading.
+*/
+const getBarValue = (point) => {
+	const enhanced = point;
+	return (enhanced?.visualValue !== void 0 ? enhanced.visualValue : point?.value) ?? NaN;
+};
+/**
+* Whether visx renders a bar for a point.
+*
+* @param point - A data point handed to visx.
+* @return True when the point has a finite bar value.
+*/
+const isBarRendered = (point) => Number.isFinite(getBarValue(point));
+/**
+* An explicit domain for the value scale, or null to let visx fit one to the data.
+*
+* Zero goes into the domain here rather than through the scale's `zero` flag: visx applies
+* `nice` before `zero`, which would leave the axis topping out at a raw maximum.
+*
+* @param data             - Every series handed to the chart.
+* @param includeZero      - Whether the domain must span zero.
+* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+* @param tickDecimals     - The value axis's `tickDecimals`.
+* @return Value domain, or null when visx should fit its own.
+*/
+const getValueScaleDomain = (data, includeZero, isSeriesRendered, tickDecimals) => {
+	let min = Infinity;
+	let max = -Infinity;
+	for (const series of data) {
+		if (!isSeriesRendered(series)) continue;
+		for (const point of series.data) {
+			const value = getBarValue(point);
+			if (!Number.isFinite(value)) continue;
+			min = Math.min(min, value);
+			max = Math.max(max, value);
+		}
+	}
+	if (min === Infinity) return [...EMPTY_DOMAIN];
+	let domain = null;
+	if (min === max) domain = min === 0 ? [...EMPTY_DOMAIN] : [Math.min(0, min), Math.max(0, max)];
+	else if (includeZero) domain = [Math.min(0, min), Math.max(0, max)];
+	return getTickDecimalsDomain(domain ?? [min, max], tickDecimals) ?? domain;
+};
+// src/charts/bar-chart/private/stack-layout.ts
+/**
+* The series a layout draws: a stacked layout leaves comparison series out for now.
+*
+* @param series - The chart's series.
+* @param layout - The layout the bars are drawn in.
+* @return The drawn series.
+*/
+function getDrawnSeries(series, layout) {
+	return layout === "stacked" ? series.filter((item) => item.options?.type !== "comparison") : series;
+}
+/**
+* Stacks the series in order at each category: positives upward and negatives downward from zero.
+*
+* @param series - The series to stack, bottom first.
+* @return The stack layout.
+*/
+function getStackLayout(series) {
+	const segments = /* @__PURE__ */ new Map();
+	const extents = /* @__PURE__ */ new Map();
+	for (const { label, data } of series) {
+		const byCategory = /* @__PURE__ */ new Map();
+		segments.set(label, byCategory);
+		for (const point of data) {
+			const value = getBarValue(point);
+			if (!Number.isFinite(value)) continue;
+			const key = categoryKey(point);
+			if (byCategory.has(key)) continue;
+			const extent = extents.get(key) ?? [0, 0];
+			const side = value < 0 ? 0 : 1;
+			const start = extent[side];
+			extent[side] = start + value;
+			extents.set(key, extent);
+			byCategory.set(key, {
+				start,
+				end: start + value
+			});
+		}
+	}
+	let extent = null;
+	for (const [low, high] of extents.values()) extent = extent ? [Math.min(extent[0], low), Math.max(extent[1], high)] : [low, high];
+	return {
+		segmentOf: (key, datum) => segments.get(key)?.get(categoryKey(datum)),
+		extentAt: (category) => {
+			const [low, high] = extents.get(categoryKey(category)) ?? [0, 0];
+			return [low, high];
+		},
+		extent
+	};
+}
+/**
+* The value domain of a computed stack, falling back to an empty chart's domain.
+*
+* @param stack        - The precomputed stack.
+* @param tickDecimals - The value axis precision, when set.
+* @return The extent widened for tick precision, or the empty chart domain.
+*/
+function getStackedValueDomain(stack, tickDecimals) {
+	const { extent } = stack;
+	const domain = !extent || extent[0] === extent[1] ? [...EMPTY_DOMAIN] : extent;
+	return getTickDecimalsDomain(domain, tickDecimals) ?? domain;
+}
 // src/charts/bar-chart/private/truncated-tick-component.tsx
 /**
 * Get the bandwidth of a scale
@@ -5804,57 +6026,6 @@ const createTruncatedTickComponent = (axis) => (props) => {
 */
 const TruncatedXTickComponent = createTruncatedTickComponent("x");
 const TruncatedYTickComponent = createTruncatedTickComponent("y");
-// src/charts/bar-chart/private/value-domain.ts
-/** Domain for a value axis that has nothing to scale, so its ticks still read 0 to 1. */
-const EMPTY_DOMAIN = [0, 1];
-/**
-* The value a bar is drawn at, preferring `visualValue` so a zero still shows a sliver.
-*
-* A missing reading is NaN, not null: `ComparisonBars` coerces the value with `Number()`,
-* which turns null into 0 and would draw a comparison shadow at the baseline.
-*
-* @param point - A data point handed to visx.
-* @return The bar value, or NaN when the bucket has no reading.
-*/
-const getBarValue = (point) => {
-	const enhanced = point;
-	return (enhanced?.visualValue !== void 0 ? enhanced.visualValue : point?.value) ?? NaN;
-};
-/**
-* Whether visx renders a bar for a point.
-*
-* @param point - A data point handed to visx.
-* @return True when the point has a finite bar value.
-*/
-const isBarRendered = (point) => Number.isFinite(getBarValue(point));
-/**
-* An explicit domain for the value scale, or null to let visx fit one to the data.
-*
-* Zero goes into the domain here rather than through the scale's `zero` flag: visx applies
-* `nice` before `zero`, which would leave the axis topping out at a raw maximum.
-*
-* @param data             - Every series handed to the chart.
-* @param includeZero      - Whether the domain must span zero.
-* @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
-* @return Value domain, or null when visx should fit its own.
-*/
-const getValueScaleDomain = (data, includeZero, isSeriesRendered) => {
-	let min = Infinity;
-	let max = -Infinity;
-	for (const series of data) {
-		if (!isSeriesRendered(series)) continue;
-		for (const point of series.data) {
-			const value = getBarValue(point);
-			if (!Number.isFinite(value)) continue;
-			min = Math.min(min, value);
-			max = Math.max(max, value);
-		}
-	}
-	if (min === Infinity) return [...EMPTY_DOMAIN];
-	if (min === max) return min === 0 ? [...EMPTY_DOMAIN] : [Math.min(0, min), Math.max(0, max)];
-	if (includeZero) return [Math.min(0, min), Math.max(0, max)];
-	return null;
-};
 // src/charts/bar-chart/private/use-bar-chart-options.ts
 /** Outer padding of the category band scale (space at the chart edges). */
 const BASE_BAND_PADDING = .2;
@@ -5943,14 +6114,18 @@ const getGroupPadding = (scale) => {
 * @param horizontal       - Whether the chart is horizontal or vertical.
 * @param options          - The options for the chart.
 * @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+* @param stack            - The precomputed stack, when series share one bar.
 * @return The merged options for the chart.
 */
-function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
+function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED, stack) {
 	const stableOptions = useDeepMemo(options);
 	const formatting = useChartFormatting();
+	const isStacked = !!stack;
 	const axisConfig = (0, react.useMemo)(() => {
-		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, tickFormat: xTickFormat, ...xAxisOptions } = stableOptions.axis?.x || {};
-		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, tickFormat: yTickFormat, ...yAxisOptions } = stableOptions.axis?.y || {};
+		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, tickFormat: xTickFormat, tickDecimals: xTickDecimals, ...xAxisOptions } = stableOptions.axis?.x || {};
+		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, tickFormat: yTickFormat, tickDecimals: yTickDecimals, ...yAxisOptions } = stableOptions.axis?.y || {};
+		const [valueAxisOptions, valueTickDecimals] = horizontal ? [xAxisOptions, xTickDecimals] : [yAxisOptions, yTickDecimals];
+		const valueScaleType = isStacked ? "linear" : (horizontal ? stableOptions.xScale : stableOptions.yScale)?.type;
 		return {
 			xLabelOverflow,
 			yLabelOverflow,
@@ -5958,9 +6133,14 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 			yTickFormat,
 			xAxisOptions,
 			yAxisOptions,
-			tickResolution: horizontal ? yTickResolution : xTickResolution
+			tickResolution: horizontal ? yTickResolution : xTickResolution,
+			valueTickDecimals: valueAxisOptions.tickValues || valueScaleType === "log" ? void 0 : valueTickDecimals
 		};
-	}, [stableOptions, horizontal]);
+	}, [
+		stableOptions,
+		horizontal,
+		isStacked
+	]);
 	const { tickResolution } = axisConfig;
 	const defaultOptions = (0, react.useMemo)(() => {
 		const bandScale = {
@@ -6015,17 +6195,21 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
 		const valueScaleOptions = horizontal ? stableOptions.xScale : stableOptions.yScale;
 		const includeZero = data.some((s) => s.options?.type === "comparison") || valueScaleOptions?.zero !== false;
-		const domain = valueScaleOptions?.domain ? null : getValueScaleDomain(data, includeZero, isSeriesRendered);
-		const valueScaleDomainOverride = domain ? { domain } : {};
+		let domain = null;
+		if (!valueScaleOptions?.domain) domain = stack ? getStackedValueDomain(stack, axisConfig.valueTickDecimals) : getValueScaleDomain(data, includeZero, isSeriesRendered, axisConfig.valueTickDecimals);
+		const valueScaleOverride = {
+			...domain && { domain },
+			...stack && { type: "linear" }
+		};
 		const xScale = {
 			...baseXScale,
 			...stableOptions.xScale || {},
-			...horizontal ? valueScaleDomainOverride : {}
+			...horizontal ? valueScaleOverride : {}
 		};
 		const yScale = {
 			...baseYScale,
 			...stableOptions.yScale || {},
-			...!horizontal ? valueScaleDomainOverride : {}
+			...!horizontal ? valueScaleOverride : {}
 		};
 		const { xLabelOverflow, yLabelOverflow, xTickFormat, yTickFormat, xAxisOptions, yAxisOptions } = axisConfig;
 		const dateAxisTickFormat = horizontal ? yTickFormat : xTickFormat;
@@ -6060,7 +6244,8 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				}
 			},
 			barGroup: { padding: getGroupPadding(horizontal ? yScale : xScale) },
-			tooltip: { labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter }
+			tooltip: { labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter },
+			valueTickDecimals: axisConfig.valueTickDecimals
 		};
 	}, [
 		defaultOptions,
@@ -6068,7 +6253,8 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		stableOptions,
 		horizontal,
 		data,
-		isSeriesRendered
+		isSeriesRendered,
+		stack
 	]);
 }
 // src/charts/bar-chart/private/band-scale.ts
@@ -6100,6 +6286,17 @@ function getValueScaleBaseline(scale) {
 	return Number.isFinite(maybeZero) ? Math.max(maybeZero, minOutput) : minOutput;
 }
 /**
+* A value's position on a continuous scale, held inside its range so a domain that leaves the value out cannot push a bar off the plot.
+*
+* @param {ValueScale} scale - The continuous value scale.
+* @param {number}     value - The value to place.
+* @return {number} The position in pixels.
+*/
+function getValueScalePosition(scale, value) {
+	const [a, b] = scale.range().map((r) => Number(r) || 0);
+	return Math.min(Math.max(scale(value), Math.min(a, b)), Math.max(a, b));
+}
+/**
 * Compute the rect that spans `valuePositions` along the value axis, centered on a slot and scaled by `widthFactor` across it.
 *
 * @param {object}   params                - Geometry inputs.
@@ -6296,13 +6493,13 @@ const SelectedBarRing = ({ chartId, selected, slotKeys, groupPadding, horizontal
 	const slotOffset = groupScale(selected.slotKey);
 	const bandPosition = Number(bandScale((horizontal ? yAccessor : xAccessor)(category)));
 	if (slotOffset == null || !Number.isFinite(bandPosition)) return null;
-	const valuePositions = selected.data.map((datum) => Number(valueScale(Number((horizontal ? xAccessor : yAccessor)(datum)))));
+	const valuePositions = selected.valueExtent ? selected.valueExtent.map((value) => getValueScalePosition(valueScale, value)) : [getValueScaleBaseline(valueScale), ...selected.data.map((datum) => Number(valueScale(Number((horizontal ? xAccessor : yAccessor)(datum)))))];
 	const rect = computeSlotRect({
 		horizontal,
 		bandPosition,
 		slotOffset,
 		slotThickness: groupScale.bandwidth(),
-		valuePositions: [getValueScaleBaseline(valueScale), ...valuePositions],
+		valuePositions,
 		widthFactor: selected.thickness
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedRing, {
@@ -6312,38 +6509,147 @@ const SelectedBarRing = ({ chartId, selected, slotKeys, groupPadding, horizontal
 		testId: "bar-chart-selected-ring"
 	});
 };
-// src/charts/bar-chart/private/bar-layer.tsx
+// src/charts/bar-chart/private/stacked-bar-series.tsx
 /**
-* Draws the bars in front of any comparison shadows, slotted for an overlap layout and grouped by visx otherwise, then the selected bar's ring.
+* The side a segment rounds when it ends its drawn stack: the far end of the positives or of the negatives.
 *
-* @param props                  - Component props.
-* @param props.chartId          - The chart's id, which keeps the ring's clip path unique on a page with several charts.
-* @param props.overlapSlots     - The overlap layout, or undefined for a grouped one.
-* @param props.selectedBar      - The bar or slot the keyboard has selected.
-* @param props.primaryEntries   - The visible primary series, for a grouped layout.
-* @param props.primaryKeys      - Their labels, in group order.
-* @param props.getBarBackground - Reads a series' bar fill.
-* @param props.barClassName     - Adds classes to a bar.
-* @param props.groupPadding     - The padding between the bars of a category.
+* @param stack      - The stack layout.
+* @param segment    - The segment.
+* @param category   - A datum at the segment's category.
+* @param horizontal - Whether the bars run horizontally.
+* @param clamp      - Holds a value inside the value domain, where the bars are cut off.
+* @return The side to round, or undefined for a segment inside its stack or drawn with no length.
+*/
+function getStackEnd(stack, segment, category, horizontal, clamp) {
+	const [start, end] = [segment.start, segment.end].map(clamp);
+	if (start === end) return;
+	const extent = stack.extentAt(category).map(clamp);
+	if (segment.end > 0 && end === extent[1]) return horizontal ? "right" : "top";
+	if (segment.end < 0 && end === extent[0]) return horizontal ? "left" : "bottom";
+}
+const StackedBarSeries = ({ barClassName, slotKeys, slotKey, groupPadding, stack, ...props }) => {
+	const { xScale, yScale, horizontal } = (0, react.useContext)(_visx_xychart.DataContext);
+	const bandScale = horizontal ? yScale : xScale;
+	const valueScale = horizontal ? xScale : yScale;
+	const groupScale = (0, react.useMemo)(() => createGroupScale(slotKeys, bandScale?.bandwidth?.() ?? 0, groupPadding), [
+		slotKeys,
+		bandScale,
+		groupPadding
+	]);
+	const { dataKey, xAccessor, yAccessor } = props;
+	const [domainStart, domainEnd] = (horizontal ? xScale : yScale)?.domain() ?? [-Infinity, Infinity];
+	const domainMin = Math.min(Number(domainStart), Number(domainEnd));
+	const domainMax = Math.max(Number(domainStart), Number(domainEnd));
+	const clamp = (0, react.useCallback)((value) => Math.min(domainMax, Math.max(domainMin, value)), [domainMin, domainMax]);
+	const stackEnd = (0, react.useCallback)((datum) => {
+		const [low, high] = stack.extentAt(datum);
+		return clamp(high > 0 ? high : low);
+	}, [stack, clamp]);
+	const renderGlyph = (0, react.useCallback)(({ datum, color }) => {
+		const segment = stack.segmentOf(dataKey, datum);
+		if (!segment || !bandScale?.bandwidth || !valueScale) return null;
+		const rect = computeSlotRect({
+			horizontal: !!horizontal,
+			bandPosition: Number(bandScale((horizontal ? yAccessor : xAccessor)(datum))),
+			slotOffset: groupScale(slotKey) ?? 0,
+			slotThickness: groupScale.bandwidth(),
+			valuePositions: [segment.start, segment.end].map((value) => getValueScalePosition(valueScale, value)),
+			widthFactor: 1
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			...rect,
+			"data-stack-end": getStackEnd(stack, segment, datum, !!horizontal, clamp),
+			className: (0, clsx.default)("visx-bar", barClassName?.(datum)),
+			fill: color
+		});
+	}, [
+		stack,
+		clamp,
+		dataKey,
+		bandScale,
+		valueScale,
+		horizontal,
+		groupScale,
+		slotKey,
+		xAccessor,
+		yAccessor,
+		barClassName
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.GlyphSeries, {
+		...props,
+		xAccessor: horizontal ? stackEnd : xAccessor,
+		yAccessor: horizontal ? yAccessor : stackEnd,
+		enableEvents: false,
+		renderGlyph
+	});
+};
+// src/charts/bar-chart/private/bar-layer.tsx
+/**
+* Wraps the stacked bars so the entrance animation grows them from the zero line.
+*
+* Reading the scales here, not in `BarLayer`, keeps the series' own data registration from re-rendering it in a loop.
+*
+* @param props            - Component props.
+* @param props.horizontal - Whether the bars run horizontally.
+* @param props.children   - The stacked series.
+* @return The group.
+*/
+const StackedBarGroup = ({ horizontal, children }) => {
+	const { xScale, yScale } = (0, react.useContext)(_visx_xychart.DataContext);
+	const valueScale = horizontal ? xScale : yScale;
+	const zero = valueScale ? getValueScalePosition(valueScale, 0) : 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+		className: "visx-bar-group",
+		style: { transformOrigin: horizontal ? `${zero}px 0` : `0 ${zero}px` },
+		children
+	});
+};
+/**
+* Draws the bars in front of any comparison shadows, stacked or slotted in the layout's slots and grouped by visx otherwise, then the selected bar's ring.
+*
+* @param props                  - Component props.
+* @param props.chartId          - The chart's id, which keeps the ring's clip path unique on a page with several charts.
+* @param props.barSlots         - The overlap or stacked slots, or undefined for a grouped layout.
+* @param props.selectedBar      - The bar or slot the keyboard has selected.
+* @param props.primaryEntries   - The visible primary series, for a grouped layout.
+* @param props.primaryKeys      - Their labels, in group order.
+* @param props.getBarBackground - Reads a series' bar fill.
+* @param props.barClassName     - Adds classes to a bar.
+* @param props.groupPadding     - The padding between the bars of a category.
 * @param props.horizontal       - Whether the bars run horizontally.
 * @param props.xAccessor        - Reads a datum's x value.
 * @param props.yAccessor        - Reads a datum's y value.
 * @return The bars.
 */
-const BarLayer = ({ chartId, overlapSlots, selectedBar, primaryEntries, primaryKeys, getBarBackground, barClassName, groupPadding, horizontal, xAccessor, yAccessor }) => {
+const BarLayer = ({ chartId, barSlots, selectedBar, primaryEntries, primaryKeys, getBarBackground, barClassName, groupPadding, horizontal, xAccessor, yAccessor }) => {
 	let bars;
-	if (overlapSlots) bars = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+	if (barSlots?.kind === "stacked") bars = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StackedBarGroup, {
+		horizontal,
+		children: barSlots.entries.map(({ series, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StackedBarSeries, {
+			dataKey: series.label,
+			data: series.data,
+			xAccessor,
+			yAccessor,
+			colorAccessor: getBarBackground(index),
+			barClassName,
+			slotKeys: barSlots.slotKeys,
+			slotKey: barSlots.slotOf(series.label),
+			groupPadding,
+			stack: barSlots.stack
+		}, series.label))
+	});
+	else if (barSlots) bars = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
 		className: "visx-bar-group",
-		children: overlapSlots.entries.map(({ series, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlottedBarSeries, {
+		children: barSlots.entries.map(({ series, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlottedBarSeries, {
 			dataKey: series.label,
 			data: series.data,
 			xAccessor,
 			yAccessor,
 			colorAccessor: getBarBackground(index),
 			barClassName,
-			slotKeys: overlapSlots.slotKeys,
-			slotKey: overlapSlots.slotOf(series.label),
-			thickness: overlapSlots.thicknessOf(series.label),
+			slotKeys: barSlots.slotKeys,
+			slotKey: barSlots.slotOf(series.label),
+			thickness: barSlots.thicknessOf(series.label),
 			groupPadding
 		}, series.label))
 	});
@@ -6373,7 +6679,7 @@ const BarLayer = ({ chartId, overlapSlots, selectedBar, primaryEntries, primaryK
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [bars, selectedBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedBarRing, {
 		chartId,
 		selected: selectedBar,
-		slotKeys: overlapSlots?.slotKeys ?? primaryKeys,
+		slotKeys: barSlots?.slotKeys ?? primaryKeys,
 		groupPadding,
 		horizontal,
 		xAccessor,
@@ -6509,28 +6815,36 @@ function getOverlapBarColors(series, colors, slotColors, background) {
 	});
 	return barColors;
 }
-// src/charts/bar-chart/private/use-overlap-slots.ts
-/**
-* Whether two data points sit at the same category: the same label, or the same date.
-*
-* @param point    - A data point.
-* @param category - The data point naming the category.
-* @return Whether `point` is at `category`.
-*/
-function isSameCategory(point, category) {
-	return category.label ? point.label === category.label : !!category.date && !!point.date && point.date.getTime() === category.date.getTime();
-}
+// src/charts/bar-chart/private/use-bar-slots.ts
 /**
-* Lays out the visible series of an overlap layout in slots and layers.
+* Lays out the visible series in slots: overlap layers primaries and comparisons in two, stacked puts every primary in one.
 *
-* @param enabled              - Whether the chart draws an overlap layout.
+* @param layout               - How the chart places its series in a category.
 * @param seriesWithVisibility - Every series, with its index and whether it is visible.
-* @return The layout, or undefined when the chart is not an overlap layout.
+* @return The slots, or undefined for a grouped layout.
 */
-function useOverlapSlots(enabled, seriesWithVisibility) {
+function useBarSlots(layout, seriesWithVisibility) {
 	return (0, react.useMemo)(() => {
-		if (!enabled) return;
+		if (layout === "grouped") return;
 		const visible = seriesWithVisibility.filter(({ isVisible }) => isVisible);
+		if (layout === "stacked") {
+			const entries = visible.map(({ series, index }) => ({
+				series,
+				index
+			}));
+			const slotKeys = [PRIMARY_SLOT];
+			const slotOf = () => PRIMARY_SLOT;
+			return {
+				kind: "stacked",
+				stack: getStackLayout(entries.map(({ series }) => series)),
+				entries,
+				keys: entries.map(({ series }) => series.label),
+				slotKeys,
+				slotOf,
+				thicknessOf: () => 1,
+				positions: getStopPositions(entries, slotKeys, slotOf)
+			};
+		}
 		const placements = getOverlapPlacements(visible.map(({ series }) => series));
 		const placed = visible.map(({ series, index }, position) => ({
 			entry: {
@@ -6547,6 +6861,7 @@ function useOverlapSlots(enabled, seriesWithVisibility) {
 		const showsComparisons = entries.some(({ series }) => slotOf(series.label) === COMPARISON_SLOT);
 		const slotKeys = [...hasPrimaries ? [PRIMARY_SLOT] : [], ...showsComparisons ? [COMPARISON_SLOT] : []];
 		return {
+			kind: "overlap",
 			entries,
 			keys: entries.map(({ series }) => series.label),
 			slotKeys,
@@ -6554,16 +6869,7 @@ function useOverlapSlots(enabled, seriesWithVisibility) {
 			thicknessOf,
 			positions: getStopPositions(entries, slotKeys, slotOf)
 		};
-	}, [enabled, seriesWithVisibility]);
-}
-/**
-* The category a data point sits at, as a key two points share when `isSameCategory` holds.
-*
-* @param point - A data point.
-* @return The category key.
-*/
-function categoryKey(point) {
-	return point.label ? `label:${point.label}` : `date:${point.date?.getTime()}`;
+	}, [layout, seriesWithVisibility]);
 }
 /**
 * Lists a stop for every slot at every category that slot draws a bar at, category by category.
@@ -6622,7 +6928,7 @@ function membersAt(entries, category, stopKey) {
 /**
 * The slot a keyboard index selects, and every bar at its category.
 *
-* @param slots         - The overlap layout.
+* @param slots         - The overlap or stacked slots.
 * @param selectedIndex - The keyboard index into `slots.positions`.
 * @return The selected slot, or undefined when nothing is selected or drawn there.
 */
@@ -6636,25 +6942,26 @@ function getSelectedSlot(slots, selectedIndex) {
 		data: slotBars.map(({ datum }) => datum),
 		slotKey,
 		thickness: Math.max(...slotBars.map(({ key }) => slots.thicknessOf(key))),
-		members
+		members,
+		...slots.kind === "stacked" && { valueExtent: slots.stack.extentAt(category) }
 	};
 }
 // src/charts/bar-chart/private/use-bar-stops.ts
 /**
-* Lays out the keyboard stops: one per slot and category in an overlap layout, else one per primary bar, series-major within each category.
+* Lays out the keyboard stops: one per slot and category in a slotted layout, else one per primary bar, series-major within each category.
 *
-* @param overlapSlots   - The overlap layout, or undefined for a grouped one.
+* @param barSlots       - The overlap or stacked slots, or undefined for a grouped layout.
 * @param primaryEntries - The visible primary series.
 * @return The stops.
 */
-function useBarStops(overlapSlots, primaryEntries) {
-	const series = (0, react.useMemo)(() => overlapSlots ? [] : primaryEntries.map((entry) => entry.series), [overlapSlots, primaryEntries]);
+function useBarStops(barSlots, primaryEntries) {
+	const series = (0, react.useMemo)(() => barSlots ? [] : primaryEntries.map((entry) => entry.series), [barSlots, primaryEntries]);
 	return {
-		count: overlapSlots?.positions.length ?? Math.max(0, ...series.map((item) => item.data.length)) * series.length,
-		key: (0, react.useMemo)(() => JSON.stringify(overlapSlots?.keys ?? series.map((item) => item.label)), [overlapSlots, series]),
+		count: barSlots?.positions.length ?? Math.max(0, ...series.map((item) => item.data.length)) * series.length,
+		key: (0, react.useMemo)(() => JSON.stringify(barSlots?.keys ?? series.map((item) => item.label)), [barSlots, series]),
 		barAt: (0, react.useCallback)((stop) => {
-			if (overlapSlots) {
-				const position = overlapSlots.positions[stop];
+			if (barSlots) {
+				const position = barSlots.positions[stop];
 				return position && {
 					datum: position.datum,
 					index: position.dataPointIndex,
@@ -6670,17 +6977,17 @@ function useBarStops(overlapSlots, primaryEntries) {
 				index,
 				key: item.label
 			} : void 0;
-		}, [overlapSlots, series]),
+		}, [barSlots, series]),
 		stopOf: (0, react.useCallback)((seriesKey, dataPointIndex) => {
-			if (overlapSlots) {
-				const hovered = overlapSlots.entries.find((entry) => entry.series.label === seriesKey)?.series.data[dataPointIndex];
-				const slotKey = overlapSlots.slotOf(seriesKey);
-				const stop = hovered ? overlapSlots.positions.findIndex((position) => position.slotKey === slotKey && isSameCategory(position.datum, hovered)) : -1;
+			if (barSlots) {
+				const hovered = barSlots.entries.find((entry) => entry.series.label === seriesKey)?.series.data[dataPointIndex];
+				const slotKey = barSlots.slotOf(seriesKey);
+				const stop = hovered ? barSlots.positions.findIndex((position) => position.slotKey === slotKey && isSameCategory(position.datum, hovered)) : -1;
 				return stop >= 0 ? stop : void 0;
 			}
 			const seriesIndex = series.findIndex((item) => item.label === seriesKey);
 			return seriesIndex >= 0 ? dataPointIndex * series.length + seriesIndex : void 0;
-		}, [overlapSlots, series])
+		}, [barSlots, series])
 	};
 }
 /**
@@ -6835,10 +7142,23 @@ function nearestBandIndex(data, accessor, scale, position) {
 	return nearest;
 }
 /**
+* How far a pointer sits from a stacked segment along the value axis.
+*
+* @param segment  - The segment, or undefined when its series has no reading there.
+* @param scale    - The value scale.
+* @param position - Pointer coordinate on the value axis.
+* @return 0 inside the segment, Infinity without one, otherwise the gap to its nearer end.
+*/
+function distanceToSegment(segment, scale, position) {
+	if (!segment) return Infinity;
+	const [low, high] = [segment.start, segment.end].map((value) => getValueScalePosition(scale, value)).sort((a, b) => a - b);
+	return Math.max(low - position, 0, position - high);
+}
+/**
 * Correct visx's range-based band inversion, which omits outer padding.
 * @param root0               - Registered series selection.
 * @param root0.keys          - Visible series keys, back to front where bars overlap.
-* @param root0.slots         - Where series share slots: the slots of a category, in the order the band lays them out, and the slot each series sits in.
+* @param root0.slots         - Where series share slots: the slots of a category, in the order the band lays them out, the slot each series sits in, and for a stack where each segment runs.
 * @param root0.groupPadding  - Padding between grouped bars.
 * @param root0.withTooltips  - Whether pointer events update the tooltip.
 * @param root0.onPointerDown - Receives the corrected pointer-down datum.
@@ -6850,6 +7170,7 @@ function BandTooltip({ keys, slots, groupPadding, withTooltips, onPointerDown, o
 	const { xScale, yScale, dataRegistry, horizontal } = (0, react.useContext)(_visx_xychart.DataContext);
 	const { showTooltip, hideTooltip, updateTooltip } = (0, react.useContext)(_visx_xychart.TooltipContext);
 	const scale = horizontal ? yScale : xScale;
+	const valueScale = horizontal ? xScale : yScale;
 	const bandwidth = scale?.bandwidth?.() ?? 0;
 	const groupScale = (0, react.useMemo)(() => createGroupScale(slots?.keys ?? keys, bandwidth, groupPadding), [
 		slots,
@@ -6874,6 +7195,7 @@ function BandTooltip({ keys, slots, groupPadding, withTooltips, onPointerDown, o
 			const start = band + Number(groupScale(slots ? slots.slotOf(key) : key));
 			const end = start + groupScale.step();
 			const distance = position >= start && position <= end ? 0 : Math.abs(position - (start + end) / 2);
+			const valueDistance = slots?.stack && valueScale ? distanceToSegment(slots.stack.segmentOf(key, datum), valueScale, horizontal ? point.x : point.y) : 0;
 			bands.push(band);
 			selections.push({
 				event: params.event,
@@ -6881,8 +7203,8 @@ function BandTooltip({ keys, slots, groupPadding, withTooltips, onPointerDown, o
 				datum,
 				index,
 				svgPoint: point,
-				distanceX: horizontal ? 0 : distance,
-				distanceY: horizontal ? distance : 0
+				distanceX: horizontal ? valueDistance : distance,
+				distanceY: horizontal ? distance : valueDistance
 			});
 		}
 		if (!slots) return selections;
@@ -6891,6 +7213,7 @@ function BandTooltip({ keys, slots, groupPadding, withTooltips, onPointerDown, o
 		return selections.filter((_, index) => bands[index] === hoveredBand);
 	}, [
 		scale,
+		valueScale,
 		dataRegistry,
 		horizontal,
 		keys,
@@ -6984,6 +7307,16 @@ function useBarColors() {
 			data,
 			index
 		}).color);
+		if (layout === "stacked") {
+			const drawn = getDrawnSeries(series, layout);
+			return series.map((data, index) => {
+				const drawnIndex = drawn.indexOf(data);
+				return drawnIndex === -1 ? colors[index] : getElementStyles({
+					data,
+					index: drawnIndex
+				}).color;
+			});
+		}
 		if (layout !== "overlap") return comparisonOpacity === void 0 ? getGroupedBarColors(series, colors, backgroundColor) : colors;
 		return getOverlapBarColors(series, colors, [getElementStyles({ index: 0 }).color, getElementStyles({ index: 1 }).color], backgroundColor);
 	}, [
@@ -7032,13 +7365,14 @@ function forBarLayout(data, items, layout, seriesColors) {
 /**
 * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
 *
-* @param data        - The series the chart draws.
+* @param allData     - The chart's series; those the layout does not draw get no item.
 * @param options     - The legend options, and the layout the bars are drawn in.
 * @param legendShape - The shape of the legend swatches.
 * @return The legend items.
 */
-function useBarLegendItems(data, options = {}, legendShape) {
+function useBarLegendItems(allData, options = {}, legendShape) {
 	const { layout } = options;
+	const data = (0, react.useMemo)(() => getDrawnSeries(allData, layout), [allData, layout]);
 	const getBarColors = useBarColors();
 	const seriesColors = (0, react.useMemo)(() => layout ? getBarColors(data, { layout }) : void 0, [
 		data,
@@ -7067,7 +7401,12 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, tooltipStyle, barClassName, options = {}, orientation = "vertical", layout = "grouped", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
+const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, tooltipStyle, barClassName, options = {}, orientation = "vertical", layout = "grouped", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", compactWhenShort = false, onPointerDown, onPointerUp, onDatumActivate }) => {
+	if (layout === "stacked" && showZeroValues) warnOnce("bar-chart-stacked-zero-values", "BarChart: showZeroValues has no effect in a stacked layout.");
+	if (layout === "stacked" && data?.some((series) => series.options?.type === "comparison")) warnOnce("bar-chart-stacked-comparison", "BarChart: a stacked layout does not draw comparison series yet.");
+	const valueScaleOptions = orientation === "horizontal" ? options.xScale : options.yScale;
+	if (layout === "stacked" && valueScaleOptions?.type && valueScaleOptions.type !== "linear") warnOnce(`bar-chart-stacked-${valueScaleOptions.type}-scale`, `BarChart: a stacked layout draws on a linear value scale, so the ${valueScaleOptions.type} scale is ignored.`);
+	if (layout === "stacked" && valueScaleOptions?.zero === false && !valueScaleOptions.domain) warnOnce("bar-chart-stacked-zero", "BarChart: every stack starts at zero, so zero: false has no effect in a stacked layout.");
 	if (!withTooltips && (withBandHighlight || onBandHighlightChange)) warnOnce("bar-chart-band-highlight-without-tooltips", "BarChart: withBandHighlight and onBandHighlightChange require withTooltips.");
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
@@ -7075,13 +7414,15 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const horizontal = orientation === "horizontal";
 	const isOverlap = layout === "overlap";
+	const isStacked = layout === "stacked";
 	const chartId = useChartId(providedChartId);
 	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
 	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const theme = useXYChartTheme(data);
-	const dataSorted = useChartDataTransform(data);
+	const transformedData = useChartDataTransform(data);
+	const dataSorted = (0, react.useMemo)(() => getDrawnSeries(transformedData, layout), [layout, transformedData]);
 	const dataWithVisibleZeros = useZeroValueDisplay(dataSorted, {
-		enabled: showZeroValues,
+		enabled: showZeroValues && !isStacked,
 		valueAxisLength: horizontal ? width : height
 	});
 	const legendItems = useBarLegendItems(dataSorted, (0, react.useMemo)(() => ({
@@ -7105,13 +7446,39 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	if (providerTheme.barChart?.barStyles?.comparison?.opacity !== void 0) warnOnce("bar-chart-comparison-opacity", "BarChart: theme.barChart.barStyles.comparison.opacity is deprecated. Comparison bars are opaque; leave it unset.");
 	const isSeriesRendered = (0, react.useCallback)((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const hasWholeNumberValues = (0, react.useMemo)(() => hasOnlyWholeNumbers(dataSorted.filter(isSeriesRendered)), [dataSorted, isSeriesRendered]);
-	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
+	const { isCompact, compactMargin } = useCompactWhenShort(compactWhenShort && !horizontal, height);
+	const resolvedOptions = (0, react.useMemo)(() => isCompact ? {
+		...options,
+		axis: {
+			...options.axis,
+			x: {
+				...options.axis?.x,
+				display: false
+			},
+			y: {
+				...options.axis?.y,
+				display: false
+			}
+		}
+	} : options, [isCompact, options]);
+	const seriesWithVisibility = (0, react.useMemo)(() => dataWithVisibleZeros.map((series, index) => ({
+		series,
+		index,
+		isVisible: isSeriesRendered(series)
+	})), [dataWithVisibleZeros, isSeriesRendered]);
+	const allSeriesHidden = (0, react.useMemo)(() => {
+		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
+	}, [seriesWithVisibility]);
+	const primaryEntries = (0, react.useMemo)(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
+	const barSlots = useBarSlots(layout, seriesWithVisibility);
+	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, resolvedOptions, isSeriesRendered, barSlots?.kind === "stacked" ? barSlots.stack : void 0);
 	const valueAxis = horizontal ? chartOptions.axis.x : chartOptions.axis.y;
 	const callerValueDomain = horizontal ? options.xScale?.domain : options.yScale?.domain;
-	const wholeNumberTicksProps = {
+	const valueTickDecimals = getTickDecimals(hasWholeNumberValues, chartOptions.valueTickDecimals);
+	const tickDecimalsProps = {
 		axis: horizontal ? "x" : "y",
 		numTicks: valueAxis.numTicks,
-		enabled: hasWholeNumberValues && !valueAxis.tickValues && !callerValueDomain
+		decimals: !valueAxis.tickValues && !callerValueDomain ? valueTickDecimals : void 0
 	};
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = (0, react.useRef)(null);
@@ -7122,18 +7489,8 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 	}, [height]);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
-	const seriesWithVisibility = (0, react.useMemo)(() => dataWithVisibleZeros.map((series, index) => ({
-		series,
-		index,
-		isVisible: isSeriesRendered(series)
-	})), [dataWithVisibleZeros, isSeriesRendered]);
-	const allSeriesHidden = (0, react.useMemo)(() => {
-		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
-	}, [seriesWithVisibility]);
-	const primaryEntries = (0, react.useMemo)(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
-	const overlapSlots = useOverlapSlots(isOverlap, seriesWithVisibility);
 	const primaryKeys = (0, react.useMemo)(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
-	const stops = useBarStops(overlapSlots, primaryEntries);
+	const stops = useBarStops(barSlots, primaryEntries);
 	const { barAt, stopOf } = stops;
 	const activateSelectedBar = (0, react.useCallback)((stop) => {
 		const bar = barAt(stop);
@@ -7154,7 +7511,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		if (stop !== void 0) onChartPointerMove(stop);
 	}, [stopOf, onChartPointerMove]);
 	const comparisonEntries = (0, react.useMemo)(() => {
-		if (isOverlap) return [];
+		if (barSlots) return [];
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
 			index
@@ -7175,7 +7532,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		});
 		return entries;
 	}, [
-		isOverlap,
+		barSlots,
 		seriesWithVisibility,
 		primaryEntries,
 		primaryKeys
@@ -7241,6 +7598,32 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 			})]
 		});
 	}, [chartOptions.tooltip, dataSorted]);
+	const renderStackedTooltip = (0, react.useCallback)(({ tooltipData }) => {
+		const nearestDatum = tooltipData?.nearestDatum?.datum;
+		if (!nearestDatum || barSlots?.kind !== "stacked") return null;
+		const datumByKey = tooltipData?.datumByKey ?? {};
+		const categoryLabel = chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []);
+		const rows = [...barSlots.entries].reverse().flatMap(({ series }) => {
+			const datum = datumByKey[series.label]?.datum;
+			return datum ? [{
+				label: series.label,
+				datum
+			}] : [];
+		});
+		const readings = rows.filter(({ datum }) => isBarRendered(datum)).length;
+		const [negative, positive] = barSlots.stack.extentAt(nearestDatum);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: bar_chart_module_default["bar-chart__tooltip"],
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: bar_chart_module_default["bar-chart__tooltip-header"],
+					children: categoryLabel
+				}),
+				rows.map(({ label, datum }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderTooltipRow(label, formatReading(datum.value)) }, label)),
+				readings > 1 && renderTooltipRow((0, _wordpress_i18n.__)("Total", "jetpack-charts"), formatReading(negative + positive))
+			]
+		});
+	}, [chartOptions.tooltip, barSlots]);
 	const renderDefaultTooltip = (0, react.useCallback)(({ tooltipData }) => {
 		const nearestDatum = tooltipData?.nearestDatum?.datum;
 		if (!nearestDatum) return null;
@@ -7312,24 +7695,25 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 				}
 			`;
 	}, [chartId]);
-	const overlapBandSlots = (0, react.useMemo)(() => overlapSlots && {
-		keys: overlapSlots.slotKeys,
-		slotOf: overlapSlots.slotOf
-	}, [overlapSlots]);
-	const selectedSlot = (0, react.useMemo)(() => getSelectedSlot(overlapSlots, selectedIndex), [overlapSlots, selectedIndex]);
+	const barBandSlots = (0, react.useMemo)(() => barSlots && {
+		keys: barSlots.slotKeys,
+		slotOf: barSlots.slotOf,
+		stack: barSlots.kind === "stacked" ? barSlots.stack : void 0
+	}, [barSlots]);
+	const selectedSlot = (0, react.useMemo)(() => getSelectedSlot(barSlots, selectedIndex), [barSlots, selectedIndex]);
 	const selectedGroup = (0, react.useMemo)(() => {
-		const stop = overlapSlots || selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
+		const stop = barSlots || selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
 		if (!stop) return;
 		return membersAt(primaryEntries, stop.datum, stop.key);
 	}, [
-		overlapSlots,
+		barSlots,
 		selectedIndex,
 		barAt,
 		primaryEntries
 	]);
 	const selectedMembers = selectedSlot?.members ?? selectedGroup;
 	const selectedBar = (0, react.useMemo)(() => {
-		if (overlapSlots) return selectedSlot;
+		if (barSlots) return selectedSlot;
 		const bar = selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
 		return bar && isBarRendered(bar.datum) ? {
 			data: [bar.datum],
@@ -7337,7 +7721,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 			thickness: 1
 		} : void 0;
 	}, [
-		overlapSlots,
+		barSlots,
 		selectedSlot,
 		selectedIndex,
 		barAt
@@ -7360,9 +7744,9 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		className: (0, clsx.default)("bar-chart", bar_chart_module_default["bar-chart"]),
 		children: error
 	});
-	const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
+	const gridVisibility = isCompact ? "none" : gridVisibilityProp ?? chartOptions.gridVisibility;
 	const legendPosition = legend.position ?? "bottom";
-	const legendElement = showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
+	const legendElement = showLegend && !isCompact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
 		orientation: legend.orientation ?? "horizontal",
 		position: legendPosition,
 		alignment: legend.alignment ?? "center",
@@ -7385,9 +7769,12 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
 			legendElement,
-			legendChildren,
+			legendChildren: isCompact ? [] : legendChildren,
 			gap,
-			className: (0, clsx.default)("bar-chart", bar_chart_module_default["bar-chart"], { [bar_chart_module_default[`bar-chart--animated${horizontal ? "-horizontal" : ""}`]]: animation && !prefersReducedMotion }, className),
+			className: (0, clsx.default)("bar-chart", bar_chart_module_default["bar-chart"], {
+				[bar_chart_module_default["bar-chart--stacked"]]: isStacked,
+				[bar_chart_module_default[`bar-chart--animated${horizontal ? "-horizontal" : ""}`]]: animation && !prefersReducedMotion
+			}, className),
 			style: {
 				width,
 				height
@@ -7414,6 +7801,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 							height: chartHeight,
 							margin: {
 								...defaultMargin,
+								...compactMargin,
 								...margin
 							},
 							xScale,
@@ -7426,8 +7814,8 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									horizontal,
 									onChange: onBandHighlightChange
 								}),
-								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
-									...wholeNumberTicksProps,
+								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TickDecimals, {
+									...tickDecimalsProps,
 									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
 										columns: gridVisibility.includes("y"),
 										rows: false,
@@ -7446,7 +7834,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: getAllHiddenMessage(legendInteractive, "series")
+									children: getAllHiddenMessage(legendInteractive && !isCompact, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComparisonBars, {
 									comparisonEntries,
@@ -7460,7 +7848,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarLayer, {
 									chartId,
-									overlapSlots,
+									barSlots,
 									selectedBar,
 									primaryEntries,
 									primaryKeys,
@@ -7472,16 +7860,16 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									yAccessor: chartOptions.accessors.yAccessor
 								}),
 								(withTooltips || onPointerDown || onPointerUp) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BandTooltip, {
-									keys: overlapSlots?.keys ?? primaryKeys,
-									slots: overlapBandSlots,
+									keys: barSlots?.keys ?? primaryKeys,
+									slots: barBandSlots,
 									groupPadding,
 									withTooltips,
 									onPointerDown,
 									onPointerUp,
 									onPointerMove: handlePointerMove
 								}),
-								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WholeNumberTicks, {
-									...wholeNumberTicksProps,
+								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TickDecimals, {
+									...tickDecimalsProps,
 									children: (valueTicks) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [chartOptions.axis.x.display !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, {
 										...chartOptions.axis.x,
 										...horizontal && valueTicks ? { tickValues: valueTicks } : {}
@@ -7498,7 +7886,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,
-									renderTooltip: renderTooltip || (isOverlap ? renderOverlapTooltip : renderDefaultTooltip),
+									renderTooltip: renderTooltip || isStacked && renderStackedTooltip || (isOverlap ? renderOverlapTooltip : renderDefaultTooltip),
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: bar_chart_module_default["bar-chart__tooltip--keyboard-focused"],
@@ -10180,12 +10568,33 @@ var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => {
 	tslib_1.__exportStar(require_dist$2(), exports);
 	tslib_1.__exportStar(require_dist$1(), exports);
 }));
-// ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/utils.mjs
-var logged = /* @__PURE__ */ new Set();
-// ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/index.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@4.1.0/node_modules/@wordpress/warning/build-module/utils.mjs
+/**
+* Object map tracking messages which have been logged, for use in ensuring a
+* message is only logged once.
+*/
+const logged = /* @__PURE__ */ new Set();
+// ../../../node_modules/.pnpm/@wordpress+warning@4.1.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
+/**
+* Shows a warning with `message` if environment is not `production`.
+*
+* @param message Message to show in the warning.
+*
+* @example
+* ```js
+* import warning from '@wordpress/warning';
+*
+* function MyComponent( props ) {
+*   if ( ! props.title ) {
+*     warning( '`props.title` was not passed' );
+*   }
+*   ...
+* }
+* ```
+*/
 function warning(message) {
 	if (!isDev()) return;
 	if (logged.has(message)) return;
@@ -10195,7 +10604,61 @@ function warning(message) {
 	} catch {}
 	logged.add(message);
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+// ../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/es6/index.js
+var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = function equal(a, b) {
+		if (a === b) return true;
+		if (a && b && typeof a == "object" && typeof b == "object") {
+			if (a.constructor !== b.constructor) return false;
+			var length, i, keys;
+			if (Array.isArray(a)) {
+				length = a.length;
+				if (length != b.length) return false;
+				for (i = length; i-- !== 0;) if (!equal(a[i], b[i])) return false;
+				return true;
+			}
+			if (a instanceof Map && b instanceof Map) {
+				if (a.size !== b.size) return false;
+				for (i of a.entries()) if (!b.has(i[0])) return false;
+				for (i of a.entries()) if (!equal(i[1], b.get(i[0]))) return false;
+				return true;
+			}
+			if (a instanceof Set && b instanceof Set) {
+				if (a.size !== b.size) return false;
+				for (i of a.entries()) if (!b.has(i[0])) return false;
+				return true;
+			}
+			if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+				length = a.length;
+				if (length != b.length) return false;
+				for (i = length; i-- !== 0;) if (a[i] !== b[i]) return false;
+				return true;
+			}
+			if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+			if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+			if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+			keys = Object.keys(a);
+			length = keys.length;
+			if (length !== Object.keys(b).length) return false;
+			for (i = length; i-- !== 0;) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+			for (i = length; i-- !== 0;) {
+				var key = keys[i];
+				if (!equal(a[key], b[key])) return false;
+			}
+			return true;
+		}
+		return a !== a && b !== b;
+	};
+}));
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+/**
+* A `React.useEffect` that will not run on the first render.
+* Source:
+* https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
+*
+* @param effect
+* @param deps
+*/
 function useUpdateEffect(effect, deps) {
 	const mountedRef = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
@@ -10206,1221 +10669,88 @@ function useUpdateEffect(effect, deps) {
 		mountedRef.current = false;
 	}, []);
 }
-var use_update_effect_default = useUpdateEffect;
-// ../../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
-function sheetForTag(tag) {
-	if (tag.sheet) return tag.sheet;
-	/* istanbul ignore next */
-	for (var i = 0; i < document.styleSheets.length; i++) if (document.styleSheets[i].ownerNode === tag) return document.styleSheets[i];
-}
-function createStyleElement(options) {
-	var tag = document.createElement("style");
-	tag.setAttribute("data-emotion", options.key);
-	if (options.nonce !== void 0) tag.setAttribute("nonce", options.nonce);
-	tag.appendChild(document.createTextNode(""));
-	tag.setAttribute("data-s", "");
-	return tag;
-}
-var StyleSheet = /*#__PURE__*/ function() {
-	function StyleSheet(options) {
-		var _this = this;
-		this._insertTag = function(tag) {
-			var before;
-			if (_this.tags.length === 0) {
-				if (_this.insertionPoint) before = _this.insertionPoint.nextSibling;
-				else if (_this.prepend) before = _this.container.firstChild;
-				else before = _this.before;
-			} else before = _this.tags[_this.tags.length - 1].nextSibling;
-			_this.container.insertBefore(tag, before);
-			_this.tags.push(tag);
-		};
-		this.isSpeedy = options.speedy === void 0 ? true : options.speedy;
-		this.tags = [];
-		this.ctr = 0;
-		this.nonce = options.nonce;
-		this.key = options.key;
-		this.container = options.container;
-		this.prepend = options.prepend;
-		this.insertionPoint = options.insertionPoint;
-		this.before = null;
-	}
-	var _proto = StyleSheet.prototype;
-	_proto.hydrate = function hydrate(nodes) {
-		nodes.forEach(this._insertTag);
-	};
-	_proto.insert = function insert(rule) {
-		if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) this._insertTag(createStyleElement(this));
-		var tag = this.tags[this.tags.length - 1];
-		if (this.isSpeedy) {
-			var sheet = sheetForTag(tag);
-			try {
-				sheet.insertRule(rule, sheet.cssRules.length);
-			} catch (e) {}
-		} else tag.appendChild(document.createTextNode(rule));
-		this.ctr++;
-	};
-	_proto.flush = function flush() {
-		this.tags.forEach(function(tag) {
-			var _tag$parentNode;
-			return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
-		});
-		this.tags = [];
-		this.ctr = 0;
-	};
-	return StyleSheet;
-}();
-// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Enum.js
-var MS = "-ms-";
-var MOZ = "-moz-";
-var WEBKIT = "-webkit-";
-var COMMENT = "comm";
-var RULESET = "rule";
-var DECLARATION = "decl";
-var IMPORT = "@import";
-var KEYFRAMES = "@keyframes";
-var LAYER = "@layer";
-// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Utility.js
-/**
-* @param {number}
-* @return {number}
-*/
-var abs = Math.abs;
-/**
-* @param {number}
-* @return {string}
-*/
-var from = String.fromCharCode;
-/**
-* @param {object}
-* @return {object}
-*/
-var assign = Object.assign;
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
+const ComponentsContext = (0, react.createContext)({});
+ComponentsContext.displayName = "ComponentsContext";
+const useComponentsContext = () => (0, react.useContext)(ComponentsContext);
 /**
-* @param {string} value
-* @param {number} length
-* @return {number}
+* Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
+*
+* Note: This function will warn if it detects an un-memoized `value`
+*
+* @param {Object}              props
+* @param {Record<string, any>} props.value
+* @return {Record<string, any>} The consolidated value.
 */
-function hash(value, length) {
-	return charat(value, 0) ^ 45 ? (((length << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
+function useContextSystemBridge({ value }) {
+	const parentContext = useComponentsContext();
+	const valueRef = (0, react.useRef)(value);
+	useUpdateEffect(() => {
+		if ((0, import_es6.default)(valueRef.current, value) && valueRef.current !== value) warning(`Please memoize your context: ${JSON.stringify(value)}`);
+	}, [value]);
+	return (0, react.useMemo)(() => {
+		return (0, deepmerge.default)(parentContext ?? {}, value ?? {}, { isMergeableObject: isPlainObject });
+	}, [parentContext, value]);
 }
 /**
-* @param {string} value
-* @return {string}
+* A Provider component that can modify props for connected components within
+* the Context system.
+*
+* @example
+* ```jsx
+* <ContextSystemProvider value={{ Button: { size: 'small' }}}>
+*   <Button>...</Button>
+* </ContextSystemProvider>
+* ```
+*
+* @template {Record<string, any>} T
+* @param {Object}          options
+* @param {React.ReactNode} options.children Children to render.
+* @param {T}               options.value    Props to render into connected components.
+* @return {React.JSX.Element} A Provider wrapped component.
 */
-function trim(value) {
-	return value.trim();
-}
+const BaseContextSystemProvider = ({ children, value }) => {
+	const contextValue = useContextSystemBridge({ value });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentsContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+(0, react.memo)(BaseContextSystemProvider);
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/context/constants.mjs
+const COMPONENT_NAMESPACE = "data-wp-component";
+const CONNECTED_NAMESPACE = "data-wp-c16t";
 /**
-* @param {string} value
-* @param {RegExp} pattern
-* @return {string?}
+* Special key where the connected namespaces are stored.
+* This is attached to Context connected components as a static property.
 */
-function match(value, pattern) {
-	return (value = pattern.exec(value)) ? value[0] : value;
-}
+const CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
+// ../../../node_modules/.pnpm/memize@2.1.1/node_modules/memize/dist/index.js
 /**
-* @param {string} value
-* @param {(string|RegExp)} pattern
-* @param {string} replacement
-* @return {string}
+* Memize options object.
+*
+* @typedef MemizeOptions
+*
+* @property {number} [maxSize] Maximum size of the cache.
 */
-function replace(value, pattern, replacement) {
-	return value.replace(pattern, replacement);
-}
 /**
-* @param {string} value
-* @param {string} search
-* @return {number}
+* Internal cache entry.
+*
+* @typedef MemizeCacheNode
+*
+* @property {?MemizeCacheNode|undefined} [prev] Previous node.
+* @property {?MemizeCacheNode|undefined} [next] Next node.
+* @property {Array<*>}                   args   Function arguments for cache
+*                                               entry.
+* @property {*}                          val    Function result.
 */
-function indexof(value, search) {
-	return value.indexOf(search);
-}
 /**
-* @param {string} value
-* @param {number} index
-* @return {number}
-*/
-function charat(value, index) {
-	return value.charCodeAt(index) | 0;
-}
-/**
-* @param {string} value
-* @param {number} begin
-* @param {number} end
-* @return {string}
-*/
-function substr(value, begin, end) {
-	return value.slice(begin, end);
-}
-/**
-* @param {string} value
-* @return {number}
-*/
-function strlen(value) {
-	return value.length;
-}
-/**
-* @param {any[]} value
-* @return {number}
-*/
-function sizeof(value) {
-	return value.length;
-}
-/**
-* @param {any} value
-* @param {any[]} array
-* @return {any}
-*/
-function append(value, array) {
-	return array.push(value), value;
-}
-/**
-* @param {string[]} array
-* @param {function} callback
-* @return {string}
-*/
-function combine(array, callback) {
-	return array.map(callback).join("");
-}
-// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Tokenizer.js
-var line = 1;
-var column = 1;
-var length = 0;
-var position = 0;
-var character = 0;
-var characters = "";
-/**
-* @param {string} value
-* @param {object | null} root
-* @param {object | null} parent
-* @param {string} type
-* @param {string[] | string} props
-* @param {object[] | string} children
-* @param {number} length
-*/
-function node(value, root, parent, type, props, children, length) {
-	return {
-		value,
-		root,
-		parent,
-		type,
-		props,
-		children,
-		line,
-		column,
-		length,
-		return: ""
-	};
-}
-/**
-* @param {object} root
-* @param {object} props
-* @return {object}
-*/
-function copy(root, props) {
-	return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props);
-}
-/**
-* @return {number}
-*/
-function char() {
-	return character;
-}
-/**
-* @return {number}
-*/
-function prev() {
-	character = position > 0 ? charat(characters, --position) : 0;
-	if (column--, character === 10) column = 1, line--;
-	return character;
-}
-/**
-* @return {number}
-*/
-function next() {
-	character = position < length ? charat(characters, position++) : 0;
-	if (column++, character === 10) column = 1, line++;
-	return character;
-}
-/**
-* @return {number}
-*/
-function peek() {
-	return charat(characters, position);
-}
-/**
-* @return {number}
-*/
-function caret() {
-	return position;
-}
-/**
-* @param {number} begin
-* @param {number} end
-* @return {string}
-*/
-function slice(begin, end) {
-	return substr(characters, begin, end);
-}
-/**
-* @param {number} type
-* @return {number}
-*/
-function token(type) {
-	switch (type) {
-		case 0:
-		case 9:
-		case 10:
-		case 13:
-		case 32: return 5;
-		case 33:
-		case 43:
-		case 44:
-		case 47:
-		case 62:
-		case 64:
-		case 126:
-		case 59:
-		case 123:
-		case 125: return 4;
-		case 58: return 3;
-		case 34:
-		case 39:
-		case 40:
-		case 91: return 2;
-		case 41:
-		case 93: return 1;
-	}
-	return 0;
-}
-/**
-* @param {string} value
-* @return {any[]}
-*/
-function alloc(value) {
-	return line = column = 1, length = strlen(characters = value), position = 0, [];
-}
-/**
-* @param {any} value
-* @return {any}
-*/
-function dealloc(value) {
-	return characters = "", value;
-}
-/**
-* @param {number} type
-* @return {string}
-*/
-function delimit(type) {
-	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
-}
-/**
-* @param {number} type
-* @return {string}
-*/
-function whitespace(type) {
-	while (character = peek()) if (character < 33) next();
-	else break;
-	return token(type) > 2 || token(character) > 3 ? "" : " ";
-}
-/**
-* @param {number} index
-* @param {number} count
-* @return {string}
-*/
-function escaping(index, count) {
-	while (--count && next()) if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97) break;
-	return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
-}
-/**
-* @param {number} type
-* @return {number}
-*/
-function delimiter(type) {
-	while (next()) switch (character) {
-		case type: return position;
-		case 34:
-		case 39:
-			if (type !== 34 && type !== 39) delimiter(character);
-			break;
-		case 40:
-			if (type === 41) delimiter(type);
-			break;
-		case 92: next();
-	}
-	return position;
-}
-/**
-* @param {number} type
-* @param {number} index
-* @return {number}
-*/
-function commenter(type, index) {
-	while (next()) if (type + character === 57) break;
-	else if (type + character === 84 && peek() === 47) break;
-	return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
-}
-/**
-* @param {number} index
-* @return {string}
-*/
-function identifier(index) {
-	while (!token(peek())) next();
-	return slice(index, position);
-}
-// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Parser.js
-/**
-* @param {string} value
-* @return {object[]}
-*/
-function compile(value) {
-	return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
-}
-/**
-* @param {string} value
-* @param {object} root
-* @param {object?} parent
-* @param {string[]} rule
-* @param {string[]} rules
-* @param {string[]} rulesets
-* @param {number[]} pseudo
-* @param {number[]} points
-* @param {string[]} declarations
-* @return {object}
-*/
-function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
-	var index = 0;
-	var offset = 0;
-	var length = pseudo;
-	var atrule = 0;
-	var property = 0;
-	var previous = 0;
-	var variable = 1;
-	var scanning = 1;
-	var ampersand = 1;
-	var character = 0;
-	var type = "";
-	var props = rules;
-	var children = rulesets;
-	var reference = rule;
-	var characters = type;
-	while (scanning) switch (previous = character, character = next()) {
-		case 40: if (previous != 108 && charat(characters, length - 1) == 58) {
-			if (indexof(characters += replace(delimit(character), "&", "&\f"), "&\f") != -1) ampersand = -1;
-			break;
-		}
-		case 34:
-		case 39:
-		case 91:
-			characters += delimit(character);
-			break;
-		case 9:
-		case 10:
-		case 13:
-		case 32:
-			characters += whitespace(previous);
-			break;
-		case 92:
-			characters += escaping(caret() - 1, 7);
-			continue;
-		case 47:
-			switch (peek()) {
-				case 42:
-				case 47:
-					append(comment(commenter(next(), caret()), root, parent), declarations);
-					break;
-				default: characters += "/";
-			}
-			break;
-		case 123 * variable: points[index++] = strlen(characters) * ampersand;
-		case 125 * variable:
-		case 59:
-		case 0:
-			switch (character) {
-				case 0:
-				case 125: scanning = 0;
-				case 59 + offset:
-					if (ampersand == -1) characters = replace(characters, /\f/g, "");
-					if (property > 0 && strlen(characters) - length) append(property > 32 ? declaration(characters + ";", rule, parent, length - 1) : declaration(replace(characters, " ", "") + ";", rule, parent, length - 2), declarations);
-					break;
-				case 59: characters += ";";
-				default:
-					append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets);
-					if (character === 123) if (offset === 0) parse(characters, root, reference, reference, props, rulesets, length, points, children);
-					else switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
-						case 100:
-						case 108:
-						case 109:
-						case 115:
-							parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
-							break;
-						default: parse(characters, reference, reference, reference, [""], children, 0, points, children);
-					}
-			}
-			index = offset = property = 0, variable = ampersand = 1, type = characters = "", length = pseudo;
-			break;
-		case 58: length = 1 + strlen(characters), property = previous;
-		default:
-			if (variable < 1) {
-				if (character == 123) --variable;
-				else if (character == 125 && variable++ == 0 && prev() == 125) continue;
-			}
-			switch (characters += from(character), character * variable) {
-				case 38:
-					ampersand = offset > 0 ? 1 : (characters += "\f", -1);
-					break;
-				case 44:
-					points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1;
-					break;
-				case 64:
-					if (peek() === 45) characters += delimit(next());
-					atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
-					break;
-				case 45: if (previous === 45 && strlen(characters) == 2) variable = 0;
-			}
-	}
-	return rulesets;
-}
-/**
-* @param {string} value
-* @param {object} root
-* @param {object?} parent
-* @param {number} index
-* @param {number} offset
-* @param {string[]} rules
-* @param {number[]} points
-* @param {string} type
-* @param {string[]} props
-* @param {string[]} children
-* @param {number} length
-* @return {object}
-*/
-function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length) {
-	var post = offset - 1;
-	var rule = offset === 0 ? rules : [""];
-	var size = sizeof(rule);
-	for (var i = 0, j = 0, k = 0; i < index; ++i) for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x) if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x]))) props[k++] = z;
-	return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length);
-}
-/**
-* @param {number} value
-* @param {object} root
-* @param {object?} parent
-* @return {object}
-*/
-function comment(value, root, parent) {
-	return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
-}
-/**
-* @param {string} value
-* @param {object} root
-* @param {object?} parent
-* @param {number} length
-* @return {object}
-*/
-function declaration(value, root, parent, length) {
-	return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length);
-}
-// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Serializer.js
-/**
-* @param {object[]} children
-* @param {function} callback
-* @return {string}
-*/
-function serialize(children, callback) {
-	var output = "";
-	var length = sizeof(children);
-	for (var i = 0; i < length; i++) output += callback(children[i], i, children, callback) || "";
-	return output;
-}
-/**
-* @param {object} element
-* @param {number} index
-* @param {object[]} children
-* @param {function} callback
-* @return {string}
-*/
-function stringify(element, index, children, callback) {
-	switch (element.type) {
-		case LAYER: if (element.children.length) break;
-		case IMPORT:
-		case DECLARATION: return element.return = element.return || element.value;
-		case COMMENT: return "";
-		case KEYFRAMES: return element.return = element.value + "{" + serialize(element.children, callback) + "}";
-		case RULESET: element.value = element.props.join(",");
-	}
-	return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
-}
-// ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Middleware.js
-/**
-* @param {function[]} collection
-* @return {function}
-*/
-function middleware(collection) {
-	var length = sizeof(collection);
-	return function(element, index, children, callback) {
-		var output = "";
-		for (var i = 0; i < length; i++) output += collection[i](element, index, children, callback) || "";
-		return output;
-	};
-}
-/**
-* @param {function} callback
-* @return {function}
-*/
-function rulesheet(callback) {
-	return function(element) {
-		if (!element.root) {
-			if (element = element.return) callback(element);
-		}
-	};
-}
-// ../../../node_modules/.pnpm/@emotion+weak-memoize@0.4.0/node_modules/@emotion/weak-memoize/dist/emotion-weak-memoize.esm.js
-var weakMemoize = function weakMemoize(func) {
-	var cache = /* @__PURE__ */ new WeakMap();
-	return function(arg) {
-		if (cache.has(arg)) return cache.get(arg);
-		var ret = func(arg);
-		cache.set(arg, ret);
-		return ret;
-	};
-};
-// ../../../node_modules/.pnpm/@emotion+memoize@0.9.0/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
-function memoize(fn) {
-	var cache = Object.create(null);
-	return function(arg) {
-		if (cache[arg] === void 0) cache[arg] = fn(arg);
-		return cache[arg];
-	};
-}
-// ../../../node_modules/.pnpm/@emotion+cache@11.14.0/node_modules/@emotion/cache/dist/emotion-cache.esm.js
-var isBrowser$2 = typeof document !== "undefined";
-var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
-	var previous = 0;
-	var character = 0;
-	while (true) {
-		previous = character;
-		character = peek();
-		if (previous === 38 && character === 12) points[index] = 1;
-		if (token(character)) break;
-		next();
-	}
-	return slice(begin, position);
-};
-var toRules = function toRules(parsed, points) {
-	var index = -1;
-	var character = 44;
-	do
-		switch (token(character)) {
-			case 0:
-				if (character === 38 && peek() === 12) points[index] = 1;
-				parsed[index] += identifierWithPointTracking(position - 1, points, index);
-				break;
-			case 2:
-				parsed[index] += delimit(character);
-				break;
-			case 4: if (character === 44) {
-				parsed[++index] = peek() === 58 ? "&\f" : "";
-				points[index] = parsed[index].length;
-				break;
-			}
-			default: parsed[index] += from(character);
-		}
-	while (character = next());
-	return parsed;
-};
-var getRules = function getRules(value, points) {
-	return dealloc(toRules(alloc(value), points));
-};
-var fixedElements = /* #__PURE__ */ new WeakMap();
-var compat = function compat(element) {
-	if (element.type !== "rule" || !element.parent || element.length < 1) return;
-	var value = element.value;
-	var parent = element.parent;
-	var isImplicitRule = element.column === parent.column && element.line === parent.line;
-	while (parent.type !== "rule") {
-		parent = parent.parent;
-		if (!parent) return;
-	}
-	if (element.props.length === 1 && value.charCodeAt(0) !== 58 && !fixedElements.get(parent)) return;
-	if (isImplicitRule) return;
-	fixedElements.set(element, true);
-	var points = [];
-	var rules = getRules(value, points);
-	var parentRules = parent.props;
-	for (var i = 0, k = 0; i < rules.length; i++) for (var j = 0; j < parentRules.length; j++, k++) element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
-};
-var removeLabel = function removeLabel(element) {
-	if (element.type === "decl") {
-		var value = element.value;
-		if (value.charCodeAt(0) === 108 && value.charCodeAt(2) === 98) {
-			element["return"] = "";
-			element.value = "";
-		}
-	}
-};
-function prefix(value, length) {
-	switch (hash(value, length)) {
-		case 5103: return WEBKIT + "print-" + value + value;
-		case 5737:
-		case 4201:
-		case 3177:
-		case 3433:
-		case 1641:
-		case 4457:
-		case 2921:
-		case 5572:
-		case 6356:
-		case 5844:
-		case 3191:
-		case 6645:
-		case 3005:
-		case 6391:
-		case 5879:
-		case 5623:
-		case 6135:
-		case 4599:
-		case 4855:
-		case 4215:
-		case 6389:
-		case 5109:
-		case 5365:
-		case 5621:
-		case 3829: return WEBKIT + value + value;
-		case 5349:
-		case 4246:
-		case 4810:
-		case 6968:
-		case 2756: return WEBKIT + value + MOZ + value + MS + value + value;
-		case 6828:
-		case 4268: return WEBKIT + value + MS + value + value;
-		case 6165: return WEBKIT + value + MS + "flex-" + value + value;
-		case 5187: return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
-		case 5443: return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/, "") + value;
-		case 4675: return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/, "") + value;
-		case 5548: return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
-		case 5292: return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
-		case 6060: return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
-		case 4554: return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
-		case 6187: return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
-		case 5495:
-		case 3959: return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
-		case 4968: return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
-		case 4095:
-		case 3583:
-		case 4068:
-		case 2532: return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
-		case 8116:
-		case 7059:
-		case 5753:
-		case 5535:
-		case 5445:
-		case 5701:
-		case 4933:
-		case 4677:
-		case 5533:
-		case 5789:
-		case 5021:
-		case 4765:
-			if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
-				case 109: if (charat(value, length + 4) !== 45) break;
-				case 102: return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length + 3) == 108 ? "$3" : "$2-$3")) + value;
-				case 115: return ~indexof(value, "stretch") ? prefix(replace(value, "stretch", "fill-available"), length) + value : value;
-			}
-			break;
-		case 4949: if (charat(value, length + 1) !== 115) break;
-		case 6444:
-			switch (charat(value, strlen(value) - 3 - (~indexof(value, "!important") && 10))) {
-				case 107: return replace(value, ":", ":" + WEBKIT) + value;
-				case 101: return replace(value, /(.+:)([^;!]+)(;|!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
-			}
-			break;
-		case 5936:
-			switch (charat(value, length + 11)) {
-				case 114: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
-				case 108: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
-				case 45: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
-			}
-			return WEBKIT + value + MS + value + value;
-	}
-	return value;
-}
-var prefixer = function prefixer(element, index, children, callback) {
-	if (element.length > -1) {
-		if (!element["return"]) switch (element.type) {
-			case DECLARATION:
-				element["return"] = prefix(element.value, element.length);
-				break;
-			case KEYFRAMES: return serialize([copy(element, { value: replace(element.value, "@", "@" + WEBKIT) })], callback);
-			case RULESET: if (element.length) return combine(element.props, function(value) {
-				switch (match(value, /(::plac\w+|:read-\w+)/)) {
-					case ":read-only":
-					case ":read-write": return serialize([copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] })], callback);
-					case "::placeholder": return serialize([
-						copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }),
-						copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }),
-						copy(element, { props: [replace(value, /:(plac\w+)/, MS + "input-$1")] })
-					], callback);
-				}
-				return "";
-			});
-		}
-	}
-};
-var getServerStylisCache = isBrowser$2 ? void 0 : weakMemoize(function() {
-	return memoize(function() {
-		return {};
-	});
-});
-var defaultStylisPlugins = [prefixer];
-var createCache = function createCache(options) {
-	var key = options.key;
-	if (isBrowser$2 && key === "css") {
-		var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
-		Array.prototype.forEach.call(ssrStyles, function(node) {
-			if (node.getAttribute("data-emotion").indexOf(" ") === -1) return;
-			document.head.appendChild(node);
-			node.setAttribute("data-s", "");
-		});
-	}
-	var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
-	var inserted = {};
-	var container;
-	var nodesToHydrate = [];
-	if (isBrowser$2) {
-		container = options.container || document.head;
-		Array.prototype.forEach.call(document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function(node) {
-			var attrib = node.getAttribute("data-emotion").split(" ");
-			for (var i = 1; i < attrib.length; i++) inserted[attrib[i]] = true;
-			nodesToHydrate.push(node);
-		});
-	}
-	var _insert;
-	var omnipresentPlugins = [compat, removeLabel];
-	if (!getServerStylisCache) {
-		var currentSheet;
-		var finalizingPlugins = [stringify, rulesheet(function(rule) {
-			currentSheet.insert(rule);
-		})];
-		var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
-		var stylis = function stylis(styles) {
-			return serialize(compile(styles), serializer);
-		};
-		_insert = function insert(selector, serialized, sheet, shouldCache) {
-			currentSheet = sheet;
-			stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-			if (shouldCache) cache.inserted[serialized.name] = true;
-		};
-	} else {
-		var _finalizingPlugins = [stringify];
-		var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
-		var _stylis = function _stylis(styles) {
-			return serialize(compile(styles), _serializer);
-		};
-		var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
-		var getRules = function getRules(selector, serialized) {
-			var name = serialized.name;
-			if (serverStylisCache[name] === void 0) serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-			return serverStylisCache[name];
-		};
-		_insert = function _insert(selector, serialized, sheet, shouldCache) {
-			var name = serialized.name;
-			var rules = getRules(selector, serialized);
-			if (cache.compat === void 0) {
-				if (shouldCache) cache.inserted[name] = true;
-				return rules;
-			} else if (shouldCache) cache.inserted[name] = rules;
-			else return rules;
-		};
-	}
-	var cache = {
-		key,
-		sheet: new StyleSheet({
-			key,
-			container,
-			nonce: options.nonce,
-			speedy: options.speedy,
-			prepend: options.prepend,
-			insertionPoint: options.insertionPoint
-		}),
-		nonce: options.nonce,
-		inserted,
-		registered: {},
-		insert: _insert
-	};
-	cache.sheet.hydrate(nodesToHydrate);
-	return cache;
-};
-// ../../../node_modules/.pnpm/@emotion+utils@1.4.2/node_modules/@emotion/utils/dist/emotion-utils.esm.js
-var isBrowser$1 = typeof document !== "undefined";
-function getRegisteredStyles$1(registered, registeredStyles, classNames) {
-	var rawClassName = "";
-	classNames.split(" ").forEach(function(className) {
-		if (registered[className] !== void 0) registeredStyles.push(registered[className] + ";");
-		else if (className) rawClassName += className + " ";
-	});
-	return rawClassName;
-}
-var registerStyles = function registerStyles(cache, serialized, isStringTag) {
-	var className = cache.key + "-" + serialized.name;
-	if ((isStringTag === false || isBrowser$1 === false && cache.compat !== void 0) && cache.registered[className] === void 0) cache.registered[className] = serialized.styles;
-};
-var insertStyles = function insertStyles(cache, serialized, isStringTag) {
-	registerStyles(cache, serialized, isStringTag);
-	var className = cache.key + "-" + serialized.name;
-	if (cache.inserted[serialized.name] === void 0) {
-		var stylesForSSR = "";
-		var current = serialized;
-		do {
-			var maybeStyles = cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
-			if (!isBrowser$1 && maybeStyles !== void 0) stylesForSSR += maybeStyles;
-			current = current.next;
-		} while (current !== void 0);
-		if (!isBrowser$1 && stylesForSSR.length !== 0) return stylesForSSR;
-	}
-};
-// ../../../node_modules/.pnpm/@emotion+hash@0.9.2/node_modules/@emotion/hash/dist/emotion-hash.esm.js
-function murmur2(str) {
-	var h = 0;
-	var k, i = 0, len = str.length;
-	for (; len >= 4; ++i, len -= 4) {
-		k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
-		k = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
-		k ^= k >>> 24;
-		h = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-	}
-	switch (len) {
-		case 3: h ^= (str.charCodeAt(i + 2) & 255) << 16;
-		case 2: h ^= (str.charCodeAt(i + 1) & 255) << 8;
-		case 1:
-			h ^= str.charCodeAt(i) & 255;
-			h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-	}
-	h ^= h >>> 13;
-	h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-	return ((h ^ h >>> 15) >>> 0).toString(36);
-}
-// ../../../node_modules/.pnpm/@emotion+unitless@0.10.0/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
-var unitlessKeys = {
-	animationIterationCount: 1,
-	aspectRatio: 1,
-	borderImageOutset: 1,
-	borderImageSlice: 1,
-	borderImageWidth: 1,
-	boxFlex: 1,
-	boxFlexGroup: 1,
-	boxOrdinalGroup: 1,
-	columnCount: 1,
-	columns: 1,
-	flex: 1,
-	flexGrow: 1,
-	flexPositive: 1,
-	flexShrink: 1,
-	flexNegative: 1,
-	flexOrder: 1,
-	gridRow: 1,
-	gridRowEnd: 1,
-	gridRowSpan: 1,
-	gridRowStart: 1,
-	gridColumn: 1,
-	gridColumnEnd: 1,
-	gridColumnSpan: 1,
-	gridColumnStart: 1,
-	msGridRow: 1,
-	msGridRowSpan: 1,
-	msGridColumn: 1,
-	msGridColumnSpan: 1,
-	fontWeight: 1,
-	lineHeight: 1,
-	opacity: 1,
-	order: 1,
-	orphans: 1,
-	scale: 1,
-	tabSize: 1,
-	widows: 1,
-	zIndex: 1,
-	zoom: 1,
-	WebkitLineClamp: 1,
-	fillOpacity: 1,
-	floodOpacity: 1,
-	stopOpacity: 1,
-	strokeDasharray: 1,
-	strokeDashoffset: 1,
-	strokeMiterlimit: 1,
-	strokeOpacity: 1,
-	strokeWidth: 1
-};
-// ../../../node_modules/.pnpm/@emotion+serialize@1.3.3/node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
-var isDevelopment = false;
-var hyphenateRegex = /[A-Z]|^ms/g;
-var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-var isCustomProperty = function isCustomProperty(property) {
-	return property.charCodeAt(1) === 45;
-};
-var isProcessableValue = function isProcessableValue(value) {
-	return value != null && typeof value !== "boolean";
-};
-var processStyleName = /* #__PURE__ */ memoize(function(styleName) {
-	return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
-});
-var processStyleValue = function processStyleValue(key, value) {
-	switch (key) {
-		case "animation":
-		case "animationName": if (typeof value === "string") return value.replace(animationRegex, function(match, p1, p2) {
-			cursor = {
-				name: p1,
-				styles: p2,
-				next: cursor
-			};
-			return p1;
-		});
-	}
-	if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) return value + "px";
-	return value;
-};
-var noComponentSelectorMessage = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
-function handleInterpolation(mergedProps, registered, interpolation) {
-	if (interpolation == null) return "";
-	var componentSelector = interpolation;
-	if (componentSelector.__emotion_styles !== void 0) return componentSelector;
-	switch (typeof interpolation) {
-		case "boolean": return "";
-		case "object":
-			var keyframes = interpolation;
-			if (keyframes.anim === 1) {
-				cursor = {
-					name: keyframes.name,
-					styles: keyframes.styles,
-					next: cursor
-				};
-				return keyframes.name;
-			}
-			var serializedStyles = interpolation;
-			if (serializedStyles.styles !== void 0) {
-				var next = serializedStyles.next;
-				if (next !== void 0) while (next !== void 0) {
-					cursor = {
-						name: next.name,
-						styles: next.styles,
-						next: cursor
-					};
-					next = next.next;
-				}
-				return serializedStyles.styles + ";";
-			}
-			return createStringFromObject(mergedProps, registered, interpolation);
-		case "function": if (mergedProps !== void 0) {
-			var previousCursor = cursor;
-			var result = interpolation(mergedProps);
-			cursor = previousCursor;
-			return handleInterpolation(mergedProps, registered, result);
-		}
-	}
-	var asString = interpolation;
-	if (registered == null) return asString;
-	var cached = registered[asString];
-	return cached !== void 0 ? cached : asString;
-}
-function createStringFromObject(mergedProps, registered, obj) {
-	var string = "";
-	if (Array.isArray(obj)) for (var i = 0; i < obj.length; i++) string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-	else for (var key in obj) {
-		var value = obj[key];
-		if (typeof value !== "object") {
-			var asString = value;
-			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) 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 {
-				var interpolated = handleInterpolation(mergedProps, registered, value);
-				switch (key) {
-					case "animation":
-					case "animationName":
-						string += processStyleName(key) + ":" + interpolated + ";";
-						break;
-					default: string += key + "{" + interpolated + "}";
-				}
-			}
-		}
-	}
-	return string;
-}
-var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g;
-var cursor;
-function serializeStyles(args, registered, mergedProps) {
-	if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) return args[0];
-	var stringMode = true;
-	var styles = "";
-	cursor = void 0;
-	var strings = args[0];
-	if (strings == null || strings.raw === void 0) {
-		stringMode = false;
-		styles += handleInterpolation(mergedProps, registered, strings);
-	} else styles += strings[0];
-	for (var i = 1; i < args.length; i++) {
-		styles += handleInterpolation(mergedProps, registered, args[i]);
-		if (stringMode) styles += strings[i];
-	}
-	labelPattern.lastIndex = 0;
-	var identifierName = "";
-	var match;
-	while ((match = labelPattern.exec(styles)) !== null) identifierName += "-" + match[1];
-	return {
-		name: murmur2(styles) + identifierName,
-		styles,
-		next: cursor
-	};
-}
-react["useInsertionEffect"] && react["useInsertionEffect"] || react.useLayoutEffect;
-// ../../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.3.0_react@19.3.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
-var isBrowser = typeof document !== "undefined";
-var EmotionCacheContext = /* #__PURE__ */ react.createContext(typeof HTMLElement !== "undefined" ? /* #__PURE__ */ createCache({ key: "css" }) : null);
-EmotionCacheContext.Provider;
-var __unsafe_useEmotionCache = function useEmotionCache() {
-	return (0, react.useContext)(EmotionCacheContext);
-};
-if (!isBrowser);
-({}).hasOwnProperty;
-// ../../../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) {
-	if (cache.inserted[serialized.name] === void 0) return cache.insert("", serialized, cache.sheet, true);
-}
-function merge$1(registered, css, className) {
-	var registeredStyles = [];
-	var rawClassName = getRegisteredStyles$1(registered, registeredStyles, className);
-	if (registeredStyles.length < 2) return className;
-	return rawClassName + css(registeredStyles);
-}
-var createEmotion = function createEmotion(options) {
-	var cache = createCache(options);
-	cache.sheet.speedy = function(value) {
-		this.isSpeedy = value;
-	};
-	cache.compat = true;
-	var css = function css() {
-		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-		var serialized = serializeStyles(args, cache.registered, void 0);
-		insertStyles(cache, serialized, false);
-		return cache.key + "-" + serialized.name;
-	};
-	return {
-		css,
-		cx: function cx() {
-			for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) args[_key4] = arguments[_key4];
-			return merge$1(cache.registered, css, classnames(args));
-		},
-		injectGlobal: function injectGlobal() {
-			for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) args[_key3] = arguments[_key3];
-			insertWithoutScoping(cache, serializeStyles(args, cache.registered));
-		},
-		keyframes: function keyframes() {
-			for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) args[_key2] = arguments[_key2];
-			var serialized = serializeStyles(args, cache.registered);
-			var animation = "animation-" + serialized.name;
-			insertWithoutScoping(cache, {
-				name: serialized.name,
-				styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-			});
-			return animation;
-		},
-		hydrate: function hydrate(ids) {
-			ids.forEach(function(key) {
-				cache.inserted[key] = true;
-			});
-		},
-		flush: function flush() {
-			cache.registered = {};
-			cache.inserted = {};
-			cache.sheet.flush();
-		},
-		sheet: cache.sheet,
-		cache,
-		getRegisteredStyles: getRegisteredStyles$1.bind(null, cache.registered),
-		merge: merge$1.bind(null, cache.registered, css)
-	};
-};
-var classnames = function classnames(args) {
-	var cls = "";
-	for (var i = 0; i < args.length; i++) {
-		var arg = args[i];
-		if (arg == null) continue;
-		var toAdd = void 0;
-		switch (typeof arg) {
-			case "boolean": break;
-			case "object":
-				if (Array.isArray(arg)) toAdd = classnames(arg);
-				else {
-					toAdd = "";
-					for (var k in arg) if (arg[k] && k) {
-						toAdd && (toAdd += " ");
-						toAdd += k;
-					}
-				}
-				break;
-			default: toAdd = arg;
-		}
-		if (toAdd) {
-			cls && (cls += " ");
-			cls += toAdd;
-		}
-	}
-	return cls;
-};
-// ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/dist/emotion-css.esm.js
-var _createEmotion = createEmotion({ key: "css" });
-_createEmotion.flush;
-_createEmotion.hydrate;
-var cx = _createEmotion.cx;
-_createEmotion.merge;
-_createEmotion.getRegisteredStyles;
-_createEmotion.injectGlobal;
-_createEmotion.keyframes;
-_createEmotion.css;
-_createEmotion.sheet;
-_createEmotion.cache;
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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();
-	return (0, react.useCallback)((...classNames) => {
-		if (cache === null) throw new Error("The `useCx` hook should be only used within a valid Emotion Cache Context");
-		return cx(...classNames.map((arg) => {
-			if (isSerializedStyles(arg)) {
-				insertStyles(cache, arg, false);
-				return `${cache.key}-${arg.name}`;
-			}
-			return arg;
-		}));
-	}, [cache]);
-};
-// ../../../node_modules/.pnpm/memize@2.1.1/node_modules/memize/dist/index.js
-/**
-* Memize options object.
-*
-* @typedef MemizeOptions
-*
-* @property {number} [maxSize] Maximum size of the cache.
-*/
-/**
-* Internal cache entry.
-*
-* @typedef MemizeCacheNode
-*
-* @property {?MemizeCacheNode|undefined} [prev] Previous node.
-* @property {?MemizeCacheNode|undefined} [next] Next node.
-* @property {Array<*>}                   args   Function arguments for cache
-*                                               entry.
-* @property {*}                          val    Function result.
-*/
-/**
-* Properties of the enhanced function for controlling cache.
-*
-* @typedef MemizeMemoizedFunction
-*
-* @property {()=>void} clear Clear the cache.
+* Properties of the enhanced function for controlling cache.
+*
+* @typedef MemizeMemoizedFunction
+*
+* @property {()=>void} clear Clear the cache.
 */
 /**
 * Accepts a function to be memoized, and returns a new memoized function, with
@@ -11486,91 +10816,37 @@ function memize(fn, options) {
 	};
 	return memoized;
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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;
-		if (a && b && typeof a == "object" && typeof b == "object") {
-			if (a.constructor !== b.constructor) return false;
-			var length, i, keys;
-			if (Array.isArray(a)) {
-				length = a.length;
-				if (length != b.length) return false;
-				for (i = length; i-- !== 0;) if (!equal(a[i], b[i])) return false;
-				return true;
-			}
-			if (a instanceof Map && b instanceof Map) {
-				if (a.size !== b.size) return false;
-				for (i of a.entries()) if (!b.has(i[0])) return false;
-				for (i of a.entries()) if (!equal(i[1], b.get(i[0]))) return false;
-				return true;
-			}
-			if (a instanceof Set && b instanceof Set) {
-				if (a.size !== b.size) return false;
-				for (i of a.entries()) if (!b.has(i[0])) return false;
-				return true;
-			}
-			if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-				length = a.length;
-				if (length != b.length) return false;
-				for (i = length; i-- !== 0;) if (a[i] !== b[i]) return false;
-				return true;
-			}
-			if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-			if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-			if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
-			keys = Object.keys(a);
-			length = keys.length;
-			if (length !== Object.keys(b).length) return false;
-			for (i = length; i-- !== 0;) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-			for (i = length; i-- !== 0;) {
-				var key = keys[i];
-				if (!equal(a[key], b[key])) return false;
-			}
-			return true;
-		}
-		return a !== a && b !== b;
-	};
-})))(), 1);
-var ComponentsContext = (0, react.createContext)({});
-ComponentsContext.displayName = "ComponentsContext";
-var useComponentsContext = () => (0, react.useContext)(ComponentsContext);
-function useContextSystemBridge({ value }) {
-	const parentContext = useComponentsContext();
-	const valueRef = (0, react.useRef)(value);
-	use_update_effect_default(() => {
-		if ((0, import_es6.default)(valueRef.current, value) && valueRef.current !== value) globalThis.SCRIPT_DEBUG === true && warning(`Please memoize your context: ${JSON.stringify(value)}`);
-	}, [value]);
-	return (0, react.useMemo)(() => {
-		return (0, deepmerge.default)(parentContext ?? {}, value ?? {}, { isMergeableObject: isPlainObject });
-	}, [parentContext, value]);
-}
-var BaseContextSystemProvider = ({ children, value }) => {
-	const contextValue = useContextSystemBridge({ value });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentsContext.Provider, {
-		value: contextValue,
-		children
-	});
-};
-(0, react.memo)(BaseContextSystemProvider);
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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__";
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 var import_dist = require_dist();
+/**
+* Generates the connected component CSS className based on the namespace.
+*
+* @param namespace The name of the connected component.
+* @return The generated CSS className.
+*/
 function getStyledClassName(namespace) {
 	return `components-${(0, import_dist.paramCase)(namespace)}`;
 }
-var getStyledClassNameFromKey = memize(getStyledClassName);
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+const getStyledClassNameFromKey = memize(getStyledClassName);
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+/**
+* Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
+* within the Context system under a specified namespace.
+*
+* @param Component The component to register into the Context system.
+* @param namespace The namespace to register the component under.
+* @return The connected WordPressComponent
+*/
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
 function _contextConnect(Component, namespace, options) {
 	const WrappedComponent = options?.forwardsRef ? (0, react.forwardRef)(Component) : Component;
-	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("contextConnect: Please provide a namespace");
+	if (typeof namespace === "undefined") warning("contextConnect: Please provide a namespace");
 	let mergedNamespace = WrappedComponent["__contextSystemKey__"] || [namespace];
+	/**
+	* Consolidate (merge) namespaces before attaching it to the WrappedComponent.
+	*/
 	if (Array.isArray(namespace)) mergedNamespace = [...mergedNamespace, ...namespace];
 	if (typeof namespace === "string") mergedNamespace = [...mergedNamespace, namespace];
 	return Object.assign(WrappedComponent, {
@@ -11579,17 +10855,48 @@ function _contextConnect(Component, namespace, options) {
 		selector: `.${getStyledClassNameFromKey(namespace)}`
 	});
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/context/utils.mjs
+/**
+* Creates a dedicated context namespace HTML attribute for components.
+* ns is short for "namespace"
+*
+* @example
+* ```jsx
+* <div {...ns('Container')} />
+* ```
+*
+* @param componentName The name for the component.
+* @return A props object with the namespaced HTML attribute.
+*/
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
+/**
+* Creates a dedicated connected context namespace HTML attribute for components.
+* ns is short for "namespace"
+*
+* @example
+* ```jsx
+* <div {...cns()} />
+* ```
+*
+* @return A props object with the namespaced HTML attribute.
+*/
 function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+/**
+* Custom hook that derives registered props from the Context system.
+* These derived props are then consolidated with incoming component props.
+*
+* @param props     Incoming props from the component.
+* @param namespace The namespace to register and to derive context props from.
+* @return The connected props.
+*/
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
-	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
+	if (typeof namespace === "undefined") warning("useContextSystem: Please provide a namespace");
 	const contextProps = contextSystemProps?.[namespace] || {};
 	const finalComponentProps = {
 		...getConnectedNamespace(),
@@ -11599,7 +10906,7 @@ function useContextSystem(props, namespace) {
 	const overrideProps = _overrides;
 	const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
 	const propsWithChildren = initialMergedProps;
-	const classes = useCx()(getStyledClassNameFromKey(namespace), props.className);
+	const classes = (0, clsx.default)(getStyledClassNameFromKey(namespace), props.className);
 	const rendered = typeof propsWithChildren.renderChildren === "function" ? propsWithChildren.renderChildren(initialMergedProps) : propsWithChildren.children;
 	for (const key in initialMergedProps) finalComponentProps[key] = initialMergedProps[key];
 	for (const key in overrideProps) finalComponentProps[key] = overrideProps[key];
@@ -11607,8 +10914,8 @@ function useContextSystem(props, namespace) {
 	finalComponentProps.className = classes;
 	return finalComponentProps;
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
-var visuallyHidden = {
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+const visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
 	WebkitClipPath: "inset( 50% )",
@@ -11622,10 +10929,10 @@ var visuallyHidden = {
 	wordWrap: "normal",
 	wordBreak: "normal"
 };
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/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
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+const customAttributeRegExp = /^(data|aria|x)-/i;
+const eventHandlerRegExp = /^on[A-Z]/;
+const svgElementNames = new Set(`animate animateMotion animateTransform circle clipPath defs desc ellipse
 	feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix
 	feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood
 	feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode
@@ -11633,7 +10940,7 @@ var svgElementNames = new Set(`animate animateMotion animateTransform circle cli
 	feTurbulence filter foreignObject g image line linearGradient marker mask
 	metadata mpath path pattern polygon polyline radialGradient rect set stop svg
 	switch symbol text textPath tspan use view`.split(/\s+/));
-var baseElementProps = new Set(`children dangerouslySetInnerHTML key autoFocus defaultValue defaultChecked
+const baseElementProps = new Set(`children dangerouslySetInnerHTML key autoFocus defaultValue defaultChecked
 	innerHTML suppressContentEditableWarning suppressHydrationWarning valueLink
 	abbr accept acceptCharset accessKey action allow allowUserMedia
 	allowPaymentRequest allowFullScreen allowTransparency alt async autoComplete
@@ -11654,7 +10961,7 @@ var baseElementProps = new Set(`children dangerouslySetInnerHTML key autoFocus d
 	datatype inlist prefix property resource typeof vocab autoCapitalize
 	autoCorrect autoSave color incremental fallback inert itemProp itemScope
 	itemType itemID itemRef on option results security unselectable`.split(/\s+/));
-var svgElementProps = new Set(`accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
+const svgElementProps = new Set(`accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
 	amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
 	baseFrequency baselineShift baseProfile bbox begin bias by calcMode capHeight
 	clip clipPathUnits clipPath clipRule colorInterpolation
@@ -11689,7 +10996,7 @@ var svgElementProps = new Set(`accentHeight accumulate additive alignmentBaselin
 	xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType
 	xmlBase xmlns xmlnsXlink xmlLang xmlSpace y y1 y2 yChannelSelector z
 	zoomAndPan`.split(/\s+/));
-var compatElementProps = /* @__PURE__ */ new Set([
+const compatElementProps = /* @__PURE__ */ new Set([
 	"autofocus",
 	"class",
 	"for"
@@ -11710,19 +11017,39 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 		...forwardedProps
 	});
 }
-var PolymorphicElement = (0, react.forwardRef)(UnforwardedPolymorphicElement);
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/view/component.mjs
+/**
+* Internal utility for components that need Emotion-compatible `as` behavior
+* while rendering with plain React elements.
+*/
+const PolymorphicElement = (0, react.forwardRef)(UnforwardedPolymorphicElement);
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PolymorphicElement, {
 		ref,
 		...restProps
 	});
 }
-var component_default$2 = Object.assign((0, react.forwardRef)(UnforwardedView), { selector: ".components-view" });
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+/**
+* `View` is a core component that renders everything in the library.
+* It is the principle component in the entire library.
+*
+* ```jsx
+* import { View } from `@wordpress/components`;
+*
+* function Example() {
+* 	return (
+* 		<View>
+* 			 Code is Poetry
+* 		</View>
+* 	);
+* }
+* ```
+*/
+const View = Object.assign((0, react.forwardRef)(UnforwardedView), { selector: ".components-view" });
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(View, {
 		ref: forwardedRef,
 		...contextProps,
 		"data-visually-hidden": "",
@@ -11732,14 +11059,30 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 		}
 	});
 }
-var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
-var breakpoints = [
+/**
+* `VisuallyHidden` is a component used to render text intended to be visually
+* hidden, but will show for alternate devices, for example a screen reader.
+*
+* ```jsx
+* import { VisuallyHidden } from `@wordpress/components`;
+*
+* function Example() {
+*   return (
+*     <VisuallyHidden>
+*       <label>Code is Poetry</label>
+*     </VisuallyHidden>
+*   );
+* }
+* ```
+*/
+const VisuallyHidden$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+const breakpoints = [
 	"40em",
 	"52em",
 	"64em"
 ];
-var useBreakpointIndex = (options = {}) => {
+const useBreakpointIndex = (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}`);
@@ -11771,15 +11114,15 @@ function useResponsiveValue(values, options = {}) {
 	const array = values || [];
 	return array[index >= array.length ? array.length - 1 : index];
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/utils.mjs
-var ALIGNMENTS = {
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/grid/utils.mjs
+const ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
 		justifyContent: "center"
 	},
 	bottomLeft: {
-		alignItems: "flex-start",
-		justifyContent: "flex-end"
+		alignItems: "flex-end",
+		justifyContent: "flex-start"
 	},
 	bottomRight: {
 		alignItems: "flex-end",
@@ -11818,8 +11161,16 @@ var ALIGNMENTS = {
 function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] ?? {} : {};
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/hook.mjs
-var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/grid/hook.mjs
+const STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+/**
+* Returns the shared style runtime registry.
+*
+* The registry is stored on `globalThis` so separately bundled copies of this
+* package can coordinate through the same document and style maps.
+*
+* @return The shared runtime registry.
+*/
 function getRuntime() {
 	const globalScope = globalThis;
 	if (globalScope.__wpStyleRuntime) return globalScope.__wpStyleRuntime;
@@ -11831,11 +11182,27 @@ function getRuntime() {
 	if (typeof document !== "undefined") registerDocument(document);
 	return globalScope.__wpStyleRuntime;
 }
+/**
+* Checks whether a document already contains a style tag for a hash.
+*
+* @param targetDocument Document to inspect.
+* @param hash           Stable hash for the transformed CSS.
+*
+* @return Whether the style hash already exists in the document.
+*/
 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;
 }
+/**
+* Injects a registered style into a document, unless that document already
+* contains a style tag for the same hash.
+*
+* @param targetDocument Document to inject the style into.
+* @param hash           Stable hash for the transformed CSS.
+* @param css            CSS text to inject.
+*/
 function injectStyle(targetDocument, hash, css) {
 	if (!targetDocument.head) return;
 	const runtime = getRuntime();
@@ -11855,6 +11222,17 @@ function injectStyle(targetDocument, hash, css) {
 	targetDocument.head.appendChild(style);
 	injectedStyles.add(hash);
 }
+/**
+* Registers a document as a style injection target.
+*
+* Existing registered styles are replayed into the document immediately.
+* Documents are reference-counted so multiple providers can safely register the
+* same document without one cleanup removing it while another registration is
+* still active.
+*
+* @param targetDocument Document to receive registered styles.
+* @return Cleanup function that unregisters this document registration.
+*/
 function registerDocument(targetDocument) {
 	const runtime = getRuntime();
 	runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
@@ -11869,51 +11247,62 @@ function registerDocument(targetDocument) {
 		runtime.documents.set(targetDocument, count - 1);
 	};
 }
+/**
+* Registers a style and injects it into all registered documents.
+*
+* The hash is used as the deduplication key, so calling this repeatedly with
+* the same hash will not add duplicate style tags to a document.
+* Registered styles are retained for the lifetime of the page so they can be
+* replayed into documents that are registered later.
+*
+* @param hash Stable hash for the transformed CSS.
+* @param css  CSS text to inject.
+*/
 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}");
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("b1a8e206b7", ".ad3e2e48d7abbecd__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}.ad3e2e48d7abbecd__grid:not(:where(._519ed3f6107b2f0e__row-gap-inherit,.cd62b95f8b7a55ca__row-gap-initial,._226744df7703790b__row-gap-unset,._372e9fe7fa60a162__row-gap-revert,.a788bb6771f557d4__row-gap-revert-layer)){row-gap:var(--wp-components-grid-row-gap,calc(4px*var(--wp-components-grid-gap)))}.ad3e2e48d7abbecd__grid:not(:where(.c811e15146756906__column-gap-inherit,._17d3c2ea7daf9367__column-gap-initial,._595e6195481b9016__column-gap-unset,.a3ecb3e47731c19e__column-gap-revert,._7c87cfbf3c22f476__column-gap-revert-layer)){column-gap:var(--wp-components-grid-column-gap,calc(4px*var(--wp-components-grid-gap)))}._25a972dc3223dff3__has-align:not(:where(._3cda38ca04ad4eb9__align-inherit,.f1d7342c52a8cb04__align-initial,._0d1a6c7ee990f351__align-unset,._57c7b85e7abf618b__align-revert,._82cb0c4950962787__align-revert-layer)){align-items:var(--wp-components-grid-align)}._801d1214723237b8__has-justify:not(:where(.b83c5dbf3264515b__justify-inherit,._5b7394b39d69670e__justify-initial,._3e7f0418752602e5__justify-unset,._5f937df46d7b2259__justify-revert,.bf2a4718a1ddba5c__justify-revert-layer)){justify-content:var(--wp-components-grid-justify)}._3c6ac9820776f1cb__has-template-columns:not(:where(._35faa4d32eedef32__template-columns-inherit,._8150cadb3f438833__template-columns-initial,.bcd5f2b096dec164__template-columns-unset,._48d047bc6fb687b8__template-columns-revert,._93f250669aa1a5a7__template-columns-revert-layer)){grid-template-columns:var(--wp-components-grid-template-columns)}.c2703b6b15e69b82__has-template-rows:not(:where(._3e9d5ffc53e4afc0__template-rows-inherit,._64bb5fbdf6d1038a__template-rows-initial,.f8f5df7043222325__template-rows-unset,._408aaf58100e60d5__template-rows-revert,.e0730d6abf0f3d2a__template-rows-revert-layer)){grid-template-rows:var(--wp-components-grid-template-rows)}._43af1cbfad3e73dd__is-inline{display:inline-grid;vertical-align:middle}._3cda38ca04ad4eb9__align-inherit{align-items:inherit}.f1d7342c52a8cb04__align-initial{align-items:normal}._0d1a6c7ee990f351__align-unset{align-items:unset}._57c7b85e7abf618b__align-revert{align-items:revert}._82cb0c4950962787__align-revert-layer{align-items:revert-layer}.b83c5dbf3264515b__justify-inherit{justify-content:inherit}._5b7394b39d69670e__justify-initial{justify-content:normal}._3e7f0418752602e5__justify-unset{justify-content:unset}._5f937df46d7b2259__justify-revert{justify-content:revert}.bf2a4718a1ddba5c__justify-revert-layer{justify-content:revert-layer}._35faa4d32eedef32__template-columns-inherit{grid-template-columns:inherit}._8150cadb3f438833__template-columns-initial{grid-template-columns:none}.bcd5f2b096dec164__template-columns-unset{grid-template-columns:unset}._48d047bc6fb687b8__template-columns-revert{grid-template-columns:revert}._93f250669aa1a5a7__template-columns-revert-layer{grid-template-columns:revert-layer}._3e9d5ffc53e4afc0__template-rows-inherit{grid-template-rows:inherit}._64bb5fbdf6d1038a__template-rows-initial{grid-template-rows:none}.f8f5df7043222325__template-rows-unset{grid-template-rows:unset}._408aaf58100e60d5__template-rows-revert{grid-template-rows:revert}.e0730d6abf0f3d2a__template-rows-revert-layer{grid-template-rows:revert-layer}._519ed3f6107b2f0e__row-gap-inherit{row-gap:inherit}.cd62b95f8b7a55ca__row-gap-initial{row-gap:normal}._226744df7703790b__row-gap-unset{row-gap:unset}._372e9fe7fa60a162__row-gap-revert{row-gap:revert}.a788bb6771f557d4__row-gap-revert-layer{row-gap:revert-layer}.c811e15146756906__column-gap-inherit{column-gap:inherit}._17d3c2ea7daf9367__column-gap-initial{column-gap:normal}._595e6195481b9016__column-gap-unset{column-gap:unset}.a3ecb3e47731c19e__column-gap-revert{column-gap:revert}._7c87cfbf3c22f476__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([
+	"grid": "ad3e2e48d7abbecd__grid",
+	"row-gap-inherit": "_519ed3f6107b2f0e__row-gap-inherit",
+	"row-gap-initial": "cd62b95f8b7a55ca__row-gap-initial",
+	"row-gap-unset": "_226744df7703790b__row-gap-unset",
+	"row-gap-revert": "_372e9fe7fa60a162__row-gap-revert",
+	"row-gap-revert-layer": "a788bb6771f557d4__row-gap-revert-layer",
+	"column-gap-inherit": "c811e15146756906__column-gap-inherit",
+	"column-gap-initial": "_17d3c2ea7daf9367__column-gap-initial",
+	"column-gap-unset": "_595e6195481b9016__column-gap-unset",
+	"column-gap-revert": "a3ecb3e47731c19e__column-gap-revert",
+	"column-gap-revert-layer": "_7c87cfbf3c22f476__column-gap-revert-layer",
+	"has-align": "_25a972dc3223dff3__has-align",
+	"align-inherit": "_3cda38ca04ad4eb9__align-inherit",
+	"align-initial": "f1d7342c52a8cb04__align-initial",
+	"align-unset": "_0d1a6c7ee990f351__align-unset",
+	"align-revert": "_57c7b85e7abf618b__align-revert",
+	"align-revert-layer": "_82cb0c4950962787__align-revert-layer",
+	"has-justify": "_801d1214723237b8__has-justify",
+	"justify-inherit": "b83c5dbf3264515b__justify-inherit",
+	"justify-initial": "_5b7394b39d69670e__justify-initial",
+	"justify-unset": "_3e7f0418752602e5__justify-unset",
+	"justify-revert": "_5f937df46d7b2259__justify-revert",
+	"justify-revert-layer": "bf2a4718a1ddba5c__justify-revert-layer",
+	"has-template-columns": "_3c6ac9820776f1cb__has-template-columns",
+	"template-columns-inherit": "_35faa4d32eedef32__template-columns-inherit",
+	"template-columns-initial": "_8150cadb3f438833__template-columns-initial",
+	"template-columns-unset": "bcd5f2b096dec164__template-columns-unset",
+	"template-columns-revert": "_48d047bc6fb687b8__template-columns-revert",
+	"template-columns-revert-layer": "_93f250669aa1a5a7__template-columns-revert-layer",
+	"has-template-rows": "c2703b6b15e69b82__has-template-rows",
+	"template-rows-inherit": "_3e9d5ffc53e4afc0__template-rows-inherit",
+	"template-rows-initial": "_64bb5fbdf6d1038a__template-rows-initial",
+	"template-rows-unset": "f8f5df7043222325__template-rows-unset",
+	"template-rows-revert": "_408aaf58100e60d5__template-rows-revert",
+	"template-rows-revert-layer": "e0730d6abf0f3d2a__template-rows-revert-layer",
+	"is-inline": "_43af1cbfad3e73dd__is-inline"
+};
+const CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set([
 	"inherit",
 	"initial",
 	"unset",
@@ -11962,15 +11351,35 @@ function useGrid(props) {
 		}
 	};
 }
-// ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@44.0.0_patch_hash=dd89cc780626599c6721f4e05e7091dd7b0aed577d8a667_94a1a77c56d75249398bc99af3f14fa5/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
 	const gridProps = useGrid(props);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(View, {
 		...gridProps,
 		ref: forwardedRef
 	});
 }
-var component_default = contextConnect(UnconnectedGrid, "Grid");
+/**
+* `Grid` is a primitive layout component that can arrange content in a grid configuration.
+*
+* ```jsx
+* import {
+* 	__experimentalGrid as Grid,
+* 	__experimentalText as Text
+* } from `@wordpress/components`;
+*
+* function Example() {
+* 	return (
+* 		<Grid columns={ 3 }>
+* 			<Text>Code</Text>
+* 			<Text>is</Text>
+* 			<Text>Poetry</Text>
+* 		</Grid>
+* 	);
+* }
+* ```
+*/
+const Grid = contextConnect(UnconnectedGrid, "Grid");
 // src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts
 /**
 * Fractional layout rounding can put a row's bottom a hair past the container's
@@ -12134,6 +11543,41 @@ var leaderboard_chart_module_default = {
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
+// src/charts/leaderboard-chart/private/resolve-leaderboard-entries.ts
+const toShare = (value, max) => max === 0 ? 0 : value / max * 100;
+const toDelta = (currentValue, previousValue) => {
+	if (previousValue == null) return;
+	if (previousValue === 0) return currentValue === 0 ? 0 : void 0;
+	return (currentValue - previousValue) / Math.abs(previousValue) * 100;
+};
+/**
+* Fills in the shares and delta an entry omits, derived from its values.
+*
+* @param data                    - Leaderboard entries; passed shares and delta win over derived ones.
+* @param options                 - Resolver options.
+* @param options.includePrevious - Whether previous values count toward the shared max.
+* @param options.clampNegative   - Whether a negative share draws as an empty bar instead of below zero.
+* @return Entries with `currentShare` always set.
+*/
+function resolveLeaderboardEntries(data, { includePrevious, clampNegative = false }) {
+	const magnitude = clampNegative ? (value) => Math.max(value, 0) : Math.abs;
+	const clamp = (share) => clampNegative ? Math.max(share, 0) : share;
+	const max = data.reduce((largest, { currentValue, previousValue }) => {
+		const previous = includePrevious && previousValue != null ? magnitude(previousValue) : 0;
+		return Math.max(largest, magnitude(currentValue), previous);
+	}, 0);
+	return data.map((entry) => {
+		const passedOrDerivedPrevious = entry.previousShare ?? (entry.previousValue != null ? toShare(entry.previousValue, max) : void 0);
+		const previousShare = passedOrDerivedPrevious !== void 0 ? clamp(passedOrDerivedPrevious) : void 0;
+		const delta = entry.delta ?? toDelta(entry.currentValue, entry.previousValue);
+		return {
+			...entry,
+			currentShare: clamp(entry.currentShare ?? toShare(entry.currentValue, max)),
+			...previousShare !== void 0 && { previousShare },
+			...delta !== void 0 && { delta }
+		};
+	});
+}
 // src/charts/leaderboard-chart/leaderboard-chart.tsx
 const ROW_GAP = "var(--a8c-charts-dimension-leaderboard-row-gap, 12px)";
 const COLUMN_GAP = "var(--a8c-charts-dimension-leaderboard-column-gap, 4px)";
@@ -12244,6 +11688,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.height           - Optional height of the chart container in pixels
 * @param props.withComparison   - Whether to show comparison data
 * @param props.withOverlayLabel - Whether to overlay the label on top of the bar
+* @param props.negativeBars     - How a negative value draws: from a shared zero point, or as an empty bar
 * @param props.primaryColor     - Primary color for current period bars
 * @param props.secondaryColor   - Secondary color for comparison period bars
 * @param props.valueFormatter   - Custom formatter for values
@@ -12261,7 +11706,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @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", ariaLabel, className, style, children }) => {
+const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, negativeBars = "diverge", 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);
@@ -12315,13 +11760,21 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		withComparison,
 		withOverlayLabel
 	]);
+	const withComparisonBars = withComparison && !withOverlayLabel;
+	const resolvedData = (0, react.useMemo)(() => resolveLeaderboardEntries(data ?? [], {
+		includePrevious: withComparisonBars,
+		clampNegative: negativeBars === "clamp"
+	}), [
+		data,
+		withComparisonBars,
+		negativeBars
+	]);
 	const divergingScale = (0, react.useMemo)(() => {
-		const withComparisonBars = withComparison && !withOverlayLabel;
 		const scale = {
 			negative: 0,
 			positive: 0
 		};
-		for (const entry of data ?? []) {
+		for (const entry of resolvedData) {
 			const shares = [entry.currentShare];
 			if (withComparisonBars && hasPreviousValue(entry)) shares.push(entry.previousShare);
 			for (const share of shares) {
@@ -12330,11 +11783,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 			}
 		}
 		return scale.negative > 0 ? scale : void 0;
-	}, [
-		data,
-		withComparison,
-		withOverlayLabel
-	]);
+	}, [resolvedData, withComparisonBars]);
 	const isDataValid = Boolean(data && data.length > 0);
 	const chartMetadata = (0, react.useMemo)(() => ({
 		withComparison,
@@ -12413,14 +11862,14 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 				}), allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: leaderboard_chart_module_default.emptyState,
 					children: getAllHiddenMessage(legendInteractive, "series")
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default, {
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid, {
 					role: "list",
 					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Leaderboard chart", "jetpack-charts"),
 					templateColumns,
 					rowGap: ROW_GAP,
 					columnGap: COLUMN_GAP,
 					"data-leaderboard-grid": true,
-					children: data.map((entry, rowIndex) => {
+					children: resolvedData.map((entry, rowIndex) => {
 						const rowStyle = shouldFitRows && rowIndex >= fittedCount ? { visibility: "hidden" } : void 0;
 						const hasPreviousPeriodValue = hasPreviousValue(entry);
 						const hasDelta = hasDeltaValue(entry);
@@ -12454,7 +11903,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										"aria-hidden": "true",
 										children: "—"
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$1, {
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHidden$1, {
 										as: "span",
 										children: hasPreviousPeriodValue ? (0, _wordpress_i18n.__)("Percentage change unavailable", "jetpack-charts") : (0, _wordpress_i18n.__)("No comparison data", "jetpack-charts")
 									})]