@sproutsocial/seeds-react-data-viz 0.18.0 → 0.20.0

package/dist/index.js

@@ -31,19 +31,7 @@ var _chunkCYQXUAJCjs = require('./chunk-CYQXUAJC.js');
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-var _chunkWEKDYQ4Tjs = require('./chunk-WEKDYQ4T.js');
+var _chunk46L4YBLCjs = require('./chunk-46L4YBLC.js');
 
 // src/components/AreaChart/AreaChart.tsx
 var _react = require('react');
@@ -57,18 +45,56 @@ var _seedsreactbox = require('@sproutsocial/seeds-react-box');
 // src/components/AreaChart/components/AreaChartLegend.tsx
 
 var _seedsreacttheme = require('@sproutsocial/seeds-react-theme');
+
+// src/components/ColorBox/DatavizColorBox.tsx
+
+
+var DatavizColorBox = _styledcomponents2.default.call(void 0, _chunk46L4YBLCjs.ColorBox).attrs(
+  ({ colorIndex }) => ({
+    style: {
+      background: getDatavizColor(colorIndex),
+      opacity: getDatavizOpacity(colorIndex)
+    }
+  })
+)``;
+var getDatavizColor = (colorIndex) => _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[colorIndex % _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST.length] || "";
+var getDatavizOpacity = (colorIndex) => {
+  const opacitySteps = [1, 0.6, 0.4, 0.2];
+  const opacityStep = Math.floor(colorIndex / _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST.length) % opacitySteps.length;
+  return opacitySteps[opacityStep];
+};
+var getDatavizColorWithAlpha = (colorIndex) => {
+  const color = getDatavizColor(colorIndex);
+  const opacity = getDatavizOpacity(colorIndex);
+  if (opacity < 0 || opacity > 1) {
+    return color;
+  }
+  return `${color}${Math.floor(opacity * 255).toString(16).padStart(2, "0")}`;
+};
+
+// src/components/ColorBox/NetworkColorBox.tsx
+var _seedsnetworkcolor = require('@sproutsocial/seeds-networkcolor'); var _seedsnetworkcolor2 = _interopRequireDefault(_seedsnetworkcolor);
 var _jsxruntime = require('react/jsx-runtime');
+var NetworkColorBox = ({
+  networkColor,
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ColorBox, { ...props, bg: _seedsnetworkcolor2.default[networkColor] });
+};
+
+// src/components/AreaChart/components/AreaChartLegend.tsx
+
 var getAreaChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
     color: _optionalChain([series, 'access', _ => _.styles, 'optionalAccess', _2 => _2.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, _chunkWEKDYQ4Tjs.ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
   }
 );
 
@@ -101,7 +127,7 @@ var AreaChartTooltip = _react.memo.call(void 0,
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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, 
@@ -149,16 +175,16 @@ var AreaChartTooltip = _react.memo.call(void 0,
         isAppendedRow: true
       }
     ] : [];
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltip, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk46L4YBLCjs.ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkWEKDYQ4Tjs.ChartTooltipTable,
+        _chunk46L4YBLCjs.ChartTooltipTable,
         {
           rows: [...rows, ...appendedRows]
         }
       ),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.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, _chunk46L4YBLCjs.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
@@ -226,6 +252,382 @@ var ChartXAnnotationMarkerPortal = _react.memo.call(void 0,
   }
 );
 
+// src/helpers/transformDataToSeries.ts
+var transformDataToSeries = ({
+  data
+}, type) => {
+  const hasCategoricalData = data.some(
+    (series) => series.points.some((point) => typeof point.x === "string")
+  );
+  return data.map((dataItem, dataIndex) => {
+    const points = dataItem.points || [];
+    const dataPoints = points.map((point, pointsIndex) => {
+      let enableMarker = false;
+      const isFirstPoint = pointsIndex === 0;
+      const isLastPoint = pointsIndex === points.length - 1;
+      const previousY = isFirstPoint ? null : points[pointsIndex - 1].y;
+      const nextY = isLastPoint ? null : points[pointsIndex + 1].y;
+      if (isFirstPoint && nextY === null) {
+        enableMarker = true;
+      } else if (isLastPoint && previousY === null) {
+        enableMarker = true;
+      } else if (previousY === null && nextY === null) {
+        enableMarker = true;
+      }
+      return {
+        x: hasCategoricalData ? pointsIndex : point.x,
+        y: point.y,
+        marker: {
+          enabled: enableMarker ? enableMarker : void 0,
+          symbol: enableMarker ? "circle" : void 0
+        },
+        // For categorical data, store the original category name
+        ...hasCategoricalData && { name: point.x }
+      };
+    });
+    return {
+      colorIndex: dataIndex,
+      data: dataPoints,
+      name: dataItem.name,
+      type
+    };
+  });
+};
+
+// src/helpers/yAxisLabelFormatter.ts
+
+
+var yAxisLabelFormatter = ({
+  numberLocale,
+  textLocale,
+  tickPositions,
+  value,
+  currency = "USD",
+  numberFormat = "decimal"
+}) => {
+  const numberValue = Number(value);
+  if (numberValue === 0) {
+    return _seedsreactnumeral.formatNumeral.call(void 0, {
+      locale: numberLocale,
+      number: numberValue
+    });
+  }
+  if (numberFormat === "duration") {
+    return _seedsreactduration.formatDuration.call(void 0, {
+      display: "narrow",
+      locale: textLocale,
+      milliseconds: numberValue
+    });
+  }
+  const maxValue = tickPositions && tickPositions.length > 0 ? tickPositions[tickPositions.length - 1] : void 0;
+  const abbreviate = typeof maxValue === "number" && maxValue > 9999 ? 1e3 : true;
+  return _seedsreactnumeral.formatNumeral.call(void 0, {
+    abbreviate,
+    currency,
+    format: numberFormat,
+    locale: numberLocale,
+    number: numberValue
+  });
+};
+
+// src/helpers/xAxisLabelFormatter.ts
+var getDatePartsInTimezone = (date, timezone) => {
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    timeZone: timezone
+  });
+  const parts = formatter.formatToParts(date);
+  return {
+    day: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _10 => _10.find, 'call', _11 => _11((p) => p.type === "day"), 'optionalAccess', _12 => _12.value]), () => ( "0")), 10),
+    month: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _13 => _13.find, 'call', _14 => _14((p) => p.type === "month"), 'optionalAccess', _15 => _15.value]), () => ( "0")), 10),
+    year: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _16 => _16.find, 'call', _17 => _17((p) => p.type === "year"), 'optionalAccess', _18 => _18.value]), () => ( "0")), 10)
+  };
+};
+var xAxisLabelFormatter = ({
+  textLocale,
+  tickPositions = [],
+  unitName,
+  value,
+  // optional
+  timeFormat = "12",
+  timezone = "UTC"
+}) => {
+  if (typeof value === "string") {
+    return `<span>${value}</span>`;
+  }
+  const tickIndex = tickPositions.indexOf(value);
+  const isFirst = tickIndex === 0;
+  const previousValue = tickPositions[tickIndex - 1];
+  const valueDate = new Date(value);
+  const valueParts = getDatePartsInTimezone(valueDate, timezone);
+  const previousValueDate = previousValue ? new Date(previousValue) : void 0;
+  const previousValueParts = previousValueDate ? getDatePartsInTimezone(previousValueDate, timezone) : void 0;
+  let firstPartOptions = {};
+  let secondPartOptions = {};
+  switch (unitName) {
+    case "hour":
+      firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
+      if (isFirst || valueParts.day !== _optionalChain([previousValueParts, 'optionalAccess', _19 => _19.day])) {
+        secondPartOptions = { day: "numeric", month: "short" };
+      }
+      break;
+    case "day":
+    case "week":
+      firstPartOptions = { day: "numeric" };
+      if (isFirst || valueParts.month !== _optionalChain([previousValueParts, 'optionalAccess', _20 => _20.month])) {
+        secondPartOptions = { month: "short" };
+      }
+      break;
+    case "month":
+      firstPartOptions = { month: "short" };
+      if (isFirst || valueParts.year !== _optionalChain([previousValueParts, 'optionalAccess', _21 => _21.year])) {
+        secondPartOptions = { year: "numeric" };
+      }
+      break;
+    case "year":
+      firstPartOptions = { year: "numeric" };
+      break;
+    default:
+      firstPartOptions = {};
+      break;
+  }
+  const firstPart = new Intl.DateTimeFormat(textLocale, {
+    ...firstPartOptions,
+    timeZone: timezone
+  }).format(valueDate);
+  const secondPart = Object.keys(secondPartOptions).length > 0 ? new Intl.DateTimeFormat(textLocale, {
+    ...secondPartOptions,
+    timeZone: timezone
+  }).format(valueDate) : void 0;
+  return `<span>${firstPart}</span>${secondPart ? `<span>${secondPart}</span>` : ""}`;
+};
+
+// src/helpers/isHourlyTimeData.ts
+function isHourlyTimeData(data) {
+  if (!data.length) return false;
+  const xVals = data.flatMap((series) => series.points.map((p) => p.x));
+  if (!xVals.length) return false;
+  if (xVals.some((x) => typeof x === "string")) return false;
+  const dates = xVals.map((x) => {
+    const d = new Date(x);
+    return `${d.getUTCFullYear()}-${d.getUTCMonth()}-${d.getUTCDate()}`;
+  });
+  const uniqueDates = new Set(dates);
+  if (uniqueDates.size !== 1) return false;
+  return xVals.every((x) => {
+    const d = new Date(x);
+    const hour = d.getUTCHours();
+    const minutes = d.getUTCMinutes();
+    const seconds = d.getUTCSeconds();
+    return hour >= 0 && hour <= 23 && minutes === 0 && seconds === 0;
+  });
+}
+
+// src/helpers/isCategoricalHourData.ts
+function isCategoricalHourData(data) {
+  if (!data.length) return false;
+  const xVals = data.flatMap((series) => series.points.map((p) => p.x));
+  if (!xVals.length) return false;
+  if (xVals.some((x) => typeof x !== "string")) return false;
+  const hour12Pattern = /^\d{1,2} (AM|PM)$/;
+  const hour24Pattern = /^([01]?\d|2[0-3]):([0-5]\d)$/;
+  const stringValues = xVals;
+  const allMatch12Hour = stringValues.every((x) => hour12Pattern.test(x));
+  const allMatch24Hour = stringValues.every((x) => hour24Pattern.test(x));
+  return allMatch12Hour || allMatch24Hour;
+}
+
+// src/helpers/getStorybookRandomColor.ts
+var getStorybookRandomColor = () => {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+// src/helpers/getStorybookCategoricalData.ts
+var getStorybookCategoricalData = ({
+  showNulls,
+  showNegativeValues,
+  numberOfSeries,
+  yAxisMax,
+  showCustomColors,
+  showDashedLines,
+  categoryType
+}) => {
+  const categoryOptions = {
+    hours: [
+      "12 AM",
+      "1 AM",
+      "2 AM",
+      "3 AM",
+      "4 AM",
+      "5 AM",
+      "6 AM",
+      "7 AM",
+      "8 AM",
+      "9 AM",
+      "10 AM",
+      "11 AM",
+      "12 PM",
+      "1 PM",
+      "2 PM",
+      "3 PM",
+      "4 PM",
+      "5 PM",
+      "6 PM",
+      "7 PM",
+      "8 PM",
+      "9 PM",
+      "10 PM",
+      "11 PM"
+    ],
+    hours24: [
+      "00:00",
+      "01:00",
+      "02:00",
+      "03:00",
+      "04:00",
+      "05:00",
+      "06:00",
+      "07:00",
+      "08:00",
+      "09:00",
+      "10:00",
+      "11:00",
+      "12:00",
+      "13:00",
+      "14:00",
+      "15:00",
+      "16:00",
+      "17:00",
+      "18:00",
+      "19:00",
+      "20:00",
+      "21:00",
+      "22:00",
+      "23:00"
+    ],
+    days: [
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+      "Sunday"
+    ],
+    months: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    custom: [
+      "Category A",
+      "Category B",
+      "Category C",
+      "Category D",
+      "Category E"
+    ]
+  };
+  const categories = categoryOptions[categoryType];
+  const numberOfPoints = categories.length;
+  return [...Array(numberOfSeries).keys()].map((seriesIndex) => {
+    let nullsArray = [];
+    if (showNulls) {
+      const nullsArrayLength = Math.floor(numberOfPoints / 5);
+      nullsArray = [...Array(nullsArrayLength)].map(
+        () => Math.floor(Math.random() * numberOfPoints)
+      );
+    }
+    return {
+      points: categories.map((category, pointIndex) => {
+        const showNull = nullsArray && nullsArray.length > 0 ? nullsArray.includes(pointIndex) : false;
+        const randomValue = Math.random();
+        const positiveOrNegativeYAxisMax = showNegativeValues ? randomValue < 0.5 ? -yAxisMax : yAxisMax : yAxisMax;
+        return {
+          x: category,
+          y: showNull ? null : Math.floor(randomValue * positiveOrNegativeYAxisMax)
+        };
+      }),
+      name: `Series ${seriesIndex + 1}`,
+      styles: {
+        color: showCustomColors ? getStorybookRandomColor() : void 0,
+        pattern: showDashedLines ? "dashed" : "solid"
+      }
+    };
+  });
+};
+
+// src/helpers/getStorybookSparseTimelineData.ts
+var getStorybookSparseTimelineData = ({
+  showNulls,
+  showNegativeValues,
+  numberOfSeries,
+  yAxisMax,
+  showCustomColors,
+  showDashedLines,
+  numberOfPoints = 5,
+  timeSpanHours = 24
+}) => {
+  const seriesNames = [
+    "Posts Published",
+    "Comments",
+    "Likes",
+    "Shares",
+    "Clicks",
+    "Views",
+    "Saves",
+    "Reposts",
+    "Mentions",
+    "Reactions"
+  ];
+  const baseDate = /* @__PURE__ */ new Date("2024-01-01T00:00:00Z");
+  const timeSpanMs = timeSpanHours * 60 * 60 * 1e3;
+  return [...Array(numberOfSeries).keys()].map((seriesIndex) => {
+    let nullsArray = [];
+    if (showNulls) {
+      const nullsArrayLength = Math.floor(numberOfPoints / 5);
+      nullsArray = [...Array(nullsArrayLength)].map(
+        () => Math.floor(Math.random() * numberOfPoints)
+      );
+    }
+    const timestamps = [...Array(numberOfPoints)].map(() => {
+      const randomOffset = Math.random() * timeSpanMs;
+      return baseDate.getTime() + randomOffset;
+    }).sort((a, b) => a - b);
+    return {
+      points: timestamps.map((timestamp, pointIndex) => {
+        const showNull = nullsArray && nullsArray.length > 0 ? nullsArray.includes(pointIndex) : false;
+        const randomValue = Math.random();
+        const positiveOrNegativeYAxisMax = showNegativeValues ? randomValue < 0.5 ? -yAxisMax : yAxisMax : yAxisMax;
+        return {
+          x: timestamp,
+          y: showNull ? null : Math.floor(randomValue * positiveOrNegativeYAxisMax)
+        };
+      }),
+      name: seriesNames[seriesIndex] || `Series ${seriesIndex + 1}`,
+      styles: {
+        color: showCustomColors ? getStorybookRandomColor() : void 0,
+        pattern: showDashedLines ? "dashed" : "solid"
+      }
+    };
+  });
+};
+
 // src/hooks/useTimeSeriesChartOptions.ts
 
 var _lodash = require('lodash');
@@ -252,7 +654,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', _22 => _22.graphic, 'optionalAccess', _23 => _23.element]);
       if (pointElement) {
         pointElement.setAttribute("aria-describedby", tooltipId);
         pointElement.addEventListener("focus", () => handleFocus(point));
@@ -292,7 +694,7 @@ var useTimeSeriesChartOptions = ({
   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', _24 => _24[0], 'optionalAccess', _25 => _25.points, 'access', _26 => _26.map, 'call', _27 => _27((point) => point.x)]) || [] : [];
   const hasSparseTimelineData = !hasCategoricalData && seriesType === "column";
   const options = _react.useMemo.call(void 0, () => {
     return _lodash.merge.call(void 0, {}, baseChartOptions2, {
@@ -312,10 +714,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', _28 => _28.hoverPoint, 'optionalAccess', _29 => _29.x]) });
           } : void 0,
           load: function() {
-            const tooltipId = _chunkWEKDYQ4Tjs.generateChartTooltipPortalId.call(void 0, this.index);
+            const tooltipId = _chunk46L4YBLCjs.generateChartTooltipPortalId.call(void 0, this.index);
             attachTooltipEventListeners(this.series, tooltipId);
           }
         }
@@ -394,7 +796,7 @@ var useTimeSeriesChartOptions = ({
           }
         }
       },
-      series: _chunkWEKDYQ4Tjs.transformDataToSeries.call(void 0, { data }, seriesType),
+      series: transformDataToSeries({ data }, seriesType),
       time: { timezone },
       tooltip: {
         enabled: !disableTooltips
@@ -406,7 +808,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', _30 => _30.tickPositionInfo, 'optionalAccess', _31 => _31.unitName]);
             if (typeof xAxisLabelFormatter2 === "function") {
               return xAxisLabelFormatter2({
                 textLocale,
@@ -442,7 +844,7 @@ var useTimeSeriesChartOptions = ({
             return yAxisLabelFormatter2 ? yAxisLabelFormatter2({
               y: this.value,
               yValues: this.axis.tickPositions
-            }) : _chunkWEKDYQ4Tjs.yAxisLabelFormatter.call(void 0, {
+            }) : yAxisLabelFormatter({
               currency,
               numberFormat,
               numberLocale,
@@ -473,7 +875,7 @@ var useTimeSeriesChartOptions = ({
   ]);
   return { options, chart, callback };
 };
-var xAxisLabelFormatterDefault = _chunkWEKDYQ4Tjs.xAxisLabelFormatter;
+var xAxisLabelFormatterDefault = xAxisLabelFormatter;
 
 // src/components/AreaChart/AreaChart.tsx
 
@@ -481,7 +883,7 @@ var xAxisLabelFormatterDefault = _chunkWEKDYQ4Tjs.xAxisLabelFormatter;
 _accessibility2.default.call(void 0, _highcharts2.default);
 _annotations2.default.call(void 0, _highcharts2.default);
 var StyledBox = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
-  ${_chunkWEKDYQ4Tjs.areaChartStyles}
+  ${_chunk46L4YBLCjs.areaChartStyles}
 `;
 var AreaChart = _react.memo.call(void 0, function AreaChart2(props) {
   const { data } = props;
@@ -521,10 +923,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', _32 => _32.styles, 'optionalAccess', _33 => _33.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]))
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       StyledBox,
       {
@@ -540,26 +942,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', _34 => _34.annotations, 'optionalAccess', _35 => _35.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
-              annotationContext: _optionalChain([chart, 'access', _24 => _24.annotations, 'optionalAccess', _25 => _25[0]]),
+              annotationContext: _optionalChain([chart, 'access', _36 => _36.annotations, 'optionalAccess', _37 => _37[0]]),
               chartContainer: chart.container
             }
           ) : null,
           chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkWEKDYQ4Tjs.ChartTooltipPortal,
+            _chunk46L4YBLCjs.ChartTooltipPortal,
             {
               chart,
               renderContent: (context) => {
-                const tooltipData = _chunkWEKDYQ4Tjs.transformTimeSeriesTooltipData.call(void 0, {
+                const tooltipData = _chunk46L4YBLCjs.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', _38 => _38[x], 'optionalAccess', _39 => _39.details]);
                 return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   AreaChartTooltip,
                   {
@@ -596,7 +998,7 @@ var AreaChartWithData = _react.memo.call(void 0, function AreaChartWithData2({
 
 var ChartXAnnotationDetails = _react.memo.call(void 0, 
   function ChartXAnnotationDetails2({ iconName, text }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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 })
     ] }) });
@@ -645,13 +1047,13 @@ var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.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, _chunk46L4YBLCjs.ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    color: _optionalChain([slice, 'access', _40 => _40.styles, 'optionalAccess', _41 => _41.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, _chunkWEKDYQ4Tjs.ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
@@ -681,7 +1083,7 @@ var DonutChartTooltip = _react.memo.call(void 0,
       {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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: [
@@ -710,9 +1112,9 @@ var DonutChartTooltip = _react.memo.call(void 0,
         ]
       }
     ];
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltip, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.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, _chunk46L4YBLCjs.ChartTooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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
@@ -728,8 +1130,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', _42 => _42[colorIndex], 'optionalAccess', _43 => _43.styles, 'optionalAccess', _44 => _44.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[colorIndex])), () => ( "")),
+    ..._optionalChain([data, 'access', _45 => _45[colorIndex], 'optionalAccess', _46 => _46.icon]) ? { icon: _optionalChain([data, 'access', _47 => _47[colorIndex], 'optionalAccess', _48 => _48.icon]) } : {},
     name: context.key,
     percent: context.percentage,
     value: context.y
@@ -741,7 +1143,7 @@ var transformDonutChartTooltipData = ({
 
 _accessibility2.default.call(void 0, _highcharts2.default);
 var StyledBox2 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
-  ${_chunkWEKDYQ4Tjs.donutChartStyles}
+  ${_chunk46L4YBLCjs.donutChartStyles}
 `;
 var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
   const { data } = props;
@@ -778,15 +1180,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 = _chunkWEKDYQ4Tjs.generateChartTooltipPortalId.call(void 0, this.index);
+              const allSlices = _nullishCoalesce(_optionalChain([this, 'access', _49 => _49.series, 'access', _50 => _50[0], 'optionalAccess', _51 => _51.data]), () => ( []));
+              const tooltipId = _chunk46L4YBLCjs.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', _52 => _52.graphic, 'optionalAccess', _53 => _53.element]);
+                _optionalChain([sliceElement, 'optionalAccess', _54 => _54.setAttribute, 'call', _55 => _55("aria-describedby", tooltipId)]);
+                _optionalChain([sliceElement, 'optionalAccess', _56 => _56.addEventListener, 'call', _57 => _57("focus", () => {
                   slice.series.chart.tooltip.refresh(slice);
                 })]);
-                _optionalChain([sliceElement, 'optionalAccess', _46 => _46.addEventListener, 'call', _47 => _47("blur", () => {
+                _optionalChain([sliceElement, 'optionalAccess', _58 => _58.addEventListener, 'call', _59 => _59("blur", () => {
                   slice.series.chart.tooltip.hide(0);
                 })]);
               });
@@ -816,10 +1218,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', _60 => _60.styles, 'optionalAccess', _61 => _61.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
     );
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.GlobalChartStyleOverrides, {}),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         StyledBox2,
         {
@@ -836,7 +1238,7 @@ var DonutChartWithData = _react.memo.call(void 0,
               }
             ),
             chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkWEKDYQ4Tjs.ChartTooltipPortal,
+              _chunk46L4YBLCjs.ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
@@ -892,11 +1294,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', _62 => _62.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index];
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
             content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
@@ -949,7 +1351,7 @@ var DonutChartLegendTable = _react.memo.call(void 0,
       }
     ];
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWEKDYQ4Tjs.ChartTable,
+      _chunk46L4YBLCjs.ChartTable,
       {
         rows: [...rows, ...totalRow]
       }
@@ -974,13 +1376,13 @@ var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.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, _chunk46L4YBLCjs.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]
   }));
 };
 var LineChartLegend = _react.memo.call(void 0, 
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
@@ -1011,7 +1413,7 @@ var LineChartTooltip = _react.memo.call(void 0,
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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, 
@@ -1029,11 +1431,11 @@ var LineChartTooltip = _react.memo.call(void 0,
         ]
       };
     });
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltip, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk46L4YBLCjs.ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.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, _chunk46L4YBLCjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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
@@ -1047,7 +1449,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)`
-  ${_chunkWEKDYQ4Tjs.lineChartStyles}
+  ${_chunk46L4YBLCjs.lineChartStyles}
 `;
 var LineChart = _react.memo.call(void 0, function LineChart2(props) {
   const { data } = props;
@@ -1090,9 +1492,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', _65 => _65.styles, 'optionalAccess', _66 => _66.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', _67 => _67.styles, 'optionalAccess', _68 => _68.pattern]), () => ( "solid")));
       return acc;
     },
     {
@@ -1101,7 +1503,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, _chunkWEKDYQ4Tjs.GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       StyledBox3,
       {
@@ -1118,25 +1520,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', _69 => _69.annotations, 'optionalAccess', _70 => _70.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
-              annotationContext: _optionalChain([chart, 'access', _59 => _59.annotations, 'optionalAccess', _60 => _60[0]]),
+              annotationContext: _optionalChain([chart, 'access', _71 => _71.annotations, 'optionalAccess', _72 => _72[0]]),
               chartContainer: chart.container
             }
           ) : null,
           chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkWEKDYQ4Tjs.ChartTooltipPortal,
+            _chunk46L4YBLCjs.ChartTooltipPortal,
             {
               chart,
               renderContent: (context) => {
-                const tooltipData = _chunkWEKDYQ4Tjs.transformTimeSeriesTooltipData.call(void 0, {
+                const tooltipData = _chunk46L4YBLCjs.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', _73 => _73[x], 'optionalAccess', _74 => _74.details]);
                 return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   LineChartTooltip,
                   {
@@ -1180,13 +1582,13 @@ var getVerticalBarChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.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, _chunk46L4YBLCjs.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: _optionalChain([series, 'access', _75 => _75.styles, 'optionalAccess', _76 => _76.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, _chunkWEKDYQ4Tjs.ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
   }
 );
 
@@ -1217,7 +1619,7 @@ var VerticalBarChartTooltip = _react.memo.call(void 0,
       return {
         cells: [
           {
-            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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, 
@@ -1235,11 +1637,11 @@ var VerticalBarChartTooltip = _react.memo.call(void 0,
         ]
       };
     });
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltip, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk46L4YBLCjs.ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.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, _chunk46L4YBLCjs.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.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
@@ -1253,7 +1655,7 @@ var VerticalBarChartTooltip = _react.memo.call(void 0,
 // src/components/VerticalBarChart/styles.ts
 
 var verticalBarChartStyles = _styledcomponents.css`
-  ${_chunkWEKDYQ4Tjs.timeSeriesChartStyles}
+  ${_chunk46L4YBLCjs.timeSeriesChartStyles}
 
   /*
     When the chart container is hovered, reduce the opacity of all columns.
@@ -1314,7 +1716,7 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
     xAnnotations,
     xAxisLabelFormatter: xAxisLabelFormatter2
   }) {
-    const shouldUseTimeFormatter = _chunkWEKDYQ4Tjs.isHourlyTimeData.call(void 0, data) || _chunkWEKDYQ4Tjs.isCategoricalHourData.call(void 0, data);
+    const shouldUseTimeFormatter = isHourlyTimeData(data) || isCategoricalHourData(data);
     const autoTimeXAxisLabelFormatter = ({
       value,
       timeFormat: timeFormat2
@@ -1370,9 +1772,9 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
     const { colors } = 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', _77 => _77.styles, 'optionalAccess', _78 => _78.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', _79 => _79.styles, 'optionalAccess', _80 => _80.pattern]), () => ( "solid")));
         return acc;
       },
       {
@@ -1381,7 +1783,7 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
       }
     );
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKDYQ4Tjs.GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk46L4YBLCjs.GlobalChartStyleOverrides, {}),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         StyledBox4,
         {
@@ -1397,25 +1799,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', _81 => _81.annotations, 'optionalAccess', _82 => _82.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               ChartXAnnotationMarkerPortal,
               {
                 xAnnotations,
-                annotationContext: _optionalChain([chart, 'access', _71 => _71.annotations, 'optionalAccess', _72 => _72[0]]),
+                annotationContext: _optionalChain([chart, 'access', _83 => _83.annotations, 'optionalAccess', _84 => _84[0]]),
                 chartContainer: chart.container
               }
             ) : null,
             chart ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkWEKDYQ4Tjs.ChartTooltipPortal,
+              _chunk46L4YBLCjs.ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
-                  const tooltipData = _chunkWEKDYQ4Tjs.transformTimeSeriesTooltipData.call(void 0, {
+                  const tooltipData = _chunk46L4YBLCjs.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', _85 => _85[x], 'optionalAccess', _86 => _86.details]) : void 0;
                   return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     VerticalBarChartTooltip,
                     {
@@ -1491,5 +1893,5 @@ var VerticalBarChartWithData = _react.memo.call(void 0,
 
 
 
-exports.AreaChart = AreaChart; exports.ChartLegend = _chunkWEKDYQ4Tjs.ChartLegend; exports.ChartLegendLabel = _chunkWEKDYQ4Tjs.ChartLegendLabel; exports.ChartTable = _chunkWEKDYQ4Tjs.ChartTable; exports.ChartTooltip = _chunkWEKDYQ4Tjs.ChartTooltip; exports.ChartTooltipFooter = _chunkWEKDYQ4Tjs.ChartTooltipFooter; exports.ChartTooltipHeader = _chunkWEKDYQ4Tjs.ChartTooltipHeader; exports.ChartTooltipPortal = _chunkWEKDYQ4Tjs.ChartTooltipPortal; exports.ChartTooltipTable = _chunkWEKDYQ4Tjs.ChartTooltipTable; exports.ChartTooltipTitle = _chunkWEKDYQ4Tjs.ChartTooltipTitle; exports.ChartXAnnotationDetails = ChartXAnnotationDetails; exports.ChartXAnnotationMarker = ChartXAnnotationMarker; exports.ColorBox = _chunkWEKDYQ4Tjs.ColorBox; exports.DONUT_CHART_HALO_SIZE = _chunkCYQXUAJCjs.DONUT_CHART_HALO_SIZE; exports.DONUT_CHART_HEIGHT = _chunkCYQXUAJCjs.DONUT_CHART_HEIGHT; exports.DONUT_CHART_WIDTH = _chunkCYQXUAJCjs.DONUT_CHART_WIDTH; exports.DatavizColorBox = _chunkWEKDYQ4Tjs.DatavizColorBox; exports.DonutChart = DonutChart; exports.DonutChartLegendTable = DonutChartLegendTable; exports.GlobalChartStyleOverrides = _chunkWEKDYQ4Tjs.GlobalChartStyleOverrides; exports.LineChart = LineChart; exports.NetworkColorBox = _chunkWEKDYQ4Tjs.NetworkColorBox; exports.TIME_SERIES_CHART_HEIGHT = _chunkCYQXUAJCjs.TIME_SERIES_CHART_HEIGHT; exports.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = _chunkCYQXUAJCjs.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT; exports.VerticalBarChart = VerticalBarChart; exports.areaChartOptions = _chunkCYQXUAJCjs.areaChartOptions; exports.areaChartStyles = _chunkWEKDYQ4Tjs.areaChartStyles; exports.baseChartOptions = _chunkCYQXUAJCjs.baseChartOptions; exports.baseChartStyles = _chunkWEKDYQ4Tjs.baseChartStyles; exports.columnChartOptions = _chunkCYQXUAJCjs.columnChartOptions; exports.donutChartOptions = _chunkCYQXUAJCjs.donutChartOptions; exports.donutChartStyles = _chunkWEKDYQ4Tjs.donutChartStyles; exports.generateChartTooltipPortalId = _chunkWEKDYQ4Tjs.generateChartTooltipPortalId; exports.getDatavizColor = _chunkWEKDYQ4Tjs.getDatavizColor; exports.getDatavizColorWithAlpha = _chunkWEKDYQ4Tjs.getDatavizColorWithAlpha; exports.getDatavizOpacity = _chunkWEKDYQ4Tjs.getDatavizOpacity; exports.getStorybookCategoricalData = _chunkWEKDYQ4Tjs.getStorybookCategoricalData; exports.getStorybookSparseTimelineData = _chunkWEKDYQ4Tjs.getStorybookSparseTimelineData; exports.isCategoricalHourData = _chunkWEKDYQ4Tjs.isCategoricalHourData; exports.isHourlyTimeData = _chunkWEKDYQ4Tjs.isHourlyTimeData; exports.lineChartOptions = _chunkCYQXUAJCjs.lineChartOptions; exports.lineChartStyles = _chunkWEKDYQ4Tjs.lineChartStyles; exports.timeSeriesChartOptions = _chunkCYQXUAJCjs.timeSeriesChartOptions; exports.timeSeriesChartStyles = _chunkWEKDYQ4Tjs.timeSeriesChartStyles; exports.transformDataToSeries = _chunkWEKDYQ4Tjs.transformDataToSeries; exports.transformTimeSeriesTooltipData = _chunkWEKDYQ4Tjs.transformTimeSeriesTooltipData; exports.xAxisLabelFormatter = _chunkWEKDYQ4Tjs.xAxisLabelFormatter; exports.yAxisLabelFormatter = _chunkWEKDYQ4Tjs.yAxisLabelFormatter;
+exports.AreaChart = AreaChart; exports.ChartLegend = _chunk46L4YBLCjs.ChartLegend; exports.ChartLegendLabel = _chunk46L4YBLCjs.ChartLegendLabel; exports.ChartTable = _chunk46L4YBLCjs.ChartTable; exports.ChartTooltip = _chunk46L4YBLCjs.ChartTooltip; exports.ChartTooltipFooter = _chunk46L4YBLCjs.ChartTooltipFooter; exports.ChartTooltipHeader = _chunk46L4YBLCjs.ChartTooltipHeader; exports.ChartTooltipPortal = _chunk46L4YBLCjs.ChartTooltipPortal; exports.ChartTooltipTable = _chunk46L4YBLCjs.ChartTooltipTable; exports.ChartTooltipTitle = _chunk46L4YBLCjs.ChartTooltipTitle; exports.ChartXAnnotationDetails = ChartXAnnotationDetails; exports.ChartXAnnotationMarker = ChartXAnnotationMarker; exports.ColorBox = _chunk46L4YBLCjs.ColorBox; exports.DONUT_CHART_HALO_SIZE = _chunkCYQXUAJCjs.DONUT_CHART_HALO_SIZE; exports.DONUT_CHART_HEIGHT = _chunkCYQXUAJCjs.DONUT_CHART_HEIGHT; exports.DONUT_CHART_WIDTH = _chunkCYQXUAJCjs.DONUT_CHART_WIDTH; exports.DatavizColorBox = DatavizColorBox; exports.DonutChart = DonutChart; exports.DonutChartLegendTable = DonutChartLegendTable; exports.GlobalChartStyleOverrides = _chunk46L4YBLCjs.GlobalChartStyleOverrides; exports.LineChart = LineChart; exports.NetworkColorBox = NetworkColorBox; exports.TIME_SERIES_CHART_HEIGHT = _chunkCYQXUAJCjs.TIME_SERIES_CHART_HEIGHT; exports.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = _chunkCYQXUAJCjs.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT; exports.VerticalBarChart = VerticalBarChart; exports.areaChartOptions = _chunkCYQXUAJCjs.areaChartOptions; exports.areaChartStyles = _chunk46L4YBLCjs.areaChartStyles; exports.baseChartOptions = _chunkCYQXUAJCjs.baseChartOptions; exports.baseChartStyles = _chunk46L4YBLCjs.baseChartStyles; exports.columnChartOptions = _chunkCYQXUAJCjs.columnChartOptions; exports.donutChartOptions = _chunkCYQXUAJCjs.donutChartOptions; exports.donutChartStyles = _chunk46L4YBLCjs.donutChartStyles; exports.generateChartTooltipPortalId = _chunk46L4YBLCjs.generateChartTooltipPortalId; exports.getDatavizColor = getDatavizColor; exports.getDatavizColorWithAlpha = getDatavizColorWithAlpha; exports.getDatavizOpacity = getDatavizOpacity; exports.getStorybookCategoricalData = getStorybookCategoricalData; exports.getStorybookSparseTimelineData = getStorybookSparseTimelineData; exports.isCategoricalHourData = isCategoricalHourData; exports.isHourlyTimeData = isHourlyTimeData; exports.lineChartOptions = _chunkCYQXUAJCjs.lineChartOptions; exports.lineChartStyles = _chunk46L4YBLCjs.lineChartStyles; exports.timeSeriesChartOptions = _chunkCYQXUAJCjs.timeSeriesChartOptions; exports.timeSeriesChartStyles = _chunk46L4YBLCjs.timeSeriesChartStyles; exports.transformDataToSeries = transformDataToSeries; exports.transformTimeSeriesTooltipData = _chunk46L4YBLCjs.transformTimeSeriesTooltipData; exports.xAxisLabelFormatter = xAxisLabelFormatter; exports.yAxisLabelFormatter = yAxisLabelFormatter;
 //# sourceMappingURL=index.js.map