@automattic/charts 1.8.0 → 1.9.0

package/dist/index.cjs

@@ -448,6 +448,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
 /**
@@ -681,7 +710,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: [
@@ -692,56 +721,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",
@@ -759,6 +791,10 @@ const defaultTheme = {
 			left: 2
 		},
 		strokeWidth: 1.5
+	},
+	heatmapChart: {
+		compactCellGap: 2,
+		compactCellSize: 11
 	}
 };
 //#endregion
@@ -971,13 +1007,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 (0, react$1.useMemo)(() => {
 		const seriesColors = (data ?? []).map((series) => series.options?.stroke).filter((color) => Boolean(color));
 		return (0, _visx_xychart.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]);
 };
@@ -2806,12 +2860,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__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: parentRef,
 			className: with_responsive_module_default.container,
 			style: {
 				width: width ?? "100%",
-				height: height ?? defaultHeight
+				height: height ?? defaultHeight,
+				...aspectRatioStyle
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappedComponent, {
 				width: effectiveWidth,
@@ -3252,6 +3311,7 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 	const labelRef = (0, react$1.useRef)(null);
 	const [height, setHeight] = (0, react$1.useState)(null);
 	const styles = (0, deepmerge.default)(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
+	const resolveColor = (value) => value ? resolveCssVariable(value) ?? value : value;
 	(0, react$1.useEffect)(() => {
 		if (labelRef.current?.getBBox) setHeight(labelRef.current.getBBox().height);
 	}, []);
@@ -3334,8 +3394,15 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 		dx,
 		dy,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.Connector, { ...styles?.connector }),
-			subjectType === "circle" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.CircleSubject, { ...styles?.circleSubject }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.Connector, {
+				...styles?.connector,
+				stroke: resolveColor(styles?.connector?.stroke)
+			}),
+			subjectType === "circle" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.CircleSubject, {
+				...styles?.circleSubject,
+				fill: resolveColor(styles?.circleSubject?.fill),
+				stroke: resolveColor(styles?.circleSubject?.stroke)
+			}),
 			subjectType === "line-vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_annotation.LineSubject, {
 				min: yMax,
 				max: yMin,
@@ -3369,6 +3436,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)
@@ -3485,6 +3554,7 @@ const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 	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 = (0, react$1.useRef)(null);
@@ -3732,7 +3802,7 @@ const LineChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 												from: color,
 												fromOpacity: .4,
 												toOpacity: .1,
-												to: providerTheme.backgroundColor,
+												to: resolvedBackgroundColor,
 												...seriesData.options?.gradient,
 												children: seriesData.options?.gradient?.stops?.map((stop, stopIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
 													offset: stop.offset,
@@ -4236,7 +4306,7 @@ const AreaChartInternal = (0, react$1.forwardRef)(({ data, chartId: providedChar
 									stacked,
 									stackOffset,
 									getElementStyles,
-									strokeColor: providerTheme.backgroundColor
+									strokeColor: resolveCssVariable(providerTheme.backgroundColor) ?? providerTheme.backgroundColor
 								})] }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AreaChartScalesRef, {
 									chartRef: internalChartRef,
@@ -4474,7 +4544,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 = {
@@ -4653,6 +4723,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
 		className: "bar-chart__comparison-bars",
 		pointerEvents: "none",
+		"aria-hidden": "true",
 		children: rects
 	});
 };
@@ -4664,6 +4735,10 @@ const validateData$2 = (data) => {
 	return null;
 };
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
+const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: bar_chart_module_default["bar-chart__tooltip-row"],
+	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s: %2$s", "jetpack-charts"), label, value)
+});
 const BarChartInternal = ({ data, 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";
@@ -4717,6 +4792,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [seriesWithVisibility]);
 	const primaryEntries = (0, react$1.useMemo)(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
 	const primaryKeys = (0, react$1.useMemo)(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
+	const primarySeries = (0, react$1.useMemo)(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
 	const comparisonEntries = (0, react$1.useMemo)(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
@@ -4812,26 +4888,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					className: bar_chart_module_default["bar-chart__tooltip-header"],
 					children: categoryLabel
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: bar_chart_module_default["bar-chart__tooltip-row"],
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-label"],
-						children: [primaryKey, ":"]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-value"],
-						children: (0, _automattic_number_formatters.formatNumber)(nearestDatum.value)
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: bar_chart_module_default["bar-chart__tooltip-row"],
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-label"],
-						children: [comparisonEntry.series.label, ":"]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-value"],
-						children: (0, _automattic_number_formatters.formatNumber)(comparisonDatum.value)
-					})]
-				})
+				renderTooltipRow(primaryKey, (0, _automattic_number_formatters.formatNumber)(nearestDatum.value)),
+				renderTooltipRow(comparisonEntry.series.label, (0, _automattic_number_formatters.formatNumber)(comparisonDatum.value))
 			]
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4839,16 +4897,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: bar_chart_module_default["bar-chart__tooltip-header"],
 				children: primaryKey
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: bar_chart_module_default["bar-chart__tooltip-row"],
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: bar_chart_module_default["bar-chart__tooltip-label"],
-					children: [categoryLabel, ":"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: bar_chart_module_default["bar-chart__tooltip-value"],
-					children: (0, _automattic_number_formatters.formatNumber)(nearestDatum.value)
-				})]
-			})]
+			}), renderTooltipRow(categoryLabel, (0, _automattic_number_formatters.formatNumber)(nearestDatum.value))]
 		});
 	}, [chartOptions.tooltip, comparisonEntries]);
 	const renderPattern = (0, react$1.useCallback)((index, color) => {
@@ -5041,7 +5090,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"
 								})
 							]
@@ -5621,6 +5670,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.
 *
@@ -5709,6 +5763,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_google_charts.Chart, {
 			chartType: "GeoChart",
+			chartPackages: GEO_CHART_PACKAGES,
 			width,
 			height,
 			data: sanitizedData.data,
@@ -5724,10 +5779,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 = (0, date_fns.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((0, date_fns.format)(date, "yyyy-MM-dd"), value);
+		if (date < minDate) minDate = date;
+		if (date > maxDate) maxDate = date;
+	}
+	const gridStart = (0, date_fns.startOfWeek)(minDate, { weekStartsOn });
+	const weekCount = (0, date_fns.differenceInCalendarWeeks)(maxDate, gridStart, { weekStartsOn }) + 1;
+	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? (0, date_fns.format)((0, date_fns.addDays)(gridStart, row), "EEE") : "");
+	const data = [];
+	let previousMonth = -1;
+	for (let week = 0; week < weekCount; week++) {
+		const columnStart = (0, date_fns.addDays)(gridStart, week * 7);
+		const month = columnStart.getMonth();
+		const label = month !== previousMonth ? (0, date_fns.format)(columnStart, "MMM") : "";
+		previousMonth = month;
+		const cells = [];
+		for (let row = 0; row < 7; row++) {
+			const day = (0, date_fns.addDays)(gridStart, week * 7 + row);
+			const key = (0, date_fns.format)(day, "yyyy-MM-dd");
+			cells.push({
+				label: (0, date_fns.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 = (0, react$1.useContext)(HeatmapContext);
+	const { legend } = useGlobalChartsTheme();
+	if (!context) return null;
+	const { primaryColorHex } = context;
+	const labelStyle = legend.labelStyles;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Stack, {
+		direction: "row",
+		gap: "xs",
+		align: "center",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$2, {
+				variant: "body-sm",
+				style: labelStyle,
+				children: lessLabel ?? (0, _wordpress_i18n.__)("Less", "jetpack-charts")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stack, {
+				direction: "row",
+				gap: "xs",
+				children: Array.from({ length: steps }, (_, index) => {
+					const intensity = steps <= 1 ? 1 : index / (steps - 1);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
+						style: {
+							"--heatmap-primary": primaryColorHex,
+							"--intensity": intensity
+						}
+					}, index);
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$2, {
+				variant: "body-sm",
+				style: labelStyle,
+				children: moreLabel ?? (0, _wordpress_i18n.__)("More", "jetpack-charts")
+			})
+		]
+	});
+};
+//#endregion
+//#region src/charts/heatmap-chart/heatmap-chart.tsx
+const HeatmapContext = (0, react$1.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] = (0, react$1.useState)();
+	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
+	const { containerRef, containerBounds, TooltipInPortal } = (0, _visx_tooltip.useTooltipInPortal)({
+		detectBounds: true,
+		scroll: true
+	});
+	const containerBoundsRef = (0, react$1.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 = (0, react$1.useMemo)(() => getValueExtent(data), [data]);
+	const heatmapContext = (0, react$1.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 = (0, react$1.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 = (0, react$1.useCallback)(() => {
+		setSelectedIndex(void 0);
+		hideTooltip();
+	}, [hideTooltip]);
+	const onChartKeyDown = (0, react$1.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 = (0, react$1.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 = (0, react$1.useCallback)(() => {
+		if (withTooltips && selectedIndex === void 0) hideTooltip();
+	}, [
+		withTooltips,
+		selectedIndex,
+		hideTooltip
+	]);
+	(0, react$1.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 = (0, react$1.useCallback)((info) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: info.value === null ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value) })] }), []);
+	if (!columns || !rows) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, {
+		className: (0, clsx.default)("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className),
+		style: {
+			width: width || void 0,
+			height: height || void 0
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: heatmap_chart_module_default["heatmap-chart__empty"],
+			children: (0, _wordpress_i18n.__)("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__ */ (0, react_jsx_runtime.jsx)(HeatmapContext.Provider, {
+		value: heatmapContext,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+			value: { chartId },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartLayout, {
+				legendPosition: "bottom",
+				legendChildren: [],
+				trailingContent: nonLegendChildren,
+				gap,
+				className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: containerRef,
+					role: "grid",
+					"aria-label": (0, _wordpress_i18n.__)("Heatmap chart", "jetpack-charts"),
+					"aria-rowcount": rows,
+					"aria-colcount": columns,
+					"aria-activedescendant": activeDescendant,
+					tabIndex: 0,
+					onBlur: onChartBlur,
+					onKeyDown: onChartKeyDown,
+					className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__grid"], { [heatmap_chart_module_default["heatmap-chart__grid--compact"]]: compact }),
+					style: gridStyle,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" }),
+						data.map((column, columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+								role: "row",
+								"aria-rowindex": rowIndex + 1,
+								className: heatmap_chart_module_default["heatmap-chart__row"],
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.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 ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value)}`;
+									return /* @__PURE__ */ (0, react_jsx_runtime.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: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: heatmap_chart_module_default["heatmap-chart__cell-value"],
+											children: (0, _automattic_number_formatters.formatNumberCompact)(value)
+										})
+									}, `cell-${columnIndex}-${rowIndex}`);
+								})]
+							}, `row-${rowIndex}`);
+						})
+					]
+				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipInPortal, {
+					top: tooltipTop,
+					left: tooltipLeft,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "tooltip",
+						tabIndex: -1,
+						children: (renderTooltip ?? defaultRenderTooltip)(tooltipData)
+					})
+				})]
+			})
+		})
+	});
+};
+const HeatmapChartWithProvider = (props) => {
+	if ((0, react$1.useContext)(GlobalChartsContext)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatmapChartInternal, { ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalChartsProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatmapChartInternal, { ...props }) });
+};
+HeatmapChartWithProvider.displayName = "HeatmapChart";
+const HeatmapChart = attachSubComponents(HeatmapChartWithProvider, { Legend: HeatmapLegend });
+const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ (0, react_jsx_runtime.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;
 }
@@ -5741,7 +6193,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__";
@@ -6179,14 +6631,14 @@ 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
 var import_dist = require_dist();
 function getStyledClassName(namespace) {
 	return `components-${(0, import_dist.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 });
 }
@@ -6271,7 +6723,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 = (0, react$1.useRef)(false);
 	(0, react$1.useEffect)(() => {
@@ -6284,7 +6736,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 = (0, react$1.createContext)(
 	/** @type {Record<string, any>} */
@@ -6311,7 +6763,7 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 (0, react$1.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 };
 }
@@ -7929,7 +8381,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();
@@ -7945,7 +8397,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");
@@ -8011,7 +8463,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;
@@ -8093,7 +8545,7 @@ function UnforwardedView({ as, ...restProps }, ref) {
 }
 var component_default$1 = Object.assign((0, react$1.forwardRef)(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",
@@ -8141,7 +8593,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",
@@ -8175,7 +8627,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",
@@ -8202,21 +8654,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 = {
@@ -8254,7 +8706,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,
@@ -8319,7 +8771,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]);
@@ -8360,7 +8812,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__ */ (0, react_jsx_runtime.jsx)(component_default$1, {
 		...useGrid(props),
@@ -9500,6 +9952,8 @@ exports.GeoChart = GeoChartResponsive;
 exports.GeoChartUnresponsive = GeoChartWithProvider;
 exports.GlobalChartsContext = GlobalChartsContext;
 exports.GlobalChartsProvider = GlobalChartsProvider;
+exports.HeatmapChart = HeatmapChartResponsive;
+exports.HeatmapChartUnresponsive = HeatmapChart;
 exports.LeaderboardChart = LeaderboardChartResponsive;
 exports.LeaderboardChartUnresponsive = LeaderboardChart;
 exports.Legend = Legend;
@@ -9513,6 +9967,7 @@ exports.Sparkline = Sparkline;
 exports.SparklineUnresponsive = SparklineUnresponsive;
 exports.ThemeProvider = GlobalChartsProvider;
 exports.TrendIndicator = TrendIndicator;
+exports.buildCalendarHeatmapData = buildCalendarHeatmapData;
 exports.defaultTheme = defaultTheme;
 exports.formatMetricValue = formatMetricValue;
 exports.formatPercentage = formatPercentage;
@@ -9525,6 +9980,8 @@ exports.normalizeColorToHex = normalizeColorToHex;
 exports.parseAsLocalDate = parseAsLocalDate;
 exports.parseHslString = parseHslString;
 exports.parseRgbString = parseRgbString;
+exports.prefersLightText = prefersLightText;
+exports.relativeLuminance = relativeLuminance;
 exports.useChartLegendItems = useChartLegendItems;
 exports.useGlobalChartsContext = useGlobalChartsContext;
 exports.useGlobalChartsTheme = useGlobalChartsTheme;