@automattic/charts 0.56.2 → 0.56.4

package/dist/{chunk-C33AQZEC.js → chunk-TYIH5LMV.js}

@@ -7,7 +7,7 @@ var with_responsive_module_default = {
 };
 
 // src/charts/private/with-responsive/with-responsive.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 var useResponsiveDimensions = ({
   resizeDebounceTime = 300,
   maxWidth = 1200,
@@ -58,31 +58,24 @@ function withResponsive(WrappedComponent) {
     const effectiveWidth = measuredWidth || size || width || 0;
     const effectiveHeight = measuredHeight || size || height || 0;
     const defaultHeight = hasAspectRatio ? "auto" : "100%";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: parentRef,
-        "data-testid": "responsive-wrapper",
-        className: with_responsive_module_default.container,
-        style: {
-          width: size ?? width ?? "100%",
-          height: size ?? height ?? defaultHeight
-        },
-        children: /* @__PURE__ */ jsx(
-          WrappedComponent,
-          {
-            width: effectiveWidth,
-            height: effectiveHeight,
-            size: effectiveWidth,
-            ...chartProps
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ _jsx("div", {
+      ref: parentRef,
+      className: with_responsive_module_default.container,
+      style: {
+        width: size ?? width ?? "100%",
+        height: size ?? height ?? defaultHeight
+      },
+      children: /* @__PURE__ */ _jsx(WrappedComponent, {
+        width: effectiveWidth,
+        height: effectiveHeight,
+        size: effectiveWidth,
+        ...chartProps
+      })
+    });
   };
 }
 
 export {
   withResponsive
 };
-//# sourceMappingURL=chunk-C33AQZEC.js.map
+//# sourceMappingURL=chunk-TYIH5LMV.js.map

package/dist/chunk-TYIH5LMV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/private/with-responsive/with-responsive.tsx","../src/charts/private/with-responsive/with-responsive.module.scss"],"sourcesContent":["import { useParentSize } from '@visx/responsive';\nimport styles from './with-responsive.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useResponsiveDimensions = ({\n  resizeDebounceTime = 300,\n  maxWidth = 1200,\n  aspectRatio\n}) => {\n  const {\n    parentRef,\n    width: parentWidth,\n    height: parentHeight\n  } = useParentSize({\n    debounceTime: resizeDebounceTime,\n    enableDebounceLeadingCall: true\n  });\n  const containerWidth = parentWidth > 0 ? Math.min(parentWidth, maxWidth) : 0;\n  const containerHeight = aspectRatio !== undefined ? containerWidth * aspectRatio : parentHeight;\n  return {\n    parentRef,\n    width: containerWidth,\n    height: containerHeight,\n    /**\n     * Whether an aspectRatio was provided. Used to determine container\n     * height styling: 'auto' when true (height derived from width),\n     * '100%' when false (fill parent container).\n     */\n    hasAspectRatio: aspectRatio !== undefined\n  };\n};\n\n/**\n * A higher-order component that provides responsive dimensions\n * to the wrapped chart component using useParentSize from `@visx/responsive`.\n *\n * @param WrappedComponent - The chart component to be wrapped.\n * @return A functional component that renders the wrapped component with responsive dimensions.\n */\nexport function withResponsive(\n// 'options' is excluded so that each chart can define its own options type\nWrappedComponent) {\n  return function ResponsiveChart({\n    resizeDebounceTime = 300,\n    maxWidth = 1200,\n    aspectRatio,\n    size,\n    width,\n    height,\n    ...chartProps\n  }) {\n    const {\n      parentRef,\n      width: measuredWidth,\n      height: measuredHeight,\n      hasAspectRatio\n    } = useResponsiveDimensions({\n      resizeDebounceTime,\n      maxWidth,\n      aspectRatio\n    });\n\n    // Use measured dimensions, but fall back to explicit props if measurement returns 0\n    // (e.g., during initial render or in test environments without DOM measurement)\n    const effectiveWidth = measuredWidth || size || width || 0;\n    const effectiveHeight = measuredHeight || size || height || 0;\n    const defaultHeight = hasAspectRatio ? 'auto' : '100%';\n    return /*#__PURE__*/_jsx(\"div\", {\n      ref: parentRef,\n      className: styles.container,\n      style: {\n        width: size ?? width ?? '100%',\n        height: size ?? height ?? defaultHeight\n      },\n      children: /*#__PURE__*/_jsx(WrappedComponent, {\n        width: effectiveWidth,\n        height: effectiveHeight,\n        size: effectiveWidth,\n        ...chartProps\n      })\n    });\n  };\n}","import 'css-chunk:src/charts/private/with-responsive/with-responsive.module.scss';export default {\n  \"container\": \"a8ccharts-GSKfBD\"\n};"],"mappings":";AAAA,SAAS,qBAAqB;;;ACAoD,IAAO,iCAAQ;AAAA,EAC/F,aAAa;AACf;;;ADAA,SAAS,OAAO,YAAY;AAC5B,IAAM,0BAA0B,CAAC;AAAA,EAC/B,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,IAAI,cAAc;AAAA,IAChB,cAAc;AAAA,IACd,2BAA2B;AAAA,EAC7B,CAAC;AACD,QAAM,iBAAiB,cAAc,IAAI,KAAK,IAAI,aAAa,QAAQ,IAAI;AAC3E,QAAM,kBAAkB,gBAAgB,SAAY,iBAAiB,cAAc;AACnF,SAAO;AAAA,IACL;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,gBAAgB,gBAAgB;AAAA,EAClC;AACF;AASO,SAAS,eAEhB,kBAAkB;AAChB,SAAO,SAAS,gBAAgB;AAAA,IAC9B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG;AACD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,IACF,IAAI,wBAAwB;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAID,UAAM,iBAAiB,iBAAiB,QAAQ,SAAS;AACzD,UAAM,kBAAkB,kBAAkB,QAAQ,UAAU;AAC5D,UAAM,gBAAgB,iBAAiB,SAAS;AAChD,WAAoB,qBAAK,OAAO;AAAA,MAC9B,KAAK;AAAA,MACL,WAAW,+BAAO;AAAA,MAClB,OAAO;AAAA,QACL,OAAO,QAAQ,SAAS;AAAA,QACxB,QAAQ,QAAQ,UAAU;AAAA,MAC5B;AAAA,MACA,UAAuB,qBAAK,kBAAkB;AAAA,QAC5C,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/chunk-WMWAUOQ4.js

@@ -0,0 +1,165 @@
+import {
+  LineChart
+} from "./chunk-R23BFDIW.js";
+import {
+  withResponsive
+} from "./chunk-TYIH5LMV.js";
+import {
+  useGlobalChartsTheme
+} from "./chunk-AWNCAKZY.js";
+
+// src/charts/sparkline/sparkline.tsx
+import clsx from "clsx";
+import { useMemo, forwardRef } from "react";
+
+// src/charts/sparkline/sparkline.module.scss
+var sparkline_module_default = {
+  "sparkline": "a8ccharts-o-3Z8B",
+  "sparkline--empty": "a8ccharts-CbLbcd"
+};
+
+// src/charts/sparkline/sparkline.tsx
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_WIDTH = 100;
+var DEFAULT_HEIGHT = 40;
+var transformToSeriesData = (data, color, strokeWidth) => {
+  const baseDate = new Date(2e3, 0, 1);
+  return [{
+    label: "sparkline",
+    data: data.map((value, index) => ({
+      date: new Date(baseDate.getTime() + index * 864e5),
+      // Add days
+      value
+    })),
+    options: {
+      stroke: color,
+      seriesLineStyle: strokeWidth ? {
+        strokeWidth
+      } : void 0
+    }
+  }];
+};
+var SparklineComponent = /* @__PURE__ */ forwardRef(({
+  data,
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  color,
+  strokeWidth: strokeWidthProp,
+  withGradientFill = true,
+  gradient,
+  className,
+  chartId,
+  margin: marginProp,
+  animation
+}, ref) => {
+  const theme = useGlobalChartsTheme();
+  const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;
+  const strokeWidth = strokeWidthProp ?? themeStrokeWidth;
+  const seriesData = useMemo(() => {
+    if (!data || data.length === 0) {
+      return [];
+    }
+    return transformToSeriesData(data, color, strokeWidth);
+  }, [data, color, strokeWidth]);
+  const finalMargin = useMemo(() => {
+    const themeMargin = theme.sparkline?.margin ?? {
+      top: 2,
+      right: 2,
+      bottom: 2,
+      left: 2
+    };
+    const margin = marginProp ?? themeMargin;
+    return {
+      ...themeMargin,
+      ...margin
+    };
+  }, [marginProp, theme.sparkline?.margin]);
+  const seriesWithGradient = useMemo(() => {
+    if (!gradient || seriesData.length === 0) {
+      return seriesData;
+    }
+    return seriesData.map((series) => ({
+      ...series,
+      options: {
+        ...series.options,
+        gradient: {
+          from: gradient.from || color || "#000000",
+          to: gradient.to || "#ffffff",
+          fromOpacity: gradient.fromOpacity ?? 0.5,
+          toOpacity: gradient.toOpacity ?? 0
+        }
+      }
+    }));
+  }, [seriesData, gradient, color]);
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ _jsx("div", {
+      ref,
+      className: clsx("sparkline", sparkline_module_default.sparkline, sparkline_module_default["sparkline--empty"], className),
+      style: {
+        width,
+        height
+      }
+    });
+  }
+  if (data.length === 1) {
+    const cx = width / 2;
+    const cy = height / 2;
+    const resolvedColor = color || "#000000";
+    return /* @__PURE__ */ _jsx("div", {
+      ref,
+      className: clsx("sparkline", sparkline_module_default.sparkline, sparkline_module_default["sparkline--single-point"], className),
+      style: {
+        width,
+        height
+      },
+      children: /* @__PURE__ */ _jsx("svg", {
+        width,
+        height,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ _jsx("circle", {
+          cx,
+          cy,
+          r: strokeWidth * 1.5,
+          fill: resolvedColor
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */ _jsx("div", {
+    ref,
+    className: clsx("sparkline", sparkline_module_default.sparkline, className),
+    children: /* @__PURE__ */ _jsx(LineChart, {
+      data: seriesWithGradient,
+      width,
+      height,
+      margin: finalMargin,
+      chartId,
+      withGradientFill,
+      withTooltips: false,
+      showLegend: false,
+      gridVisibility: "none",
+      options: {
+        axis: {
+          x: {
+            display: false
+          },
+          y: {
+            display: false
+          }
+        }
+      },
+      curveType: "monotone",
+      animation
+    })
+  });
+});
+SparklineComponent.displayName = "SparklineComponent";
+var SparklineUnresponsive = SparklineComponent;
+SparklineUnresponsive.displayName = "SparklineUnresponsive";
+var Sparkline = withResponsive(SparklineUnresponsive);
+
+export {
+  SparklineUnresponsive,
+  Sparkline
+};
+//# sourceMappingURL=chunk-WMWAUOQ4.js.map

package/dist/chunk-WMWAUOQ4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/sparkline/sparkline.tsx","../src/charts/sparkline/sparkline.module.scss"],"sourcesContent":["import clsx from 'clsx';\nimport { useMemo, forwardRef } from 'react';\nimport { useGlobalChartsTheme } from '../../providers';\nimport { LineChartUnresponsive } from '../line-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './sparkline.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_WIDTH = 100;\nconst DEFAULT_HEIGHT = 40;\n\n/**\n * Transforms a simple number array into SeriesData format for LineChart.\n * Uses index-based dates to create a linear x-axis.\n *\n * @param data        - Array of numeric values to plot\n * @param color       - Optional color for the line stroke\n * @param strokeWidth - Optional stroke width for the line\n * @return SeriesData array suitable for LineChart\n */\nconst transformToSeriesData = (data, color, strokeWidth) => {\n  // Use a fixed base date and increment by index to create linear spacing\n  const baseDate = new Date(2000, 0, 1);\n  return [{\n    label: 'sparkline',\n    data: data.map((value, index) => ({\n      date: new Date(baseDate.getTime() + index * 86400000),\n      // Add days\n      value\n    })),\n    options: {\n      stroke: color,\n      seriesLineStyle: strokeWidth ? {\n        strokeWidth\n      } : undefined\n    }\n  }];\n};\nconst SparklineComponent = /*#__PURE__*/forwardRef(({\n  data,\n  width = DEFAULT_WIDTH,\n  height = DEFAULT_HEIGHT,\n  color,\n  strokeWidth: strokeWidthProp,\n  withGradientFill = true,\n  gradient,\n  className,\n  chartId,\n  margin: marginProp,\n  animation\n}, ref) => {\n  const theme = useGlobalChartsTheme();\n\n  // Get theme defaults for sparkline\n  const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;\n\n  // Use prop values or fall back to theme defaults\n  const strokeWidth = strokeWidthProp ?? themeStrokeWidth;\n\n  // Transform number[] to SeriesData[] for LineChart\n  const seriesData = useMemo(() => {\n    if (!data || data.length === 0) {\n      return [];\n    }\n    return transformToSeriesData(data, color, strokeWidth);\n  }, [data, color, strokeWidth]);\n\n  // Merge margins with theme defaults\n  const finalMargin = useMemo(() => {\n    const themeMargin = theme.sparkline?.margin ?? {\n      top: 2,\n      right: 2,\n      bottom: 2,\n      left: 2\n    };\n    const margin = marginProp ?? themeMargin;\n    return {\n      ...themeMargin,\n      ...margin\n    };\n  }, [marginProp, theme.sparkline?.margin]);\n\n  // Build gradient options for the series if custom gradient is provided\n  // Note: This must be called before any early returns to follow React hooks rules\n  const seriesWithGradient = useMemo(() => {\n    if (!gradient || seriesData.length === 0) {\n      return seriesData;\n    }\n    return seriesData.map(series => ({\n      ...series,\n      options: {\n        ...series.options,\n        gradient: {\n          from: gradient.from || color || '#000000',\n          to: gradient.to || '#ffffff',\n          fromOpacity: gradient.fromOpacity ?? 0.5,\n          toOpacity: gradient.toOpacity ?? 0.0\n        }\n      }\n    }));\n  }, [seriesData, gradient, color]);\n\n  // Handle empty data\n  if (!data || data.length === 0) {\n    return /*#__PURE__*/_jsx(\"div\", {\n      ref: ref,\n      className: clsx('sparkline', styles.sparkline, styles['sparkline--empty'], className),\n      style: {\n        width,\n        height\n      }\n    });\n  }\n\n  // Handle single data point - render a simple dot\n  if (data.length === 1) {\n    const cx = width / 2;\n    const cy = height / 2;\n    const resolvedColor = color || '#000000';\n    return /*#__PURE__*/_jsx(\"div\", {\n      ref: ref,\n      className: clsx('sparkline', styles.sparkline, styles['sparkline--single-point'], className),\n      style: {\n        width,\n        height\n      },\n      children: /*#__PURE__*/_jsx(\"svg\", {\n        width: width,\n        height: height,\n        \"aria-hidden\": \"true\",\n        children: /*#__PURE__*/_jsx(\"circle\", {\n          cx: cx,\n          cy: cy,\n          r: strokeWidth * 1.5,\n          fill: resolvedColor\n        })\n      })\n    });\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    className: clsx('sparkline', styles.sparkline, className),\n    children: /*#__PURE__*/_jsx(LineChartUnresponsive, {\n      data: seriesWithGradient,\n      width: width,\n      height: height,\n      margin: finalMargin,\n      chartId: chartId,\n      withGradientFill: withGradientFill,\n      withTooltips: false,\n      showLegend: false,\n      gridVisibility: \"none\",\n      options: {\n        axis: {\n          x: {\n            display: false\n          },\n          y: {\n            display: false\n          }\n        }\n      },\n      curveType: \"monotone\",\n      animation: animation\n    })\n  });\n});\nSparklineComponent.displayName = 'SparklineComponent';\n\n/**\n * Sparkline - A minimal line chart for inline data visualization.\n *\n * Sparklines are compact charts designed to be embedded inline with text or\n * displayed in small spaces like table cells or dashboards. They show trends\n * without axes, labels, or other chart chrome.\n *\n * This component is built on top of LineChart with preconfigured settings\n * for minimal display (no axes, grid, tooltips, or legend).\n */\nconst SparklineUnresponsive = SparklineComponent;\nSparklineUnresponsive.displayName = 'SparklineUnresponsive';\n\n/**\n * Responsive Sparkline chart component\n */\nconst Sparkline = withResponsive(SparklineUnresponsive);\nexport { Sparkline as default, SparklineUnresponsive };","import 'css-chunk:src/charts/sparkline/sparkline.module.scss';export default {\n  \"sparkline\": \"a8ccharts-o-3Z8B\",\n  \"sparkline--empty\": \"a8ccharts-CbLbcd\"\n};"],"mappings":"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","names":[]}

package/dist/chunk-XWYZIFZW.js

@@ -0,0 +1,66 @@
+// src/components/trend-indicator/trend-indicator.tsx
+import clsx from "clsx";
+
+// src/components/trend-indicator/trend-indicator.module.scss
+var trend_indicator_module_default = {
+  "trend-indicator": "a8ccharts-tGw1PY",
+  "trend-indicator--up": "a8ccharts-Fn-D1W",
+  "trend-indicator--down": "a8ccharts-HqtGQO",
+  "trend-indicator--neutral": "a8ccharts-S10nvO",
+  "trend-indicator__icon": "a8ccharts-5HjpOT",
+  "trend-indicator__value": "a8ccharts-muLL2Q"
+};
+
+// src/components/trend-indicator/trend-indicator.tsx
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DIRECTION_LABELS = {
+  up: "Increase",
+  down: "Decrease",
+  neutral: "No change"
+};
+var Icon = ({
+  direction
+}) => {
+  if (direction === "neutral") {
+    return null;
+  }
+  const isUp = direction === "up";
+  return /* @__PURE__ */ _jsx("svg", {
+    className: trend_indicator_module_default["trend-indicator__icon"],
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ _jsx("path", {
+      d: isUp ? "M8 13V3M4 7l4-4 4 4" : "M8 3v10M4 9l4 4 4-4",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+};
+function TrendIndicator({
+  direction,
+  value,
+  className,
+  style,
+  showIcon = true
+}) {
+  const ariaLabel = `${DIRECTION_LABELS[direction]}: ${value}`;
+  return /* @__PURE__ */ _jsxs("span", {
+    className: clsx(trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
+    style,
+    "aria-label": ariaLabel,
+    children: [showIcon && /* @__PURE__ */ _jsx(Icon, {
+      direction
+    }), /* @__PURE__ */ _jsx("span", {
+      className: trend_indicator_module_default["trend-indicator__value"],
+      children: value
+    })]
+  });
+}
+
+export {
+  TrendIndicator
+};
+//# sourceMappingURL=chunk-XWYZIFZW.js.map

package/dist/chunk-XWYZIFZW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/trend-indicator/trend-indicator.tsx","../src/components/trend-indicator/trend-indicator.module.scss"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './trend-indicator.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DIRECTION_LABELS = {\n  up: 'Increase',\n  down: 'Decrease',\n  neutral: 'No change'\n};\nconst Icon = ({\n  direction\n}) => {\n  if (direction === 'neutral') {\n    return null;\n  }\n  const isUp = direction === 'up';\n  return /*#__PURE__*/_jsx(\"svg\", {\n    className: styles['trend-indicator__icon'],\n    viewBox: \"0 0 16 16\",\n    fill: \"none\",\n    \"aria-hidden\": \"true\",\n    children: /*#__PURE__*/_jsx(\"path\", {\n      d: isUp ? 'M8 13V3M4 7l4-4 4 4' : 'M8 3v10M4 9l4 4 4-4',\n      stroke: \"currentColor\",\n      strokeWidth: \"1.5\",\n      strokeLinecap: \"round\",\n      strokeLinejoin: \"round\"\n    })\n  });\n};\n\n/**\n * TrendIndicator displays a directional trend with a value.\n * Used to show percentage changes or growth metrics.\n *\n * @param {TrendIndicatorProps} props - Component props\n * @return {JSX.Element} The rendered trend indicator\n */\nexport function TrendIndicator({\n  direction,\n  value,\n  className,\n  style,\n  showIcon = true\n}) {\n  const ariaLabel = `${DIRECTION_LABELS[direction]}: ${value}`;\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: clsx(styles['trend-indicator'], styles[`trend-indicator--${direction}`], className),\n    style: style,\n    \"aria-label\": ariaLabel,\n    children: [showIcon && /*#__PURE__*/_jsx(Icon, {\n      direction: direction\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: styles['trend-indicator__value'],\n      children: value\n    })]\n  });\n}","import 'css-chunk:src/components/trend-indicator/trend-indicator.module.scss';export default {\n  \"trend-indicator\": \"a8ccharts-tGw1PY\",\n  \"trend-indicator--up\": \"a8ccharts-Fn-D1W\",\n  \"trend-indicator--down\": \"a8ccharts-HqtGQO\",\n  \"trend-indicator--neutral\": \"a8ccharts-S10nvO\",\n  \"trend-indicator__icon\": \"a8ccharts-5HjpOT\",\n  \"trend-indicator__value\": \"a8ccharts-muLL2Q\"\n};"],"mappings":";AAAA,OAAO,UAAU;;;ACA6D,IAAO,iCAAQ;AAAA,EAC3F,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,4BAA4B;AAAA,EAC5B,yBAAyB;AAAA,EACzB,0BAA0B;AAC5B;;;ADLA,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,SAAS;AACX;AACA,IAAM,OAAO,CAAC;AAAA,EACZ;AACF,MAAM;AACJ,MAAI,cAAc,WAAW;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,OAAO,cAAc;AAC3B,SAAoB,qBAAK,OAAO;AAAA,IAC9B,WAAW,+BAAO,uBAAuB;AAAA,IACzC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,eAAe;AAAA,IACf,UAAuB,qBAAK,QAAQ;AAAA,MAClC,GAAG,OAAO,wBAAwB;AAAA,MAClC,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,eAAe;AAAA,MACf,gBAAgB;AAAA,IAClB,CAAC;AAAA,EACH,CAAC;AACH;AASO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAG;AACD,QAAM,YAAY,GAAG,iBAAiB,SAAS,CAAC,KAAK,KAAK;AAC1D,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW,KAAK,+BAAO,iBAAiB,GAAG,+BAAO,oBAAoB,SAAS,EAAE,GAAG,SAAS;AAAA,IAC7F;AAAA,IACA,cAAc;AAAA,IACd,UAAU,CAAC,YAAyB,qBAAK,MAAM;AAAA,MAC7C;AAAA,IACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW,+BAAO,wBAAwB;AAAA,MAC1C,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;","names":[]}

package/dist/{chunk-7HROSZRS.cjs → chunk-Y3NNQMAX.cjs}

@@ -8,11 +8,11 @@ var base_tooltip_module_default = {
 
 // src/components/tooltip/base-tooltip.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var DefaultTooltipContent = ({ data }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-  _optionalChain([data, 'optionalAccess', _ => _.label]),
-  ": ",
-  _optionalChain([data, 'optionalAccess', _2 => _2.valueDisplay]) || _numberformatters.formatNumber.call(void 0, _optionalChain([data, 'optionalAccess', _3 => _3.value]))
-] });
+var DefaultTooltipContent = ({
+  data
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+  children: [_optionalChain([data, 'optionalAccess', _ => _.label]), ": ", _optionalChain([data, 'optionalAccess', _2 => _2.valueDisplay]) || _numberformatters.formatNumber.call(void 0, _optionalChain([data, 'optionalAccess', _3 => _3.value]))]
+});
 var BaseTooltip = ({
   data,
   top,
@@ -23,11 +23,23 @@ var BaseTooltip = ({
   style,
   renderContainer = true
 }) => {
-  const content = children || data && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { data, className });
+  const content = children || data && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, {
+    data,
+    className
+  });
   if (!renderContainer) {
     return content;
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: base_tooltip_module_default.tooltip, style: { top, left, ...style }, role: "tooltip", children: content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+    className: base_tooltip_module_default.tooltip,
+    style: {
+      top,
+      left,
+      ...style
+    },
+    role: "tooltip",
+    children: content
+  });
 };
 
 // src/components/tooltip/accessible-tooltip.tsx
@@ -96,24 +108,26 @@ var AccessibleTooltip = ({
     return (params) => {
       const tooltipContent = renderTooltip(params);
       if (selectedIndex !== void 0) {
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
-          {
-            ref: tooltipRef,
-            tabIndex: -1,
-            role: "tooltip",
-            "aria-atomic": "true",
-            className: keyboardFocusedClassName,
-            "data-testid": `chart-tooltip-${selectedIndex}`,
-            children: tooltipContent
-          },
-          `chart-tooltip-${selectedIndex}`
-        );
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+          ref: tooltipRef,
+          tabIndex: -1,
+          role: "tooltip",
+          "aria-atomic": "true",
+          className: keyboardFocusedClassName,
+          children: tooltipContent
+        }, `chart-tooltip-${selectedIndex}`);
       }
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "tooltip", "aria-live": "polite", children: tooltipContent });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+        role: "tooltip",
+        "aria-live": "polite",
+        children: tooltipContent
+      });
     };
   }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Tooltip, { ...props, renderTooltip: focusableRenderTooltip });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Tooltip, {
+    ...props,
+    renderTooltip: focusableRenderTooltip
+  });
 };
 var useKeyboardNavigation = ({
   selectedIndex,
@@ -123,14 +137,11 @@ var useKeyboardNavigation = ({
   chartRef,
   totalPoints
 }) => {
-  const tooltipRef = _react.useCallback.call(void 0, 
-    (element) => {
-      if (element && selectedIndex !== void 0) {
-        element.focus();
-      }
-    },
-    [selectedIndex]
-  );
+  const tooltipRef = _react.useCallback.call(void 0, (element) => {
+    if (element && selectedIndex !== void 0) {
+      element.focus();
+    }
+  }, [selectedIndex]);
   const onChartFocus = _react.useCallback.call(void 0, () => {
     if (!isNavigating && selectedIndex !== void 0) {
       setSelectedIndex(0);
@@ -139,37 +150,34 @@ var useKeyboardNavigation = ({
   const onChartBlur = _react.useCallback.call(void 0, () => {
     setIsNavigating(false);
   }, [setIsNavigating]);
-  const onChartKeyDown = _react.useCallback.call(void 0, 
-    (event) => {
-      if (totalPoints === 0) return;
-      if (event.key === "Tab") {
-        _optionalChain([chartRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]);
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        return;
-      }
-      const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
-      if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
-        _optionalChain([chartRef, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]);
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        return;
-      }
-      event.preventDefault();
-      if (["ArrowRight"].includes(event.key)) {
-        setIsNavigating(true);
-        setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
-      } else if (["ArrowLeft"].includes(event.key)) {
-        setIsNavigating(true);
-        setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
-      } else if (event.key === "Escape") {
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        _optionalChain([chartRef, 'access', _16 => _16.current, 'optionalAccess', _17 => _17.focus, 'call', _18 => _18()]);
-      }
-    },
-    [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]
-  );
+  const onChartKeyDown = _react.useCallback.call(void 0, (event) => {
+    if (totalPoints === 0) return;
+    if (event.key === "Tab") {
+      _optionalChain([chartRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]);
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
+    }
+    const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
+    if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
+      _optionalChain([chartRef, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]);
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
+    }
+    event.preventDefault();
+    if (["ArrowRight"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
+    } else if (["ArrowLeft"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
+    } else if (event.key === "Escape") {
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      _optionalChain([chartRef, 'access', _16 => _16.current, 'optionalAccess', _17 => _17.focus, 'call', _18 => _18()]);
+    }
+  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
   return {
     tooltipRef,
     onChartFocus,
@@ -183,4 +191,4 @@ var useKeyboardNavigation = ({
 
 
 exports.BaseTooltip = BaseTooltip; exports.AccessibleTooltip = AccessibleTooltip; exports.useKeyboardNavigation = useKeyboardNavigation;
-//# sourceMappingURL=chunk-7HROSZRS.cjs.map
+//# sourceMappingURL=chunk-Y3NNQMAX.cjs.map

package/dist/chunk-Y3NNQMAX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-Y3NNQMAX.cjs","../src/components/tooltip/base-tooltip.tsx","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/accessible-tooltip.tsx"],"names":["_jsx"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-Y3NNQMAX.cjs","sourcesContent":[null,"import { formatNumber } from '@automattic/number-formatters';\nimport styles from './base-tooltip.module.scss';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nconst DefaultTooltipContent = ({\n  data\n}) => /*#__PURE__*/_jsxs(_Fragment, {\n  children: [data?.label, \": \", data?.valueDisplay || formatNumber(data?.value)]\n});\nexport const BaseTooltip = ({\n  data,\n  top,\n  left,\n  component: Component = DefaultTooltipContent,\n  children,\n  className,\n  style,\n  renderContainer = true\n}) => {\n  const content = children || data && /*#__PURE__*/_jsx(Component, {\n    data: data,\n    className: className\n  });\n  if (!renderContainer) {\n    return content;\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: styles.tooltip,\n    style: {\n      top,\n      left,\n      ...style\n    },\n    role: \"tooltip\",\n    children: content\n  });\n};","import 'css-chunk:src/components/tooltip/base-tooltip.module.scss';export default {\n  \"tooltip\": \"a8ccharts-OfX6nd\"\n};","import { Tooltip, TooltipContext } from '@visx/xychart';\nimport { useContext, useEffect, useCallback, useMemo } from 'react';\n\n// Type for flattened tooltip data used in individual mode\n\n// Enhanced tooltip with keyboard navigation and accessibility\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const AccessibleTooltip = ({\n  renderTooltip,\n  selectedIndex,\n  tooltipRef,\n  keyboardFocusedClassName,\n  series = [],\n  mode = 'group',\n  ...props\n}) => {\n  const tooltipContext = useContext(TooltipContext);\n  const tooltipData = useMemo(() => {\n    if (mode !== 'individual') return [];\n    if (series.length === 0) return [];\n    const maxDataPoints = Math.max(...series.map(s => s.data.length));\n    const flattened = [];\n\n    // Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n    for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {\n      for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {\n        const seriesData = series[seriesIndex];\n        if (dataPointIndex < seriesData.data.length) {\n          flattened.push({\n            datum: seriesData.data[dataPointIndex],\n            seriesLabel: seriesData.label,\n            seriesIndex,\n            dataPointIndex\n          });\n        }\n      }\n    }\n    return flattened;\n  }, [series, mode]);\n\n  // Handle tooltip highlighting for keyboard navigation\n  useEffect(() => {\n    if (selectedIndex === undefined) {\n      tooltipContext?.hideTooltip();\n      return;\n    }\n    if (mode === 'group') {\n      // Show all series at the selected data point index in single tooltip.\n      series.forEach((s, index) => {\n        if (selectedIndex < s.data.length) {\n          const datum = s.data[selectedIndex];\n          tooltipContext?.showTooltip({\n            datum,\n            key: s.label,\n            index\n          });\n        }\n      });\n    } else if (mode === 'individual') {\n      // Show individual tooltips for each datapoint from each series.\n      if (selectedIndex < tooltipData.length) {\n        const tooltipItem = tooltipData[selectedIndex];\n        tooltipContext?.showTooltip({\n          datum: tooltipItem.datum,\n          key: tooltipItem.seriesLabel,\n          index: tooltipItem.seriesIndex\n        });\n      }\n    }\n\n    // Don't include tooltipContext in the dependency array to avoid loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedIndex, tooltipData, series]);\n\n  // Create a focusable renderTooltip that includes accessibility features\n  const focusableRenderTooltip = useMemo(() => {\n    if (!renderTooltip) return undefined;\n    return params => {\n      const tooltipContent = renderTooltip(params);\n      if (selectedIndex !== undefined) {\n        return /*#__PURE__*/_jsx(\"div\", {\n          ref: tooltipRef,\n          tabIndex: -1,\n          role: \"tooltip\",\n          \"aria-atomic\": \"true\",\n          className: keyboardFocusedClassName,\n          children: tooltipContent\n        }, `chart-tooltip-${selectedIndex}`);\n      }\n      return /*#__PURE__*/_jsx(\"div\", {\n        role: \"tooltip\",\n        \"aria-live\": \"polite\",\n        children: tooltipContent\n      });\n    };\n  }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);\n  return /*#__PURE__*/_jsx(Tooltip, {\n    ...props,\n    renderTooltip: focusableRenderTooltip\n  });\n};\n\n// Keyboard navigation hook for charts\n\nexport const useKeyboardNavigation = ({\n  selectedIndex,\n  setSelectedIndex,\n  isNavigating,\n  setIsNavigating,\n  chartRef,\n  totalPoints\n}) => {\n  // Focus the tooltip as soon as it is rendered\n  const tooltipRef = useCallback(element => {\n    if (element && selectedIndex !== undefined) {\n      element.focus();\n    }\n  }, [selectedIndex]);\n\n  // On each focus of chart, reset the selectedIndex to 0, if keyboard navigation is not already active\n  const onChartFocus = useCallback(() => {\n    if (!isNavigating && selectedIndex !== undefined) {\n      setSelectedIndex(0);\n    }\n  }, [isNavigating, selectedIndex, setSelectedIndex]);\n\n  // On each blur of chart, keyboard navigation should restart from first tooltip\n  const onChartBlur = useCallback(() => {\n    setIsNavigating(false);\n  }, [setIsNavigating]);\n  const onChartKeyDown = useCallback(event => {\n    if (totalPoints === 0) return;\n\n    // Keep focus on the chart if tab is pressed\n    if (event.key === 'Tab') {\n      chartRef.current?.focus();\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      return;\n    }\n    const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;\n    if (currentSelectedIndex + 1 >= totalPoints && ['ArrowRight'].includes(event.key)) {\n      chartRef.current?.focus();\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      return;\n    }\n    event.preventDefault();\n    if (['ArrowRight'].includes(event.key)) {\n      setIsNavigating(true);\n      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);\n    } else if (['ArrowLeft'].includes(event.key)) {\n      setIsNavigating(true);\n      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);\n    } else if (event.key === 'Escape') {\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      chartRef.current?.focus();\n    }\n  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);\n  return {\n    tooltipRef,\n    onChartFocus,\n    onChartBlur,\n    onChartKeyDown\n  };\n};\n\n// Re-export the base Tooltip for backwards compatibility\nexport { Tooltip };"]}

package/dist/chunk-ZXEFMKVP.cjs

@@ -0,0 +1,120 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk7QDEU3KNcjs = require('./chunk-7QDEU3KN.cjs');
+
+
+
+
+var _chunkLSV7F26Bcjs = require('./chunk-LSV7F26B.cjs');
+
+
+
+
+var _chunkZVGEDXDPcjs = require('./chunk-ZVGEDXDP.cjs');
+
+// src/charts/geo-chart/geo-chart.tsx
+var _i18n = require('@wordpress/i18n');
+var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
+var _react = require('react');
+var _reactgooglecharts = require('react-google-charts');
+
+// src/charts/geo-chart/geo-chart.module.scss
+var geo_chart_module_default = {
+  "container": "a8ccharts-JvcqOz"
+};
+
+// src/charts/geo-chart/geo-chart.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var DEFAULT_FEATURE_FILL_COLOR = "#ffffff";
+var DEFAULT_BACKGROUND_COLOR = "#ffffff";
+var GeoChartInternal = ({
+  className,
+  data,
+  width,
+  height,
+  region = "world",
+  resolution = "countries",
+  renderPlaceholder
+}) => {
+  const {
+    getElementStyles,
+    theme: {
+      geoChart: {
+        featureFillColor
+      },
+      backgroundColor
+    }
+  } = _chunkLSV7F26Bcjs.useGlobalChartsContext.call(void 0, );
+  const loadingPlaceholder = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+    className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
+    style: {
+      width,
+      height
+    },
+    children: renderPlaceholder ? renderPlaceholder() : _i18n.__.call(void 0, "Loading map", "jetpack-charts")
+  });
+  const fullColorHex = getElementStyles({
+    index: 0
+  }).color;
+  const lightColorHex = _chunkZVGEDXDPcjs.lightenHexColor.call(void 0, fullColorHex, 0.8);
+  const backgroundColorHex = _chunkZVGEDXDPcjs.normalizeColorToHex.call(void 0, backgroundColor, null, _chunkZVGEDXDPcjs.resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
+  const defaultFillColorHex = _chunkZVGEDXDPcjs.normalizeColorToHex.call(void 0, featureFillColor, null, _chunkZVGEDXDPcjs.resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
+  const hasHtmlTooltips = _react.useMemo.call(void 0, () => data.length > 0 && data[0].some((col) => typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true), [data]);
+  const options = _react.useMemo.call(void 0, () => ({
+    ...region !== "world" && {
+      region
+    },
+    ...resolution !== "countries" && {
+      resolution
+    },
+    colorAxis: {
+      colors: [lightColorHex, fullColorHex]
+    },
+    backgroundColor: backgroundColorHex,
+    datalessRegionColor: defaultFillColorHex,
+    defaultColor: defaultFillColorHex,
+    tooltip: {
+      trigger: "focus",
+      isHtml: hasHtmlTooltips
+    },
+    legend: "none",
+    keepAspectRatio: true
+  }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, hasHtmlTooltips]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+    className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
+    style: {
+      width,
+      height,
+      backgroundColor
+    },
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactgooglecharts.Chart, {
+      chartType: "GeoChart",
+      width,
+      height,
+      data,
+      options,
+      loader: loadingPlaceholder
+    })
+  });
+};
+var GeoChartWithProvider = (props) => {
+  const existingContext = _react.useContext.call(void 0, _chunkLSV7F26Bcjs.GlobalChartsContext);
+  if (existingContext) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GeoChartInternal, {
+      ...props
+    });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLSV7F26Bcjs.GlobalChartsProvider, {
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GeoChartInternal, {
+      ...props
+    })
+  });
+};
+GeoChartWithProvider.displayName = "GeoChart";
+var GeoChartResponsive = _chunk7QDEU3KNcjs.withResponsive.call(void 0, GeoChartWithProvider);
+
+
+
+
+exports.GeoChartWithProvider = GeoChartWithProvider; exports.GeoChartResponsive = GeoChartResponsive;
+//# sourceMappingURL=chunk-ZXEFMKVP.cjs.map