@automattic/charts 0.56.2 → 0.56.4

package/dist/{chunk-7UJPVCMB.cjs → chunk-CERFRCXD.cjs}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkSH32YSZOcjs = require('./chunk-SH32YSZO.cjs');
 
+var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
 
 
-var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
+var _chunkSH32YSZOcjs = require('./chunk-SH32YSZO.cjs');
 
 
-var _chunkNW3RUYK2cjs = require('./chunk-NW3RUYK2.cjs');
+var _chunk7QDEU3KNcjs = require('./chunk-7QDEU3KN.cjs');
 
 
 
@@ -25,7 +25,7 @@ var _chunkNW3RUYK2cjs = require('./chunk-NW3RUYK2.cjs');
 
 
 
-var _chunkTVV7ZI7Ccjs = require('./chunk-TVV7ZI7C.cjs');
+var _chunkLSV7F26Bcjs = require('./chunk-LSV7F26B.cjs');
 
 
 
@@ -71,7 +71,10 @@ var TruncatedTickComponent = ({
   dy,
   ...textProps
 }) => {
-  const { xScale, yScale } = _react.useContext.call(void 0, _xychart.DataContext) || {};
+  const {
+    xScale,
+    yScale
+  } = _react.useContext.call(void 0, _xychart.DataContext) || {};
   const scale = axis === "x" ? xScale : yScale;
   const bandwidth = getScaleBandwidth(scale);
   const maxWidth = Math.max(bandwidth, MIN_TICK_LABEL_WIDTH);
@@ -89,7 +92,14 @@ var TruncatedTickComponent = ({
   } else if (textAlign === "right") {
     xOffset = -maxWidth;
   }
-  const { fontSize, fontFamily, fontWeight, fontStyle, letterSpacing, opacity } = textProps;
+  const {
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    letterSpacing,
+    opacity
+  } = textProps;
   const textStyles = {
     /**
      * SVG <text> elements are vertically aligned to the baseline by default, but HTML <div> elements inside <foreignObject>
@@ -98,7 +108,9 @@ var TruncatedTickComponent = ({
      */
     transform: `translateY(calc(-100% + ${_nullishCoalesce(dy, () => ( "0"))} * 2))`,
     // Safari doesn't work well with foreignObject positioning. Use position: fixed as a workaround.
-    ..._chunkZVGEDXDPcjs.isSafari.call(void 0, ) ? { position: "fixed" } : {},
+    ..._chunkZVGEDXDPcjs.isSafari.call(void 0, ) ? {
+      position: "fixed"
+    } : {},
     // Apply compatible SVG text styles
     fontSize,
     fontFamily,
@@ -118,10 +130,24 @@ var TruncatedTickComponent = ({
     cursor: "default",
     pointerEvents: "auto"
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "foreignObject", { x: x + xOffset, y, width: maxWidth, height: 0, overflow: "visible", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: textStyles, title: formattedValue, children: formattedValue }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "foreignObject", {
+    x: x + xOffset,
+    y,
+    width: maxWidth,
+    height: 0,
+    overflow: "visible",
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+      style: textStyles,
+      title: formattedValue,
+      children: formattedValue
+    })
+  });
 };
 var createTruncatedTickComponent = (axis) => (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TruncatedTickComponent, { ...props, axis });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TruncatedTickComponent, {
+    ...props,
+    axis
+  });
 };
 var TruncatedXTickComponent = createTruncatedTickComponent("x");
 var TruncatedYTickComponent = createTruncatedTickComponent("y");
@@ -234,11 +260,7 @@ function useBarChartOptions(data, horizontal, options = {}) {
 
 var validateData = (data) => {
   if (!_optionalChain([data, 'optionalAccess', _19 => _19.length])) return "No data available";
-  const hasInvalidData = data.some(
-    (series) => series.data.some(
-      (point) => isNaN(point.value) || point.value === null || point.value === void 0 || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))
-    )
-  );
+  const hasInvalidData = data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))));
   if (hasInvalidData) return "Invalid data";
   return null;
 };
@@ -271,25 +293,30 @@ var BarChartInternal = ({
   gap = "md"
 }) => {
   const horizontal = orientation === "horizontal";
-  const chartId = _chunkTVV7ZI7Ccjs.useChartId.call(void 0, providedChartId);
-  const theme = _chunkTVV7ZI7Ccjs.useXYChartTheme.call(void 0, data);
-  const dataSorted = _chunkTVV7ZI7Ccjs.useChartDataTransform.call(void 0, data);
-  const dataWithVisibleZeros = _chunkTVV7ZI7Ccjs.useZeroValueDisplay.call(void 0, dataSorted, {
+  const chartId = _chunkLSV7F26Bcjs.useChartId.call(void 0, providedChartId);
+  const theme = _chunkLSV7F26Bcjs.useXYChartTheme.call(void 0, data);
+  const dataSorted = _chunkLSV7F26Bcjs.useChartDataTransform.call(void 0, data);
+  const dataWithVisibleZeros = _chunkLSV7F26Bcjs.useZeroValueDisplay.call(void 0, dataSorted, {
     enabled: showZeroValues
   });
-  const legendItems = _chunkTVV7ZI7Ccjs.useChartLegendItems.call(void 0, dataSorted);
+  const legendItems = _chunkLSV7F26Bcjs.useChartLegendItems.call(void 0, dataSorted);
   const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
-  const defaultMargin = _chunkTVV7ZI7Ccjs.useChartMargin.call(void 0, height, chartOptions, dataSorted, theme, horizontal);
-  const [svgWrapperRef, svgWrapperHeight] = _chunkTVV7ZI7Ccjs.useElementHeight.call(void 0, );
+  const defaultMargin = _chunkLSV7F26Bcjs.useChartMargin.call(void 0, height, chartOptions, dataSorted, theme, horizontal);
+  const [svgWrapperRef, svgWrapperHeight] = _chunkLSV7F26Bcjs.useElementHeight.call(void 0, );
   const chartRef = _react.useRef.call(void 0, null);
-  const hasLegendChild = _chunkTVV7ZI7Ccjs.useHasLegendChild.call(void 0, children);
+  const hasLegendChild = _chunkLSV7F26Bcjs.useHasLegendChild.call(void 0, children);
   const chartHeight = svgWrapperHeight > 0 ? svgWrapperHeight : height;
   const hasLegend = showLegend || hasLegendChild;
   const isWaitingForMeasurement = hasLegend ? svgWrapperHeight === 0 : !chartHeight;
   const [selectedIndex, setSelectedIndex] = _react.useState.call(void 0, void 0);
   const [isNavigating, setIsNavigating] = _react.useState.call(void 0, false);
   const totalPoints = Math.max(0, ...data.map((series) => _optionalChain([series, 'access', _20 => _20.data, 'optionalAccess', _21 => _21.length]) || 0)) * data.length;
-  const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = _chunk7HROSZRScjs.useKeyboardNavigation.call(void 0, {
+  const {
+    tooltipRef,
+    onChartFocus,
+    onChartBlur,
+    onChartKeyDown
+  } = _chunkY3NNQMAXcjs.useKeyboardNavigation.call(void 0, {
     selectedIndex,
     setSelectedIndex,
     isNavigating,
@@ -297,8 +324,11 @@ var BarChartInternal = ({
     chartRef,
     totalPoints
   });
-  const { getElementStyles, isSeriesVisible } = _chunkTVV7ZI7Ccjs.useGlobalChartsContext.call(void 0, );
-  const providerTheme = _chunkTVV7ZI7Ccjs.useGlobalChartsTheme.call(void 0, );
+  const {
+    getElementStyles,
+    isSeriesVisible
+  } = _chunkLSV7F26Bcjs.useGlobalChartsContext.call(void 0, );
+  const providerTheme = _chunkLSV7F26Bcjs.useGlobalChartsTheme.call(void 0, );
   const seriesWithVisibility = _react.useMemo.call(void 0, () => {
     if (!chartId || !legendInteractive) {
       return dataWithVisibleZeros.map((series, index) => ({
@@ -314,78 +344,84 @@ var BarChartInternal = ({
     }));
   }, [dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive]);
   const allSeriesHidden = _react.useMemo.call(void 0, () => {
-    return seriesWithVisibility.every(({ isVisible }) => !isVisible);
+    return seriesWithVisibility.every(({
+      isVisible
+    }) => !isVisible);
   }, [seriesWithVisibility]);
-  const getBarBackground = _react.useCallback.call(void 0, 
-    (index) => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({ data: dataSorted[index], index }).color,
-    [withPatterns, getElementStyles, dataSorted, chartId]
-  );
-  const renderDefaultTooltip = _react.useCallback.call(void 0, 
-    ({ tooltipData }) => {
-      const nearestDatum = _optionalChain([tooltipData, 'optionalAccess', _22 => _22.nearestDatum, 'optionalAccess', _23 => _23.datum]);
-      if (!nearestDatum) return null;
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: bar_chart_module_default["bar-chart__tooltip"], children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: bar_chart_module_default["bar-chart__tooltip-header"], children: _optionalChain([tooltipData, 'optionalAccess', _24 => _24.nearestDatum, 'optionalAccess', _25 => _25.key]) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: bar_chart_module_default["bar-chart__tooltip-row"], children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: bar_chart_module_default["bar-chart__tooltip-label"], children: [
-            chartOptions.tooltip.labelFormatter(
-              nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0),
-              0,
-              []
-            ),
-            ":"
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: bar_chart_module_default["bar-chart__tooltip-value"], children: _numberformatters.formatNumber.call(void 0, nearestDatum.value) })
-        ] })
-      ] });
-    },
-    [chartOptions.tooltip]
-  );
-  const renderPattern = _react.useCallback.call(void 0, 
-    (index, color) => {
-      const patternType = index % 4;
-      const id = getPatternId(chartId, index);
-      const commonProps = {
-        id,
-        stroke: "white",
-        strokeWidth: 1,
-        background: color
-      };
-      switch (patternType) {
-        case 0:
-        default:
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _pattern.PatternLines,
-            {
-              ...commonProps,
-              width: 5,
-              height: 5,
-              orientation: ["diagonal"]
-            },
-            id
-          );
-        case 1:
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pattern.PatternCircles, { ...commonProps, width: 6, height: 6, fill: "white" }, id);
-        case 2:
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pattern.PatternWaves, { ...commonProps, width: 4, height: 4 }, id);
-        case 3:
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pattern.PatternHexagons, { ...commonProps, size: 8, height: 3 }, id);
-      }
-    },
-    [chartId]
-  );
-  const createPatternBorderStyle = _react.useCallback.call(void 0, 
-    (index, color) => {
-      const patternId = getPatternId(chartId, index);
-      return `
+  const getBarBackground = _react.useCallback.call(void 0, (index) => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({
+    data: dataSorted[index],
+    index
+  }).color, [withPatterns, getElementStyles, dataSorted, chartId]);
+  const renderDefaultTooltip = _react.useCallback.call(void 0, ({
+    tooltipData
+  }) => {
+    const nearestDatum = _optionalChain([tooltipData, 'optionalAccess', _22 => _22.nearestDatum, 'optionalAccess', _23 => _23.datum]);
+    if (!nearestDatum) return null;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
+      className: bar_chart_module_default["bar-chart__tooltip"],
+      children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+        className: bar_chart_module_default["bar-chart__tooltip-header"],
+        children: _optionalChain([tooltipData, 'optionalAccess', _24 => _24.nearestDatum, 'optionalAccess', _25 => _25.key])
+      }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
+        className: bar_chart_module_default["bar-chart__tooltip-row"],
+        children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
+          className: bar_chart_module_default["bar-chart__tooltip-label"],
+          children: [chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []), ":"]
+        }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
+          className: bar_chart_module_default["bar-chart__tooltip-value"],
+          children: _numberformatters.formatNumber.call(void 0, nearestDatum.value)
+        })]
+      })]
+    });
+  }, [chartOptions.tooltip]);
+  const renderPattern = _react.useCallback.call(void 0, (index, color) => {
+    const patternType = index % 4;
+    const id = getPatternId(chartId, index);
+    const commonProps = {
+      id,
+      stroke: "white",
+      strokeWidth: 1,
+      background: color
+    };
+    switch (patternType) {
+      case 0:
+      default:
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pattern.PatternLines, {
+          ...commonProps,
+          width: 5,
+          height: 5,
+          orientation: ["diagonal"]
+        }, id);
+      case 1:
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pattern.PatternCircles, {
+          ...commonProps,
+          width: 6,
+          height: 6,
+          fill: "white"
+        }, id);
+      case 2:
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pattern.PatternWaves, {
+          ...commonProps,
+          width: 4,
+          height: 4
+        }, id);
+      case 3:
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pattern.PatternHexagons, {
+          ...commonProps,
+          size: 8,
+          height: 3
+        }, id);
+    }
+  }, [chartId]);
+  const createPatternBorderStyle = _react.useCallback.call(void 0, (index, color) => {
+    const patternId = getPatternId(chartId, index);
+    return `
 			.visx-bar[fill="url(#${patternId})"] {
 				stroke: ${color};
 				stroke-width: 1;
 				}
 			`;
-    },
-    [chartId]
-  );
+  }, [chartId]);
   const createKeyboardHighlightStyle = _react.useCallback.call(void 0, () => {
     if (selectedIndex === void 0) return "";
     const maxDataPoints = Math.max(...data.map((s) => s.data.length));
@@ -409,200 +445,167 @@ var BarChartInternal = ({
   }, [selectedIndex, data, chartId]);
   const error = validateData(dataSorted);
   const isDataValid = !error;
-  const chartMetadata = _react.useMemo.call(void 0, 
-    () => ({
-      orientation,
-      withPatterns
-    }),
-    [orientation, withPatterns]
-  );
-  _chunkTVV7ZI7Ccjs.useChartRegistration.call(void 0, {
+  const chartMetadata = _react.useMemo.call(void 0, () => ({
+    orientation,
+    withPatterns
+  }), [orientation, withPatterns]);
+  _chunkLSV7F26Bcjs.useChartRegistration.call(void 0, {
     chartId,
     legendItems,
     chartType: "bar",
     isDataValid,
     metadata: chartMetadata
   });
-  const prefersReducedMotion = _chunkTVV7ZI7Ccjs.usePrefersReducedMotion.call(void 0, );
+  const prefersReducedMotion = _chunkLSV7F26Bcjs.usePrefersReducedMotion.call(void 0, );
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _clsx2.default.call(void 0, "bar-chart", bar_chart_module_default["bar-chart"]), children: error });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+      className: _clsx2.default.call(void 0, "bar-chart", bar_chart_module_default["bar-chart"]),
+      children: error
+    });
   }
   const gridVisibility = _nullishCoalesce(gridVisibilityProp, () => ( chartOptions.gridVisibility));
   const highlightedBarStyle = createKeyboardHighlightStyle();
-  const legendElement = showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkTVV7ZI7Ccjs.Legend,
-    {
-      orientation: legendOrientation,
-      position: legendPosition,
-      alignment: legendAlignment,
-      maxWidth: legendMaxWidth,
-      textOverflow: legendTextOverflow,
-      legendItemClassName,
-      className: bar_chart_module_default["bar-chart__legend"],
-      shape: legendShape,
+  const legendElement = showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLSV7F26Bcjs.Legend, {
+    orientation: legendOrientation,
+    position: legendPosition,
+    alignment: legendAlignment,
+    maxWidth: legendMaxWidth,
+    textOverflow: legendTextOverflow,
+    legendItemClassName,
+    className: bar_chart_module_default["bar-chart__legend"],
+    shape: legendShape,
+    chartId,
+    interactive: legendInteractive
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLSV7F26Bcjs.SingleChartContext.Provider, {
+    value: {
       chartId,
-      interactive: legendInteractive
-    }
-  );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkTVV7ZI7Ccjs.SingleChartContext.Provider,
-    {
-      value: {
-        chartId,
-        chartWidth: width,
-        chartHeight
+      chartWidth: width,
+      chartHeight
+    },
+    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkSH32YSZOcjs.Stack, {
+      direction: "column",
+      gap,
+      className: _clsx2.default.call(void 0, "bar-chart", bar_chart_module_default["bar-chart"], {
+        [bar_chart_module_default[`bar-chart--animated${horizontal ? "-horizontal" : ""}`]]: animation && !prefersReducedMotion
+      }, className),
+      style: {
+        width,
+        height,
+        visibility: isWaitingForMeasurement ? "hidden" : "visible"
       },
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _chunkSH32YSZOcjs.Stack,
-        {
-          direction: "column",
-          gap,
-          className: _clsx2.default.call(void 0, 
-            "bar-chart",
-            bar_chart_module_default["bar-chart"],
-            {
-              [bar_chart_module_default[`bar-chart--animated${horizontal ? "-horizontal" : ""}`]]: animation && !prefersReducedMotion
-            },
-            className
-          ),
-          "data-testid": "bar-chart",
-          style: {
+      "data-chart-id": `bar-chart-${chartId}`,
+      children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+        className: bar_chart_module_default["bar-chart__svg-wrapper"],
+        ref: svgWrapperRef,
+        role: "grid",
+        "aria-label": _i18n.__.call(void 0, "Bar chart", "jetpack-charts"),
+        tabIndex: 0,
+        onKeyDown: onChartKeyDown,
+        onFocus: onChartFocus,
+        onBlur: onChartBlur,
+        children: !isWaitingForMeasurement && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+          ref: chartRef,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xychart.XYChart, {
+            theme,
             width,
-            height,
-            visibility: isWaitingForMeasurement ? "hidden" : "visible"
-          },
-          "data-chart-id": `bar-chart-${chartId}`,
-          children: [
-            legendPosition === "top" && legendElement,
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "div",
-              {
-                className: bar_chart_module_default["bar-chart__svg-wrapper"],
-                ref: svgWrapperRef,
-                role: "grid",
-                "aria-label": _i18n.__.call(void 0, "Bar chart", "jetpack-charts"),
-                tabIndex: 0,
-                onKeyDown: onChartKeyDown,
-                onFocus: onChartFocus,
-                onBlur: onChartBlur,
-                children: !isWaitingForMeasurement && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: chartRef, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  _xychart.XYChart,
-                  {
-                    theme,
-                    width,
-                    height: chartHeight,
-                    margin: {
-                      ...defaultMargin,
-                      ...margin
-                    },
-                    xScale: chartOptions.xScale,
-                    yScale: chartOptions.yScale,
-                    horizontal,
-                    pointerEventsDataKey: "nearest",
-                    children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _xychart.Grid,
-                        {
-                          columns: gridVisibility.includes("y"),
-                          rows: gridVisibility.includes("x"),
-                          numTicks: 4
-                        }
-                      ),
-                      withPatterns && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { "data-testid": "bar-chart-patterns", children: dataSorted.map(
-                          (seriesData, index) => renderPattern(
-                            index,
-                            getElementStyles({ data: seriesData, index }).color
-                          )
-                        ) }),
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { children: dataSorted.map(
-                          (seriesData, index) => createPatternBorderStyle(
-                            index,
-                            getElementStyles({ data: seriesData, index }).color
-                          )
-                        ) })
-                      ] }),
-                      highlightedBarStyle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { children: highlightedBarStyle }),
-                      allSeriesHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        "text",
-                        {
-                          x: width / 2,
-                          y: chartHeight / 2,
-                          textAnchor: "middle",
-                          fill: _optionalChain([providerTheme, 'access', _26 => _26.gridStyles, 'optionalAccess', _27 => _27.stroke]) || "#ccc",
-                          fontSize: "14",
-                          fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
-                          children: _i18n.__.call(void 0, 
-                            "All series are hidden. Click legend items to show data.",
-                            "jetpack-charts"
-                          )
-                        }
-                      ) : null,
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.BarGroup, { padding: chartOptions.barGroup.padding, children: seriesWithVisibility.map(({ series: seriesData, index, isVisible }) => {
-                        if (!isVisible) {
-                          return null;
-                        }
-                        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          _xychart.BarSeries,
-                          {
-                            dataKey: _optionalChain([seriesData, 'optionalAccess', _28 => _28.label]),
-                            data: seriesData.data,
-                            yAccessor: chartOptions.accessors.yAccessor,
-                            xAccessor: chartOptions.accessors.xAccessor,
-                            colorAccessor: getBarBackground(index)
-                          },
-                          _optionalChain([seriesData, 'optionalAccess', _29 => _29.label])
-                        );
-                      }) }),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, { ...chartOptions.axis.x }),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, { ...chartOptions.axis.y }),
-                      withTooltips && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunk7HROSZRScjs.AccessibleTooltip,
-                        {
-                          detectBounds: true,
-                          snapTooltipToDatumX: true,
-                          snapTooltipToDatumY: true,
-                          renderTooltip: renderTooltip || renderDefaultTooltip,
-                          selectedIndex,
-                          tooltipRef,
-                          keyboardFocusedClassName: bar_chart_module_default["bar-chart__tooltip--keyboard-focused"],
-                          series: data,
-                          mode: "individual"
-                        }
-                      )
-                    ]
-                  }
-                ) })
-              }
-            ),
-            legendPosition === "bottom" && legendElement,
-            children
-          ]
-        }
-      )
-    }
-  );
+            height: chartHeight,
+            margin: {
+              ...defaultMargin,
+              ...margin
+            },
+            xScale: chartOptions.xScale,
+            yScale: chartOptions.yScale,
+            horizontal,
+            pointerEventsDataKey: "nearest",
+            children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Grid, {
+              columns: gridVisibility.includes("y"),
+              rows: gridVisibility.includes("x"),
+              numTicks: 4
+            }), withPatterns && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+              children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", {
+                children: dataSorted.map((seriesData, index) => renderPattern(index, getElementStyles({
+                  data: seriesData,
+                  index
+                }).color))
+              }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", {
+                children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getElementStyles({
+                  data: seriesData,
+                  index
+                }).color))
+              })]
+            }), highlightedBarStyle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", {
+              children: highlightedBarStyle
+            }), allSeriesHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", {
+              x: width / 2,
+              y: chartHeight / 2,
+              textAnchor: "middle",
+              fill: _optionalChain([providerTheme, 'access', _26 => _26.gridStyles, 'optionalAccess', _27 => _27.stroke]) || "#ccc",
+              fontSize: "14",
+              fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
+              children: _i18n.__.call(void 0, "All series are hidden. Click legend items to show data.", "jetpack-charts")
+            }) : null, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.BarGroup, {
+              padding: chartOptions.barGroup.padding,
+              children: seriesWithVisibility.map(({
+                series: seriesData,
+                index,
+                isVisible
+              }) => {
+                if (!isVisible) {
+                  return null;
+                }
+                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.BarSeries, {
+                  dataKey: _optionalChain([seriesData, 'optionalAccess', _28 => _28.label]),
+                  data: seriesData.data,
+                  yAccessor: chartOptions.accessors.yAccessor,
+                  xAccessor: chartOptions.accessors.xAccessor,
+                  colorAccessor: getBarBackground(index)
+                }, _optionalChain([seriesData, 'optionalAccess', _29 => _29.label]));
+              })
+            }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, {
+              ...chartOptions.axis.x
+            }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, {
+              ...chartOptions.axis.y
+            }), withTooltips && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3NNQMAXcjs.AccessibleTooltip, {
+              detectBounds: true,
+              snapTooltipToDatumX: true,
+              snapTooltipToDatumY: true,
+              renderTooltip: renderTooltip || renderDefaultTooltip,
+              selectedIndex,
+              tooltipRef,
+              keyboardFocusedClassName: bar_chart_module_default["bar-chart__tooltip--keyboard-focused"],
+              series: data,
+              mode: "individual"
+            })]
+          })
+        })
+      }), legendPosition === "bottom" && legendElement, children]
+    })
+  });
 };
 var BarChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunkTVV7ZI7Ccjs.GlobalChartsContext);
+  const existingContext = _react.useContext.call(void 0, _chunkLSV7F26Bcjs.GlobalChartsContext);
   if (existingContext) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarChartInternal, { ...props });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarChartInternal, {
+      ...props
+    });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTVV7ZI7Ccjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarChartInternal, { ...props }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLSV7F26Bcjs.GlobalChartsProvider, {
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarChartInternal, {
+      ...props
+    })
+  });
 };
 BarChartWithProvider.displayName = "BarChart";
 var BarChart = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, BarChartWithProvider, {
-  Legend: _chunkTVV7ZI7Ccjs.Legend
+  Legend: _chunkLSV7F26Bcjs.Legend
+});
+var BarChartResponsive = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, _chunk7QDEU3KNcjs.withResponsive.call(void 0, BarChartWithProvider), {
+  Legend: _chunkLSV7F26Bcjs.Legend
 });
-var BarChartResponsive = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, 
-  _chunkNW3RUYK2cjs.withResponsive.call(void 0, BarChartWithProvider),
-  {
-    Legend: _chunkTVV7ZI7Ccjs.Legend
-  }
-);
 
 
 
 
 exports.BarChart = BarChart; exports.BarChartResponsive = BarChartResponsive;
-//# sourceMappingURL=chunk-7UJPVCMB.cjs.map
+//# sourceMappingURL=chunk-CERFRCXD.cjs.map