@sproutsocial/seeds-react-data-viz 0.14.0 → 0.16.0

package/dist/index.js

@@ -30,19 +30,7 @@
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-var _chunkVFBZ7FNKjs = require('./chunk-VFBZ7FNK.js');
+var _chunkEEVKTTT3js = require('./chunk-EEVKTTT3.js');
 
 // src/components/AreaChart/AreaChart.tsx
 var _react = require('react');
@@ -61,13 +49,13 @@ var getAreaChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: _optionalChain([series, 'access', _ => _.styles, 'optionalAccess', _2 => _2.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: _optionalChain([series, 'access', _2 => _2.styles, 'optionalAccess', _3 => _3.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var AreaChartLegend = _react.memo.call(void 0, 
   function AreaChartLegend2({ data }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
   }
 );
 
@@ -100,7 +88,7 @@ var AreaChartTooltip = _react.memo.call(void 0,
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
             content: value === null && invalidNumberLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -148,16 +136,16 @@ var AreaChartTooltip = _react.memo.call(void 0,
         isAppendedRow: true
       }
     ] : [];
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVFBZ7FNKjs.ChartTooltip, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkVFBZ7FNKjs.ChartTooltipTable,
+        _chunkEEVKTTT3js.ChartTooltipTable,
         {
           rows: [...rows, ...appendedRows]
         }
       ),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
@@ -189,13 +177,13 @@ var ChartXAnnotationMarkerPortal = _react.memo.call(void 0,
           (annotation) => annotation.setAttribute("data-annotation-marker", "false")
         );
         annotationContext.labels.forEach((label) => {
-          const labelElement = _optionalChain([label, 'access', _3 => _3.graphic, 'optionalAccess', _4 => _4.div]);
+          const labelElement = _optionalChain([label, 'access', _4 => _4.graphic, 'optionalAccess', _5 => _5.div]);
           if (labelElement) {
             labelElement.querySelectorAll("div[data-annotation-marker]").forEach((component) => component.remove());
             const annotationDiv = document.createElement("div");
             annotationDiv.setAttribute("data-annotation-marker", "true");
             labelElement.appendChild(annotationDiv);
-            const xValue = _optionalChain([label, 'access', _5 => _5.options, 'optionalAccess', _6 => _6.point, 'optionalAccess', _7 => _7.x]);
+            const xValue = _optionalChain([label, 'access', _6 => _6.options, 'optionalAccess', _7 => _7.point, 'optionalAccess', _8 => _8.x]);
             newContainers[xValue] = annotationDiv;
           }
         });
@@ -218,7 +206,7 @@ var ChartXAnnotationMarkerPortal = _react.memo.call(void 0,
     }, [annotationContext.labels, xAnnotations, chartContainer]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: Object.entries(annotationContainers.current).map(
       ([xValue, container]) => {
-        const annotationComponent = _optionalChain([xAnnotations, 'optionalAccess', _8 => _8[Number(xValue)], 'optionalAccess', _9 => _9.marker]);
+        const annotationComponent = _optionalChain([xAnnotations, 'optionalAccess', _9 => _9[Number(xValue)], 'optionalAccess', _10 => _10.marker]);
         return annotationComponent ? _reactdom.createPortal.call(void 0, annotationComponent(), container) : null;
       }
     ) });
@@ -227,7 +215,164 @@ var ChartXAnnotationMarkerPortal = _react.memo.call(void 0,
 
 // src/hooks/useTimeSeriesChartOptions.ts
 
-var _lodash = require('lodash');
+
+// src/constants/chartOptions.ts
+var _lodash = require('lodash'); var _lodash2 = _interopRequireDefault(_lodash);
+var baseChartOptions = {
+  chart: {
+    animation: false,
+    styledMode: true
+  },
+  credits: {
+    enabled: false
+  },
+  exporting: {
+    enabled: false,
+    fallbackToExportServer: false
+  },
+  legend: {
+    enabled: false
+  },
+  title: {
+    text: void 0
+  },
+  tooltip: {
+    hideDelay: 0,
+    outside: true,
+    padding: 0,
+    shape: "rect",
+    shared: true,
+    useHTML: true
+  }
+};
+var TIME_SERIES_CHART_HEIGHT = 275;
+var timeSeriesChartOptions = _lodash2.default.merge({}, baseChartOptions, {
+  annotations: [
+    {
+      draggable: "",
+      labelOptions: {
+        useHTML: true,
+        padding: 0
+        // removes "left" property padding created by highcharts so that label is centered
+      }
+    }
+  ],
+  chart: {
+    // events.click is set at the component level because of the optional onClick prop
+    height: TIME_SERIES_CHART_HEIGHT,
+    spacing: [5, 1, 0, 2]
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+      clip: false,
+      marker: {
+        enabled: false,
+        states: {
+          hover: {
+            enabled: false
+          }
+        }
+      }
+    }
+  },
+  xAxis: {
+    crosshair: {
+      zIndex: 3
+    },
+    minPadding: 0,
+    // must be handled dynamically instead of css
+    maxPadding: 0,
+    // must be handled dynamically instead of css
+    type: "datetime",
+    labels: {
+      useHTML: true
+      // formatter is set at the component level because of the required text locale prop
+    }
+  },
+  yAxis: {
+    labels: {
+      useHTML: true
+      // formatter is set at the component level because of the optional yAxisLabelFormatter prop
+    },
+    softMax: 0,
+    softMin: 0,
+    title: {
+      text: void 0
+    },
+    plotLines: [
+      /* Adds a custom plotLine at y=0 to represent the chart baseline.
+        This approach allows full control over the line's appearance (e.g., color, z-index),
+        unlike relying on the default xAxis line, which always renders at the bottom of the chart
+        even when y=0 appears elsewhere (e.g., with negative values).
+      */
+      {
+        className: "y-axis-zero-line",
+        value: 0,
+        zIndex: 3
+        // ensures the line appears over the default y=0 line, which we can't seleect as specifically
+      }
+    ]
+  }
+});
+var lineChartOptions = _lodash2.default.merge({}, timeSeriesChartOptions, {
+  // plotOptions.spline.events.click is set at the component level because of the optional onClick prop
+});
+var areaChartOptions = _lodash2.default.merge({}, timeSeriesChartOptions, {
+  plotOptions: {
+    areaspline: {
+      // events.click is set at the component level because of the optional onClick prop
+      stacking: "normal"
+    }
+  }
+});
+var columnChartOptions = _lodash2.default.merge({}, timeSeriesChartOptions, {
+  plotOptions: {
+    column: {
+      stacking: "normal",
+      pointPadding: 0.25,
+      groupPadding: 0.25,
+      borderRadius: 4
+    }
+  },
+  xAxis: {
+    crosshair: false
+  },
+  yAxis: {
+    plotLines: [
+      {
+        // For stacked column charts with visible borders (e.g., white for contrast),
+        // we raise the zIndex of the y=0 plotLine to ensure it remains visible
+        // and isn't visually covered by overlapping column borders.
+        zIndex: 5
+      }
+    ]
+  }
+});
+var VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
+var DONUT_CHART_HALO_SIZE = 10;
+var DONUT_CHART_HEIGHT = 250 + DONUT_CHART_HALO_SIZE * 2;
+var DONUT_CHART_WIDTH = DONUT_CHART_HEIGHT;
+var donutChartOptions = _lodash2.default.merge({}, baseChartOptions, {
+  chart: {
+    height: DONUT_CHART_HEIGHT,
+    spacing: [0, 0, 0, 0]
+  },
+  plotOptions: {
+    pie: {
+      animation: false,
+      borderRadius: 0,
+      // must be handled here instead of css because of path rendering
+      dataLabels: {
+        enabled: false
+      },
+      innerSize: "50%"
+    }
+  }
+});
+
+// src/hooks/useTimeSeriesChartOptions.ts
+
 var useTimeSeriesChartOptions = ({
   xAnnotations,
   data,
@@ -251,7 +396,7 @@ var useTimeSeriesChartOptions = ({
     const handleFocus = (point) => point.series.chart.tooltip.refresh(point);
     const handleBlur = (point) => point.series.chart.tooltip.hide(0);
     series.flatMap((item) => item.data).forEach((point) => {
-      const pointElement = _optionalChain([point, 'optionalAccess', _10 => _10.graphic, 'optionalAccess', _11 => _11.element]);
+      const pointElement = _optionalChain([point, 'optionalAccess', _11 => _11.graphic, 'optionalAccess', _12 => _12.element]);
       if (pointElement) {
         pointElement.setAttribute("aria-describedby", tooltipId);
         pointElement.addEventListener("focus", () => handleFocus(point));
@@ -278,20 +423,20 @@ var useTimeSeriesChartOptions = ({
   const getBaseChartOptions = (type) => {
     switch (type) {
       case "areaspline":
-        return _chunkVFBZ7FNKjs.areaChartOptions;
+        return areaChartOptions;
       case "spline":
-        return _chunkVFBZ7FNKjs.lineChartOptions;
+        return lineChartOptions;
       case "column":
-        return _chunkVFBZ7FNKjs.columnChartOptions;
+        return columnChartOptions;
       default:
-        return _chunkVFBZ7FNKjs.lineChartOptions;
+        return lineChartOptions;
     }
   };
   const baseChartOptions2 = getBaseChartOptions(seriesType);
   const hasCategoricalData = data.some(
     (series) => series.points.some((point) => typeof point.x === "string")
   );
-  const categories = hasCategoricalData ? _optionalChain([data, 'access', _12 => _12[0], 'optionalAccess', _13 => _13.points, 'access', _14 => _14.map, 'call', _15 => _15((point) => point.x)]) || [] : [];
+  const categories = hasCategoricalData ? _optionalChain([data, 'access', _13 => _13[0], 'optionalAccess', _14 => _14.points, 'access', _15 => _15.map, 'call', _16 => _16((point) => point.x)]) || [] : [];
   const hasSparseTimelineData = !hasCategoricalData && seriesType === "column";
   const options = _react.useMemo.call(void 0, () => {
     return _lodash.merge.call(void 0, {}, baseChartOptions2, {
@@ -311,10 +456,10 @@ var useTimeSeriesChartOptions = ({
         marginTop: chartMarginTop,
         events: {
           click: onClick ? function() {
-            return onClick({ x: _optionalChain([this, 'optionalAccess', _16 => _16.hoverPoint, 'optionalAccess', _17 => _17.x]) });
+            return onClick({ x: _optionalChain([this, 'optionalAccess', _17 => _17.hoverPoint, 'optionalAccess', _18 => _18.x]) });
           } : void 0,
           load: function() {
-            const tooltipId = _chunkVFBZ7FNKjs.generateChartTooltipPortalId.call(void 0, this.index);
+            const tooltipId = _chunkEEVKTTT3js.generateChartTooltipPortalId.call(void 0, this.index);
             attachTooltipEventListeners(this.series, tooltipId);
           }
         }
@@ -393,7 +538,7 @@ var useTimeSeriesChartOptions = ({
           }
         }
       },
-      series: _chunkVFBZ7FNKjs.transformDataToSeries.call(void 0, { data }, seriesType),
+      series: _chunkEEVKTTT3js.transformDataToSeries.call(void 0, { data }, seriesType),
       time: { timezone },
       tooltip: {
         enabled: !disableTooltips
@@ -405,7 +550,7 @@ var useTimeSeriesChartOptions = ({
               Number
             );
             const value = this.value;
-            const unitName = _optionalChain([this, 'access', _18 => _18.tickPositionInfo, 'optionalAccess', _19 => _19.unitName]);
+            const unitName = _optionalChain([this, 'access', _19 => _19.tickPositionInfo, 'optionalAccess', _20 => _20.unitName]);
             if (typeof xAxisLabelFormatter2 === "function") {
               return xAxisLabelFormatter2({
                 textLocale,
@@ -441,7 +586,7 @@ var useTimeSeriesChartOptions = ({
             return yAxisLabelFormatter2 ? yAxisLabelFormatter2({
               y: this.value,
               yValues: this.axis.tickPositions
-            }) : _chunkVFBZ7FNKjs.yAxisLabelFormatter.call(void 0, {
+            }) : _chunkEEVKTTT3js.yAxisLabelFormatter.call(void 0, {
               currency,
               numberFormat,
               numberLocale,
@@ -472,7 +617,7 @@ var useTimeSeriesChartOptions = ({
   ]);
   return { options, chart, callback };
 };
-var xAxisLabelFormatterDefault = _chunkVFBZ7FNKjs.xAxisLabelFormatter;
+var xAxisLabelFormatterDefault = _chunkEEVKTTT3js.xAxisLabelFormatter;
 
 // src/components/AreaChart/AreaChart.tsx
 
@@ -480,7 +625,7 @@ var xAxisLabelFormatterDefault = _chunkVFBZ7FNKjs.xAxisLabelFormatter;
 _accessibility2.default.call(void 0, _highcharts2.default);
 _annotations2.default.call(void 0, _highcharts2.default);
 var StyledBox = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
-  ${_chunkVFBZ7FNKjs.areaChartStyles}
+  ${_chunkEEVKTTT3js.areaChartStyles}
 `;
 var AreaChart = _react.memo.call(void 0, function AreaChart2(props) {
   const { data } = props;
@@ -520,10 +665,10 @@ var AreaChartWithData = _react.memo.call(void 0, function AreaChartWithData2({
     xAnnotations
   });
   const colors = data.map(
-    (series, index) => _nullishCoalesce(_optionalChain([series, 'access', _20 => _20.styles, 'optionalAccess', _21 => _21.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]))
+    (series, index) => _nullishCoalesce(_optionalChain([series, 'access', _21 => _21.styles, 'optionalAccess', _22 => _22.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]))
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       StyledBox,
       {
@@ -539,26 +684,26 @@ var AreaChartWithData = _react.memo.call(void 0, function AreaChartWithData2({
               callback
             }
           ),
-          chart && _optionalChain([chart, 'access', _22 => _22.annotations, 'optionalAccess', _23 => _23.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          chart && _optionalChain([chart, 'access', _23 => _23.annotations, 'optionalAccess', _24 => _24.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
-              annotationContext: _optionalChain([chart, 'access', _24 => _24.annotations, 'optionalAccess', _25 => _25[0]]),
+              annotationContext: _optionalChain([chart, 'access', _25 => _25.annotations, 'optionalAccess', _26 => _26[0]]),
               chartContainer: chart.container
             }
           ) : null,
           chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkVFBZ7FNKjs.ChartTooltipPortal,
+            _chunkEEVKTTT3js.ChartTooltipPortal,
             {
               chart,
               renderContent: (context) => {
-                const tooltipData = _chunkVFBZ7FNKjs.transformTimeSeriesTooltipData.call(void 0, {
+                const tooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData.call(void 0, {
                   context,
                   data
                 });
                 const x = context.x;
                 const total = context.total;
-                const xAnnotationDetails = _optionalChain([xAnnotations, 'optionalAccess', _26 => _26[x], 'optionalAccess', _27 => _27.details]);
+                const xAnnotationDetails = _optionalChain([xAnnotations, 'optionalAccess', _27 => _27[x], 'optionalAccess', _28 => _28.details]);
                 return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   AreaChartTooltip,
                   {
@@ -595,7 +740,7 @@ var AreaChartWithData = _react.memo.call(void 0, function AreaChartWithData2({
 
 var ChartXAnnotationDetails = _react.memo.call(void 0, 
   ({ iconName, text }) => {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: iconName, size: "mini", color: "icon.base" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.body", fontSize: 200, children: text })
     ] }) });
@@ -644,13 +789,13 @@ var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
-    color: _optionalChain([slice, 'access', _28 => _28.styles, 'optionalAccess', _29 => _29.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    color: _optionalChain([slice, 'access', _29 => _29.styles, 'optionalAccess', _30 => _30.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var DonutChartLegend = _react.memo.call(void 0, 
   function DonutChartLegend2({ data }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
@@ -680,7 +825,7 @@ var DonutChartTooltip = _react.memo.call(void 0,
       {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
             content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
@@ -709,9 +854,9 @@ var DonutChartTooltip = _react.memo.call(void 0,
         ]
       }
     ];
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVFBZ7FNKjs.ChartTooltip, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
@@ -727,8 +872,8 @@ var transformDonutChartTooltipData = ({
 }) => {
   const colorIndex = context.colorIndex;
   return {
-    color: _nullishCoalesce(_nullishCoalesce(_optionalChain([data, 'access', _30 => _30[colorIndex], 'optionalAccess', _31 => _31.styles, 'optionalAccess', _32 => _32.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[colorIndex])), () => ( "")),
-    ..._optionalChain([data, 'access', _33 => _33[colorIndex], 'optionalAccess', _34 => _34.icon]) ? { icon: _optionalChain([data, 'access', _35 => _35[colorIndex], 'optionalAccess', _36 => _36.icon]) } : {},
+    color: _nullishCoalesce(_nullishCoalesce(_optionalChain([data, 'access', _31 => _31[colorIndex], 'optionalAccess', _32 => _32.styles, 'optionalAccess', _33 => _33.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[colorIndex])), () => ( "")),
+    ..._optionalChain([data, 'access', _34 => _34[colorIndex], 'optionalAccess', _35 => _35.icon]) ? { icon: _optionalChain([data, 'access', _36 => _36[colorIndex], 'optionalAccess', _37 => _37.icon]) } : {},
     name: context.key,
     percent: context.percentage,
     value: context.y
@@ -740,7 +885,7 @@ var transformDonutChartTooltipData = ({
 
 _accessibility2.default.call(void 0, _highcharts2.default);
 var StyledBox2 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
-  ${_chunkVFBZ7FNKjs.donutChartStyles}
+  ${_chunkEEVKTTT3js.donutChartStyles}
 `;
 var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
   const { data } = props;
@@ -760,7 +905,7 @@ var DonutChartWithData = _react.memo.call(void 0,
     onClick,
     tooltipClickLabel
   }) {
-    const [options, setOptions] = _react.useState.call(void 0, _chunkVFBZ7FNKjs.donutChartOptions);
+    const [options, setOptions] = _react.useState.call(void 0, donutChartOptions);
     const [chart, setChart] = _react.useState.call(void 0, null);
     const callback = _react.useCallback.call(void 0, (chartInstance) => {
       setChart(chartInstance);
@@ -777,15 +922,15 @@ var DonutChartWithData = _react.memo.call(void 0,
         chart: {
           events: {
             render: function() {
-              const allSlices = _nullishCoalesce(_optionalChain([this, 'access', _37 => _37.series, 'access', _38 => _38[0], 'optionalAccess', _39 => _39.data]), () => ( []));
-              const tooltipId = _chunkVFBZ7FNKjs.generateChartTooltipPortalId.call(void 0, this.index);
+              const allSlices = _nullishCoalesce(_optionalChain([this, 'access', _38 => _38.series, 'access', _39 => _39[0], 'optionalAccess', _40 => _40.data]), () => ( []));
+              const tooltipId = _chunkEEVKTTT3js.generateChartTooltipPortalId.call(void 0, this.index);
               allSlices.forEach((slice) => {
-                const sliceElement = _optionalChain([slice, 'optionalAccess', _40 => _40.graphic, 'optionalAccess', _41 => _41.element]);
-                _optionalChain([sliceElement, 'optionalAccess', _42 => _42.setAttribute, 'call', _43 => _43("aria-describedby", tooltipId)]);
-                _optionalChain([sliceElement, 'optionalAccess', _44 => _44.addEventListener, 'call', _45 => _45("focus", () => {
+                const sliceElement = _optionalChain([slice, 'optionalAccess', _41 => _41.graphic, 'optionalAccess', _42 => _42.element]);
+                _optionalChain([sliceElement, 'optionalAccess', _43 => _43.setAttribute, 'call', _44 => _44("aria-describedby", tooltipId)]);
+                _optionalChain([sliceElement, 'optionalAccess', _45 => _45.addEventListener, 'call', _46 => _46("focus", () => {
                   slice.series.chart.tooltip.refresh(slice);
                 })]);
-                _optionalChain([sliceElement, 'optionalAccess', _46 => _46.addEventListener, 'call', _47 => _47("blur", () => {
+                _optionalChain([sliceElement, 'optionalAccess', _47 => _47.addEventListener, 'call', _48 => _48("blur", () => {
                   slice.series.chart.tooltip.hide(0);
                 })]);
               });
@@ -815,10 +960,10 @@ var DonutChartWithData = _react.memo.call(void 0,
       });
     }, [data]);
     const colors = data.map(
-      (series, index) => _nullishCoalesce(_nullishCoalesce(_optionalChain([series, 'access', _48 => _48.styles, 'optionalAccess', _49 => _49.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
+      (series, index) => _nullishCoalesce(_nullishCoalesce(_optionalChain([series, 'access', _49 => _49.styles, 'optionalAccess', _50 => _50.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
     );
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         StyledBox2,
         {
@@ -835,7 +980,7 @@ var DonutChartWithData = _react.memo.call(void 0,
               }
             ),
             chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkVFBZ7FNKjs.ChartTooltipPortal,
+              _chunkEEVKTTT3js.ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
@@ -891,11 +1036,11 @@ var DonutChartLegendTable = _react.memo.call(void 0,
     );
     const rows = data.map((dataPoint, index) => {
       const { name, icon, styles, value } = dataPoint;
-      const color = _optionalChain([styles, 'optionalAccess', _50 => _50.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index];
+      const color = _optionalChain([styles, 'optionalAccess', _51 => _51.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index];
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
             content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
@@ -948,7 +1093,7 @@ var DonutChartLegendTable = _react.memo.call(void 0,
       }
     ];
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkVFBZ7FNKjs.ChartTable,
+      _chunkEEVKTTT3js.ChartTable,
       {
         rows: [...rows, ...totalRow]
       }
@@ -973,13 +1118,13 @@ var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: _optionalChain([series, 'access', _51 => _51.styles, 'optionalAccess', _52 => _52.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: _optionalChain([series, 'access', _52 => _52.styles, 'optionalAccess', _53 => _53.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var LineChartLegend = _react.memo.call(void 0, 
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
@@ -1010,7 +1155,7 @@ var LineChartTooltip = _react.memo.call(void 0,
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
             content: value === null && invalidNumberLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1028,11 +1173,11 @@ var LineChartTooltip = _react.memo.call(void 0,
         ]
       };
     });
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVFBZ7FNKjs.ChartTooltip, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
@@ -1046,7 +1191,7 @@ var LineChartTooltip = _react.memo.call(void 0,
 _accessibility2.default.call(void 0, _highcharts2.default);
 _annotations2.default.call(void 0, _highcharts2.default);
 var StyledBox3 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
-  ${_chunkVFBZ7FNKjs.lineChartStyles}
+  ${_chunkEEVKTTT3js.lineChartStyles}
 `;
 var LineChart = _react.memo.call(void 0, function LineChart2(props) {
   const { data } = props;
@@ -1089,9 +1234,9 @@ var LineChartWithData = _react.memo.call(void 0, function LineChartWithData2({
   const { colors, patterns } = data.reduce(
     (acc, item, index) => {
       acc.colors.push(
-        _nullishCoalesce(_nullishCoalesce(_optionalChain([item, 'access', _53 => _53.styles, 'optionalAccess', _54 => _54.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
+        _nullishCoalesce(_nullishCoalesce(_optionalChain([item, 'access', _54 => _54.styles, 'optionalAccess', _55 => _55.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
       );
-      acc.patterns.push(_nullishCoalesce(_optionalChain([item, 'access', _55 => _55.styles, 'optionalAccess', _56 => _56.pattern]), () => ( "solid")));
+      acc.patterns.push(_nullishCoalesce(_optionalChain([item, 'access', _56 => _56.styles, 'optionalAccess', _57 => _57.pattern]), () => ( "solid")));
       return acc;
     },
     {
@@ -1100,7 +1245,7 @@ var LineChartWithData = _react.memo.call(void 0, function LineChartWithData2({
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       StyledBox3,
       {
@@ -1117,25 +1262,25 @@ var LineChartWithData = _react.memo.call(void 0, function LineChartWithData2({
               callback
             }
           ),
-          chart && _optionalChain([chart, 'access', _57 => _57.annotations, 'optionalAccess', _58 => _58.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          chart && _optionalChain([chart, 'access', _58 => _58.annotations, 'optionalAccess', _59 => _59.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
-              annotationContext: _optionalChain([chart, 'access', _59 => _59.annotations, 'optionalAccess', _60 => _60[0]]),
+              annotationContext: _optionalChain([chart, 'access', _60 => _60.annotations, 'optionalAccess', _61 => _61[0]]),
               chartContainer: chart.container
             }
           ) : null,
           chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkVFBZ7FNKjs.ChartTooltipPortal,
+            _chunkEEVKTTT3js.ChartTooltipPortal,
             {
               chart,
               renderContent: (context) => {
-                const tooltipData = _chunkVFBZ7FNKjs.transformTimeSeriesTooltipData.call(void 0, {
+                const tooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData.call(void 0, {
                   context,
                   data
                 });
                 const x = context.x;
-                const xAnnotationDetails = _optionalChain([xAnnotations, 'optionalAccess', _61 => _61[x], 'optionalAccess', _62 => _62.details]);
+                const xAnnotationDetails = _optionalChain([xAnnotations, 'optionalAccess', _62 => _62[x], 'optionalAccess', _63 => _63.details]);
                 return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   LineChartTooltip,
                   {
@@ -1179,13 +1324,13 @@ var getVerticalBarChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: _optionalChain([series, 'access', _63 => _63.styles, 'optionalAccess', _64 => _64.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: _optionalChain([series, 'access', _64 => _64.styles, 'optionalAccess', _65 => _65.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var VerticalBarChartLegend = _react.memo.call(void 0, 
   function VerticalbarChartLegend({ data }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
   }
 );
 
@@ -1216,7 +1361,7 @@ var VerticalBarChartTooltip = _react.memo.call(void 0,
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
             content: value === null && invalidNumberLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1234,11 +1379,11 @@ var VerticalBarChartTooltip = _react.memo.call(void 0,
         ]
       };
     });
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVFBZ7FNKjs.ChartTooltip, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
@@ -1249,15 +1394,36 @@ var VerticalBarChartTooltip = _react.memo.call(void 0,
 // src/components/VerticalBarChart/VerticalBarChart.tsx
 
 
+// src/components/VerticalBarChart/styles.ts
+
+var verticalBarChartStyles = _styledcomponents.css`
+  ${_chunkEEVKTTT3js.timeSeriesChartStyles}
+
+  /*
+    When the chart container is hovered, reduce the opacity of all columns.
+    Then, for the column that is being hovered, restore its opacity.
+    This gives the effect of fading out the non-hovered columns.
+  */
+  .highcharts-container:hover .highcharts-point {
+    fill-opacity: 0.3;
+  }
+
+  .highcharts-point.column-hover {
+    fill-opacity: 1 !important;
+  }
+`;
+
+// src/components/VerticalBarChart/VerticalBarChart.tsx
+
 _accessibility2.default.call(void 0, _highcharts2.default);
 _annotations2.default.call(void 0, _highcharts2.default);
 var StyledBox4 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
-  ${_chunkVFBZ7FNKjs.verticalBarChartStyles}
+  ${verticalBarChartStyles}
 `;
 var VerticalBarChart = _react.memo.call(void 0, 
   function VerticalBarChart2(props) {
     const { data, showSeriesLimitWarning = true } = props;
-    const seriesLimit = _nullishCoalesce(props.seriesLimit, () => ( _chunkVFBZ7FNKjs.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT));
+    const seriesLimit = _nullishCoalesce(props.seriesLimit, () => ( VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT));
     const isSeriesLimitOverridden = props.seriesLimit !== void 0;
     if (data.length === 0) {
       return null;
@@ -1292,7 +1458,7 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
     xAnnotations,
     xAxisLabelFormatter: xAxisLabelFormatter2
   }) {
-    const shouldUseTimeFormatter = _chunkVFBZ7FNKjs.isHourlyTimeData.call(void 0, data) || _chunkVFBZ7FNKjs.isCategoricalHourData.call(void 0, data);
+    const shouldUseTimeFormatter = _chunkEEVKTTT3js.isHourlyTimeData.call(void 0, data) || _chunkEEVKTTT3js.isCategoricalHourData.call(void 0, data);
     const autoTimeXAxisLabelFormatter = ({
       value,
       timeFormat: timeFormat2
@@ -1348,9 +1514,9 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
     const { colors, patterns } = data.reduce(
       (acc, item, index) => {
         acc.colors.push(
-          _nullishCoalesce(_nullishCoalesce(_optionalChain([item, 'access', _65 => _65.styles, 'optionalAccess', _66 => _66.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
+          _nullishCoalesce(_nullishCoalesce(_optionalChain([item, 'access', _66 => _66.styles, 'optionalAccess', _67 => _67.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
         );
-        acc.patterns.push(_nullishCoalesce(_optionalChain([item, 'access', _67 => _67.styles, 'optionalAccess', _68 => _68.pattern]), () => ( "solid")));
+        acc.patterns.push(_nullishCoalesce(_optionalChain([item, 'access', _68 => _68.styles, 'optionalAccess', _69 => _69.pattern]), () => ( "solid")));
         return acc;
       },
       {
@@ -1359,7 +1525,7 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
       }
     );
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVFBZ7FNKjs.GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         StyledBox4,
         {
@@ -1375,25 +1541,25 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
                 callback
               }
             ),
-            chart && _optionalChain([chart, 'access', _69 => _69.annotations, 'optionalAccess', _70 => _70.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            chart && _optionalChain([chart, 'access', _70 => _70.annotations, 'optionalAccess', _71 => _71.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               ChartXAnnotationMarkerPortal,
               {
                 xAnnotations,
-                annotationContext: _optionalChain([chart, 'access', _71 => _71.annotations, 'optionalAccess', _72 => _72[0]]),
+                annotationContext: _optionalChain([chart, 'access', _72 => _72.annotations, 'optionalAccess', _73 => _73[0]]),
                 chartContainer: chart.container
               }
             ) : null,
             chart ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkVFBZ7FNKjs.ChartTooltipPortal,
+              _chunkEEVKTTT3js.ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
-                  const tooltipData = _chunkVFBZ7FNKjs.transformTimeSeriesTooltipData.call(void 0, {
+                  const tooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData.call(void 0, {
                     context,
                     data
                   });
                   const x = context.x;
-                  const xAnnotationDetails = typeof x === "number" ? _optionalChain([xAnnotations, 'optionalAccess', _73 => _73[x], 'optionalAccess', _74 => _74.details]) : void 0;
+                  const xAnnotationDetails = typeof x === "number" ? _optionalChain([xAnnotations, 'optionalAccess', _74 => _74[x], 'optionalAccess', _75 => _75.details]) : void 0;
                   return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     VerticalBarChartTooltip,
                     {
@@ -1469,5 +1635,5 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
 
 
 
-exports.AreaChart = AreaChart; exports.ChartLegend = _chunkVFBZ7FNKjs.ChartLegend; exports.ChartLegendLabel = _chunkVFBZ7FNKjs.ChartLegendLabel; exports.ChartTable = _chunkVFBZ7FNKjs.ChartTable; exports.ChartTooltip = _chunkVFBZ7FNKjs.ChartTooltip; exports.ChartTooltipFooter = _chunkVFBZ7FNKjs.ChartTooltipFooter; exports.ChartTooltipHeader = _chunkVFBZ7FNKjs.ChartTooltipHeader; exports.ChartTooltipPortal = _chunkVFBZ7FNKjs.ChartTooltipPortal; exports.ChartTooltipTable = _chunkVFBZ7FNKjs.ChartTooltipTable; exports.ChartTooltipTitle = _chunkVFBZ7FNKjs.ChartTooltipTitle; exports.ChartXAnnotationDetails = ChartXAnnotationDetails; exports.ChartXAnnotationMarker = ChartXAnnotationMarker; exports.ColorBox = _chunkVFBZ7FNKjs.ColorBox; exports.DONUT_CHART_HALO_SIZE = _chunkVFBZ7FNKjs.DONUT_CHART_HALO_SIZE; exports.DONUT_CHART_HEIGHT = _chunkVFBZ7FNKjs.DONUT_CHART_HEIGHT; exports.DONUT_CHART_WIDTH = _chunkVFBZ7FNKjs.DONUT_CHART_WIDTH; exports.DatavizColorBox = _chunkVFBZ7FNKjs.DatavizColorBox; exports.DonutChart = DonutChart; exports.DonutChartLegendTable = DonutChartLegendTable; exports.GlobalChartStyleOverrides = _chunkVFBZ7FNKjs.GlobalChartStyleOverrides; exports.LineChart = LineChart; exports.NetworkColorBox = _chunkVFBZ7FNKjs.NetworkColorBox; exports.TIME_SERIES_CHART_HEIGHT = _chunkVFBZ7FNKjs.TIME_SERIES_CHART_HEIGHT; exports.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = _chunkVFBZ7FNKjs.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT; exports.VerticalBarChart = VerticalBarChart; exports.areaChartOptions = _chunkVFBZ7FNKjs.areaChartOptions; exports.areaChartStyles = _chunkVFBZ7FNKjs.areaChartStyles; exports.baseChartOptions = _chunkVFBZ7FNKjs.baseChartOptions; exports.baseChartStyles = _chunkVFBZ7FNKjs.baseChartStyles; exports.columnChartOptions = _chunkVFBZ7FNKjs.columnChartOptions; exports.donutChartOptions = _chunkVFBZ7FNKjs.donutChartOptions; exports.donutChartStyles = _chunkVFBZ7FNKjs.donutChartStyles; exports.generateChartTooltipPortalId = _chunkVFBZ7FNKjs.generateChartTooltipPortalId; exports.getDatavizColor = _chunkVFBZ7FNKjs.getDatavizColor; exports.getDatavizColorWithAlpha = _chunkVFBZ7FNKjs.getDatavizColorWithAlpha; exports.getDatavizOpacity = _chunkVFBZ7FNKjs.getDatavizOpacity; exports.getStorybookCategoricalData = _chunkVFBZ7FNKjs.getStorybookCategoricalData; exports.getStorybookSparseTimelineData = _chunkVFBZ7FNKjs.getStorybookSparseTimelineData; exports.isCategoricalHourData = _chunkVFBZ7FNKjs.isCategoricalHourData; exports.isHourlyTimeData = _chunkVFBZ7FNKjs.isHourlyTimeData; exports.lineChartOptions = _chunkVFBZ7FNKjs.lineChartOptions; exports.lineChartStyles = _chunkVFBZ7FNKjs.lineChartStyles; exports.timeSeriesChartOptions = _chunkVFBZ7FNKjs.timeSeriesChartOptions; exports.timeSeriesChartStyles = _chunkVFBZ7FNKjs.timeSeriesChartStyles; exports.transformDataToSeries = _chunkVFBZ7FNKjs.transformDataToSeries; exports.transformTimeSeriesTooltipData = _chunkVFBZ7FNKjs.transformTimeSeriesTooltipData; exports.xAxisLabelFormatter = _chunkVFBZ7FNKjs.xAxisLabelFormatter; exports.yAxisLabelFormatter = _chunkVFBZ7FNKjs.yAxisLabelFormatter;
+exports.AreaChart = AreaChart; exports.ChartLegend = _chunkEEVKTTT3js.ChartLegend; exports.ChartLegendLabel = _chunkEEVKTTT3js.ChartLegendLabel; exports.ChartTable = _chunkEEVKTTT3js.ChartTable; exports.ChartTooltip = _chunkEEVKTTT3js.ChartTooltip; exports.ChartTooltipFooter = _chunkEEVKTTT3js.ChartTooltipFooter; exports.ChartTooltipHeader = _chunkEEVKTTT3js.ChartTooltipHeader; exports.ChartTooltipPortal = _chunkEEVKTTT3js.ChartTooltipPortal; exports.ChartTooltipTable = _chunkEEVKTTT3js.ChartTooltipTable; exports.ChartTooltipTitle = _chunkEEVKTTT3js.ChartTooltipTitle; exports.ChartXAnnotationDetails = ChartXAnnotationDetails; exports.ChartXAnnotationMarker = ChartXAnnotationMarker; exports.ColorBox = _chunkEEVKTTT3js.ColorBox; exports.DONUT_CHART_HALO_SIZE = DONUT_CHART_HALO_SIZE; exports.DONUT_CHART_HEIGHT = DONUT_CHART_HEIGHT; exports.DONUT_CHART_WIDTH = DONUT_CHART_WIDTH; exports.DatavizColorBox = _chunkEEVKTTT3js.DatavizColorBox; exports.DonutChart = DonutChart; exports.DonutChartLegendTable = DonutChartLegendTable; exports.GlobalChartStyleOverrides = _chunkEEVKTTT3js.GlobalChartStyleOverrides; exports.LineChart = LineChart; exports.NetworkColorBox = _chunkEEVKTTT3js.NetworkColorBox; exports.TIME_SERIES_CHART_HEIGHT = TIME_SERIES_CHART_HEIGHT; exports.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT; exports.VerticalBarChart = VerticalBarChart; exports.areaChartOptions = areaChartOptions; exports.areaChartStyles = _chunkEEVKTTT3js.areaChartStyles; exports.baseChartOptions = baseChartOptions; exports.baseChartStyles = _chunkEEVKTTT3js.baseChartStyles; exports.columnChartOptions = columnChartOptions; exports.donutChartOptions = donutChartOptions; exports.donutChartStyles = _chunkEEVKTTT3js.donutChartStyles; exports.generateChartTooltipPortalId = _chunkEEVKTTT3js.generateChartTooltipPortalId; exports.getDatavizColor = _chunkEEVKTTT3js.getDatavizColor; exports.getDatavizColorWithAlpha = _chunkEEVKTTT3js.getDatavizColorWithAlpha; exports.getDatavizOpacity = _chunkEEVKTTT3js.getDatavizOpacity; exports.getStorybookCategoricalData = _chunkEEVKTTT3js.getStorybookCategoricalData; exports.getStorybookSparseTimelineData = _chunkEEVKTTT3js.getStorybookSparseTimelineData; exports.isCategoricalHourData = _chunkEEVKTTT3js.isCategoricalHourData; exports.isHourlyTimeData = _chunkEEVKTTT3js.isHourlyTimeData; exports.lineChartOptions = lineChartOptions; exports.lineChartStyles = _chunkEEVKTTT3js.lineChartStyles; exports.timeSeriesChartOptions = timeSeriesChartOptions; exports.timeSeriesChartStyles = _chunkEEVKTTT3js.timeSeriesChartStyles; exports.transformDataToSeries = _chunkEEVKTTT3js.transformDataToSeries; exports.transformTimeSeriesTooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData; exports.xAxisLabelFormatter = _chunkEEVKTTT3js.xAxisLabelFormatter; exports.yAxisLabelFormatter = _chunkEEVKTTT3js.yAxisLabelFormatter;
 //# sourceMappingURL=index.js.map