@automattic/charts 1.8.1 → 1.10.0

package/dist/index.js

@@ -4,9 +4,9 @@ import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarS
 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 { Children, Fragment, Fragment as Fragment$2, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, 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-background-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-foreground-content-neutral, #1e1e1e)" },
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
 	svgLabelSmall: {
-		fill: "var(--jp-gray-80, #2c3338)",
+		fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
 		fontFamily: "inherit"
 	},
 	svgLabelBig: { fontFamily: "inherit" },
 	annotationStyles: {
 		label: {
-			anchorLineStroke: "var(--jp-gray-80, #2c3338)",
-			backgroundFill: "#fff"
+			anchorLineStroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
+			backgroundFill: "var(--wpds-color-background-surface-neutral-strong, #fff)"
 		},
-		connector: { stroke: "var(--jp-gray-80, #2c3338)" },
+		connector: { stroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)" },
 		circleSubject: {
 			stroke: "transparent",
-			fill: "var(--jp-gray-80, #2c3338)",
+			fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
 			radius: 5
 		}
 	},
-	geoChart: { featureFillColor: "var(--jp-gray-0, #f6f7f7)" },
+	geoChart: { featureFillColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)" },
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
 		labelSpacing: "xs",
 		deltaColors: [
-			"#FF8C8F",
-			"#757575",
-			"#1F9828"
+			"var(--wpds-color-foreground-content-error-weak, #cc1818)",
+			"var(--wpds-color-foreground-content-neutral-weak, #707070)",
+			"var(--wpds-color-foreground-content-success-weak, #008030)"
 		]
 	},
 	conversionFunnelChart: {
-		backgroundColor: "#F3F4F6",
-		positiveChangeColor: "#1F9828",
-		negativeChangeColor: "#FF8C8F"
+		backgroundColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)",
+		positiveChangeColor: "var(--wpds-color-foreground-content-success-weak, #008030)",
+		negativeChangeColor: "var(--wpds-color-foreground-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]);
 };
@@ -1838,7 +1892,7 @@ function useRender(params) {
 	return useRenderElement(params.defaultTagName ?? "div", params, params);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.13.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
 var STYLE_HASH_ATTRIBUTE$1 = "data-wp-hash";
 function getRuntime$1() {
 	const globalScope = globalThis;
@@ -1894,7 +1948,7 @@ function registerStyle$1(hash, css) {
 	runtime.styles.set(hash, css);
 	for (const targetDocument of runtime.documents.keys()) injectStyle$1(targetDocument, hash, css);
 }
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$1("b51ff41489", "@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._19ce0419607e1896__stack{display:flex}}");
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$1("32aba35fe1", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._19ce0419607e1896__stack{display:flex}}}");
 var style_default$1 = { "stack": "_19ce0419607e1896__stack" };
 var gapTokens = {
 	xs: "var(--wpds-dimension-gap-xs, 4px)",
@@ -1905,7 +1959,7 @@ var gapTokens = {
 	"2xl": "var(--wpds-dimension-gap-2xl, 32px)",
 	"3xl": "var(--wpds-dimension-gap-3xl, 40px)"
 };
-var Stack = forwardRef$2(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
+var Stack = forwardRef$1(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
 	return useRender({
 		render,
 		ref,
@@ -1922,7 +1976,7 @@ var Stack = forwardRef$2(function Stack2({ direction, gap, align, justify, wrap,
 	});
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+ui@0.13.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/text/text.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/text/text.mjs
 var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
 function getRuntime() {
 	const globalScope = globalThis;
@@ -1978,7 +2032,7 @@ function registerStyle(hash, css) {
 	runtime.styles.set(hash, css);
 	for (const targetDocument of runtime.documents.keys()) injectStyle(targetDocument, hash, css);
 }
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("0c8601dd83", "@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._83ed8a8da5dd50ea__text{margin:0}._14437cfb77831647__heading-2xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-p-line-height:var(--wpds-typography-line-height-2xl,40px);font-size:var(--wpds-typography-font-size-2xl,32px);line-height:var(--wpds-typography-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-md,24px)}.aa58f227716bcde2__heading-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-xl,32px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-lg,15px);line-height:var(--wpds-typography-line-height-md,24px)}._131101940be12424__body-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-size:var(--wpds-typography-font-size-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}");
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("0c5702ddca", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._83ed8a8da5dd50ea__text{margin:0}._14437cfb77831647__heading-2xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-p-line-height:var(--wpds-typography-line-height-2xl,40px);font-size:var(--wpds-typography-font-size-2xl,32px);line-height:var(--wpds-typography-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-md,24px)}.aa58f227716bcde2__heading-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-xl,32px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-lg,15px);line-height:var(--wpds-typography-line-height-md,24px)}._131101940be12424__body-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-size:var(--wpds-typography-font-size-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}}");
 var style_default = {
 	"text": "_83ed8a8da5dd50ea__text",
 	"heading-2xl": "_14437cfb77831647__heading-2xl",
@@ -1991,7 +2045,7 @@ var style_default = {
 	"body-md": "_131101940be12424__body-md",
 	"body-sm": "_0e8d87a42c1f75fa__body-sm"
 };
-if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("1fb29d3a3c", "._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,#0000);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 #0000);color:var(--_gcd-input-color,var(--wpds-color-fg-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,#0000);border-color:var(--_gcd-input-border-color-disabled,#0000);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid #0000)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-fg-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid #0000);transition:var(--_gcd-a-transition,none)}");
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("d390e935a7", "._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,transparent);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 transparent);color:var(--_gcd-input-color,var(--wpds-color-foreground-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,transparent);border-color:var(--_gcd-input-border-color-disabled,transparent);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid transparent)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid transparent);transition:var(--_gcd-a-transition,none)}");
 var global_css_defense_default = {
 	"button": "_6defc79820e382c6__button",
 	"input": "d2cff2e5dea83bd1__input",
@@ -2001,7 +2055,7 @@ var global_css_defense_default = {
 	"heading": "e97669c6d9a38497__heading",
 	"a": "_2c0831b0499dbd6e__a"
 };
-var Text$1 = forwardRef$2(function Text2({ variant = "body-md", render, className, ...props }, ref) {
+var Text$1 = forwardRef$1(function Text2({ variant = "body-md", render, className, ...props }, ref) {
 	return useRender({
 		render,
 		defaultTagName: "span",
@@ -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,
@@ -5596,6 +5666,56 @@ 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"
+];
+const GOOGLE_CHARTS_ERROR_ID_PREFIX = "google-visualization-errors-";
+const GOOGLE_CHARTS_ERROR_WRAPPER_INFIX = "-all-";
+/**
+* Collects Google Charts error elements rendered inside a chart container.
+*
+* @param container - The chart container element to scan.
+* @return Errors found in the container, one per error span.
+*/
+function collectRenderedGeoChartErrors(container) {
+	const elements = container.querySelectorAll(`[id^="${GOOGLE_CHARTS_ERROR_ID_PREFIX}"]`);
+	return Array.from(elements).filter((element) => !element.id.includes(GOOGLE_CHARTS_ERROR_WRAPPER_INFIX)).map((element) => ({
+		id: element.id,
+		message: element.textContent?.trim() ?? ""
+	})).filter((error) => error.message.length > 0);
+}
+/**
+* Whether a node added to the chart container is — or contains — a Google
+* Charts error element. Also matches text appended into an existing error
+* span, in case Google fills the message after inserting the element.
+*
+* @param node - The added DOM node to inspect.
+* @return Whether the node involves a Google Charts error element.
+*/
+function involvesGeoChartErrorElement(node) {
+	if (node.nodeType === Node.TEXT_NODE) return !!node.parentElement?.id.startsWith(GOOGLE_CHARTS_ERROR_ID_PREFIX);
+	if (!(node instanceof HTMLElement)) return false;
+	return node.id.startsWith(GOOGLE_CHARTS_ERROR_ID_PREFIX) || node.querySelector(`[id^="${GOOGLE_CHARTS_ERROR_ID_PREFIX}"]`) !== null;
+}
+/**
+* Normalizes the raw Google Charts error event into the GeoChart error shape.
+*
+* @param eventArgs - Error event payload from react-google-charts.
+* @return Normalized GeoChart error.
+*/
+function normalizeGeoChartError(eventArgs) {
+	const payload = Array.isArray(eventArgs) ? eventArgs[0] : eventArgs;
+	if (!payload || typeof payload !== "object") return {};
+	const { id, message, detailedMessage, options } = payload;
+	return {
+		...typeof id === "string" && { id },
+		...typeof message === "string" && { message },
+		...typeof detailedMessage === "string" && { detailedMessage },
+		...options && typeof options === "object" && !Array.isArray(options) && { options }
+	};
+}
 /**
 * Renders a geographical chart using Google Charts GeoChart to visualize data.
 *
@@ -5611,12 +5731,35 @@ const DEFAULT_BACKGROUND_COLOR = "#ffffff";
 * @param props.height            - Height of the chart in pixels
 * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
 * @param props.resolution        - Resolution level ('countries', 'provinces', or 'metros')
+* @param props.onError           - Optional callback for Google Charts errors
 * @param props.className         - Additional CSS class name for the chart container
 * @param props.renderPlaceholder - Optional render function for the loading placeholder
 * @return A React component displaying an interactive map with data visualization
 */
-const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", renderPlaceholder }) => {
+const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", onError, renderPlaceholder }) => {
 	const { getElementStyles, theme: { geoChart: { featureFillColor }, backgroundColor } } = useGlobalChartsContext();
+	const containerRef = useRef(null);
+	const reportedErrorIdsRef = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!onError || !container || typeof MutationObserver === "undefined") return;
+		const reportRenderedErrors = () => {
+			for (const error of collectRenderedGeoChartErrors(container)) {
+				if (reportedErrorIdsRef.current.has(error.id)) continue;
+				reportedErrorIdsRef.current.add(error.id);
+				onError(error);
+			}
+		};
+		const observer = new MutationObserver((records) => {
+			if (records.some((record) => Array.from(record.addedNodes).some(involvesGeoChartErrorElement))) reportRenderedErrors();
+		});
+		observer.observe(container, {
+			childList: true,
+			subtree: true
+		});
+		reportRenderedErrors();
+		return () => observer.disconnect();
+	}, [onError]);
 	const loadingPlaceholder = /* @__PURE__ */ jsx(Center, {
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
@@ -5675,7 +5818,17 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		defaultFillColorHex,
 		sanitizedData.hasHtmlTooltips
 	]);
+	const chartEvents = useMemo(() => {
+		if (!onError) return;
+		return [{
+			eventName: "error",
+			callback: ({ eventArgs }) => {
+				onError(normalizeGeoChartError(eventArgs));
+			}
+		}];
+	}, [onError]);
 	return /* @__PURE__ */ jsx(Center, {
+		ref: containerRef,
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
@@ -5684,10 +5837,12 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		},
 		children: /* @__PURE__ */ jsx(Chart, {
 			chartType: "GeoChart",
+			chartPackages: GEO_CHART_PACKAGES,
 			width,
 			height,
 			data: sanitizedData.data,
 			options,
+			chartEvents,
 			loader: loadingPlaceholder
 		})
 	});
@@ -5699,10 +5854,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;
 }
@@ -5716,7 +6268,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__";
@@ -5858,13 +6410,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 });
 }
@@ -5949,7 +6501,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(() => {
@@ -5962,7 +6514,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>} */
@@ -5989,7 +6541,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 };
 }
@@ -7540,7 +8092,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();
@@ -7556,7 +8108,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");
@@ -7611,7 +8163,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;
@@ -7693,7 +8245,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",
@@ -7741,7 +8293,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",
@@ -7775,7 +8327,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",
@@ -7802,21 +8354,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 = {
@@ -7854,7 +8406,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,
@@ -7919,7 +8471,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]);
@@ -7960,7 +8512,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),
@@ -9087,6 +9639,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