@automattic/charts 1.8.0 → 1.9.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import { getStringWidth as getStringWidth$1 } from "./visx/text/index.js";
 import { formatNumber, formatNumberCompact } from "@automattic/number-formatters";
 import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, Tooltip, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
-import { __ } from "@wordpress/i18n";
+import { __, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
 import { Children, Fragment, Fragment as Fragment$2, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, forwardRef as forwardRef$2, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1 } from "react";
 import { color, hsl } from "@visx/vendor/d3-color";
-import { differenceInHours, differenceInYears, isValid, parse, parseISO } from "date-fns";
+import { addDays, differenceInCalendarWeeks, differenceInHours, differenceInYears, format, isValid, parse, parseISO, startOfWeek } from "date-fns";
 import { Text, getStringWidth } from "@visx/text";
 import deepmerge from "deepmerge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -444,6 +444,35 @@ const lightenHexColor = (hex, blend) => {
 	const newB = Math.round(b + (255 - b) * blend);
 	return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
 };
+/**
+* WCAG relative luminance of a hex color (0 = black, 1 = white).
+*
+* @param  hex - Hex color string (e.g., '#98C8DF')
+* @return Relative luminance in the range [0, 1]
+* @throws {Error} if hex string is malformed
+*/
+const relativeLuminance = (hex) => {
+	validateHexColor(hex);
+	const toLinear = (value) => {
+		const channel = value / 255;
+		return channel <= .03928 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
+	};
+	const r = toLinear(parseInt(hex.slice(1, 3), 16));
+	const g = toLinear(parseInt(hex.slice(3, 5), 16));
+	const b = toLinear(parseInt(hex.slice(5, 7), 16));
+	return .2126 * r + .7152 * g + .0722 * b;
+};
+/**
+* Whether light text reads better than dark text on the given background, using the W3C
+* luminance threshold (0.179) that maximizes contrast against black vs white.
+*
+* @param backgroundHex - Hex background color
+* @return true if light text should be used; false (dark text) for malformed colors
+*/
+const prefersLightText = (backgroundHex) => {
+	if (!isValidHexColor(backgroundHex)) return false;
+	return relativeLuminance(backgroundHex) <= .179;
+};
 //#endregion
 //#region src/utils/resolve-css-var.ts
 /**
@@ -677,7 +706,7 @@ const getChartColor = (index, colorCache) => {
 * Default theme configuration
 */
 const defaultTheme = {
-	backgroundColor: "#FFFFFF",
+	backgroundColor: "var(--wpds-color-bg-surface-neutral-strong, #fff)",
 	labelBackgroundColor: "transparent",
 	labelTextColor: "#FFFFFF",
 	colors: [
@@ -688,56 +717,59 @@ const defaultTheme = {
 		"#FF8C8F"
 	],
 	gridStyles: {
-		stroke: "#DCDCDE",
+		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
 		strokeWidth: 1
 	},
 	tickLength: 4,
 	gridColor: "",
 	gridColorDark: "",
-	xTickLineStyles: { stroke: "black" },
+	xTickLineStyles: {
+		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
+		strokeWidth: 1
+	},
 	xAxisLineStyles: {
-		stroke: "#DCDCDE",
+		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
 		strokeWidth: 1
 	},
 	legend: {
-		labelStyles: { color: "var(--jp-gray-80, #2c3338)" },
+		labelStyles: { color: "var(--wpds-color-fg-content-neutral, #1e1e1e)" },
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
 	svgLabelSmall: {
-		fill: "var(--jp-gray-80, #2c3338)",
+		fill: "var(--wpds-color-fg-content-neutral, #1e1e1e)",
 		fontFamily: "inherit"
 	},
 	svgLabelBig: { fontFamily: "inherit" },
 	annotationStyles: {
 		label: {
-			anchorLineStroke: "var(--jp-gray-80, #2c3338)",
-			backgroundFill: "#fff"
+			anchorLineStroke: "var(--wpds-color-fg-content-neutral, #1e1e1e)",
+			backgroundFill: "var(--wpds-color-bg-surface-neutral-strong, #fff)"
 		},
-		connector: { stroke: "var(--jp-gray-80, #2c3338)" },
+		connector: { stroke: "var(--wpds-color-fg-content-neutral, #1e1e1e)" },
 		circleSubject: {
 			stroke: "transparent",
-			fill: "var(--jp-gray-80, #2c3338)",
+			fill: "var(--wpds-color-fg-content-neutral, #1e1e1e)",
 			radius: 5
 		}
 	},
-	geoChart: { featureFillColor: "var(--jp-gray-0, #f6f7f7)" },
+	geoChart: { featureFillColor: "var(--wpds-color-bg-surface-neutral-weak, #f4f4f4)" },
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
 		labelSpacing: "xs",
 		deltaColors: [
-			"#FF8C8F",
-			"#757575",
-			"#1F9828"
+			"var(--wpds-color-fg-content-error-weak, #cc1818)",
+			"var(--wpds-color-fg-content-neutral-weak, #707070)",
+			"var(--wpds-color-fg-content-success-weak, #008030)"
 		]
 	},
 	conversionFunnelChart: {
-		backgroundColor: "#F3F4F6",
-		positiveChangeColor: "#1F9828",
-		negativeChangeColor: "#FF8C8F"
+		backgroundColor: "var(--wpds-color-bg-surface-neutral-weak, #f4f4f4)",
+		positiveChangeColor: "var(--wpds-color-fg-content-success-weak, #008030)",
+		negativeChangeColor: "var(--wpds-color-fg-content-error-weak, #cc1818)"
 	},
 	lineChart: { lineStyles: { comparison: {
 		strokeDasharray: "4 4",
@@ -755,6 +787,10 @@ const defaultTheme = {
 			left: 2
 		},
 		strokeWidth: 1.5
+	},
+	heatmapChart: {
+		compactCellGap: 2,
+		compactCellSize: 11
 	}
 };
 //#endregion
@@ -967,13 +1003,31 @@ const useDeepMemo = (value) => {
 };
 //#endregion
 //#region src/hooks/use-xychart-theme.ts
+const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
 const useXYChartTheme = (data) => {
 	const theme = useGlobalChartsTheme();
 	return useMemo(() => {
 		const seriesColors = (data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color));
 		return buildChartTheme({
 			...theme,
-			colors: [...seriesColors, ...theme.colors ?? []]
+			colors: [...seriesColors, ...theme.colors ?? []],
+			backgroundColor: resolveColor(theme.backgroundColor),
+			gridStyles: theme.gridStyles && {
+				...theme.gridStyles,
+				stroke: resolveColor(theme.gridStyles.stroke)
+			},
+			xAxisLineStyles: theme.xAxisLineStyles && {
+				...theme.xAxisLineStyles,
+				stroke: resolveColor(theme.xAxisLineStyles.stroke)
+			},
+			xTickLineStyles: theme.xTickLineStyles && {
+				...theme.xTickLineStyles,
+				stroke: resolveColor(theme.xTickLineStyles.stroke)
+			},
+			svgLabelSmall: theme.svgLabelSmall && {
+				...theme.svgLabelSmall,
+				fill: resolveColor(theme.svgLabelSmall.fill)
+			}
 		});
 	}, [theme, data]);
 };
@@ -2802,12 +2856,17 @@ function withResponsive(WrappedComponent) {
 		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,
 			style: {
 				width: width ?? "100%",
-				height: height ?? defaultHeight
+				height: height ?? defaultHeight,
+				...aspectRatioStyle
 			},
 			children: /* @__PURE__ */ jsx(WrappedComponent, {
 				width: effectiveWidth,
@@ -3248,6 +3307,7 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 	const labelRef = useRef(null);
 	const [height, setHeight] = useState(null);
 	const styles = deepmerge(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
+	const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
 	useEffect(() => {
 		if (labelRef.current?.getBBox) setHeight(labelRef.current.getBBox().height);
 	}, []);
@@ -3330,8 +3390,15 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 		dx,
 		dy,
 		children: [
-			/* @__PURE__ */ jsx(Connector, { ...styles?.connector }),
-			subjectType === "circle" && /* @__PURE__ */ jsx(CircleSubject, { ...styles?.circleSubject }),
+			/* @__PURE__ */ jsx(Connector, {
+				...styles?.connector,
+				stroke: resolveColor(styles?.connector?.stroke)
+			}),
+			subjectType === "circle" && /* @__PURE__ */ jsx(CircleSubject, {
+				...styles?.circleSubject,
+				fill: resolveColor(styles?.circleSubject?.fill),
+				stroke: resolveColor(styles?.circleSubject?.stroke)
+			}),
 			subjectType === "line-vertical" && /* @__PURE__ */ jsx(LineSubject, {
 				min: yMax,
 				max: yMin,
@@ -3365,6 +3432,8 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 					title,
 					subtitle,
 					...styles?.label,
+					anchorLineStroke: resolveColor(styles?.label?.anchorLineStroke),
+					backgroundFill: resolveColor(styles?.label?.backgroundFill),
 					...labelPosition,
 					horizontalAnchor: getHorizontalAnchor(subjectType, isFlippedHorizontally),
 					verticalAnchor: getVerticalAnchor(subjectType, isFlippedVertically, y, yMax, height ?? ANNOTATION_INIT_HEIGHT)
@@ -3481,6 +3550,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const legendShape = legend.shape ?? "line";
 	const legendPosition = legend.position ?? "bottom";
 	const providerTheme = useGlobalChartsTheme();
+	const resolvedBackgroundColor = resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor;
 	const theme = useXYChartTheme(data);
 	const chartId = useChartId(providedChartId);
 	const chartRef = useRef(null);
@@ -3728,7 +3798,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 												from: color,
 												fromOpacity: .4,
 												toOpacity: .1,
-												to: providerTheme.backgroundColor,
+												to: resolvedBackgroundColor,
 												...seriesData.options?.gradient,
 												children: seriesData.options?.gradient?.stops?.map((stop, stopIndex) => /* @__PURE__ */ jsx("stop", {
 													offset: stop.offset,
@@ -4232,7 +4302,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: providerTheme.backgroundColor
+									strokeColor: resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor
 								})] }),
 								/* @__PURE__ */ jsx(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -4470,7 +4540,7 @@ function useBarChartOptions(data, horizontal, options = {}) {
 						if (typeof v === "number" && Number.isFinite(v)) allValues.push(v);
 					});
 				});
-				if (allValues.length > 0) valueScaleDomainOverride = { domain: [Math.min(...allValues), Math.max(...allValues)] };
+				if (allValues.length > 0) valueScaleDomainOverride = { domain: [Math.min(0, ...allValues), Math.max(0, ...allValues)] };
 			}
 		}
 		const xScale = {
@@ -4649,6 +4719,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 	return /* @__PURE__ */ jsx("g", {
 		className: "bar-chart__comparison-bars",
 		pointerEvents: "none",
+		"aria-hidden": "true",
 		children: rects
 	});
 };
@@ -4660,6 +4731,10 @@ const validateData$2 = (data) => {
 	return null;
 };
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
+const renderTooltipRow = (label, value) => /* @__PURE__ */ jsx("div", {
+	className: bar_chart_module_default["bar-chart__tooltip-row"],
+	children: sprintf(__("%1$s: %2$s", "jetpack-charts"), label, value)
+});
 const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, animation, children, gap = "md" }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const horizontal = orientation === "horizontal";
@@ -4713,6 +4788,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [seriesWithVisibility]);
 	const primaryEntries = useMemo(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
 	const primaryKeys = useMemo(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
+	const primarySeries = useMemo(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
 	const comparisonEntries = useMemo(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
@@ -4808,26 +4884,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					className: bar_chart_module_default["bar-chart__tooltip-header"],
 					children: categoryLabel
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: bar_chart_module_default["bar-chart__tooltip-row"],
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-label"],
-						children: [primaryKey, ":"]
-					}), /* @__PURE__ */ jsx("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-value"],
-						children: formatNumber(nearestDatum.value)
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: bar_chart_module_default["bar-chart__tooltip-row"],
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-label"],
-						children: [comparisonEntry.series.label, ":"]
-					}), /* @__PURE__ */ jsx("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-value"],
-						children: formatNumber(comparisonDatum.value)
-					})]
-				})
+				renderTooltipRow(primaryKey, formatNumber(nearestDatum.value)),
+				renderTooltipRow(comparisonEntry.series.label, formatNumber(comparisonDatum.value))
 			]
 		});
 		return /* @__PURE__ */ jsxs("div", {
@@ -4835,16 +4893,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			children: [/* @__PURE__ */ jsx("div", {
 				className: bar_chart_module_default["bar-chart__tooltip-header"],
 				children: primaryKey
-			}), /* @__PURE__ */ jsxs("div", {
-				className: bar_chart_module_default["bar-chart__tooltip-row"],
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: bar_chart_module_default["bar-chart__tooltip-label"],
-					children: [categoryLabel, ":"]
-				}), /* @__PURE__ */ jsx("span", {
-					className: bar_chart_module_default["bar-chart__tooltip-value"],
-					children: formatNumber(nearestDatum.value)
-				})]
-			})]
+			}), renderTooltipRow(categoryLabel, formatNumber(nearestDatum.value))]
 		});
 	}, [chartOptions.tooltip, comparisonEntries]);
 	const renderPattern = useCallback((index, color) => {
@@ -5037,7 +5086,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: bar_chart_module_default["bar-chart__tooltip--keyboard-focused"],
-									series: data,
+									series: primarySeries,
 									mode: "individual"
 								})
 							]
@@ -5617,6 +5666,11 @@ var geo_chart_module_default = { "container": "a8ccharts-8hS2IW-container" };
 */
 const DEFAULT_FEATURE_FILL_COLOR = "#ffffff";
 const DEFAULT_BACKGROUND_COLOR = "#ffffff";
+const GEO_CHART_PACKAGES = [
+	"corechart",
+	"controls",
+	"geochart"
+];
 /**
 * Renders a geographical chart using Google Charts GeoChart to visualize data.
 *
@@ -5705,6 +5759,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		},
 		children: /* @__PURE__ */ jsx(Chart, {
 			chartType: "GeoChart",
+			chartPackages: GEO_CHART_PACKAGES,
 			width,
 			height,
 			data: sanitizedData.data,
@@ -5720,10 +5775,407 @@ const GeoChartWithProvider = (props) => {
 GeoChartWithProvider.displayName = "GeoChart";
 const GeoChartResponsive = withResponsive(GeoChartWithProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.48.1/node_modules/@wordpress/warning/build-module/utils.mjs
+//#region src/charts/heatmap-chart/heatmap-chart.module.scss
+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--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",
+	"heatmap-chart__col-label": "a8ccharts-O3YMOW-heatmap-chart__col-label",
+	"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__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"
+};
+//#endregion
+//#region src/charts/heatmap-chart/private/use-heatmap-colors.ts
+const isPresent = (value) => value !== null && value !== void 0 && !isNaN(value);
+/**
+* Get the min and max values from heatmap data, ignoring null/NaN.
+* @param data - The heatmap columns
+* @return Tuple of [min, max] values
+*/
+const getValueExtent = (data) => {
+	let min = Infinity;
+	let max = -Infinity;
+	for (const column of data) for (const cell of column.data) {
+		if (!isPresent(cell.value)) continue;
+		if (cell.value < min) min = cell.value;
+		if (cell.value > max) max = cell.value;
+	}
+	if (min === Infinity) return [0, 0];
+	return [min, max];
+};
+/**
+* Normalize a value to 0–1 within the extent. A flat extent (min === max) maps to 1.
+* @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;
+	return Math.min(1, Math.max(0, (value - min) / (max - min)));
+};
+//#endregion
+//#region src/charts/heatmap-chart/private/build-calendar-data.ts
+/** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
+const LABELLED_ROWS = [
+	0,
+	2,
+	4
+];
+const toDate = (point) => {
+	if (point.date instanceof Date && !isNaN(point.date.getTime())) return point.date;
+	if (point.dateString) {
+		const parsed = parseISO(point.dateString);
+		if (!isNaN(parsed.getTime())) return parsed;
+	}
+	return null;
+};
+const buildCalendarHeatmapData = (series, options = {}) => {
+	const weekStartsOn = options.weekStartsOn ?? 1;
+	const entries = series.map((point) => ({
+		date: toDate(point),
+		value: point.value
+	})).filter((entry) => entry.date !== null);
+	if (!entries.length) return {
+		data: [],
+		rowLabels: []
+	};
+	const valueByDay = /* @__PURE__ */ new Map();
+	let minDate = entries[0].date;
+	let maxDate = entries[0].date;
+	for (const { date, value } of entries) {
+		valueByDay.set(format(date, "yyyy-MM-dd"), value);
+		if (date < minDate) minDate = date;
+		if (date > maxDate) maxDate = date;
+	}
+	const gridStart = startOfWeek(minDate, { weekStartsOn });
+	const weekCount = differenceInCalendarWeeks(maxDate, gridStart, { weekStartsOn }) + 1;
+	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? format(addDays(gridStart, row), "EEE") : "");
+	const data = [];
+	let previousMonth = -1;
+	for (let week = 0; week < weekCount; week++) {
+		const columnStart = addDays(gridStart, week * 7);
+		const month = columnStart.getMonth();
+		const label = month !== previousMonth ? format(columnStart, "MMM") : "";
+		previousMonth = month;
+		const cells = [];
+		for (let row = 0; row < 7; row++) {
+			const day = addDays(gridStart, week * 7 + row);
+			const key = format(day, "yyyy-MM-dd");
+			cells.push({
+				label: format(day, "EEE, MMM d, yyyy"),
+				value: valueByDay.has(key) ? valueByDay.get(key) : null
+			});
+		}
+		data.push({
+			label,
+			data: cells
+		});
+	}
+	return {
+		data,
+		rowLabels
+	};
+};
+//#endregion
+//#region src/charts/heatmap-chart/private/heatmap-legend.tsx
+const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
+	const context = useContext(HeatmapContext);
+	const { legend } = useGlobalChartsTheme();
+	if (!context) return null;
+	const { primaryColorHex } = context;
+	const labelStyle = legend.labelStyles;
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		gap: "xs",
+		align: "center",
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				variant: "body-sm",
+				style: labelStyle,
+				children: lessLabel ?? __("Less", "jetpack-charts")
+			}),
+			/* @__PURE__ */ jsx(Stack, {
+				direction: "row",
+				gap: "xs",
+				children: Array.from({ length: steps }, (_, index) => {
+					const intensity = steps <= 1 ? 1 : index / (steps - 1);
+					return /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
+						style: {
+							"--heatmap-primary": primaryColorHex,
+							"--intensity": intensity
+						}
+					}, index);
+				})
+			}),
+			/* @__PURE__ */ jsx(Text$1, {
+				variant: "body-sm",
+				style: labelStyle,
+				children: moreLabel ?? __("More", "jetpack-charts")
+			})
+		]
+	});
+};
+//#endregion
+//#region src/charts/heatmap-chart/heatmap-chart.tsx
+const HeatmapContext = createContext(null);
+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 chartId = useChartId(providedChartId);
+	const { getElementStyles, theme } = useGlobalChartsContext();
+	const { heatmapChart: heatmapChartSettings } = theme;
+	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
+	const [selectedIndex, setSelectedIndex] = useState();
+	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = useTooltip();
+	const { containerRef, containerBounds, TooltipInPortal } = useTooltipInPortal({
+		detectBounds: true,
+		scroll: true
+	});
+	const containerBoundsRef = useRef(containerBounds);
+	containerBoundsRef.current = containerBounds;
+	const { color: primaryColorHex } = getElementStyles({
+		index: 0,
+		overrideColor: primaryColor || heatmapChartSettings.primaryColor
+	});
+	const primaryHex = normalizeColorToHex(primaryColorHex);
+	const cellHasLightText = (intensity) => isValidHexColor(primaryHex) && prefersLightText(lightenHexColor(primaryHex, 1 - (CELL_MIX_FLOOR + (1 - CELL_MIX_FLOOR) * intensity)));
+	const extent = useMemo(() => getValueExtent(data), [data]);
+	const heatmapContext = useMemo(() => ({
+		extent,
+		primaryColorHex
+	}), [extent, primaryColorHex]);
+	const columns = data.length;
+	const rows = Math.max(0, ...data.map((column) => column.data.length));
+	const { compactCellGap, compactCellSize } = heatmapChartSettings;
+	const drawValues = showValues ?? !compact;
+	const buildTooltipData = useCallback((columnIndex, rowIndex) => {
+		const cell = data[columnIndex]?.data[rowIndex];
+		return {
+			value: cell?.value ?? null,
+			rowLabel: rowLabels[rowIndex],
+			columnLabel: data[columnIndex]?.label,
+			cellLabel: cell?.label,
+			row: rowIndex,
+			column: columnIndex
+		};
+	}, [data, rowLabels]);
+	const onChartBlur = useCallback(() => {
+		setSelectedIndex(void 0);
+		hideTooltip();
+	}, [hideTooltip]);
+	const onChartKeyDown = useCallback((event) => {
+		if (![
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown",
+			"Escape",
+			"Tab"
+		].includes(event.key)) return;
+		if (event.key === "Tab" || event.key === "Escape") {
+			setSelectedIndex(void 0);
+			hideTooltip();
+			return;
+		}
+		event.preventDefault();
+		if (selectedIndex === void 0) {
+			setSelectedIndex(0);
+			return;
+		}
+		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);
+		setSelectedIndex(col * rows + row);
+	}, [
+		rows,
+		columns,
+		selectedIndex,
+		hideTooltip
+	]);
+	const handleCellMouseMove = useCallback((event) => {
+		if (!withTooltips) return;
+		const target = event.currentTarget;
+		const columnIndex = Number(target.dataset.column);
+		const rowIndex = Number(target.dataset.row);
+		const bounds = containerBoundsRef.current;
+		showTooltip({
+			tooltipLeft: event.clientX - bounds.left,
+			tooltipTop: event.clientY - bounds.top,
+			tooltipData: buildTooltipData(columnIndex, rowIndex)
+		});
+	}, [
+		withTooltips,
+		showTooltip,
+		buildTooltipData
+	]);
+	const handleCellMouseLeave = useCallback(() => {
+		if (withTooltips && selectedIndex === void 0) hideTooltip();
+	}, [
+		withTooltips,
+		selectedIndex,
+		hideTooltip
+	]);
+	useEffect(() => {
+		if (!withTooltips || selectedIndex === void 0) return;
+		const col = Math.floor(selectedIndex / rows);
+		const row = selectedIndex % rows;
+		const rect = (typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null)?.getBoundingClientRect();
+		const bounds = containerBoundsRef.current;
+		showTooltip({
+			tooltipLeft: rect ? rect.left + rect.width / 2 - bounds.left : 0,
+			tooltipTop: rect ? rect.top + rect.height / 2 - bounds.top : 0,
+			tooltipData: buildTooltipData(col, row)
+		});
+	}, [
+		selectedIndex,
+		withTooltips,
+		rows,
+		chartId,
+		buildTooltipData,
+		showTooltip
+	]);
+	const defaultRenderTooltip = useCallback((info) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ jsx("div", { children: info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value) })] }), []);
+	if (!columns || !rows) return /* @__PURE__ */ jsx(Center, {
+		className: clsx("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className),
+		style: {
+			width: width || void 0,
+			height: height || void 0
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			className: heatmap_chart_module_default["heatmap-chart__empty"],
+			children: __("No data available", "jetpack-charts")
+		})
+	});
+	const trackSize = compact ? "var(--heatmap-cell-size)" : "minmax(0, 1fr)";
+	const gridStyle = {
+		"--heatmap-primary": primaryColorHex,
+		gridTemplateColumns: `auto repeat(${columns}, ${trackSize})`,
+		gridTemplateRows: `auto repeat(${rows}, ${trackSize})`
+	};
+	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;
+	return /* @__PURE__ */ jsx(HeatmapContext.Provider, {
+		value: heatmapContext,
+		children: /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+			value: { chartId },
+			children: /* @__PURE__ */ jsxs(ChartLayout, {
+				legendPosition: "bottom",
+				legendChildren: [],
+				trailingContent: nonLegendChildren,
+				gap,
+				className: clsx("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className),
+				style: {
+					width: width || void 0,
+					height: height || void 0
+				},
+				"data-chart-id": `heatmap-chart-${chartId}`,
+				children: [/* @__PURE__ */ jsxs("div", {
+					ref: containerRef,
+					role: "grid",
+					"aria-label": __("Heatmap chart", "jetpack-charts"),
+					"aria-rowcount": rows,
+					"aria-colcount": columns,
+					"aria-activedescendant": activeDescendant,
+					tabIndex: 0,
+					onBlur: onChartBlur,
+					onKeyDown: onChartKeyDown,
+					className: clsx(heatmap_chart_module_default["heatmap-chart__grid"], { [heatmap_chart_module_default["heatmap-chart__grid--compact"]]: compact }),
+					style: gridStyle,
+					children: [
+						/* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+						data.map((column, columnIndex) => /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: heatmap_chart_module_default["heatmap-chart__col-label"],
+							children: column.label
+						}, `col-${columnIndex}`)),
+						Array.from({ length: rows }).map((_row, rowIndex) => {
+							const labelVisible = !compact || rowIndex % 2 === 0;
+							return /* @__PURE__ */ jsxs("div", {
+								role: "row",
+								"aria-rowindex": rowIndex + 1,
+								className: heatmap_chart_module_default["heatmap-chart__row"],
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									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 present = isPresent(value);
+									const normalized = present ? getNormalizedValue(value, extent) : 0;
+									const flatIndex = columnIndex * rows + rowIndex;
+									const info = buildTooltipData(columnIndex, rowIndex);
+									const accessibleLabel = `${info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim()}: ${info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value)}`;
+									return /* @__PURE__ */ jsx("div", {
+										id: `${chartId}-cell-${columnIndex}-${rowIndex}`,
+										role: "gridcell",
+										tabIndex: -1,
+										"aria-colindex": columnIndex + 1,
+										"aria-label": accessibleLabel,
+										"data-column": columnIndex,
+										"data-row": rowIndex,
+										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], {
+											[heatmap_chart_module_default["heatmap-chart__cell--filled"]]: present,
+											[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: present && cellHasLightText(normalized),
+											[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selectedIndex === flatIndex
+										}),
+										style: present ? { "--intensity": normalized } : void 0,
+										onMouseMove: handleCellMouseMove,
+										onMouseLeave: handleCellMouseLeave,
+										children: drawValues && present && /* @__PURE__ */ jsx("span", {
+											className: heatmap_chart_module_default["heatmap-chart__cell-value"],
+											children: formatNumberCompact(value)
+										})
+									}, `cell-${columnIndex}-${rowIndex}`);
+								})]
+							}, `row-${rowIndex}`);
+						})
+					]
+				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
+					top: tooltipTop,
+					left: tooltipLeft,
+					children: /* @__PURE__ */ jsx("div", {
+						role: "tooltip",
+						tabIndex: -1,
+						children: (renderTooltip ?? defaultRenderTooltip)(tooltipData)
+					})
+				})]
+			})
+		})
+	});
+};
+const HeatmapChartWithProvider = (props) => {
+	if (useContext(GlobalChartsContext)) return /* @__PURE__ */ jsx(HeatmapChartInternal, { ...props });
+	return /* @__PURE__ */ jsx(GlobalChartsProvider, { children: /* @__PURE__ */ jsx(HeatmapChartInternal, { ...props }) });
+};
+HeatmapChartWithProvider.displayName = "HeatmapChart";
+const HeatmapChart = attachSubComponents(HeatmapChartWithProvider, { Legend: HeatmapLegend });
+const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ jsx(HeatmapChartWithProvider, {
+	...props,
+	width: void 0,
+	height: void 0
+});
+HeatmapChartResponsiveInner.displayName = "HeatmapChart";
+const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
+//#endregion
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.50.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.48.1/node_modules/@wordpress/warning/build-module/index.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.50.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -5737,7 +6189,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 var COMPONENT_NAMESPACE = "data-wp-component";
 var CONNECTED_NAMESPACE = "data-wp-c16t";
 var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
@@ -5879,13 +6331,13 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 function getStyledClassName(namespace) {
 	return `components-${paramCase(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -5970,7 +6422,7 @@ function isPlainObject(o) {
 	return true;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
 	useEffect$1(() => {
@@ -5983,7 +6435,7 @@ function useUpdateEffect(effect, deps) {
 }
 var use_update_effect_default = useUpdateEffect;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
 var ComponentsContext = createContext$1(
 	/** @type {Record<string, any>} */
@@ -6010,7 +6462,7 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 memo(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -7561,7 +8013,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
 var useCx = () => {
 	const cache = __unsafe_useEmotionCache();
@@ -7577,7 +8029,7 @@ var useCx = () => {
 	}, [cache]);
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
 	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
@@ -7632,7 +8084,7 @@ var Insertion = function Insertion(_ref) {
 	return null;
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
+//#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;
@@ -7714,7 +8166,7 @@ function UnforwardedView({ as, ...restProps }, ref) {
 }
 var component_default$1 = Object.assign(forwardRef$1(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -7762,7 +8214,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 var breakpoints = [
 	"40em",
 	"52em",
@@ -7796,7 +8248,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 var white = "#fff";
 var GRAY = {
 	900: "#1e1e1e",
@@ -7823,21 +8275,21 @@ var THEME = {
 	accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
 	accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
 	/** Used when placing text on the accent color. */
-	accentInverted: `var(--wp-components-color-accent-inverted, ${white})`,
-	background: `var(--wp-components-color-background, ${white})`,
-	foreground: `var(--wp-components-color-foreground, ${GRAY[900]})`,
+	accentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,
+	background: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,
+	foreground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
 	/** Used when placing text on the foreground color. */
-	foregroundInverted: `var(--wp-components-color-foreground-inverted, ${white})`,
+	foregroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,
 	gray: {
 		/** @deprecated Use `COLORS.theme.foreground` instead. */
-		900: `var(--wp-components-color-foreground, ${GRAY[900]})`,
-		800: `var(--wp-components-color-gray-800, ${GRAY[800]})`,
-		700: `var(--wp-components-color-gray-700, ${GRAY[700]})`,
-		600: `var(--wp-components-color-gray-600, ${GRAY[600]})`,
-		400: `var(--wp-components-color-gray-400, ${GRAY[400]})`,
-		300: `var(--wp-components-color-gray-300, ${GRAY[300]})`,
-		200: `var(--wp-components-color-gray-200, ${GRAY[200]})`,
-		100: `var(--wp-components-color-gray-100, ${GRAY[100]})`
+		900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
+		800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
+		700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,
+		600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
+		400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
+		300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
+		200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
+		100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`
 	}
 };
 var UI = {
@@ -7875,7 +8327,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
 	controlPaddingX: 12,
@@ -7940,7 +8392,7 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 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]);
@@ -7981,7 +8433,7 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@35.0.1_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@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
 function UnconnectedGrid(props, forwardedRef) {
 	return /* @__PURE__ */ jsx(component_default$1, {
 		...useGrid(props),
@@ -9108,6 +9560,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 	});
 }
 //#endregion
-export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
 
 //# sourceMappingURL=index.js.map