@redsift/charts 12.6.6-alpha.2 → 13.0.0

package/_internal/BarChart2.js

@@ -1,5 +1,5 @@
 import { _ as _objectWithoutProperties, a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, createContext, useContext, useEffect, useMemo } from 'react';
+import React, { forwardRef, useRef, createContext, useContext, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { useTheme, useMessageFormatter, Flexbox, Text, Number as Number$1, isComponent, RedsiftColorGreenD1, RedsiftColorRedD1, RedsiftColorNeutralBlack, useId } from '@redsift/design-system';
 import { scaleLinear, sum, scaleBand, scaleOrdinal, extent, scaleUtc, scalePoint, utcParse, scaleLog } from 'd3';
@@ -184,23 +184,23 @@ const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const chartHeight = height - margins.top - margins.bottom;
   const chartWidth = width - margins.left - margins.right;
-  const scaleRef = useRef();
+  const scaleRef = useRef(undefined);
   if (!scaleRef.current) {
     scaleRef.current = scaleLinear().domain([]).range([0, chartWidth]);
   }
-  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledBarChart, _extends({}, forwardedProps, {
     className: className,
     ref: ref
-  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledBarChartEmptyText, {
+  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledBarChartEmptyText, {
     $maxWidth: width,
     $textSize: chartDimensions.fontSize / 2,
     $theme: theme
-  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React.createElement("svg", {
     width: width,
     height: height
-  }, /*#__PURE__*/React__default.createElement("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, /*#__PURE__*/React__default.createElement(Axis, {
+  }, /*#__PURE__*/React.createElement(Axis, {
     position: "bottom",
     length: chartWidth,
     scale: scaleRef.current,
@@ -216,7 +216,7 @@ const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       className
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$6);
-  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledBarChart, _extends({}, forwardedProps, {
     className: className,
     ref: ref
   }), "Loading...");
@@ -270,7 +270,7 @@ function useBarChartContext() {
   return context;
 }
 
-const ChartTypeContext = /*#__PURE__*/React__default.createContext(undefined);
+const ChartTypeContext = /*#__PURE__*/React.createContext(undefined);
 
 const _excluded$5 = ["areXLabelsRotated", "barProps", "caping", "className", "data", "dataType", "direction", "disableAnimations", "emptyComponent", "id", "isBarSelected", "getBarAnchorProps", "labelDecorator", "legendDecorator", "legendProps", "legendVariant", "localeText", "margins", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues"];
 const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
@@ -327,7 +327,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       yAxisTickValues
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$5);
-  const cache = useRef();
+  const cache = useRef(undefined);
   const theme = useTheme();
   const format = useMessageFormatter(intlMessages);
   const {
@@ -375,11 +375,11 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))]).range(isHorizontal ? [0, chartWidth] : [chartHeight, 0]), [data, size, isHorizontal]);
   const scaleCategory = useMemo(() => scaleBand().domain(visibleData.map(datum => datum.key)).range([0, isHorizontal ? chartHeight : chartWidth]), [data, size, isSelectionMode, isHorizontal]);
   const bars = visibleData;
-  return /*#__PURE__*/React__default.createElement(ChartTypeContext.Provider, {
+  return /*#__PURE__*/React.createElement(ChartTypeContext.Provider, {
     value: "bar"
-  }, /*#__PURE__*/React__default.createElement(BarChartContext.Provider, {
+  }, /*#__PURE__*/React.createElement(BarChartContext.Provider, {
     value: {}
-  }, /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
+  }, /*#__PURE__*/React.createElement(StyledBarChart, _extends({
     mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? 'interactive' : 'static',
     definition: format('definition-ordinal', {
       barLength: bars.length
@@ -399,29 +399,28 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       end: scale.domain()[1]
     }),
     dataTableRepresentation: {
-      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+      header: /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         scope: "col"
-      }, "Key"), /*#__PURE__*/React__default.createElement("th", {
+      }, "Key"), /*#__PURE__*/React.createElement("th", {
         scope: "col"
       }, "Value"))),
-      body: /*#__PURE__*/React__default.createElement("tbody", null, bars.map(datum => /*#__PURE__*/React__default.createElement("tr", {
+      body: /*#__PURE__*/React.createElement("tbody", null, bars.map(datum => /*#__PURE__*/React.createElement("tr", {
         key: datum.key
-      }, /*#__PURE__*/React__default.createElement("th", {
+      }, /*#__PURE__*/React.createElement("th", {
         scope: "row"
-      }, datum.key), /*#__PURE__*/React__default.createElement("td", null, datum.value))))
+      }, datum.key), /*#__PURE__*/React.createElement("td", null, datum.value))))
     }
   }, forwardedProps, {
     id: id,
     className: className,
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("svg", {
+  }), /*#__PURE__*/React.createElement("svg", {
     width: width,
     height: height,
-    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
-    "aria-hidden": "false"
-  }, /*#__PURE__*/React__default.createElement("g", {
+    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart')
+  }, /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "bottom",
     length: chartWidth,
@@ -434,7 +433,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickSize: xAxisTickSize,
     tickFormat: xAxisTickFormat,
     variant: xAxisVariant
-  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "top",
     length: chartWidth,
@@ -447,7 +446,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickSize: xAxisTickSize,
     tickFormat: xAxisTickFormat,
     variant: xAxisVariant
-  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "left",
     length: chartHeight,
@@ -460,7 +459,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickSize: yAxisTickSize,
     tickFormat: yAxisTickFormat,
     variant: yAxisVariant
-  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "right",
     length: chartHeight,
@@ -473,7 +472,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickSize: yAxisTickSize,
     tickFormat: yAxisTickFormat,
     variant: yAxisVariant
-  }) : null), /*#__PURE__*/React__default.createElement("g", {
+  }) : null), /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
   }, bars.map((datum, index) => {
     const percent = datum.value / total;
@@ -485,7 +484,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     const from = cache.current ? {
       data: cache.current[index]
     } : undefined;
-    return /*#__PURE__*/React__default.createElement(Bar, _extends({
+    return /*#__PURE__*/React.createElement(Bar, _extends({
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
       data: to,
       dataset: bars,
@@ -548,9 +547,8 @@ const BarChartBars = /*#__PURE__*/forwardRef((props, ref) => {
   const filteredBarChartBars = bars.filter(bar => bar.category === category && bar.value > 0);
   const categoryIndex = categories.indexOf(category);
   const categoryLength = categories.length;
-  return /*#__PURE__*/React__default.createElement(StyledBarChartBars, _extends({
+  return /*#__PURE__*/React.createElement(StyledBarChartBars, _extends({
     key: `${id}-series-${category}`,
-    "aria-hidden": "false",
     role: "region"
   }, hasCategory ? {
     'aria-label': format('series-legend', {
@@ -576,7 +574,7 @@ const BarChartBars = /*#__PURE__*/forwardRef((props, ref) => {
     const groupedBars = bars.filter(b => {
       return xScaleType === 'Date' || xScaleType === 'dateString' ? b.key.getTime() === bar.key.getTime() : b.key === bar.key;
     });
-    return [/*#__PURE__*/React__default.createElement(Bar, _extends({
+    return [/*#__PURE__*/React.createElement(Bar, _extends({
       color: region && region.colorTheme ? (_d3scaleOrdinal$domai = scaleOrdinal().domain(Object.keys(region.colorTheme)).range(Object.values(region.colorTheme))) === null || _d3scaleOrdinal$domai === void 0 ? void 0 : _d3scaleOrdinal$domai(to.data.category) : colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
       data: to,
       dataset: bars,
@@ -625,34 +623,34 @@ const BarChartGroupedTooltip = _ref => {
     var _groupedData$find$val, _groupedData$find;
     return ((_groupedData$find$val = groupedData === null || groupedData === void 0 ? void 0 : (_groupedData$find = groupedData.find(d => d.category === category)) === null || _groupedData$find === void 0 ? void 0 : _groupedData$find.value) !== null && _groupedData$find$val !== void 0 ? _groupedData$find$val : 0) > 0;
   });
-  return /*#__PURE__*/React__default.createElement(Flexbox, {
+  return /*#__PURE__*/React.createElement(Flexbox, {
     flexDirection: "column",
     margin: "16px",
     gap: "0"
-  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+  }, /*#__PURE__*/React.createElement(Flexbox, {
     flexDirection: "row",
     gap: "8px"
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     fontWeight: "700",
     fontSize: "14px"
-  }, dateFormatter(datum.data.key))), /*#__PURE__*/React__default.createElement("div", {
+  }, dateFormatter(datum.data.key))), /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%',
       height: '1px',
       backgroundColor: '#858585',
       margin: '8px 0'
     }
-  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+  }), /*#__PURE__*/React.createElement(Flexbox, {
     flexDirection: "row",
     gap: "8px"
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     fontWeight: "400",
     fontSize: "14px"
-  }, format('total')), /*#__PURE__*/React__default.createElement(Number$1, {
+  }, format('total')), /*#__PURE__*/React.createElement(Number$1, {
     fontWeight: "600",
     fontSize: "14px",
     value: (_groupedData$reduce = groupedData === null || groupedData === void 0 ? void 0 : groupedData.reduce((acc, d) => acc + d.value, 0)) !== null && _groupedData$reduce !== void 0 ? _groupedData$reduce : 0
-  })), categoriesWithValue.length > 0 ? /*#__PURE__*/React__default.createElement(Flexbox, {
+  })), categoriesWithValue.length > 0 ? /*#__PURE__*/React.createElement(Flexbox, {
     flexDirection: "column",
     gap: "8px",
     margin: "4px 0"
@@ -660,21 +658,21 @@ const BarChartGroupedTooltip = _ref => {
     var _groupedData$find2;
     const value = groupedData === null || groupedData === void 0 ? void 0 : (_groupedData$find2 = groupedData.find(d => d.category === category)) === null || _groupedData$find2 === void 0 ? void 0 : _groupedData$find2.value;
     const color = categoryColor(category);
-    return value ? /*#__PURE__*/React__default.createElement(Flexbox, {
+    return value ? /*#__PURE__*/React.createElement(Flexbox, {
       key: category,
       alignItems: "center",
       gap: "8px"
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
         width: '16px',
         height: '16px',
         backgroundColor: color
       }
-    }), /*#__PURE__*/React__default.createElement(Text, {
+    }), /*#__PURE__*/React.createElement(Text, {
       fontWeight: "400",
       fontSize: "14px",
       lineHeight: "18px"
-    }, categoryDecorator ? categoryDecorator(category) : category), /*#__PURE__*/React__default.createElement(Number$1, {
+    }, categoryDecorator ? categoryDecorator(category) : category), /*#__PURE__*/React.createElement(Number$1, {
       fontWeight: "600",
       fontSize: "14px",
       lineHeight: "18px",
@@ -694,7 +692,7 @@ const COMPONENT_TYPES = {
 };
 const getComponentPosition = child => {
   var _child$type;
-  if (! /*#__PURE__*/React__default.isValidElement(child)) return null;
+  if (! /*#__PURE__*/React.isValidElement(child)) return null;
   const displayName = (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName;
   if (COMPONENT_TYPES.AXES === displayName) return 'axes';
   if (COMPONENT_TYPES.SECTIONS === displayName) return 'sections';
@@ -768,15 +766,15 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       dateParser
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$3);
-  const cache = useRef();
+  const cache = useRef(undefined);
   const theme = useTheme();
   const format = useMessageFormatter(intlMessages);
   const hasCategory = propsData[0] && Array.isArray(propsData[0].key) && propsData[0].key.length >= 2 && propsData[0].key[1] !== null && propsData[0].key[1] !== undefined;
   const sections = useMemo(() => {
     const sectionList = [];
-    React__default.Children.forEach(children, child => {
+    React.Children.forEach(children, child => {
       if (isComponent('BarChartSection')(child)) {
-        const categories = React__default.Children.toArray(child.props.children).filter(c => isComponent('BarChartBars')(c)).map(c => c.props.category);
+        const categories = React.Children.toArray(child.props.children).filter(c => isComponent('BarChartBars')(c)).map(c => c.props.category);
         sectionList.push(categories);
       }
     });
@@ -789,7 +787,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     cache.current = data;
   });
-  const svgRef = useRef();
+  const svgRef = useRef(undefined);
   const xAxisVariant = propsXAxisVariant ? propsXAxisVariant : AxisVariant.tickValue;
   const yAxisVariant = propsYAxisVariant ? propsYAxisVariant : AxisVariant.default;
   const chartDimensions = sizeToDimension(size);
@@ -950,7 +948,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     let titleComponent;
     let descriptionComponent;
     const multipleScaleY = [];
-    React__default.Children.forEach(children, (child, index) => {
+    React.Children.forEach(children, (child, index) => {
       const position = getComponentPosition(child);
       if (isComponent('ChartContainerTitle')(child)) {
         titleComponent = child;
@@ -958,13 +956,13 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       if (isComponent('ChartContainerDescription')(child)) {
         descriptionComponent = child;
       }
-      if (!position || ! /*#__PURE__*/React__default.isValidElement(child)) return;
+      if (!position || ! /*#__PURE__*/React.isValidElement(child)) return;
       let enhancedChild = child;
       if (isComponent('BarChartSection')(child)) {
-        const categories = React__default.Children.toArray(child.props.children).filter(c => isComponent('BarChartBars')(c)).map(c => c.props.category);
+        const categories = React.Children.toArray(child.props.children).filter(c => isComponent('BarChartBars')(c)).map(c => c.props.category);
         const scaleY = getScaleY(child.props.direction || 'up', child.props.from, child.props.to, categories, child.props.title !== '');
         multipleScaleY.push(scaleY);
-        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+        enhancedChild = /*#__PURE__*/React.cloneElement(child, _objectSpread2({
           scaleX: scaleX,
           scaleY: scaleY,
           key: child.key || `section-${child.props.from}-${child.props.to}-${categories.join('-')}`
@@ -973,7 +971,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       if (isComponent('Axis')(child)) {
         var _ref10;
         const isX = getAxisType(child.props.position) === 'x';
-        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+        enhancedChild = /*#__PURE__*/React.cloneElement(child, _objectSpread2({
           key: child.key || `axis-${child.props.position}-${index}`,
           chartWidth,
           chartHeight,
@@ -992,14 +990,14 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
         }, child.props));
       }
       if (isComponent('BarChartOverlay')(child)) {
-        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+        enhancedChild = /*#__PURE__*/React.cloneElement(child, _objectSpread2({
           key: child.key || `overlay-${0}-${1}`,
           from: 0,
           to: 1
         }, child.props));
       }
       if (isComponent('Legend')(child)) {
-        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+        enhancedChild = /*#__PURE__*/React.cloneElement(child, _objectSpread2({
           key: child.key || `legend-${index}`,
           data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
             color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
@@ -1035,9 +1033,9 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       multipleScaleY
     };
   }, [children]);
-  return /*#__PURE__*/React__default.createElement(ChartTypeContext.Provider, {
+  return /*#__PURE__*/React.createElement(ChartTypeContext.Provider, {
     value: "bar"
-  }, /*#__PURE__*/React__default.createElement(BarChartContext.Provider, {
+  }, /*#__PURE__*/React.createElement(BarChartContext.Provider, {
     value: {
       barProps,
       barRole,
@@ -1079,7 +1077,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       yAxisTickRemodelling,
       yAxisVariant
     }
-  }, /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
+  }, /*#__PURE__*/React.createElement(StyledBarChart, _extends({
     mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? 'interactive' : 'static',
     definition: hasCategory ? format('definition-linear-with-categories', {
       categoryLength: categories.length,
@@ -1102,34 +1100,34 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       end: scaleY.domain()[1]
     }),
     dataTableRepresentation: hasCategory ? {
-      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+      header: /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         scope: "col"
-      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React.createElement("th", {
         key: category,
         scope: "col"
       }, category)))),
-      body: /*#__PURE__*/React__default.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React__default.createElement("tr", {
+      body: /*#__PURE__*/React.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React.createElement("tr", {
         key: row.key
-      }, /*#__PURE__*/React__default.createElement("th", {
+      }, /*#__PURE__*/React.createElement("th", {
         scope: "row"
-      }, row.key), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+      }, row.key), categories.map(category => /*#__PURE__*/React.createElement("th", {
         key: `${row.key}-${category}-${row[category]}`,
         scope: "col"
       }, row[category])))))
     } : {
-      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+      header: /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         scope: "col"
-      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React__default.createElement("th", {
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React.createElement("th", {
         scope: "col"
       }, "Value"))),
-      body: /*#__PURE__*/React__default.createElement("tbody", null, bars.map(datum => {
+      body: /*#__PURE__*/React.createElement("tbody", null, bars.map(datum => {
         let key = xAxisTickFormat ? xAxisTickFormat(datum.key) : datum.key.toString();
         key = Array.isArray(key) ? key.join(' ') : key;
-        return /*#__PURE__*/React__default.createElement("tr", {
+        return /*#__PURE__*/React.createElement("tr", {
           key: key
-        }, /*#__PURE__*/React__default.createElement("th", {
+        }, /*#__PURE__*/React.createElement("th", {
           scope: "row"
-        }, key), /*#__PURE__*/React__default.createElement("td", null, datum.value));
+        }, key), /*#__PURE__*/React.createElement("td", null, datum.value));
       }))
     },
     title: titleComponent,
@@ -1138,20 +1136,19 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     className: className,
     ref: ref
-  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+  }), /*#__PURE__*/React.createElement(Flexbox, {
     flexDirection: "column",
     alignItems: "center",
     gap: "8"
-  }, /*#__PURE__*/React__default.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     ref: svgRef,
     width: width,
     height: height,
-    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
-    "aria-hidden": "false"
-  }, axisComponents.length === 0 && sectionComponents.length === 0 ? /*#__PURE__*/React__default.createElement("g", {
+    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart')
+  }, axisComponents.length === 0 && sectionComponents.length === 0 ? /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`,
     "aria-hidden": "true"
-  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "bottom",
     length: chartWidth,
@@ -1165,7 +1162,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: xAxisTickFormat,
     tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
-  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "top",
     length: chartWidth,
@@ -1179,7 +1176,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: xAxisTickFormat,
     tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
-  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "left",
     length: chartHeight,
@@ -1193,7 +1190,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: yAxisTickFormat,
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
-  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "right",
     length: chartHeight,
@@ -1207,19 +1204,19 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: yAxisTickFormat,
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
-  }) : null) : /*#__PURE__*/React__default.createElement("g", {
+  }) : null) : /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`,
     "aria-hidden": "true"
-  }, axisComponents), sectionComponents, overlayComponents, barsComponents.length === 0 && sectionComponents.length === 0 ? /*#__PURE__*/React__default.createElement("g", {
+  }, axisComponents), sectionComponents, overlayComponents, barsComponents.length === 0 && sectionComponents.length === 0 ? /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`,
     "aria-hidden": "true"
-  }, (hasSections ? sections : [categories]).map(section => section.map(category => /*#__PURE__*/React__default.createElement(BarChartBars, {
+  }, (hasSections ? sections : [categories]).map(section => section.map(category => /*#__PURE__*/React.createElement(BarChartBars, {
     key: category,
     category: category
-  }))), ' ') : /*#__PURE__*/React__default.createElement("g", {
+  }))), ' ') : /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`,
     "aria-hidden": "true"
-  }, barsComponents))), legendComponents.length === 0 && hasCategory && legendVariant !== BarChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+  }, barsComponents))), legendComponents.length === 0 && hasCategory && legendVariant !== BarChartLegendVariant.none ? /*#__PURE__*/React.createElement(Legend, _extends({
     data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
@@ -1296,13 +1293,13 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
   const titleAnchor = titlePosition === 'center' ? 'middle' : titlePosition === 'right' ? 'end' : 'start';
   const children = useMemo(() => {
     const renderedChildren = [];
-    React__default.Children.forEach(propsChildren, child => {
-      if (! /*#__PURE__*/React__default.isValidElement(child)) return;
+    React.Children.forEach(propsChildren, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return;
       const isX = getAxisType(child.props.position) === 'x';
       let enhancedChild = child;
       if (isComponent('Axis')(child)) {
         var _ref;
-        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+        enhancedChild = /*#__PURE__*/React.cloneElement(child, _objectSpread2({
           key: child.key || `axis-${from}-${to}-${child.props.position}`,
           chartWidth,
           chartHeight,
@@ -1324,7 +1321,7 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
         }, child.props));
       }
       if (isComponent('BarChartOverlay')(child)) {
-        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+        enhancedChild = /*#__PURE__*/React.cloneElement(child, _objectSpread2({
           key: child.key || `overlay-${from}-${to}`,
           from,
           to
@@ -1334,7 +1331,7 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
     });
     return renderedChildren;
   }, [propsChildren]);
-  return /*#__PURE__*/React__default.createElement(BarChartContext.Provider, {
+  return /*#__PURE__*/React.createElement(BarChartContext.Provider, {
     value: _objectSpread2(_objectSpread2({}, context), {}, {
       scaleX: scaleX,
       scaleY: scaleY,
@@ -1342,13 +1339,13 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
       sectionHeight,
       regions
     })
-  }, /*#__PURE__*/React__default.createElement(StyledBarChartSection, _extends({}, forwardedProps, {
+  }, /*#__PURE__*/React.createElement(StyledBarChartSection, _extends({}, forwardedProps, {
     className: classNames(BarChartSection.className, className),
     transform: `translate(${margins.left},${(margins.top || 0) + sectionY})`,
     ref: ref,
     $theme: theme,
     $textColor: textColor
-  }), backgroundColor ? /*#__PURE__*/React__default.createElement("rect", {
+  }), backgroundColor ? /*#__PURE__*/React.createElement("rect", {
     x: 0,
     y: 0,
     width: chartWidth,
@@ -1371,7 +1368,7 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
     }
     const x = Math.min(regionFrom, regionTo);
     const width = Math.abs(regionTo - regionFrom);
-    return /*#__PURE__*/React__default.createElement("rect", {
+    return /*#__PURE__*/React.createElement("rect", {
       key: `region-${index}`,
       x: x,
       y: 0,
@@ -1380,7 +1377,7 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
       fill: region.backgroundColor || 'transparent',
       opacity: region.backgroundOpacity || 0.05
     });
-  }) : null, title && /*#__PURE__*/React__default.createElement("text", {
+  }) : null, title && /*#__PURE__*/React.createElement("text", {
     className: "title colored",
     x: titleX,
     y: direction === 'up' ? 8 : direction === 'down' ? sectionHeight - 8 : sectionHeight / 2,
@@ -1425,9 +1422,8 @@ const BarChartOverlay = /*#__PURE__*/forwardRef((props, ref) => {
   const sectionHeight = Math.max(0, Math.min(1, to - from)) * chartHeight;
   const sectionY = Math.max(0, Math.min(1, from)) * chartHeight;
   const constantY = scaleLinear().domain(scaleY.domain()).range([sectionHeight, sectionHeight]);
-  return /*#__PURE__*/React__default.createElement(StyledBarChartOverlay, _extends({
+  return /*#__PURE__*/React.createElement(StyledBarChartOverlay, _extends({
     key: `${id}-series-overlay`,
-    "aria-hidden": "false",
     role: "region"
   }, forwardedProps, {
     ref: ref,
@@ -1440,7 +1436,7 @@ const BarChartOverlay = /*#__PURE__*/forwardRef((props, ref) => {
     const groupedBars = bars.filter(b => {
       return xScaleType === 'Date' || xScaleType === 'dateString' ? b.key.getTime() === bar.key.getTime() : b.key === bar.key;
     });
-    return /*#__PURE__*/React__default.createElement(Bar, _extends({
+    return /*#__PURE__*/React.createElement(Bar, _extends({
       color: "transparent",
       data: {
         data: bar
@@ -1581,14 +1577,14 @@ const BaseBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : BarChartLegendVariant.externalLabel;
   if (propsData === undefined || propsData === null) {
-    return /*#__PURE__*/React__default.createElement(LoadingBarChart, _extends({
+    return /*#__PURE__*/React.createElement(LoadingBarChart, _extends({
       id: id
     }, forwardedProps, {
       ref: ref
     }));
   }
   if (propsData.length === 0) {
-    return /*#__PURE__*/React__default.createElement(EmptyBarChart, _extends({
+    return /*#__PURE__*/React.createElement(EmptyBarChart, _extends({
       data: propsData,
       emptyComponent: emptyComponent,
       id: id,
@@ -1600,7 +1596,7 @@ const BaseBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }
   const dataType = propsDataType ? propsDataType : Array.isArray(propsData[0].key) ? 'TwoCategoryData' : propsData[0].key instanceof Date ? 'LinearData' : typeof propsData[0].key === 'number' ? 'LinearData' : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key) ? 'LinearData' : typeof propsData[0].key === 'string' ? 'CategoryData' : 'CategoryData';
   if (dataType === 'CategoryData') {
-    return /*#__PURE__*/React__default.createElement(RenderedOrdinalBarChart, _extends({
+    return /*#__PURE__*/React.createElement(RenderedOrdinalBarChart, _extends({
       barProps: barProps,
       barRole: barRole,
       caping: caping,
@@ -1627,7 +1623,7 @@ const BaseBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       ref: ref
     }));
   } else if (dataType === 'LinearData' || dataType === 'TwoCategoryData') {
-    return /*#__PURE__*/React__default.createElement(RenderedLinearBarChart, _extends({
+    return /*#__PURE__*/React.createElement(RenderedLinearBarChart, _extends({
       barProps: barProps,
       barRole: barRole,
       chartRef: chartRef,