@automattic/charts 1.10.1 → 1.10.2

package/dist/index.js

@@ -23,7 +23,7 @@ import { Annotation, CircleSubject, Connector, HtmlLabel, Label, LineSubject } f
 import { PatternCircles, PatternHexagons, PatternLines, PatternWaves } from "@visx/pattern";
 import { Chart } from "react-google-charts";
 import DOMPurify from "dompurify";
-import _extends from "@babel/runtime/helpers/esm/extends";
+import "@babel/runtime/helpers/esm/extends";
 import "@babel/runtime/helpers/extends";
 import { Pie } from "@visx/shape";
 //#region \0rolldown/runtime.js
@@ -2907,27 +2907,14 @@ const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
 };
 //#endregion
 //#region src/charts/private/with-responsive/with-responsive.module.scss
-var with_responsive_module_default = { "container": "a8ccharts-sP1gHa-container" };
+var with_responsive_module_default = {
+	"container": "a8ccharts-sP1gHa-container",
+	"content": "a8ccharts-sP1gHa-content",
+	"isContained": "a8ccharts-sP1gHa-isContained"
+};
 //#endregion
 //#region src/charts/private/with-responsive/with-responsive.tsx
-const useResponsiveDimensions = ({ resizeDebounceTime = 300, maxWidth = 1200, aspectRatio }) => {
-	const { parentRef, width: parentWidth, height: parentHeight } = useParentSize({
-		debounceTime: resizeDebounceTime,
-		enableDebounceLeadingCall: true
-	});
-	const containerWidth = parentWidth > 0 ? Math.min(parentWidth, maxWidth) : 0;
-	return {
-		parentRef,
-		width: containerWidth,
-		height: aspectRatio !== void 0 ? containerWidth * aspectRatio : parentHeight,
-		/**
-		* Whether an aspectRatio was provided. Used to determine container
-		* height styling: 'auto' when true (height derived from width),
-		* '100%' when false (fill parent container).
-		*/
-		hasAspectRatio: aspectRatio !== void 0
-	};
-};
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 /**
 * A higher-order component that provides responsive dimensions
 * to the wrapped chart component using useParentSize from `@visx/responsive`.
@@ -2937,32 +2924,67 @@ const useResponsiveDimensions = ({ resizeDebounceTime = 300, maxWidth = 1200, as
 */
 function withResponsive(WrappedComponent) {
 	return function ResponsiveChart({ resizeDebounceTime = 300, maxWidth = 1200, aspectRatio, size, width, height, ...chartProps }) {
-		const { parentRef, width: measuredWidth, height: measuredHeight, hasAspectRatio } = useResponsiveDimensions({
-			resizeDebounceTime,
-			maxWidth,
-			aspectRatio
+		const { parentRef, width: parentWidth, height: parentHeight } = useParentSize({
+			debounceTime: resizeDebounceTime,
+			enableDebounceLeadingCall: true
+		});
+		const hasAspectRatio = aspectRatio !== void 0 && aspectRatio > 0;
+		const wrapperRef = useRef(null);
+		const setWrapperRef = useCallback((node) => {
+			wrapperRef.current = node;
+			if (typeof parentRef === "function") parentRef(node);
+			else if (parentRef) parentRef.current = node;
+		}, [parentRef]);
+		const [containedHeight, setContainedHeight] = useState(null);
+		const availableWidth = parentWidth > 0 ? Math.min(parentWidth, width === void 0 ? maxWidth : Infinity) : width ?? 0;
+		let boxWidth = availableWidth;
+		let boxHeight;
+		if (hasAspectRatio) {
+			const derivedHeight = availableWidth * aspectRatio;
+			if (containedHeight !== null && derivedHeight > containedHeight) {
+				boxHeight = containedHeight;
+				boxWidth = boxHeight / aspectRatio;
+			} else boxHeight = derivedHeight;
+		} else boxHeight = parentHeight > 0 ? parentHeight : height ?? 0;
+		useIsomorphicLayoutEffect(() => {
+			if (!hasAspectRatio) {
+				if (containedHeight !== null) setContainedHeight(null);
+				return;
+			}
+			const available = wrapperRef.current?.clientHeight ?? 0;
+			const derivedHeight = availableWidth * aspectRatio;
+			if (containedHeight === null) {
+				if (available > 0 && derivedHeight > available + 1) setContainedHeight(available);
+			} else if (available >= derivedHeight - 1) setContainedHeight(null);
+			else if (Math.abs(available - containedHeight) > 1) setContainedHeight(available);
+		}, [
+			hasAspectRatio,
+			availableWidth,
+			aspectRatio,
+			containedHeight,
+			parentHeight
+		]);
+		const wrappedComponent = /* @__PURE__ */ jsx(WrappedComponent, {
+			width: boxWidth,
+			height: boxHeight,
+			size,
+			...chartProps
 		});
-		const effectiveWidth = measuredWidth || width || 0;
-		const effectiveHeight = measuredHeight || height || 0;
-		const defaultHeight = hasAspectRatio ? "auto" : "100%";
-		const aspectRatioStyle = hasAspectRatio && aspectRatio ? {
-			aspectRatio: `${1 / aspectRatio}`,
-			maxWidth: width === void 0 ? maxWidth : void 0
-		} : null;
 		return /* @__PURE__ */ jsx("div", {
-			ref: parentRef,
-			className: with_responsive_module_default.container,
+			ref: setWrapperRef,
+			className: clsx(with_responsive_module_default.container, hasAspectRatio && with_responsive_module_default.isContained),
 			style: {
-				width: width ?? "100%",
-				height: height ?? defaultHeight,
-				...aspectRatioStyle
+				...width !== void 0 ? { width } : null,
+				...height !== void 0 ? { height } : null
 			},
-			children: /* @__PURE__ */ jsx(WrappedComponent, {
-				width: effectiveWidth,
-				height: effectiveHeight,
-				size,
-				...chartProps
-			})
+			children: hasAspectRatio ? /* @__PURE__ */ jsx("div", {
+				className: with_responsive_module_default.content,
+				style: {
+					width: boxWidth,
+					height: boxHeight
+				},
+				children: wrappedComponent
+			}) : wrappedComponent
 		});
 	};
 }
@@ -5954,6 +5976,7 @@ var heatmap_chart_module_default = {
 	"heatmap-chart": "a8ccharts-O3YMOW-heatmap-chart",
 	"heatmap-chart__cell": "a8ccharts-O3YMOW-heatmap-chart__cell",
 	"heatmap-chart__cell--filled": "a8ccharts-O3YMOW-heatmap-chart__cell--filled",
+	"heatmap-chart__cell--hidden": "a8ccharts-O3YMOW-heatmap-chart__cell--hidden",
 	"heatmap-chart__cell--selected": "a8ccharts-O3YMOW-heatmap-chart__cell--selected",
 	"heatmap-chart__cell--strong": "a8ccharts-O3YMOW-heatmap-chart__cell--strong",
 	"heatmap-chart__cell-value": "a8ccharts-O3YMOW-heatmap-chart__cell-value",
@@ -5961,9 +5984,11 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__empty": "a8ccharts-O3YMOW-heatmap-chart__empty",
 	"heatmap-chart__grid": "a8ccharts-O3YMOW-heatmap-chart__grid",
 	"heatmap-chart__grid--compact": "a8ccharts-O3YMOW-heatmap-chart__grid--compact",
+	"heatmap-chart__grid--height-capped": "a8ccharts-O3YMOW-heatmap-chart__grid--height-capped",
 	"heatmap-chart__legend-swatch": "a8ccharts-O3YMOW-heatmap-chart__legend-swatch",
 	"heatmap-chart__row": "a8ccharts-O3YMOW-heatmap-chart__row",
-	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label"
+	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label",
+	"heatmap-chart--height-capped": "a8ccharts-O3YMOW-heatmap-chart--height-capped"
 };
 //#endregion
 //#region src/charts/heatmap-chart/private/use-heatmap-colors.ts
@@ -5985,14 +6010,18 @@ const getValueExtent = (data) => {
 	return [min, max];
 };
 /**
-* Normalize a value to 0–1 within the extent. A flat extent (min === max) maps to 1.
+* Normalize a value to 0–1 within the extent. A flat extent (min === max)
+* maps to 1 — every cell is equally the "highest" — except an all-zero
+* extent, which maps to 0 so a no-activity grid renders at the scale's
+* bottom instead of full intensity.
+*
 * @param value  - The value to normalize
 * @param extent - Tuple of [min, max] values for the normalization range
 * @return Normalized value between 0 and 1
 */
 const getNormalizedValue = (value, extent) => {
 	const [min, max] = extent;
-	if (min === max) return 1;
+	if (min === max) return max === 0 ? 0 : 1;
 	return Math.min(1, Math.max(0, (value - min) / (max - min)));
 };
 //#endregion
@@ -6013,6 +6042,7 @@ const toDate = (point) => {
 };
 const buildCalendarHeatmapData = (series, options = {}) => {
 	const weekStartsOn = options.weekStartsOn ?? 1;
+	const hideOutOfRangeDays = options.hideOutOfRangeDays ?? true;
 	const entries = series.map((point) => ({
 		date: toDate(point),
 		value: point.value
@@ -6031,6 +6061,8 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 	}
 	const gridStart = startOfWeek(minDate, { weekStartsOn });
 	const weekCount = differenceInCalendarWeeks(maxDate, gridStart, { weekStartsOn }) + 1;
+	const minDayKey = format(minDate, "yyyy-MM-dd");
+	const maxDayKey = format(maxDate, "yyyy-MM-dd");
 	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? format(addDays(gridStart, row), "EEE") : "");
 	const MIN_FIRST_MONTH_WEEKS = 2;
 	const firstMonth = gridStart.getMonth();
@@ -6048,10 +6080,12 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 		for (let row = 0; row < 7; row++) {
 			const day = addDays(gridStart, week * 7 + row);
 			const key = format(day, "yyyy-MM-dd");
-			cells.push({
+			const cell = {
 				label: format(day, "EEE, MMM d, yyyy"),
 				value: valueByDay.has(key) ? valueByDay.get(key) : null
-			});
+			};
+			if (hideOutOfRangeDays && (key < minDayKey || key > maxDayKey)) cell.hidden = true;
+			cells.push(cell);
 		}
 		data.push({
 			label,
@@ -6112,7 +6146,7 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 //#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.tsx
 const CELL_MIX_FLOOR = .15;
-const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, rowLabels = [], primaryColor, gap = "md", withTooltips = false, renderTooltip, children }) => {
+const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = [], primaryColor, gap = "md", withTooltips = false, renderTooltip, children }) => {
 	const chartId = useChartId(providedChartId);
 	const { getElementStyles, resolveThemeColor, theme } = useGlobalChartsContext();
 	const { heatmapChart: heatmapChartSettings } = theme;
@@ -6156,6 +6190,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		setSelectedIndex(void 0);
 		hideTooltip();
 	}, [hideTooltip]);
+	const isCellHidden = useCallback((col, row) => data[col]?.data[row]?.hidden === true, [data]);
 	const onChartKeyDown = useCallback((event) => {
 		if (![
 			"ArrowLeft",
@@ -6172,21 +6207,32 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		}
 		event.preventDefault();
 		if (selectedIndex === void 0) {
-			setSelectedIndex(0);
+			for (let index = 0; index < columns * rows; index++) if (!isCellHidden(Math.floor(index / rows), index % rows)) {
+				setSelectedIndex(index);
+				return;
+			}
 			return;
 		}
+		let stepCol = 0;
+		let stepRow = 0;
+		if (event.key === "ArrowRight") stepCol = 1;
+		else if (event.key === "ArrowLeft") stepCol = -1;
+		else if (event.key === "ArrowDown") stepRow = 1;
+		else if (event.key === "ArrowUp") stepRow = -1;
 		let col = Math.floor(selectedIndex / rows);
 		let row = selectedIndex % rows;
-		if (event.key === "ArrowRight") col = Math.min(col + 1, columns - 1);
-		else if (event.key === "ArrowLeft") col = Math.max(col - 1, 0);
-		else if (event.key === "ArrowDown") row = Math.min(row + 1, rows - 1);
-		else if (event.key === "ArrowUp") row = Math.max(row - 1, 0);
+		do {
+			col += stepCol;
+			row += stepRow;
+		} while (col >= 0 && col < columns && row >= 0 && row < rows && isCellHidden(col, row));
+		if (col < 0 || col >= columns || row < 0 || row >= rows) return;
 		setSelectedIndex(col * rows + row);
 	}, [
 		rows,
 		columns,
 		selectedIndex,
-		hideTooltip
+		hideTooltip,
+		isCellHidden
 	]);
 	const handleCellMouseMove = useCallback((event) => {
 		if (!withTooltips) return;
@@ -6242,18 +6288,20 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 			children: __("No data available", "jetpack-charts")
 		})
 	});
-	const trackSize = compact ? "var(--heatmap-cell-size)" : "minmax(0, 1fr)";
+	const columnTrack = compact ? "var(--heatmap-cell-size)" : `minmax(${minCellWidth ?? 0}px, ${maxCellWidth ? `${maxCellWidth}px` : "1fr"})`;
+	const rowTrack = compact ? "var(--heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
 	const gridStyle = {
 		"--heatmap-primary": primaryColorHex,
 		"--heatmap-bg": theme.backgroundColor,
-		gridTemplateColumns: `auto repeat(${columns}, ${trackSize})`,
-		gridTemplateRows: `auto repeat(${rows}, ${trackSize})`
+		gridTemplateColumns: `auto repeat(${columns}, ${columnTrack})`,
+		gridTemplateRows: `auto repeat(${rows}, ${rowTrack})`
 	};
 	if (compact) {
 		gridStyle["--heatmap-cell-gap"] = `${compactCellGap}px`;
 		gridStyle["--heatmap-cell-size"] = `${compactCellSize}px`;
 	}
 	const activeDescendant = selectedIndex !== void 0 ? `${chartId}-cell-${Math.floor(selectedIndex / rows)}-${selectedIndex % rows}` : void 0;
+	const heightCapped = !compact && Boolean(maxCellHeight);
 	return /* @__PURE__ */ jsx(HeatmapContext.Provider, {
 		value: heatmapContext,
 		children: /* @__PURE__ */ jsx(SingleChartContext.Provider, {
@@ -6263,7 +6311,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				legendChildren: [],
 				trailingContent: nonLegendChildren,
 				gap,
-				className: clsx("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className),
+				className: clsx("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className, { [heatmap_chart_module_default["heatmap-chart--height-capped"]]: heightCapped }),
 				style: {
 					width: width || void 0,
 					height: height || void 0
@@ -6279,7 +6327,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 					tabIndex: 0,
 					onBlur: onChartBlur,
 					onKeyDown: onChartKeyDown,
-					className: clsx(heatmap_chart_module_default["heatmap-chart__grid"], { [heatmap_chart_module_default["heatmap-chart__grid--compact"]]: compact }),
+					className: clsx(heatmap_chart_module_default["heatmap-chart__grid"], {
+						[heatmap_chart_module_default["heatmap-chart__grid--compact"]]: compact,
+						[heatmap_chart_module_default["heatmap-chart__grid--height-capped"]]: heightCapped
+					}),
 					style: gridStyle,
 					children: [/* @__PURE__ */ jsxs("div", {
 						role: "row",
@@ -6300,7 +6351,12 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 								className: heatmap_chart_module_default["heatmap-chart__row-label"],
 								children: labelVisible ? rowLabels[rowIndex] ?? "" : ""
 							}), data.map((column, columnIndex) => {
-								const value = column.data[rowIndex]?.value ?? null;
+								const cell = column.data[rowIndex];
+								if (cell?.hidden) return /* @__PURE__ */ jsx("div", {
+									"aria-hidden": "true",
+									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
+								}, `cell-${columnIndex}-${rowIndex}`);
+								const value = cell?.value ?? null;
 								const present = isPresent(value);
 								const normalized = present ? getNormalizedValue(value, extent) : 0;
 								const flatIndex = columnIndex * rows + rowIndex;
@@ -6357,7 +6413,7 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ jsx(HeatmapChartW
 HeatmapChartResponsiveInner.displayName = "HeatmapChart";
 const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
 	useEffect$1(() => {
@@ -7631,7 +7687,7 @@ var unitlessKeys = {
 };
 //#endregion
 //#region ../../../node_modules/.pnpm/@emotion+serialize@1.3.3/node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
-var isDevelopment$2 = false;
+var isDevelopment$1 = false;
 var hyphenateRegex = /[A-Z]|^ms/g;
 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 var isCustomProperty = function isCustomProperty(property) {
@@ -7713,7 +7769,7 @@ function createStringFromObject(mergedProps, registered, obj) {
 			if (registered != null && registered[asString] !== void 0) string += key + "{" + registered[asString] + "}";
 			else if (isProcessableValue(asString)) string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
 		} else {
-			if (key === "NO_COMPONENT_SELECTOR" && isDevelopment$2) throw new Error(noComponentSelectorMessage);
+			if (key === "NO_COMPONENT_SELECTOR" && isDevelopment$1) 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 {
@@ -7783,7 +7839,7 @@ var createEmotionProps = function createEmotionProps(type, props) {
 	newProps[typePropName] = type;
 	return newProps;
 };
-var Insertion$1 = function Insertion(_ref) {
+var Insertion = function Insertion(_ref) {
 	var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
 	registerStyles(cache, serialized, isStringTag);
 	useInsertionEffectAlwaysWithSyncFallback(function() {
@@ -7805,7 +7861,7 @@ var Emotion$1 = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
 	for (var _key2 in props) if (hasOwn.call(props, _key2) && _key2 !== "css" && _key2 !== typePropName && true) newProps[_key2] = props[_key2];
 	newProps.className = className;
 	if (ref) newProps.ref = ref;
-	return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Insertion$1, {
+	return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Insertion, {
 		cache,
 		serialized,
 		isStringTag: typeof WrappedComponent === "string"
@@ -7930,7 +7986,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
 var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
 var useCx = () => {
 	const cache = __unsafe_useEmotionCache();
@@ -8037,7 +8093,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
 var white = "#fff";
 var GRAY = {
 	900: "#1e1e1e",
@@ -8116,7 +8172,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/config-values.mjs
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
 	controlPaddingX: 12,
@@ -8158,20 +8214,13 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	fontSizeXSmall: "calc(0.75 * 13px)",
 	fontLineHeightBase: "1.4",
 	fontWeight: "normal",
-	fontWeightMedium: "499",
-	fontWeightHeading: "600",
+	fontWeightEmphasis: "600",
 	gridBase: "4px",
 	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
 	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
 	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
 	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
-	surfaceBackgroundColor: COLORS.white,
-	surfaceBackgroundSubtleColor: "#F3F3F3",
-	surfaceBackgroundTintColor: "#F5F5F5",
 	surfaceBorderColor: "rgba(0, 0, 0, 0.1)",
-	surfaceBorderBoldColor: "rgba(0, 0, 0, 0.15)",
-	surfaceBorderSubtleColor: "rgba(0, 0, 0, 0.05)",
-	surfaceBackgroundTertiaryColor: COLORS.white,
 	surfaceColor: COLORS.white,
 	transitionDuration: "200ms",
 	transitionDurationFast: "160ms",
@@ -8228,10 +8277,10 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	};
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.50.0/node_modules/@wordpress/warning/build-module/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.51.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.50.0/node_modules/@wordpress/warning/build-module/index.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.51.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -8245,7 +8294,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
 var ComponentsContext = createContext$1(
 	/** @type {Record<string, any>} */
@@ -8272,18 +8321,18 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 memo(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/constants.mjs
 var COMPONENT_NAMESPACE = "data-wp-component";
 var CONNECTED_NAMESPACE = "data-wp-c16t";
 var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 function getStyledClassName(namespace) {
 	return `components-${paramCase(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -8300,7 +8349,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -8308,7 +8357,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
 	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
@@ -8328,7 +8377,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -8344,124 +8393,105 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@emotion+is-prop-valid@1.4.0/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|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|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
-var isPropValid = /* #__PURE__ */ memoize(function(prop) {
-	return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
-});
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+styled@11.14.1_@emotion+react@11.14.0_@types+react@18.3.28_react@18.3.1__@types+react@18.3.28_react@18.3.1/node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
-var isDevelopment = false;
-var testOmitPropsOnStringTag = isPropValid;
-var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
-	return key !== "theme";
-};
-var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
-	return typeof tag === "string" && tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
-};
-var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
-	var shouldForwardProp;
-	if (options) {
-		var optionsShouldForwardProp = options.shouldForwardProp;
-		shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function(propName) {
-			return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
-		} : optionsShouldForwardProp;
-	}
-	if (typeof shouldForwardProp !== "function" && isReal) shouldForwardProp = tag.__emotion_forwardProp;
-	return shouldForwardProp;
-};
-var Insertion = function Insertion(_ref) {
-	var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
-	registerStyles(cache, serialized, isStringTag);
-	useInsertionEffectAlwaysWithSyncFallback(function() {
-		return insertStyles(cache, serialized, isStringTag);
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/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
+	feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix
+	feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood
+	feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode
+	feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile
+	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
+	innerHTML suppressContentEditableWarning suppressHydrationWarning valueLink
+	abbr accept acceptCharset accessKey action allow allowUserMedia
+	allowPaymentRequest allowFullScreen allowTransparency alt async autoComplete
+	autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID
+	className cols colSpan content contentEditable contextMenu controls controlsList
+	coords crossOrigin data dateTime decoding default defer dir disabled
+	disablePictureInPicture disableRemotePlayback download draggable encType
+	enterKeyHint fetchpriority fetchPriority form formAction formEncType formMethod
+	formNoValidate formTarget frameBorder headers height hidden high href hrefLang
+	htmlFor httpEquiv id inputMode integrity is keyParams keyType kind label lang
+	list loading loop low marginHeight marginWidth max maxLength media mediaGroup
+	method min minLength multiple muted name nonce noValidate open optimum pattern
+	placeholder playsInline popover popoverTarget popoverTargetAction poster
+	preload profile radioGroup readOnly referrerPolicy rel required reversed role
+	rows rowSpan sandbox scope scoped scrolling seamless selected shape size sizes
+	slot span spellCheck src srcDoc srcLang srcSet start step style summary
+	tabIndex target title translate type useMap value width wmode wrap about
+	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
+	amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
+	baseFrequency baselineShift baseProfile bbox begin bias by calcMode capHeight
+	clip clipPathUnits clipPath clipRule colorInterpolation
+	colorInterpolationFilters colorProfile colorRendering contentScriptType
+	contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
+	display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
+	end exponent externalResourcesRequired fill fillOpacity fillRule filter
+	filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
+	fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fr fx
+	fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical
+	glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX
+	ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix
+	kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust
+	letterSpacing lightingColor limitingConeAngle local markerEnd markerMid
+	markerStart markerHeight markerUnits markerWidth mask maskContentUnits
+	maskUnits mathematical mode numOctaves offset opacity operator order orient
+	orientation origin overflow overlinePosition overlineThickness panose1
+	paintOrder pathLength patternContentUnits patternTransform patternUnits
+	pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha
+	preserveAspectRatio primitiveUnits r radius refX refY renderingIntent
+	repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate
+	rx ry scale seed shapeRendering slope spacing specularConstant
+	specularExponent speed spreadMethod startOffset stdDeviation stemh stemv
+	stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness
+	string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin
+	strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage
+	tableValues targetX targetY textAnchor textDecoration textRendering textLength
+	to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi
+	unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values
+	vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget
+	visibility widths wordSpacing writingMode x xHeight x1 x2 xChannelSelector
+	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([
+	"autofocus",
+	"class",
+	"for"
+]);
+function isValidIntrinsicElementProp(prop, element) {
+	if (customAttributeRegExp.test(prop) || eventHandlerRegExp.test(prop)) return true;
+	if (baseElementProps.has(prop) || compatElementProps.has(prop)) return true;
+	return svgElementNames.has(element) && svgElementProps.has(prop);
+}
+function filterIntrinsicElementProps(props, element) {
+	return Object.fromEntries(Object.entries(props).filter(([prop]) => isValidIntrinsicElementProp(prop, element)));
+}
+function UnforwardedPolymorphicElement({ as, ...props }, ref) {
+	const Element = as || "div";
+	return /* @__PURE__ */ jsx(Element, {
+		ref,
+		...typeof Element === "string" ? filterIntrinsicElementProps(props, Element) : props
 	});
-	return null;
-};
+}
+var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
-var PolymorphicDiv = /* @__PURE__ */ function createStyled(tag, options) {
-	var isReal = tag.__emotion_real === tag;
-	var baseTag = isReal && tag.__emotion_base || tag;
-	var identifierName;
-	var targetClassName;
-	if (options !== void 0) {
-		identifierName = options.label;
-		targetClassName = options.target;
-	}
-	var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
-	var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
-	var shouldUseAs = !defaultShouldForwardProp("as");
-	return function() {
-		var args = arguments;
-		var styles = isReal && tag.__emotion_styles !== void 0 ? tag.__emotion_styles.slice(0) : [];
-		if (identifierName !== void 0) styles.push("label:" + identifierName + ";");
-		if (args[0] == null || args[0].raw === void 0) styles.push.apply(styles, args);
-		else {
-			var templateStringsArr = args[0];
-			styles.push(templateStringsArr[0]);
-			var len = args.length;
-			var i = 1;
-			for (; i < len; i++) styles.push(args[i], templateStringsArr[i]);
-		}
-		var Styled = withEmotionCache(function(props, cache, ref) {
-			var FinalTag = shouldUseAs && props.as || baseTag;
-			var className = "";
-			var classInterpolations = [];
-			var mergedProps = props;
-			if (props.theme == null) {
-				mergedProps = {};
-				for (var key in props) mergedProps[key] = props[key];
-				mergedProps.theme = React.useContext(ThemeContext);
-			}
-			if (typeof props.className === "string") className = getRegisteredStyles$1(cache.registered, classInterpolations, props.className);
-			else if (props.className != null) className = props.className + " ";
-			var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
-			className += cache.key + "-" + serialized.name;
-			if (targetClassName !== void 0) className += " " + targetClassName;
-			var finalShouldForwardProp = shouldUseAs && shouldForwardProp === void 0 ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
-			var newProps = {};
-			for (var _key in props) {
-				if (shouldUseAs && _key === "as") continue;
-				if (finalShouldForwardProp(_key)) newProps[_key] = props[_key];
-			}
-			newProps.className = className;
-			if (ref) newProps.ref = ref;
-			return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Insertion, {
-				cache,
-				serialized,
-				isStringTag: typeof FinalTag === "string"
-			}), /*#__PURE__*/ React.createElement(FinalTag, newProps));
-		});
-		Styled.displayName = identifierName !== void 0 ? identifierName : "Styled(" + (typeof baseTag === "string" ? baseTag : baseTag.displayName || baseTag.name || "Component") + ")";
-		Styled.defaultProps = tag.defaultProps;
-		Styled.__emotion_real = Styled;
-		Styled.__emotion_base = baseTag;
-		Styled.__emotion_styles = styles;
-		Styled.__emotion_forwardProp = shouldForwardProp;
-		Object.defineProperty(Styled, "toString", { value: function value() {
-			if (targetClassName === void 0 && isDevelopment) return "NO_COMPONENT_SELECTOR";
-			return "." + targetClassName;
-		} });
-		Styled.withComponent = function(nextTag, nextOptions) {
-			return createStyled(nextTag, _extends({}, options, nextOptions, { shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true) })).apply(void 0, styles);
-		};
-		return Styled;
-	};
-}("div", process.env.NODE_ENV === "production" ? { target: "e19lxcc00" } : {
-	target: "e19lxcc00",
-	label: "PolymorphicDiv"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWlDIiwiZmlsZSI6ImNvbXBvbmVudC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL2NvbnRleHQnO1xuXG5jb25zdCBQb2x5bW9ycGhpY0RpdiA9IHN0eWxlZC5kaXZgYDtcblxuZnVuY3Rpb24gVW5mb3J3YXJkZWRWaWV3PCBUIGV4dGVuZHMgUmVhY3QuRWxlbWVudFR5cGUgPSAnZGl2JyA+KFxuXHR7IGFzLCAuLi5yZXN0UHJvcHMgfTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IHt9LCBUID4sXG5cdHJlZjogUmVhY3QuRm9yd2FyZGVkUmVmPCBhbnkgPlxuKSB7XG5cdHJldHVybiA8UG9seW1vcnBoaWNEaXYgYXM9eyBhcyB9IHJlZj17IHJlZiB9IHsgLi4ucmVzdFByb3BzIH0gLz47XG59XG5cbi8qKlxuICogYFZpZXdgIGlzIGEgY29yZSBjb21wb25lbnQgdGhhdCByZW5kZXJzIGV2ZXJ5dGhpbmcgaW4gdGhlIGxpYnJhcnkuXG4gKiBJdCBpcyB0aGUgcHJpbmNpcGxlIGNvbXBvbmVudCBpbiB0aGUgZW50aXJlIGxpYnJhcnkuXG4gKlxuICogYGBganN4XG4gKiBpbXBvcnQgeyBWaWV3IH0gZnJvbSBgQHdvcmRwcmVzcy9jb21wb25lbnRzYDtcbiAqXG4gKiBmdW5jdGlvbiBFeGFtcGxlKCkge1xuICogXHRyZXR1cm4gKFxuICogXHRcdDxWaWV3PlxuICogXHRcdFx0IENvZGUgaXMgUG9ldHJ5XG4gKiBcdFx0PC9WaWV3PlxuICogXHQpO1xuICogfVxuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBWaWV3ID0gT2JqZWN0LmFzc2lnbiggZm9yd2FyZFJlZiggVW5mb3J3YXJkZWRWaWV3ICksIHtcblx0c2VsZWN0b3I6ICcuY29tcG9uZW50cy12aWV3Jyxcbn0gKTtcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */");
-function UnforwardedView({ as, ...restProps }, ref) {
-	return /* @__PURE__ */ jsx(PolymorphicDiv, {
-		as,
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
+function UnforwardedView({ css, ...restProps }, ref) {
+	return /* @__PURE__ */ jsx(PolymorphicElement, {
 		ref,
 		...restProps
 	});
 }
 var component_default$2 = Object.assign(forwardRef$1(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -8476,7 +8506,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
@@ -8510,7 +8540,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -8558,7 +8588,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/hook.mjs
 function useGrid(props) {
 	const { align, alignment, className, columnGap, columns = 2, gap = 3, isInline = false, justify, rowGap, rows, templateColumns, templateRows, ...otherProps } = useContextSystem(props, "Grid");
 	const column = useResponsiveValue(Array.isArray(columns) ? columns : [columns]);
@@ -8600,7 +8630,7 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@36.1.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@37.0.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
 	return /* @__PURE__ */ jsx(component_default$2, {
 		...useGrid(props),