@sproutsocial/seeds-react-data-viz 0.19.0 → 0.21.0

package/dist/esm/index.js

@@ -23,27 +23,15 @@ import {
   ChartTooltipTable,
   ChartTooltipTitle,
   ColorBox,
-  DatavizColorBox,
   GlobalChartStyleOverrides,
-  NetworkColorBox,
   areaChartStyles,
   baseChartStyles,
   donutChartStyles,
   generateChartTooltipPortalId,
-  getDatavizColor,
-  getDatavizColorWithAlpha,
-  getDatavizOpacity,
-  getStorybookCategoricalData,
-  getStorybookSparseTimelineData,
-  isCategoricalHourData,
-  isHourlyTimeData,
   lineChartStyles,
   timeSeriesChartStyles,
-  transformDataToSeries,
-  transformTimeSeriesTooltipData,
-  xAxisLabelFormatter,
-  yAxisLabelFormatter
-} from "./chunk-Z4LOM4OZ.js";
+  transformTimeSeriesTooltipData
+} from "./chunk-XEKQTAUH.js";
 
 // src/components/AreaChart/AreaChart.tsx
 import { memo as memo4 } from "react";
@@ -51,24 +39,62 @@ import Highcharts from "highcharts";
 import { HighchartsReact } from "highcharts-react-official";
 import highchartsAccessibility from "highcharts/modules/accessibility";
 import highchartsAnnotations from "highcharts/modules/annotations";
-import styled from "styled-components";
+import styled2 from "styled-components";
 import { Box as Box2 } from "@sproutsocial/seeds-react-box";
 
 // src/components/AreaChart/components/AreaChartLegend.tsx
 import { memo } from "react";
+import { theme as theme2 } from "@sproutsocial/seeds-react-theme";
+
+// src/components/ColorBox/DatavizColorBox.tsx
+import styled from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
+var DatavizColorBox = styled(ColorBox).attrs(
+  ({ colorIndex }) => ({
+    style: {
+      background: getDatavizColor(colorIndex),
+      opacity: getDatavizOpacity(colorIndex)
+    }
+  })
+)``;
+var getDatavizColor = (colorIndex) => theme.colors.DATAVIZ_COLORS_LIST[colorIndex % theme.colors.DATAVIZ_COLORS_LIST.length] || "";
+var getDatavizOpacity = (colorIndex) => {
+  const opacitySteps = [1, 0.6, 0.4, 0.2];
+  const opacityStep = Math.floor(colorIndex / 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
+import NETWORK_COLORS from "@sproutsocial/seeds-networkcolor";
 import { jsx } from "react/jsx-runtime";
+var NetworkColorBox = ({
+  networkColor,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(ColorBox, { ...props, bg: NETWORK_COLORS[networkColor] });
+};
+
+// src/components/AreaChart/components/AreaChartLegend.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var getAreaChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: series.styles?.color || theme.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx2(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme2.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var AreaChartLegend = memo(
   function AreaChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx(ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx2(ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
   }
 );
 
@@ -79,7 +105,7 @@ import { Duration } from "@sproutsocial/seeds-react-duration";
 import { Icon } from "@sproutsocial/seeds-react-icon";
 import { Numeral } from "@sproutsocial/seeds-react-numeral";
 import { Text } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var AreaChartTooltip = memo2(
   function AreaChartTooltip2({
     data,
@@ -101,10 +127,10 @@ var AreaChartTooltip = memo2(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx2(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx2(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx2(Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx3(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx3(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx3(Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx2(Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx2(Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx2(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx3(Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx3(Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx3(
               Numeral,
               {
                 abbreviate: false,
@@ -123,7 +149,7 @@ var AreaChartTooltip = memo2(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx2(
+            content: /* @__PURE__ */ jsx3(
               Text,
               {
                 fontWeight: "semibold",
@@ -133,7 +159,7 @@ var AreaChartTooltip = memo2(
             )
           },
           {
-            content: /* @__PURE__ */ jsx2(Text, { fontWeight: "bold", children: total === null && invalidNumberLabel ? invalidNumberLabel : numberFormat === "duration" ? /* @__PURE__ */ jsx2(Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx2(
+            content: /* @__PURE__ */ jsx3(Text, { fontWeight: "bold", children: total === null && invalidNumberLabel ? invalidNumberLabel : numberFormat === "duration" ? /* @__PURE__ */ jsx3(Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx3(
               Numeral,
               {
                 abbreviate: false,
@@ -151,16 +177,16 @@ var AreaChartTooltip = memo2(
     ] : [];
     return /* @__PURE__ */ jsxs(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ jsx2(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ jsx3(
         ChartTooltipTable,
         {
           rows: [...rows, ...appendedRows]
         }
       ),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx2(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx2(Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx2(Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx3(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ jsx3(Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ jsx3(Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
@@ -170,7 +196,7 @@ var AreaChartTooltip = memo2(
 import { memo as memo3, useEffect, useState, useRef } from "react";
 import { createPortal } from "react-dom";
 import "highcharts";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
 var ChartXAnnotationMarkerPortal = memo3(
   function ChartXAnnotationMarkerPortal2({
     xAnnotations,
@@ -217,7 +243,7 @@ var ChartXAnnotationMarkerPortal = memo3(
         });
       }
     }, [annotationContext.labels, xAnnotations, chartContainer]);
-    return /* @__PURE__ */ jsx3(Fragment, { children: Object.entries(annotationContainers.current).map(
+    return /* @__PURE__ */ jsx4(Fragment, { children: Object.entries(annotationContainers.current).map(
       ([xValue, container]) => {
         const annotationComponent = xAnnotations?.[Number(xValue)]?.marker;
         return annotationComponent ? createPortal(annotationComponent(), container) : null;
@@ -226,6 +252,382 @@ var ChartXAnnotationMarkerPortal = memo3(
   }
 );
 
+// 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
+import { formatDuration } from "@sproutsocial/seeds-react-duration";
+import { formatNumeral } from "@sproutsocial/seeds-react-numeral";
+var yAxisLabelFormatter = ({
+  numberLocale,
+  textLocale,
+  tickPositions,
+  value,
+  currency = "USD",
+  numberFormat = "decimal"
+}) => {
+  const numberValue = Number(value);
+  if (numberValue === 0) {
+    return formatNumeral({
+      locale: numberLocale,
+      number: numberValue
+    });
+  }
+  if (numberFormat === "duration") {
+    return formatDuration({
+      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 formatNumeral({
+    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(parts.find((p) => p.type === "day")?.value ?? "0", 10),
+    month: parseInt(parts.find((p) => p.type === "month")?.value ?? "0", 10),
+    year: parseInt(parts.find((p) => p.type === "year")?.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 !== previousValueParts?.day) {
+        secondPartOptions = { day: "numeric", month: "short" };
+      }
+      break;
+    case "day":
+    case "week":
+      firstPartOptions = { day: "numeric" };
+      if (isFirst || valueParts.month !== previousValueParts?.month) {
+        secondPartOptions = { month: "short" };
+      }
+      break;
+    case "month":
+      firstPartOptions = { month: "short" };
+      if (isFirst || valueParts.year !== previousValueParts?.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
 import { useState as useState2, useCallback, useMemo } from "react";
 import { merge } from "lodash";
@@ -476,16 +878,16 @@ var useTimeSeriesChartOptions = ({
 var xAxisLabelFormatterDefault = xAxisLabelFormatter;
 
 // src/components/AreaChart/AreaChart.tsx
-import { theme as theme2 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { theme as theme3 } from "@sproutsocial/seeds-react-theme";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 highchartsAccessibility(Highcharts);
 highchartsAnnotations(Highcharts);
-var StyledBox = styled(Box2)`
+var StyledBox = styled2(Box2)`
   ${areaChartStyles}
 `;
 var AreaChart = memo4(function AreaChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx4(AreaChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx5(AreaChartWithData, { ...props });
 });
 var AreaChartWithData = memo4(function AreaChartWithData2({
   data,
@@ -521,10 +923,10 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
     xAnnotations
   });
   const colors = data.map(
-    (series, index) => series.styles?.color ?? theme2.colors.DATAVIZ_COLORS_LIST[index]
+    (series, index) => series.styles?.color ?? theme3.colors.DATAVIZ_COLORS_LIST[index]
   );
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ jsx5(GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ jsxs2(
       StyledBox,
       {
@@ -532,7 +934,7 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             HighchartsReact,
             {
               highcharts: Highcharts,
@@ -540,7 +942,7 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
               callback
             }
           ),
-          chart && chart.annotations?.length ? /* @__PURE__ */ jsx4(
+          chart && chart.annotations?.length ? /* @__PURE__ */ jsx5(
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
@@ -548,7 +950,7 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
               chartContainer: chart.container
             }
           ) : null,
-          chart && !disableTooltips ? /* @__PURE__ */ jsx4(
+          chart && !disableTooltips ? /* @__PURE__ */ jsx5(
             ChartTooltipPortal,
             {
               chart,
@@ -560,7 +962,7 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
                 const x = context.x;
                 const total = context.total;
                 const xAnnotationDetails = xAnnotations?.[x]?.details;
-                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ jsx4(
+                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ jsx5(
                   AreaChartTooltip,
                   {
                     currency,
@@ -581,7 +983,7 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx4(Box2, { mt: 350, children: /* @__PURE__ */ jsx4(AreaChartLegend, { data }) })
+          /* @__PURE__ */ jsx5(Box2, { mt: 350, children: /* @__PURE__ */ jsx5(AreaChartLegend, { data }) })
         ]
       }
     )
@@ -593,12 +995,12 @@ import { memo as memo5 } from "react";
 import { Box as Box3 } from "@sproutsocial/seeds-react-box";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
 import { Text as Text2 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var ChartXAnnotationDetails = memo5(
   function ChartXAnnotationDetails2({ iconName, text }) {
-    return /* @__PURE__ */ jsx5(ChartTooltipHeader, { children: /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", gap: 300, children: [
-      /* @__PURE__ */ jsx5(Icon2, { name: iconName, size: "mini", color: "icon.base" }),
-      /* @__PURE__ */ jsx5(Text2, { color: "text.body", fontSize: 200, children: text })
+    return /* @__PURE__ */ jsx6(ChartTooltipHeader, { children: /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", gap: 300, children: [
+      /* @__PURE__ */ jsx6(Icon2, { name: iconName, size: "mini", color: "icon.base" }),
+      /* @__PURE__ */ jsx6(Text2, { color: "text.body", fontSize: 200, children: text })
     ] }) });
   }
 );
@@ -607,11 +1009,11 @@ var ChartXAnnotationDetails = memo5(
 import { memo as memo6 } from "react";
 import { Box as Box4 } from "@sproutsocial/seeds-react-box";
 import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var ChartXAnnotationMarker = memo6(
   function ChartXAnnotationMarker2({ iconName }) {
     return /* @__PURE__ */ jsxs4(Box4, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         Box4,
         {
           display: "flex",
@@ -621,10 +1023,10 @@ var ChartXAnnotationMarker = memo6(
           height: "20px",
           bg: "icon.base",
           borderRadius: "50%",
-          children: /* @__PURE__ */ jsx6(Icon3, { name: iconName, size: "mini", color: "icon.inverse" })
+          children: /* @__PURE__ */ jsx7(Icon3, { name: iconName, size: "mini", color: "icon.inverse" })
         }
       ),
-      /* @__PURE__ */ jsx6(Box4, { height: `199px`, width: "0.5px", bg: "neutral.200" })
+      /* @__PURE__ */ jsx7(Box4, { height: `199px`, width: "0.5px", bg: "neutral.200" })
     ] });
   }
 );
@@ -634,24 +1036,24 @@ import { memo as memo9, useState as useState3, useEffect as useEffect2, useCallb
 import Highcharts2 from "highcharts";
 import { HighchartsReact as HighchartsReact2 } from "highcharts-react-official";
 import highchartsAccessibility2 from "highcharts/modules/accessibility";
-import styled2 from "styled-components";
+import styled3 from "styled-components";
 import { Box as Box6 } from "@sproutsocial/seeds-react-box";
 
 // src/components/DonutChart/components/DonutChartLegend.tsx
 import { memo as memo7 } from "react";
-import { theme as theme3 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { theme as theme4 } from "@sproutsocial/seeds-react-theme";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ jsx7(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
-    color: slice.styles?.color || theme3.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx8(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    color: slice.styles?.color || theme4.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var DonutChartLegend = memo7(
   function DonutChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx7(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx8(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
@@ -662,7 +1064,7 @@ import { Duration as Duration2 } from "@sproutsocial/seeds-react-duration";
 import { Icon as Icon4 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral2 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text3 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DonutChartTooltip = memo8(
   function DonutChartTooltip2({
     color,
@@ -681,11 +1083,11 @@ var DonutChartTooltip = memo8(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx8(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx8(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx8(Text3, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx9(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx9(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx9(Text3, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
             content: /* @__PURE__ */ jsxs5(Box5, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 Numeral2,
                 {
                   number: percent,
@@ -694,7 +1096,7 @@ var DonutChartTooltip = memo8(
                   locale: numberLocale
                 }
               ),
-              /* @__PURE__ */ jsx8(Text3, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx8(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(Text3, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx9(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx9(
                 Numeral2,
                 {
                   abbreviate: false,
@@ -711,24 +1113,24 @@ var DonutChartTooltip = memo8(
       }
     ];
     return /* @__PURE__ */ jsxs5(ChartTooltip, { children: [
-      /* @__PURE__ */ jsx8(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx8(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs5(Box5, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx8(Icon4, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx8(Text3, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      /* @__PURE__ */ jsx9(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx9(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs5(Box5, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ jsx9(Icon4, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ jsx9(Text3, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
 );
 
 // src/components/DonutChart/helpers/transformDonutChartTooltipData.ts
-import { theme as theme4 } from "@sproutsocial/seeds-react-theme";
+import { theme as theme5 } from "@sproutsocial/seeds-react-theme";
 var transformDonutChartTooltipData = ({
   context,
   data
 }) => {
   const colorIndex = context.colorIndex;
   return {
-    color: data[colorIndex]?.styles?.color ?? theme4.colors.DATAVIZ_COLORS_LIST[colorIndex] ?? "",
+    color: data[colorIndex]?.styles?.color ?? theme5.colors.DATAVIZ_COLORS_LIST[colorIndex] ?? "",
     ...data[colorIndex]?.icon ? { icon: data[colorIndex]?.icon } : {},
     name: context.key,
     percent: context.percentage,
@@ -737,15 +1139,15 @@ var transformDonutChartTooltipData = ({
 };
 
 // src/components/DonutChart/DonutChart.tsx
-import { theme as theme5 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { theme as theme6 } from "@sproutsocial/seeds-react-theme";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 highchartsAccessibility2(Highcharts2);
-var StyledBox2 = styled2(Box6)`
+var StyledBox2 = styled3(Box6)`
   ${donutChartStyles}
 `;
 var DonutChart = memo9(function DonutChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx9(DonutChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx10(DonutChartWithData, { ...props });
 });
 var DonutChartWithData = memo9(
   function DonutChartWithData2({
@@ -816,10 +1218,10 @@ var DonutChartWithData = memo9(
       });
     }, [data]);
     const colors = data.map(
-      (series, index) => series.styles?.color ?? theme5.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+      (series, index) => series.styles?.color ?? theme6.colors.DATAVIZ_COLORS_LIST[index] ?? ""
     );
     return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ jsx10(GlobalChartStyleOverrides, {}),
       /* @__PURE__ */ jsxs6(
         StyledBox2,
         {
@@ -827,7 +1229,7 @@ var DonutChartWithData = memo9(
           $hasOnClick: Boolean(onClick),
           bg: "container.background.base",
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               HighchartsReact2,
               {
                 highcharts: Highcharts2,
@@ -835,13 +1237,13 @@ var DonutChartWithData = memo9(
                 callback
               }
             ),
-            chart && !disableTooltips ? /* @__PURE__ */ jsx9(
+            chart && !disableTooltips ? /* @__PURE__ */ jsx10(
               ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
                   const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx9(
+                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx10(
                     DonutChartTooltip,
                     {
                       color,
@@ -860,7 +1262,7 @@ var DonutChartWithData = memo9(
                 }
               }
             ) : null,
-            hideLegend ? null : /* @__PURE__ */ jsx9(Box6, { mt: 350, children: /* @__PURE__ */ jsx9(DonutChartLegend, { data }) })
+            hideLegend ? null : /* @__PURE__ */ jsx10(Box6, { mt: 350, children: /* @__PURE__ */ jsx10(DonutChartLegend, { data }) })
           ]
         }
       )
@@ -874,8 +1276,8 @@ import { Box as Box7 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration3 } from "@sproutsocial/seeds-react-duration";
 import { Numeral as Numeral3 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text4 } from "@sproutsocial/seeds-react-text";
-import { theme as theme6 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { theme as theme7 } from "@sproutsocial/seeds-react-theme";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var DonutChartLegendTable = memo10(
   function DonutChartLegendTable2({
     data,
@@ -892,15 +1294,15 @@ var DonutChartLegendTable = memo10(
     );
     const rows = data.map((dataPoint, index) => {
       const { name, icon, styles, value } = dataPoint;
-      const color = styles?.color || theme6.colors.DATAVIZ_COLORS_LIST[index];
+      const color = styles?.color || theme7.colors.DATAVIZ_COLORS_LIST[index];
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx10(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx10(ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ jsx11(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx11(ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
             content: /* @__PURE__ */ jsxs7(Box7, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx10(Text4, { color: "text.body", children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(Text4, { color: "text.body", children: /* @__PURE__ */ jsx11(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -909,7 +1311,7 @@ var DonutChartLegendTable = memo10(
                   number: value / total * 100
                 }
               ) }),
-              /* @__PURE__ */ jsx10(Text4, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx10(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(Text4, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx11(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx11(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -929,10 +1331,10 @@ var DonutChartLegendTable = memo10(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx10(Text4, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
+            content: /* @__PURE__ */ jsx11(Text4, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
           },
           {
-            content: /* @__PURE__ */ jsx10(Text4, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx10(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx10(
+            content: /* @__PURE__ */ jsx11(Text4, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx11(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx11(
               Numeral3,
               {
                 abbreviate: false,
@@ -948,7 +1350,7 @@ var DonutChartLegendTable = memo10(
         isAppendedRow: true
       }
     ];
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       ChartTable,
       {
         rows: [...rows, ...totalRow]
@@ -963,24 +1365,24 @@ import Highcharts3 from "highcharts";
 import { HighchartsReact as HighchartsReact3 } from "highcharts-react-official";
 import highchartsAccessibility3 from "highcharts/modules/accessibility";
 import highchartsAnnotations2 from "highcharts/modules/annotations";
-import styled3 from "styled-components";
+import styled4 from "styled-components";
 import { Box as Box9 } from "@sproutsocial/seeds-react-box";
 
 // src/components/LineChart/components/LineChartLegend.tsx
 import { memo as memo11 } from "react";
-import { theme as theme7 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { theme as theme8 } from "@sproutsocial/seeds-react-theme";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx11(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: series.styles?.color || theme7.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx12(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme8.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var LineChartLegend = memo11(
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx11(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx12(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
@@ -991,7 +1393,7 @@ import { Duration as Duration4 } from "@sproutsocial/seeds-react-duration";
 import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral4 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text5 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var LineChartTooltip = memo12(
   function LineChartTooltip2({
     data,
@@ -1011,10 +1413,10 @@ var LineChartTooltip = memo12(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx12(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx12(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx12(Text5, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx13(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx13(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx13(Text5, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx12(Text5, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx12(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx12(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx13(Text5, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx13(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx13(
               Numeral4,
               {
                 abbreviate: false,
@@ -1031,27 +1433,27 @@ var LineChartTooltip = memo12(
     });
     return /* @__PURE__ */ jsxs8(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ jsx12(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx12(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx12(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs8(Box8, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx12(Icon5, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx12(Text5, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      /* @__PURE__ */ jsx13(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ jsx13(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx13(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs8(Box8, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ jsx13(Icon5, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ jsx13(Text5, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
 );
 
 // src/components/LineChart/LineChart.tsx
-import { theme as theme8 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { theme as theme9 } from "@sproutsocial/seeds-react-theme";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 highchartsAccessibility3(Highcharts3);
 highchartsAnnotations2(Highcharts3);
-var StyledBox3 = styled3(Box9)`
+var StyledBox3 = styled4(Box9)`
   ${lineChartStyles}
 `;
 var LineChart = memo13(function LineChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx13(LineChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx14(LineChartWithData, { ...props });
 });
 var LineChartWithData = memo13(function LineChartWithData2({
   data,
@@ -1090,7 +1492,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
   const { colors, patterns } = data.reduce(
     (acc, item, index) => {
       acc.colors.push(
-        item.styles?.color ?? theme8.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+        item.styles?.color ?? theme9.colors.DATAVIZ_COLORS_LIST[index] ?? ""
       );
       acc.patterns.push(item.styles?.pattern ?? "solid");
       return acc;
@@ -1101,7 +1503,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
     }
   );
   return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    /* @__PURE__ */ jsx13(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ jsx14(GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ jsxs9(
       StyledBox3,
       {
@@ -1110,7 +1512,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             HighchartsReact3,
             {
               highcharts: Highcharts3,
@@ -1118,7 +1520,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
               callback
             }
           ),
-          chart && chart.annotations?.length ? /* @__PURE__ */ jsx13(
+          chart && chart.annotations?.length ? /* @__PURE__ */ jsx14(
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
@@ -1126,7 +1528,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
               chartContainer: chart.container
             }
           ) : null,
-          chart && !disableTooltips ? /* @__PURE__ */ jsx13(
+          chart && !disableTooltips ? /* @__PURE__ */ jsx14(
             ChartTooltipPortal,
             {
               chart,
@@ -1137,7 +1539,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
                 });
                 const x = context.x;
                 const xAnnotationDetails = xAnnotations?.[x]?.details;
-                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx13(
+                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx14(
                   LineChartTooltip,
                   {
                     currency,
@@ -1156,7 +1558,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx13(Box9, { mt: 350, children: /* @__PURE__ */ jsx13(LineChartLegend, { data }) })
+          /* @__PURE__ */ jsx14(Box9, { mt: 350, children: /* @__PURE__ */ jsx14(LineChartLegend, { data }) })
         ]
       }
     )
@@ -1169,24 +1571,24 @@ import Highcharts4 from "highcharts";
 import { HighchartsReact as HighchartsReact4 } from "highcharts-react-official";
 import highchartsAccessibility4 from "highcharts/modules/accessibility";
 import highchartsAnnotations3 from "highcharts/modules/annotations";
-import styled4 from "styled-components";
+import styled5 from "styled-components";
 import { Box as Box11 } from "@sproutsocial/seeds-react-box";
 
 // src/components/VerticalBarChart/components/VerticalBarChartLegend.tsx
 import { memo as memo14 } from "react";
-import { theme as theme9 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { theme as theme10 } from "@sproutsocial/seeds-react-theme";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var getVerticalBarChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx14(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: series.styles?.color || theme9.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx15(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme10.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
 var VerticalBarChartLegend = memo14(
   function VerticalbarChartLegend({ data }) {
-    return /* @__PURE__ */ jsx14(ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx15(ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
   }
 );
 
@@ -1197,7 +1599,7 @@ import { Duration as Duration5 } from "@sproutsocial/seeds-react-duration";
 import { Icon as Icon6 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral5 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text6 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var VerticalBarChartTooltip = memo15(
   function VerticalBarChartTooltip2({
     data,
@@ -1217,10 +1619,10 @@ var VerticalBarChartTooltip = memo15(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx15(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx15(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx15(Text6, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx16(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx16(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx16(Text6, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx15(Text6, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx15(Duration5, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx15(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx16(Text6, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx16(Duration5, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx16(
               Numeral5,
               {
                 abbreviate: false,
@@ -1237,18 +1639,18 @@ var VerticalBarChartTooltip = memo15(
     });
     return /* @__PURE__ */ jsxs10(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ jsx15(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx15(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx15(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs10(Box10, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx15(Icon6, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx15(Text6, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      /* @__PURE__ */ jsx16(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ jsx16(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx16(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs10(Box10, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ jsx16(Icon6, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ jsx16(Text6, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
 );
 
 // src/components/VerticalBarChart/VerticalBarChart.tsx
-import { theme as theme10 } from "@sproutsocial/seeds-react-theme";
+import { theme as theme11 } from "@sproutsocial/seeds-react-theme";
 
 // src/components/VerticalBarChart/styles.ts
 import { css } from "styled-components";
@@ -1270,10 +1672,10 @@ var verticalBarChartStyles = css`
 `;
 
 // src/components/VerticalBarChart/VerticalBarChart.tsx
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 highchartsAccessibility4(Highcharts4);
 highchartsAnnotations3(Highcharts4);
-var StyledBox4 = styled4(Box11)`
+var StyledBox4 = styled5(Box11)`
   ${verticalBarChartStyles}
 `;
 var VerticalBarChart = memo16(
@@ -1293,7 +1695,7 @@ var VerticalBarChart = memo16(
       }
       chartData = data.slice(0, seriesLimit);
     }
-    return /* @__PURE__ */ jsx16(VerticalBarChartWithData, { ...props, data: chartData });
+    return /* @__PURE__ */ jsx17(VerticalBarChartWithData, { ...props, data: chartData });
   }
 );
 var VerticalBarChartWithData = memo16(
@@ -1370,7 +1772,7 @@ var VerticalBarChartWithData = memo16(
     const { colors } = data.reduce(
       (acc, item, index) => {
         acc.colors.push(
-          item.styles?.color ?? theme10.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+          item.styles?.color ?? theme11.colors.DATAVIZ_COLORS_LIST[index] ?? ""
         );
         acc.patterns.push(item.styles?.pattern ?? "solid");
         return acc;
@@ -1381,7 +1783,7 @@ var VerticalBarChartWithData = memo16(
       }
     );
     return /* @__PURE__ */ jsxs11(Fragment5, { children: [
-      /* @__PURE__ */ jsx16(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ jsx17(GlobalChartStyleOverrides, {}),
       /* @__PURE__ */ jsxs11(
         StyledBox4,
         {
@@ -1389,7 +1791,7 @@ var VerticalBarChartWithData = memo16(
           $hasOnClick: Boolean(onClick),
           bg: "container.background.base",
           children: [
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(
               HighchartsReact4,
               {
                 highcharts: Highcharts4,
@@ -1397,7 +1799,7 @@ var VerticalBarChartWithData = memo16(
                 callback
               }
             ),
-            chart && chart.annotations?.length ? /* @__PURE__ */ jsx16(
+            chart && chart.annotations?.length ? /* @__PURE__ */ jsx17(
               ChartXAnnotationMarkerPortal,
               {
                 xAnnotations,
@@ -1405,7 +1807,7 @@ var VerticalBarChartWithData = memo16(
                 chartContainer: chart.container
               }
             ) : null,
-            chart ? /* @__PURE__ */ jsx16(
+            chart ? /* @__PURE__ */ jsx17(
               ChartTooltipPortal,
               {
                 chart,
@@ -1416,7 +1818,7 @@ var VerticalBarChartWithData = memo16(
                   });
                   const x = context.x;
                   const xAnnotationDetails = typeof x === "number" ? xAnnotations?.[x]?.details : void 0;
-                  return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx16(
+                  return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx17(
                     VerticalBarChartTooltip,
                     {
                       currency,
@@ -1435,7 +1837,7 @@ var VerticalBarChartWithData = memo16(
                 }
               }
             ) : null,
-            /* @__PURE__ */ jsx16(Box11, { mt: 350, children: /* @__PURE__ */ jsx16(VerticalBarChartLegend, { data }) })
+            /* @__PURE__ */ jsx17(Box11, { mt: 350, children: /* @__PURE__ */ jsx17(VerticalBarChartLegend, { data }) })
           ]
         }
       )