@sproutsocial/seeds-react-data-viz 0.7.32 → 0.15.0

package/dist/esm/index.js

@@ -1,398 +1,87 @@
+import {
+  DONUT_CHART_HALO_SIZE,
+  DONUT_CHART_HEIGHT,
+  DONUT_CHART_WIDTH,
+  TIME_SERIES_CHART_HEIGHT,
+  VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT,
+  areaChartOptions,
+  baseChartOptions,
+  columnChartOptions,
+  donutChartOptions,
+  lineChartOptions,
+  timeSeriesChartOptions,
+  verticalBarChartStyles
+} from "./chunk-HQM3EIZW.js";
+import {
+  ChartLegend,
+  ChartLegendLabel,
+  ChartLegendLabelContentWithIcon,
+  ChartTable,
+  ChartTooltip,
+  ChartTooltipFooter,
+  ChartTooltipHeader,
+  ChartTooltipPortal,
+  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-LC3HGWDD.js";
+
 // src/components/AreaChart/AreaChart.tsx
-import { memo as memo14 } from "react";
+import { memo as memo4 } from "react";
 import Highcharts from "highcharts";
 import { HighchartsReact } from "highcharts-react-official";
 import highchartsAccessibility from "highcharts/modules/accessibility";
 import highchartsAnnotations from "highcharts/modules/annotations";
-import styled5 from "styled-components";
-import { Box as Box9 } from "@sproutsocial/seeds-react-box";
+import styled from "styled-components";
+import { Box as Box2 } from "@sproutsocial/seeds-react-box";
 
 // src/components/AreaChart/components/AreaChartLegend.tsx
-import { memo as memo4 } from "react";
-import { theme as theme4 } from "@sproutsocial/seeds-react-theme";
-
-// src/components/ChartLegend/ChartLegend.tsx
-import { memo as memo2 } from "react";
-import { Box as Box3 } from "@sproutsocial/seeds-react-box";
-import { theme as theme3 } from "@sproutsocial/seeds-react-theme";
-
-// src/components/ChartLegend/components/ChartLegendLabel.tsx
-import styled2 from "styled-components";
 import { memo } from "react";
-import { Box as Box2 } from "@sproutsocial/seeds-react-box";
-import { Text } from "@sproutsocial/seeds-react-text";
-
-// src/components/ColorBox/ColorBox.tsx
-import { css } from "styled-components";
-import { Box } from "@sproutsocial/seeds-react-box";
-
-// ../seeds-react-theme-provider/dist/index.mjs
-import "react";
-import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
 import { jsx } from "react/jsx-runtime";
-
-// src/components/ColorBox/ColorBox.tsx
-import "@sproutsocial/seeds-react-theme";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ColorBox = ({
-  display = "inline-block",
-  height = "16px",
-  width = "16px",
-  minWidth = width,
-  borderRadius = "400",
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx2(
-    Box,
-    {
-      ...props,
-      display,
-      height,
-      width,
-      minWidth,
-      borderRadius,
-      css: css`
-          cursor: ${(props2) => props2?.onClick ? "pointer" : "default"};
-        `
-    }
-  );
-};
-
-// src/components/ColorBox/DatavizColorBox.tsx
-import styled from "styled-components";
-import { theme as theme2 } from "@sproutsocial/seeds-react-theme";
-var DatavizColorBox = styled(ColorBox).attrs(
-  ({ colorIndex }) => ({
-    style: {
-      background: getDatavizColor(colorIndex),
-      opacity: getDatavizOpacity(colorIndex)
-    }
-  })
-)``;
-var getDatavizColor = (colorIndex) => theme2.colors.DATAVIZ_COLORS_LIST[colorIndex % theme2.colors.DATAVIZ_COLORS_LIST.length] || "";
-var getDatavizOpacity = (colorIndex) => {
-  const opacitySteps = [1, 0.6, 0.4, 0.2];
-  const opacityStep = Math.floor(colorIndex / theme2.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 as jsx3 } from "react/jsx-runtime";
-var NetworkColorBox = ({
-  networkColor,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx3(ColorBox, { ...props, bg: NETWORK_COLORS[networkColor] });
-};
-
-// src/components/ChartLegend/components/ChartLegendLabel.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var StyledBox = styled2(Box2)`
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme16 }) => theme16.space[300]};
-`;
-var ChartLegendLabel = memo(
-  function ChartLegendLabel2({
-    children,
-    color = "#CCC",
-    containerBoxProps = {}
-  }) {
-    return /* @__PURE__ */ jsxs(StyledBox, { ...containerBoxProps, children: [
-      /* @__PURE__ */ jsx4(ColorBox, { bg: color }),
-      /* @__PURE__ */ jsx4(Text, { as: "div", fontSize: 200, color: "text.subtext", children })
-    ] });
-  }
-);
-
-// src/components/ChartLegend/ChartLegend.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ChartLegend = memo2(function ChartLegend2({
-  legendLabels,
-  containerBoxProps = {},
-  stacked = false
-}) {
-  return /* @__PURE__ */ jsx5(
-    Box3,
-    {
-      as: "ul",
-      "aria-hidden": "true",
-      display: "flex",
-      justifyContent: "center",
-      flexDirection: stacked ? "column" : "row",
-      flexWrap: "wrap",
-      columnGap: 450,
-      rowGap: 200,
-      m: 0,
-      p: 0,
-      ...containerBoxProps,
-      children: legendLabels.map(({ color, content }, index) => /* @__PURE__ */ jsx5(
-        ChartLegendLabel,
-        {
-          color: color || theme3.colors.DATAVIZ_COLORS_LIST[index],
-          containerBoxProps: { as: "li" },
-          children: content
-        },
-        `chart-legend-label-${index}`
-      ))
-    }
-  );
-});
-
-// src/components/ChartLegend/components/ChartLegendLabelContentWithIcon.tsx
-import { memo as memo3 } from "react";
-import { Box as Box4 } from "@sproutsocial/seeds-react-box";
-import { jsxs as jsxs2 } from "react/jsx-runtime";
-var ChartLegendLabelContentWithIcon = memo3(
-  function ChartLegendLabelContentWithIcon2({
-    children,
-    icon
-  }) {
-    return icon ? /* @__PURE__ */ jsxs2(Box4, { display: "flex", alignItems: "center", gap: 200, children: [
-      icon,
-      children
-    ] }) : children;
-  }
-);
-
-// src/components/AreaChart/components/AreaChartLegend.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
 var getAreaChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx6(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: series.styles?.color || theme4.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var AreaChartLegend = memo4(
+var AreaChartLegend = memo(
   function AreaChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx6(ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx(ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
   }
 );
 
 // src/components/AreaChart/components/AreaChartTooltip.tsx
-import { memo as memo12 } from "react";
-import { Box as Box8 } from "@sproutsocial/seeds-react-box";
+import { memo as memo2 } from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
 import { Duration } from "@sproutsocial/seeds-react-duration";
 import { Icon } from "@sproutsocial/seeds-react-icon";
 import { Numeral } from "@sproutsocial/seeds-react-numeral";
-import { Text as Text4 } from "@sproutsocial/seeds-react-text";
-
-// src/components/ChartTooltip/ChartTooltip.tsx
-import { memo as memo5 } from "react";
-import styled3 from "styled-components";
-import { Box as Box5 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var StyledBox2 = styled3(Box5)`
-  .Icon,
-  .logo {
-    stroke: none;
-  }
-`;
-var ChartTooltip = memo5(function ChartTooltip2({
-  children
-}) {
-  return /* @__PURE__ */ jsx7(
-    StyledBox2,
-    {
-      bg: "container.background.base",
-      boxShadow: "medium",
-      border: 500,
-      borderColor: "container.border.base",
-      borderRadius: 500,
-      p: 400,
-      minWidth: 285,
-      children: /* @__PURE__ */ jsx7(Box5, { display: "flex", flexDirection: "column", gap: 350, children })
-    }
-  );
-});
-
-// src/components/ChartTooltip/components/ChartTooltipFooter.tsx
-import { memo as memo6 } from "react";
-import { Box as Box6 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ChartTooltipFooter = memo6(
-  function ChartTooltipFooter2({ children }) {
-    return /* @__PURE__ */ jsx8(
-      Box6,
-      {
-        borderTop: 500,
-        borderColor: "container.border.base",
-        mx: -400,
-        mb: -200,
-        px: 400,
-        pt: 350,
-        children
-      }
-    );
-  }
-);
-
-// src/components/ChartTooltip/components/ChartTooltipHeader.tsx
-import { memo as memo7 } from "react";
-import { Box as Box7 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var ChartTooltipHeader = memo7(
-  function ChartTooltipHeader2({ children }) {
-    return /* @__PURE__ */ jsx9(
-      Box7,
-      {
-        borderBottom: 500,
-        borderColor: "container.border.base",
-        mx: -400,
-        mt: -200,
-        px: 400,
-        pb: 350,
-        children
-      }
-    );
-  }
-);
-
-// src/components/ChartTooltip/components/ChartTooltipPortal.tsx
-import { memo as memo8, useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-var generateChartTooltipPortalId = (chartId) => `highcharts-custom-tooltip-${chartId}`;
-var ChartTooltipPortal = memo8(
-  function ChartTooltipPortal2({
-    chart,
-    renderContent
-  }) {
-    const isInitialized = useRef(false);
-    const [node, setNode] = useState(null);
-    const [context, setContext] = useState(null);
-    useEffect(() => {
-      const formatter = function() {
-        if (!isInitialized.current) {
-          isInitialized.current = true;
-          chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
-          chart.tooltip.hide(0);
-        }
-        setContext(this);
-        return `<div id="${generateChartTooltipPortalId(
-          chart.index
-        )}" role='tooltip'></div>`;
-      };
-      chart.update({ tooltip: { formatter } });
-    }, [chart]);
-    useEffect(() => {
-      if (context?.series?.chart?.tooltip) {
-        const tooltip = context.series.chart.tooltip;
-        const textElement = tooltip.label.text.element;
-        tooltip.label.box.attr({
-          height: textElement.offsetHeight,
-          width: textElement.offsetWidth
-        });
-        setNode(
-          document.getElementById(generateChartTooltipPortalId(chart.index))
-        );
-      }
-    }, [context, chart.index]);
-    return node && context ? createPortal(renderContent(context), node) : null;
-  }
-);
-
-// src/components/ChartTooltip/components/ChartTooltipTable.tsx
-import { memo as memo10 } from "react";
-
-// src/components/ChartTable/ChartTable.tsx
-import { memo as memo9 } from "react";
-import styled4 from "styled-components";
-import { Text as Text2 } from "@sproutsocial/seeds-react-text";
-import { Table as SeedsTable } from "@sproutsocial/seeds-react-table";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var StyledSeedsTable = styled4(SeedsTable)`
-  tbody tr:last-child {
-    border-bottom: none;
-  }
-  tr:last-child td,
-  tr:last-child th {
-    padding-bottom: 0;
-  }
-  tr:first-child td,
-  tr:first-child th {
-    padding-top: 0;
-  }
-  tr th {
-    padding-left: 0;
-  }
-  tr td:last-child {
-    padding-right: 0;
-  }
-`;
-var StyledSeedsTableRow = styled4(SeedsTable.TableRow)`
-  ${({ $isAppendedRow, theme: theme16 }) => $isAppendedRow ? `border-top: 2px solid ${theme16.colors.container.border.base}` : ""}
-`;
-var ChartTable = memo9(function ChartTable2({
-  rows
-}) {
-  if (!rows || rows.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx10(StyledSeedsTable, { children: /* @__PURE__ */ jsx10(SeedsTable.TableBody, { children: rows.map(({ cells, isAppendedRow }, rowIndex) => {
-    if (!cells || cells.length === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx10(
-      StyledSeedsTableRow,
-      {
-        $isAppendedRow: isAppendedRow,
-        children: cells.map(
-          ({ content, align = "left", colSpan = 1 }, cellIndex) => {
-            const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;
-            return /* @__PURE__ */ jsx10(
-              SeedsTable.Cell,
-              {
-                id: uniqueIdentifier,
-                scope: cellIndex === 0 ? "row" : void 0,
-                align,
-                colSpan,
-                py: 200,
-                children: /* @__PURE__ */ jsx10(Text2.SmallBodyCopy, { as: "div", children: content })
-              },
-              uniqueIdentifier
-            );
-          }
-        )
-      },
-      `chart-tooltip-table-row-${rowIndex}`
-    );
-  }) }) });
-});
-
-// src/components/ChartTooltip/components/ChartTooltipTable.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ChartTooltipTable = memo10(
-  function ChartTooltipTable2({ rows }) {
-    return /* @__PURE__ */ jsx11(ChartTable, { rows });
-  }
-);
-
-// src/components/ChartTooltip/components/ChartTooltipTitle.tsx
-import { memo as memo11 } from "react";
-import { Text as Text3 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ChartTooltipTitle = memo11(
-  function ChartTooltipTitle2({ children }) {
-    return /* @__PURE__ */ jsx12(Text3.SmallSubHeadline, { as: "p", children });
-  }
-);
-
-// src/components/AreaChart/components/AreaChartTooltip.tsx
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
-var AreaChartTooltip = memo12(
+import { Text } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AreaChartTooltip = memo2(
   function AreaChartTooltip2({
     data,
     invalidNumberLabel,
@@ -413,10 +102,10 @@ var AreaChartTooltip = memo12(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx13(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx13(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx13(Text4, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx2(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx2(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx2(Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx13(Text4, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx13(Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx13(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx2(Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx2(Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx2(
               Numeral,
               {
                 abbreviate: false,
@@ -435,8 +124,8 @@ var AreaChartTooltip = memo12(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx13(
-              Text4,
+            content: /* @__PURE__ */ jsx2(
+              Text,
               {
                 fontWeight: "semibold",
                 "aria-label": `${tooltipTotalLabel}: `,
@@ -445,7 +134,7 @@ var AreaChartTooltip = memo12(
             )
           },
           {
-            content: /* @__PURE__ */ jsx13(Text4, { fontWeight: "bold", children: total === null && invalidNumberLabel ? invalidNumberLabel : numberFormat === "duration" ? /* @__PURE__ */ jsx13(Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx13(
+            content: /* @__PURE__ */ jsx2(Text, { fontWeight: "bold", children: total === null && invalidNumberLabel ? invalidNumberLabel : numberFormat === "duration" ? /* @__PURE__ */ jsx2(Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx2(
               Numeral,
               {
                 abbreviate: false,
@@ -461,40 +150,41 @@ var AreaChartTooltip = memo12(
         isAppendedRow: true
       }
     ] : [];
-    return /* @__PURE__ */ jsxs3(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ jsx13(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx2(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ jsx2(
         ChartTooltipTable,
         {
           rows: [...rows, ...appendedRows]
         }
       ),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx13(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs3(Box8, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx13(Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx13(Text4, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      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 })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
 );
 
 // src/components/ChartXAnnotationMarker/components/ChartXAnnotationMarkerPortal.tsx
-import { memo as memo13, useEffect as useEffect2, useState as useState2, useRef as useRef2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { memo as memo3, useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
 import "highcharts";
-import { Fragment, jsx as jsx14 } from "react/jsx-runtime";
-var ChartXAnnotationMarkerPortal = memo13(
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+var ChartXAnnotationMarkerPortal = memo3(
   function ChartXAnnotationMarkerPortal2({
     xAnnotations,
-    annotationContext
+    annotationContext,
+    chartContainer
   }) {
-    const annotationContainers = useRef2({});
-    const [renderCount, setRenderCount] = useState2(0);
+    const annotationContainers = useRef({});
+    const [renderCount, setRenderCount] = useState(0);
     const forceRender = () => setRenderCount((prev) => prev + 1);
-    useEffect2(() => {
+    useEffect(() => {
       if (annotationContext.labels) {
         const newContainers = {};
-        const existingAnnotationContainers = document.querySelectorAll(
+        const existingAnnotationContainers = chartContainer.querySelectorAll(
           "div[data-annotation-marker='true']"
         );
         existingAnnotationContainers.forEach(
@@ -514,7 +204,7 @@ var ChartXAnnotationMarkerPortal = memo13(
         annotationContainers.current = newContainers;
         forceRender();
         requestAnimationFrame(() => {
-          document.querySelectorAll("div.highcharts-annotation").forEach((annotationDiv) => {
+          chartContainer.querySelectorAll("div.highcharts-annotation").forEach((annotationDiv) => {
             const reactAnnotations = annotationDiv.querySelectorAll(
               "div[data-annotation-marker]"
             );
@@ -527,569 +217,18 @@ var ChartXAnnotationMarkerPortal = memo13(
           });
         });
       }
-    }, [annotationContext.labels, xAnnotations]);
-    return /* @__PURE__ */ jsx14(Fragment, { children: Object.entries(annotationContainers.current).map(
+    }, [annotationContext.labels, xAnnotations, chartContainer]);
+    return /* @__PURE__ */ jsx3(Fragment, { children: Object.entries(annotationContainers.current).map(
       ([xValue, container]) => {
         const annotationComponent = xAnnotations?.[Number(xValue)]?.marker;
-        return annotationComponent ? createPortal2(annotationComponent(), container) : null;
+        return annotationComponent ? createPortal(annotationComponent(), container) : null;
       }
     ) });
   }
 );
 
-// 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/transformTimeSeriesTooltipData.ts
-import { theme as theme5 } from "@sproutsocial/seeds-react-theme";
-var transformTimeSeriesTooltipData = ({
-  context,
-  data
-}) => {
-  return (context.series.chart.series || []).map((series, index) => {
-    const pointIndex = context.point.index;
-    const y = series?.points?.[pointIndex]?.y;
-    return {
-      color: data[index]?.styles?.color || theme5.colors.DATAVIZ_COLORS_LIST[index],
-      ...data[index]?.icon ? { icon: data[index]?.icon } : {},
-      name: series.name,
-      value: typeof y === "number" ? y : null
-    };
-  });
-};
-
-// 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 useState3, useCallback, useMemo } from "react";
-
-// src/constants/chartOptions.ts
-import _ from "lodash";
-var baseChartOptions = {
-  chart: {
-    animation: false,
-    styledMode: true
-  },
-  credits: {
-    enabled: false
-  },
-  exporting: {
-    enabled: false,
-    fallbackToExportServer: false
-  },
-  legend: {
-    enabled: false
-  },
-  title: {
-    text: void 0
-  },
-  tooltip: {
-    hideDelay: 0,
-    outside: true,
-    padding: 0,
-    shape: "rect",
-    shared: true,
-    useHTML: true
-  }
-};
-var TIME_SERIES_CHART_HEIGHT = 275;
-var timeSeriesChartOptions = _.merge({}, baseChartOptions, {
-  annotations: [
-    {
-      draggable: "",
-      labelOptions: {
-        useHTML: true,
-        padding: 0
-        // removes "left" property padding created by highcharts so that label is centered
-      }
-    }
-  ],
-  chart: {
-    // events.click is set at the component level because of the optional onClick prop
-    height: TIME_SERIES_CHART_HEIGHT,
-    spacing: [5, 1, 0, 2]
-  },
-  plotOptions: {
-    series: {
-      animation: false,
-      clip: false,
-      marker: {
-        enabled: false,
-        states: {
-          hover: {
-            enabled: false
-          }
-        }
-      }
-    }
-  },
-  xAxis: {
-    crosshair: {
-      zIndex: 3
-    },
-    minPadding: 0,
-    // must be handled dynamically instead of css
-    maxPadding: 0,
-    // must be handled dynamically instead of css
-    type: "datetime",
-    labels: {
-      useHTML: true
-      // formatter is set at the component level because of the required text locale prop
-    }
-  },
-  yAxis: {
-    labels: {
-      useHTML: true
-      // formatter is set at the component level because of the optional yAxisLabelFormatter prop
-    },
-    softMax: 0,
-    softMin: 0,
-    title: {
-      text: void 0
-    },
-    plotLines: [
-      /* Adds a custom plotLine at y=0 to represent the chart baseline.
-        This approach allows full control over the line's appearance (e.g., color, z-index),
-        unlike relying on the default xAxis line, which always renders at the bottom of the chart
-        even when y=0 appears elsewhere (e.g., with negative values).
-      */
-      {
-        className: "y-axis-zero-line",
-        value: 0,
-        zIndex: 3
-        // ensures the line appears over the default y=0 line, which we can't seleect as specifically
-      }
-    ]
-  }
-});
-var lineChartOptions = _.merge({}, timeSeriesChartOptions, {
-  // plotOptions.spline.events.click is set at the component level because of the optional onClick prop
-});
-var areaChartOptions = _.merge({}, timeSeriesChartOptions, {
-  plotOptions: {
-    areaspline: {
-      // events.click is set at the component level because of the optional onClick prop
-      stacking: "normal"
-    }
-  }
-});
-var columnChartOptions = _.merge({}, timeSeriesChartOptions, {
-  plotOptions: {
-    column: {
-      stacking: "normal",
-      pointPadding: 0.25,
-      groupPadding: 0.25,
-      borderRadius: 4
-    }
-  },
-  xAxis: {
-    crosshair: false
-  },
-  yAxis: {
-    plotLines: [
-      {
-        // For stacked column charts with visible borders (e.g., white for contrast),
-        // we raise the zIndex of the y=0 plotLine to ensure it remains visible
-        // and isn't visually covered by overlapping column borders.
-        zIndex: 5
-      }
-    ]
-  }
-});
-var VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
-var DONUT_CHART_HALO_SIZE = 10;
-var DONUT_CHART_HEIGHT = 250 + DONUT_CHART_HALO_SIZE * 2;
-var DONUT_CHART_WIDTH = DONUT_CHART_HEIGHT;
-var donutChartOptions = _.merge({}, baseChartOptions, {
-  chart: {
-    height: DONUT_CHART_HEIGHT,
-    spacing: [0, 0, 0, 0]
-  },
-  plotOptions: {
-    pie: {
-      animation: false,
-      borderRadius: 0,
-      // must be handled here instead of css because of path rendering
-      dataLabels: {
-        enabled: false
-      },
-      innerSize: "50%"
-    }
-  }
-});
-
 // src/hooks/useTimeSeriesChartOptions.ts
+import { useState as useState2, useCallback, useMemo } from "react";
 import { merge } from "lodash";
 var useTimeSeriesChartOptions = ({
   xAnnotations,
@@ -1106,7 +245,7 @@ var useTimeSeriesChartOptions = ({
   timezone = "UTC",
   xAxisLabelFormatter: xAxisLabelFormatter2
 }) => {
-  const [chart, setChart] = useState3(null);
+  const [chart, setChart] = useState2(null);
   const callback = useCallback((chartInstance) => {
     setChart(chartInstance);
   }, []);
@@ -1337,193 +476,19 @@ var useTimeSeriesChartOptions = ({
 };
 var xAxisLabelFormatterDefault = xAxisLabelFormatter;
 
-// src/styles/chartStyles.ts
-import { css as css2, createGlobalStyle } from "styled-components";
-import { theme as theme6 } from "@sproutsocial/seeds-react-theme";
-import "highcharts/css/highcharts.css";
-var GlobalChartStyleOverrides = createGlobalStyle`
-  // USAGE NOTE:
-  // Put general styles in baseChartStyles instead when possible to avoid excessive global styling.
-  // This global component is only for styles that can't override highcharts defaults when scoped.
-
-  .highcharts-tooltip-container {
-    z-index: 7 !important;
-  }
-  .highcharts-tooltip-box {
-    fill: transparent !important;
-  }
-`;
-var baseChartStyles = css2`
-  --highcharts-background-color: ${({ theme: theme16 }) => theme16.colors.container.background.base};
-
-  // set color variables and map to each series
-  ${({ $colors }) => $colors.map((color, index) => {
-  const chartColor = color || theme6.colors.DATAVIZ_COLORS_LIST[index];
-  return `
-				// map colors to custom assigned colors or fallback to default data viz color rotation
-				--highcharts-color-${index}: ${chartColor};
-
-				// highcharts already accounts for 10 series, but if we have more, we need to add them
-				.highcharts-color-${index} {
-					color: var(--highcharts-color-${index});
-					stroke: var(--highcharts-color-${index});
-					fill: var(--highcharts-color-${index});
-				}`;
-}).join("\n")}
-
-  // set overall chart background color
-  .highcharts-background {
-    fill: ${({ theme: theme16 }) => theme16.colors.container.background.base};
-  }
-
-  g.highcharts-annotation-label {
-    display: none;
-  }
-
-  div.highcharts-annotation-label {
-    top: 0 !important;
-    transform: translateX(-50%); // centers the label on the targeted axis point
-    pointer-events: none; // prevents tooltip hover from being interrupted by this element since it renders after on the dom
-  }
-`;
-var timeSeriesChartStyles = css2`
-  ${baseChartStyles}
-
-  // vertical crosshair styles
-	.highcharts-crosshair {
-    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.decorative.neutral};
-    stroke-width: 1;
-  }
-
-  // axis and gridline styles
-  .highcharts-grid-line {
-    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.base};
-  }
-
-  .highcharts-axis-line {
-    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.base};
-  }
-
-  .highcharts-tick {
-    stroke: none;
-  }
-  .highcharts-xaxis-labels,
-  .highcharts-yaxis-labels {
-    > span {
-      font-family: ${({ theme: theme16 }) => theme16.fontFamily};
-      ${({ theme: theme16 }) => theme16.typography[100]};
-      font-weight: ${({ theme: theme16 }) => theme16.fontWeights.normal};
-      color: ${({ theme: theme16 }) => theme16.colors.text.subtext};
-    }
-  }
-  .highcharts-xaxis-labels {
-    > span {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      > span:nth-of-type(2) {
-        font-weight: ${({ theme: theme16 }) => theme16.fontWeights.semibold};
-      }
-    }
-  }
-
-  // we don't want to drop the opacity when another item is hovered
-  .highcharts-series-inactive {
-    opacity: 1;
-  }
-
-  // apply cursor pointer when click functionality is turned on
-  ${({ $hasOnClick }) => $hasOnClick && `
- 			.highcharts-series,
- 			.highcharts-point {
- 				cursor: pointer;
- 			}
- 			.highcharts-plot-background,
- 			.highcharts-crosshair,
- 			.highcharts-grid-line {
- 				fill: transparent;
- 				cursor: pointer;
- 		}`}
-
-  path.highcharts-plot-line.y-axis-zero-line {
-    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.decorative.neutral};
-  }
-`;
-var lineChartStyles = css2`
-  ${timeSeriesChartStyles}
-
-  // set the line stroke
-	.highcharts-graph {
-    stroke-width: 3;
-  }
-
-  // dashed line styles
-  ${({ $patterns }) => $patterns.map((pattern, index) => {
-  return pattern === "dashed" ? `
- 					// highcharts already accounts for 10 series, but if we have more, we need to add them
- 					.highcharts-series-${index} {
- 						stroke-dasharray: 2, 8;
- 					}` : "";
-})}
-`;
-var areaChartStyles = css2`
-  ${timeSeriesChartStyles}
-
-  // don't need to show a stroke for the line part of each area
-	.highcharts-graph {
-    stroke-width: 0;
-  }
-
-  // fill areas to full opacity
-  .highcharts-area {
-    fill-opacity: 1;
-  }
-`;
-var donutChartStyles = css2`
-  ${baseChartStyles}
-
-  // remove 250ms fade in/out when hovering over different donut chart slices
-	.highcharts-point {
-    transition: opacity 0s;
-  }
-
-  // remove stroke on donut slices
-  .highcharts-pie-series .highcharts-point {
-    stroke: none;
-  }
-
-  // don't reduce opacity when hovering
-  .highcharts-point-hover {
-    fill-opacity: none;
-  }
-
-  // apply cursor pointer when click functionality is turned on
-  ${({ $hasOnClick }) => $hasOnClick && `
- 			.highcharts-series,
- 			.highcharts-point {
- 				cursor: pointer;
- 			}
- 			.highcharts-plot-background,
- 			.highcharts-crosshair,
- 			.highcharts-grid-line {
- 				fill: transparent;
- 				cursor: pointer;
- 		}`}
-`;
-
 // src/components/AreaChart/AreaChart.tsx
-import { theme as theme7 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { theme as theme2 } from "@sproutsocial/seeds-react-theme";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 highchartsAccessibility(Highcharts);
 highchartsAnnotations(Highcharts);
-var StyledBox3 = styled5(Box9)`
+var StyledBox = styled(Box2)`
   ${areaChartStyles}
 `;
-var AreaChart = memo14(function AreaChart2(props) {
+var AreaChart = memo4(function AreaChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx15(AreaChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx4(AreaChartWithData, { ...props });
 });
-var AreaChartWithData = memo14(function AreaChartWithData2({
+var AreaChartWithData = memo4(function AreaChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -1557,18 +522,18 @@ var AreaChartWithData = memo14(function AreaChartWithData2({
     xAnnotations
   });
   const colors = data.map(
-    (series, index) => series.styles?.color ?? theme7.colors.DATAVIZ_COLORS_LIST[index]
+    (series, index) => series.styles?.color ?? theme2.colors.DATAVIZ_COLORS_LIST[index]
   );
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx15(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ jsxs4(
-      StyledBox3,
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ jsxs2(
+      StyledBox,
       {
         $colors: colors,
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx4(
             HighchartsReact,
             {
               highcharts: Highcharts,
@@ -1576,14 +541,15 @@ var AreaChartWithData = memo14(function AreaChartWithData2({
               callback
             }
           ),
-          chart && chart.annotations?.length ? /* @__PURE__ */ jsx15(
+          chart && chart.annotations?.length ? /* @__PURE__ */ jsx4(
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
-              annotationContext: chart.annotations?.[0]
+              annotationContext: chart.annotations?.[0],
+              chartContainer: chart.container
             }
           ) : null,
-          chart && !disableTooltips ? /* @__PURE__ */ jsx15(
+          chart && !disableTooltips ? /* @__PURE__ */ jsx4(
             ChartTooltipPortal,
             {
               chart,
@@ -1595,7 +561,7 @@ var AreaChartWithData = memo14(function AreaChartWithData2({
                 const x = context.x;
                 const total = context.total;
                 const xAnnotationDetails = xAnnotations?.[x]?.details;
-                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ jsx15(
+                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ jsx4(
                   AreaChartTooltip,
                   {
                     currency,
@@ -1616,7 +582,7 @@ var AreaChartWithData = memo14(function AreaChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx15(Box9, { mt: 350, children: /* @__PURE__ */ jsx15(AreaChartLegend, { data }) })
+          /* @__PURE__ */ jsx4(Box2, { mt: 350, children: /* @__PURE__ */ jsx4(AreaChartLegend, { data }) })
         ]
       }
     )
@@ -1624,30 +590,30 @@ var AreaChartWithData = memo14(function AreaChartWithData2({
 });
 
 // src/components/ChartXAnnotationDetails/ChartXAnnotationDetails.tsx
-import { memo as memo15 } from "react";
-import { Box as Box10 } from "@sproutsocial/seeds-react-box";
+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 Text5 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
-var ChartXAnnotationDetails = memo15(
+import { Text as Text2 } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChartXAnnotationDetails = memo5(
   ({ iconName, text }) => {
-    return /* @__PURE__ */ jsx16(ChartTooltipHeader, { children: /* @__PURE__ */ jsxs5(Box10, { display: "flex", alignItems: "center", gap: 300, children: [
-      /* @__PURE__ */ jsx16(Icon2, { name: iconName, size: "mini", color: "icon.base" }),
-      /* @__PURE__ */ jsx16(Text5, { color: "text.body", fontSize: 200, children: 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 })
     ] }) });
   }
 );
 
 // src/components/ChartXAnnotationMarker/ChartXAnnotationMarker.tsx
-import { memo as memo16 } from "react";
-import { Box as Box11 } from "@sproutsocial/seeds-react-box";
+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 jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
-var ChartXAnnotationMarker = memo16(
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChartXAnnotationMarker = memo6(
   ({ iconName }) => {
-    return /* @__PURE__ */ jsxs6(Box11, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
-      /* @__PURE__ */ jsx17(
-        Box11,
+    return /* @__PURE__ */ jsxs4(Box4, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
+      /* @__PURE__ */ jsx6(
+        Box4,
         {
           display: "flex",
           alignItems: "center",
@@ -1656,49 +622,49 @@ var ChartXAnnotationMarker = memo16(
           height: "20px",
           bg: "icon.base",
           borderRadius: "50%",
-          children: /* @__PURE__ */ jsx17(Icon3, { name: iconName, size: "mini", color: "icon.inverse" })
+          children: /* @__PURE__ */ jsx6(Icon3, { name: iconName, size: "mini", color: "icon.inverse" })
         }
       ),
-      /* @__PURE__ */ jsx17(Box11, { height: `199px`, width: "0.5px", bg: "neutral.200" })
+      /* @__PURE__ */ jsx6(Box4, { height: `199px`, width: "0.5px", bg: "neutral.200" })
     ] });
   }
 );
 
 // src/components/DonutChart/DonutChart.tsx
-import { memo as memo19, useState as useState4, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { memo as memo9, useState as useState3, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 import Highcharts2 from "highcharts";
 import { HighchartsReact as HighchartsReact2 } from "highcharts-react-official";
 import highchartsAccessibility2 from "highcharts/modules/accessibility";
-import styled6 from "styled-components";
-import { Box as Box13 } from "@sproutsocial/seeds-react-box";
+import styled2 from "styled-components";
+import { Box as Box6 } from "@sproutsocial/seeds-react-box";
 
 // src/components/DonutChart/components/DonutChartLegend.tsx
-import { memo as memo17 } from "react";
-import { theme as theme8 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { memo as memo7 } from "react";
+import { theme as theme3 } from "@sproutsocial/seeds-react-theme";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ jsx18(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
-    color: slice.styles?.color || theme8.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx7(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    color: slice.styles?.color || theme3.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var DonutChartLegend = memo17(
+var DonutChartLegend = memo7(
   function DonutChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx18(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx7(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
 // src/components/DonutChart/components/DonutChartTooltip.tsx
-import { memo as memo18 } from "react";
-import { Box as Box12 } from "@sproutsocial/seeds-react-box";
+import { memo as memo8 } from "react";
+import { Box as Box5 } from "@sproutsocial/seeds-react-box";
 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 Text6 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
-var DonutChartTooltip = memo18(
+import { Text as Text3 } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var DonutChartTooltip = memo8(
   function DonutChartTooltip2({
     color,
     name,
@@ -1716,11 +682,11 @@ var DonutChartTooltip = memo18(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx19(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx19(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx19(Text6, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx8(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx8(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx8(Text3, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: /* @__PURE__ */ jsxs7(Box12, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx19(
+            content: /* @__PURE__ */ jsxs5(Box5, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ jsx8(
                 Numeral2,
                 {
                   number: percent,
@@ -1729,7 +695,7 @@ var DonutChartTooltip = memo18(
                   locale: numberLocale
                 }
               ),
-              /* @__PURE__ */ jsx19(Text6, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx19(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx8(Text3, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx8(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx8(
                 Numeral2,
                 {
                   abbreviate: false,
@@ -1745,25 +711,25 @@ var DonutChartTooltip = memo18(
         ]
       }
     ];
-    return /* @__PURE__ */ jsxs7(ChartTooltip, { children: [
-      /* @__PURE__ */ jsx19(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx19(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs7(Box12, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx19(Icon4, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx19(Text6, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+    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 })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
 );
 
 // src/components/DonutChart/helpers/transformDonutChartTooltipData.ts
-import { theme as theme9 } from "@sproutsocial/seeds-react-theme";
+import { theme as theme4 } from "@sproutsocial/seeds-react-theme";
 var transformDonutChartTooltipData = ({
   context,
   data
 }) => {
   const colorIndex = context.colorIndex;
   return {
-    color: data[colorIndex]?.styles?.color ?? theme9.colors.DATAVIZ_COLORS_LIST[colorIndex] ?? "",
+    color: data[colorIndex]?.styles?.color ?? theme4.colors.DATAVIZ_COLORS_LIST[colorIndex] ?? "",
     ...data[colorIndex]?.icon ? { icon: data[colorIndex]?.icon } : {},
     name: context.key,
     percent: context.percentage,
@@ -1772,17 +738,17 @@ var transformDonutChartTooltipData = ({
 };
 
 // src/components/DonutChart/DonutChart.tsx
-import { theme as theme10 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+import { theme as theme5 } from "@sproutsocial/seeds-react-theme";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 highchartsAccessibility2(Highcharts2);
-var StyledBox4 = styled6(Box13)`
+var StyledBox2 = styled2(Box6)`
   ${donutChartStyles}
 `;
-var DonutChart = memo19(function DonutChart2(props) {
+var DonutChart = memo9(function DonutChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx20(DonutChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx9(DonutChartWithData, { ...props });
 });
-var DonutChartWithData = memo19(
+var DonutChartWithData = memo9(
   function DonutChartWithData2({
     data,
     numberLocale = "en-us",
@@ -1796,12 +762,12 @@ var DonutChartWithData = memo19(
     onClick,
     tooltipClickLabel
   }) {
-    const [options, setOptions] = useState4(donutChartOptions);
-    const [chart, setChart] = useState4(null);
+    const [options, setOptions] = useState3(donutChartOptions);
+    const [chart, setChart] = useState3(null);
     const callback = useCallback2((chartInstance) => {
       setChart(chartInstance);
     }, []);
-    useEffect3(() => {
+    useEffect2(() => {
       setOptions({
         accessibility: {
           point: {
@@ -1851,18 +817,18 @@ var DonutChartWithData = memo19(
       });
     }, [data]);
     const colors = data.map(
-      (series, index) => series.styles?.color ?? theme10.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+      (series, index) => series.styles?.color ?? theme5.colors.DATAVIZ_COLORS_LIST[index] ?? ""
     );
-    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsx20(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ jsxs8(
-        StyledBox4,
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ jsxs6(
+        StyledBox2,
         {
           $colors: colors,
           $hasOnClick: Boolean(onClick),
           bg: "container.background.base",
           children: [
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx9(
               HighchartsReact2,
               {
                 highcharts: Highcharts2,
@@ -1870,13 +836,13 @@ var DonutChartWithData = memo19(
                 callback
               }
             ),
-            chart && !disableTooltips ? /* @__PURE__ */ jsx20(
+            chart && !disableTooltips ? /* @__PURE__ */ jsx9(
               ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
                   const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx20(
+                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx9(
                     DonutChartTooltip,
                     {
                       color,
@@ -1895,7 +861,7 @@ var DonutChartWithData = memo19(
                 }
               }
             ) : null,
-            hideLegend ? null : /* @__PURE__ */ jsx20(Box13, { mt: 350, children: /* @__PURE__ */ jsx20(DonutChartLegend, { data }) })
+            hideLegend ? null : /* @__PURE__ */ jsx9(Box6, { mt: 350, children: /* @__PURE__ */ jsx9(DonutChartLegend, { data }) })
           ]
         }
       )
@@ -1904,14 +870,14 @@ var DonutChartWithData = memo19(
 );
 
 // src/components/DonutChart/components/DonutChartLegendTable.tsx
-import { memo as memo20 } from "react";
-import { Box as Box14 } from "@sproutsocial/seeds-react-box";
+import { memo as memo10 } from "react";
+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 Text7 } from "@sproutsocial/seeds-react-text";
-import { theme as theme11 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
-var DonutChartLegendTable = memo20(
+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";
+var DonutChartLegendTable = memo10(
   function DonutChartLegendTable2({
     data,
     numberLocale = "en-us",
@@ -1927,15 +893,15 @@ var DonutChartLegendTable = memo20(
     );
     const rows = data.map((dataPoint, index) => {
       const { name, icon, styles, value } = dataPoint;
-      const color = styles?.color || theme11.colors.DATAVIZ_COLORS_LIST[index];
+      const color = styles?.color || theme6.colors.DATAVIZ_COLORS_LIST[index];
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx21(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx21(ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ jsx10(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx10(ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
-            content: /* @__PURE__ */ jsxs9(Box14, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx21(Text7, { color: "text.body", children: /* @__PURE__ */ jsx21(
+            content: /* @__PURE__ */ jsxs7(Box7, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ jsx10(Text4, { color: "text.body", children: /* @__PURE__ */ jsx10(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -1944,7 +910,7 @@ var DonutChartLegendTable = memo20(
                   number: value / total * 100
                 }
               ) }),
-              /* @__PURE__ */ jsx21(Text7, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx21(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx10(Text4, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx10(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx10(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -1964,10 +930,10 @@ var DonutChartLegendTable = memo20(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx21(Text7, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
+            content: /* @__PURE__ */ jsx10(Text4, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
           },
           {
-            content: /* @__PURE__ */ jsx21(Text7, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx21(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx21(
+            content: /* @__PURE__ */ jsx10(Text4, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx10(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx10(
               Numeral3,
               {
                 abbreviate: false,
@@ -1983,7 +949,7 @@ var DonutChartLegendTable = memo20(
         isAppendedRow: true
       }
     ];
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx10(
       ChartTable,
       {
         rows: [...rows, ...totalRow]
@@ -1993,41 +959,41 @@ var DonutChartLegendTable = memo20(
 );
 
 // src/components/LineChart/LineChart.tsx
-import { memo as memo23 } from "react";
+import { memo as memo13 } from "react";
 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 styled7 from "styled-components";
-import { Box as Box16 } from "@sproutsocial/seeds-react-box";
+import styled3 from "styled-components";
+import { Box as Box9 } from "@sproutsocial/seeds-react-box";
 
 // src/components/LineChart/components/LineChartLegend.tsx
-import { memo as memo21 } from "react";
-import { theme as theme12 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { memo as memo11 } from "react";
+import { theme as theme7 } from "@sproutsocial/seeds-react-theme";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx22(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: series.styles?.color || theme12.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx11(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme7.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var LineChartLegend = memo21(
+var LineChartLegend = memo11(
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx22(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx11(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
 // src/components/LineChart/components/LineChartTooltip.tsx
-import { memo as memo22 } from "react";
-import { Box as Box15 } from "@sproutsocial/seeds-react-box";
+import { memo as memo12 } from "react";
+import { Box as Box8 } from "@sproutsocial/seeds-react-box";
 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 Text8 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
-var LineChartTooltip = memo22(
+import { Text as Text5 } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var LineChartTooltip = memo12(
   function LineChartTooltip2({
     data,
     invalidNumberLabel,
@@ -2046,10 +1012,10 @@ var LineChartTooltip = memo22(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx23(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx23(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx23(Text8, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx12(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx12(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx12(Text5, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx23(Text8, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx23(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx23(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx12(Text5, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx12(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx12(
               Numeral4,
               {
                 abbreviate: false,
@@ -2064,31 +1030,31 @@ var LineChartTooltip = memo22(
         ]
       };
     });
-    return /* @__PURE__ */ jsxs10(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs8(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ jsx23(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx23(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx23(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs10(Box15, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx23(Icon5, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx23(Text8, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      /* @__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 })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
 );
 
 // src/components/LineChart/LineChart.tsx
-import { theme as theme13 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { theme as theme8 } from "@sproutsocial/seeds-react-theme";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 highchartsAccessibility3(Highcharts3);
 highchartsAnnotations2(Highcharts3);
-var StyledBox5 = styled7(Box16)`
+var StyledBox3 = styled3(Box9)`
   ${lineChartStyles}
 `;
-var LineChart = memo23(function LineChart2(props) {
+var LineChart = memo13(function LineChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx24(LineChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx13(LineChartWithData, { ...props });
 });
-var LineChartWithData = memo23(function LineChartWithData2({
+var LineChartWithData = memo13(function LineChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -2125,7 +1091,7 @@ var LineChartWithData = memo23(function LineChartWithData2({
   const { colors, patterns } = data.reduce(
     (acc, item, index) => {
       acc.colors.push(
-        item.styles?.color ?? theme13.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+        item.styles?.color ?? theme8.colors.DATAVIZ_COLORS_LIST[index] ?? ""
       );
       acc.patterns.push(item.styles?.pattern ?? "solid");
       return acc;
@@ -2135,17 +1101,17 @@ var LineChartWithData = memo23(function LineChartWithData2({
       patterns: []
     }
   );
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    /* @__PURE__ */ jsx24(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ jsxs11(
-      StyledBox5,
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx13(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ jsxs9(
+      StyledBox3,
       {
         $colors: colors,
         $patterns: patterns,
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx13(
             HighchartsReact3,
             {
               highcharts: Highcharts3,
@@ -2153,14 +1119,15 @@ var LineChartWithData = memo23(function LineChartWithData2({
               callback
             }
           ),
-          chart && chart.annotations?.length ? /* @__PURE__ */ jsx24(
+          chart && chart.annotations?.length ? /* @__PURE__ */ jsx13(
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
-              annotationContext: chart.annotations?.[0]
+              annotationContext: chart.annotations?.[0],
+              chartContainer: chart.container
             }
           ) : null,
-          chart && !disableTooltips ? /* @__PURE__ */ jsx24(
+          chart && !disableTooltips ? /* @__PURE__ */ jsx13(
             ChartTooltipPortal,
             {
               chart,
@@ -2171,7 +1138,7 @@ var LineChartWithData = memo23(function LineChartWithData2({
                 });
                 const x = context.x;
                 const xAnnotationDetails = xAnnotations?.[x]?.details;
-                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx24(
+                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx13(
                   LineChartTooltip,
                   {
                     currency,
@@ -2190,7 +1157,7 @@ var LineChartWithData = memo23(function LineChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx24(Box16, { mt: 350, children: /* @__PURE__ */ jsx24(LineChartLegend, { data }) })
+          /* @__PURE__ */ jsx13(Box9, { mt: 350, children: /* @__PURE__ */ jsx13(LineChartLegend, { data }) })
         ]
       }
     )
@@ -2198,41 +1165,41 @@ var LineChartWithData = memo23(function LineChartWithData2({
 });
 
 // src/components/VerticalBarChart/VerticalBarChart.tsx
-import { memo as memo26 } from "react";
+import { memo as memo16 } from "react";
 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 styled8 from "styled-components";
-import { Box as Box18 } from "@sproutsocial/seeds-react-box";
+import styled4 from "styled-components";
+import { Box as Box11 } from "@sproutsocial/seeds-react-box";
 
 // src/components/VerticalBarChart/components/VerticalBarChartLegend.tsx
-import { memo as memo24 } from "react";
-import { theme as theme14 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { memo as memo14 } from "react";
+import { theme as theme9 } from "@sproutsocial/seeds-react-theme";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var getVerticalBarChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx25(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
-    color: series.styles?.color || theme14.colors.DATAVIZ_COLORS_LIST[index]
+    content: /* @__PURE__ */ jsx14(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme9.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var VerticalBarChartLegend = memo24(
+var VerticalBarChartLegend = memo14(
   function VerticalbarChartLegend({ data }) {
-    return /* @__PURE__ */ jsx25(ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx14(ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
   }
 );
 
 // src/components/VerticalBarChart/components/VerticalBarChartTooltip.tsx
-import { memo as memo25 } from "react";
-import { Box as Box17 } from "@sproutsocial/seeds-react-box";
+import { memo as memo15 } from "react";
+import { Box as Box10 } from "@sproutsocial/seeds-react-box";
 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 Text9 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-var VerticalBarChartTooltip = memo25(
+import { Text as Text6 } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var VerticalBarChartTooltip = memo15(
   function VerticalBarChartTooltip2({
     data,
     invalidNumberLabel,
@@ -2251,10 +1218,10 @@ var VerticalBarChartTooltip = memo25(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx26(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx26(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx26(Text9, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx15(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx15(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx15(Text6, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx26(Text9, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx26(Duration5, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx26(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx15(Text6, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx15(Duration5, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx15(
               Numeral5,
               {
                 abbreviate: false,
@@ -2269,48 +1236,27 @@ var VerticalBarChartTooltip = memo25(
         ]
       };
     });
-    return /* @__PURE__ */ jsxs12(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs10(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ jsx26(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx26(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx26(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs12(Box17, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx26(Icon6, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx26(Text9, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      /* @__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 })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
 );
 
 // src/components/VerticalBarChart/VerticalBarChart.tsx
-import { theme as theme15 } from "@sproutsocial/seeds-react-theme";
-
-// src/components/VerticalBarChart/styles.ts
-import { css as css3 } from "styled-components";
-var verticalBarChartStyles = css3`
-  ${timeSeriesChartStyles}
-
-  /*
-    When the chart container is hovered, reduce the opacity of all columns.
-    Then, for the column that is being hovered, restore its opacity.
-    This gives the effect of fading out the non-hovered columns.
-  */
-  .highcharts-container:hover .highcharts-point {
-    fill-opacity: 0.3;
-  }
-
-  .highcharts-point.column-hover {
-    fill-opacity: 1 !important;
-  }
-`;
-
-// src/components/VerticalBarChart/VerticalBarChart.tsx
-import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { theme as theme10 } from "@sproutsocial/seeds-react-theme";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 highchartsAccessibility4(Highcharts4);
 highchartsAnnotations3(Highcharts4);
-var StyledBox6 = styled8(Box18)`
+var StyledBox4 = styled4(Box11)`
   ${verticalBarChartStyles}
 `;
-var VerticalBarChart = memo26(
+var VerticalBarChart = memo16(
   function VerticalBarChart2(props) {
     const { data, showSeriesLimitWarning = true } = props;
     const seriesLimit = props.seriesLimit ?? VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT;
@@ -2327,10 +1273,10 @@ var VerticalBarChart = memo26(
       }
       chartData = data.slice(0, seriesLimit);
     }
-    return /* @__PURE__ */ jsx27(VerticalBarChartWithData, { ...props, data: chartData });
+    return /* @__PURE__ */ jsx16(VerticalBarChartWithData, { ...props, data: chartData });
   }
 );
-var VerticalBarChartWithData = memo26(
+var VerticalBarChartWithData = memo16(
   function VerticalBarChartWithData2({
     data,
     invalidNumberLabel,
@@ -2404,7 +1350,7 @@ var VerticalBarChartWithData = memo26(
     const { colors, patterns } = data.reduce(
       (acc, item, index) => {
         acc.colors.push(
-          item.styles?.color ?? theme15.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+          item.styles?.color ?? theme10.colors.DATAVIZ_COLORS_LIST[index] ?? ""
         );
         acc.patterns.push(item.styles?.pattern ?? "solid");
         return acc;
@@ -2414,16 +1360,16 @@ var VerticalBarChartWithData = memo26(
         patterns: []
       }
     );
-    return /* @__PURE__ */ jsxs13(Fragment5, { children: [
-      /* @__PURE__ */ jsx27(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ jsxs13(
-        StyledBox6,
+    return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx16(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ jsxs11(
+        StyledBox4,
         {
           $colors: colors,
           $hasOnClick: Boolean(onClick),
           bg: "container.background.base",
           children: [
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx16(
               HighchartsReact4,
               {
                 highcharts: Highcharts4,
@@ -2431,14 +1377,15 @@ var VerticalBarChartWithData = memo26(
                 callback
               }
             ),
-            chart && chart.annotations?.length ? /* @__PURE__ */ jsx27(
+            chart && chart.annotations?.length ? /* @__PURE__ */ jsx16(
               ChartXAnnotationMarkerPortal,
               {
                 xAnnotations,
-                annotationContext: chart.annotations?.[0]
+                annotationContext: chart.annotations?.[0],
+                chartContainer: chart.container
               }
             ) : null,
-            chart ? /* @__PURE__ */ jsx27(
+            chart ? /* @__PURE__ */ jsx16(
               ChartTooltipPortal,
               {
                 chart,
@@ -2449,7 +1396,7 @@ var VerticalBarChartWithData = memo26(
                   });
                   const x = context.x;
                   const xAnnotationDetails = typeof x === "number" ? xAnnotations?.[x]?.details : void 0;
-                  return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx27(
+                  return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx16(
                     VerticalBarChartTooltip,
                     {
                       currency,
@@ -2468,7 +1415,7 @@ var VerticalBarChartWithData = memo26(
                 }
               }
             ) : null,
-            /* @__PURE__ */ jsx27(Box18, { mt: 350, children: /* @__PURE__ */ jsx27(VerticalBarChartLegend, { data }) })
+            /* @__PURE__ */ jsx16(Box11, { mt: 350, children: /* @__PURE__ */ jsx16(VerticalBarChartLegend, { data }) })
           ]
         }
       )