@sproutsocial/seeds-react-data-viz 0.24.2 → 0.24.3

package/dist/esm/index.js

@@ -18,7 +18,6 @@ import {
 import {
   ChartLegend,
   ChartLegendLabel,
-  ChartLegendLabelContentWithIcon,
   ChartTable,
   ChartTooltip,
   ChartTooltipFooter,
@@ -35,19 +34,19 @@ import {
   lineChartStyles,
   timeSeriesChartStyles,
   transformTimeSeriesTooltipData
-} from "./chunk-NZX3WPXT.js";
+} from "./chunk-32QLJDP2.js";
 
 // src/components/AreaChart/AreaChart.tsx
-import { memo as memo4 } from "react";
+import { memo as memo5 } 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 styled2 from "styled-components";
-import { Box as Box2 } from "@sproutsocial/seeds-react-box";
+import { Box as Box3 } from "@sproutsocial/seeds-react-box";
 
 // src/components/AreaChart/components/AreaChartLegend.tsx
-import { memo } from "react";
+import { memo as memo2 } from "react";
 import { theme as theme2 } from "@sproutsocial/seeds-react-theme";
 
 // src/components/ColorBox/DatavizColorBox.tsx
@@ -86,6 +85,22 @@ var NetworkColorBox = ({
   return /* @__PURE__ */ jsx(ColorBox, { ...props, bg: NETWORK_COLORS[networkColor] });
 };
 
+// src/components/ChartLegend/components/ChartLegendLabelContentWithIcon.tsx
+import { memo } from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { jsxs } from "react/jsx-runtime";
+var ChartLegendLabelContentWithIcon = memo(
+  function ChartLegendLabelContentWithIcon2({
+    children,
+    icon
+  }) {
+    return icon ? /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 200, children: [
+      icon,
+      children
+    ] }) : children;
+  }
+);
+
 // src/components/AreaChart/components/AreaChartLegend.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var getAreaChartLegendLabels = ({
@@ -96,21 +111,21 @@ var getAreaChartLegendLabels = ({
     color: series.styles?.color || theme2.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var AreaChartLegend = memo(
+var AreaChartLegend = memo2(
   function AreaChartLegend2({ data }) {
     return /* @__PURE__ */ jsx2(ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
   }
 );
 
 // src/components/AreaChart/components/AreaChartTooltip.tsx
-import { memo as memo2 } from "react";
-import { Box } from "@sproutsocial/seeds-react-box";
+import { memo as memo3 } from "react";
+import { Box as Box2 } 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 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var AreaChartTooltip = memo2(
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var AreaChartTooltip = memo3(
   function AreaChartTooltip2({
     data,
     invalidNumberLabel,
@@ -179,7 +194,7 @@ var AreaChartTooltip = memo2(
         isAppendedRow: true
       }
     ] : [];
-    return /* @__PURE__ */ jsxs(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs2(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
       /* @__PURE__ */ jsx3(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
       /* @__PURE__ */ jsx3(
@@ -188,7 +203,7 @@ var AreaChartTooltip = memo2(
           rows: [...rows, ...appendedRows]
         }
       ),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx3(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 300, children: [
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx3(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs2(Box2, { 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
@@ -197,11 +212,11 @@ var AreaChartTooltip = memo2(
 );
 
 // src/components/ChartXAnnotationMarker/components/ChartXAnnotationMarkerPortal.tsx
-import { memo as memo3, useEffect, useState, useRef } from "react";
+import { memo as memo4, useEffect, useState, useRef } from "react";
 import { createPortal } from "react-dom";
 import "highcharts";
 import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
-var ChartXAnnotationMarkerPortal = memo3(
+var ChartXAnnotationMarkerPortal = memo4(
   function ChartXAnnotationMarkerPortal2({
     xAnnotations,
     annotationContext,
@@ -883,17 +898,17 @@ var xAxisLabelFormatterDefault = xAxisLabelFormatter;
 
 // src/components/AreaChart/AreaChart.tsx
 import { theme as theme3 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 highchartsAccessibility(Highcharts);
 highchartsAnnotations(Highcharts);
-var StyledBox = styled2(Box2)`
+var StyledBox = styled2(Box3)`
   ${areaChartStyles}
 `;
-var AreaChart = memo4(function AreaChart2(props) {
+var AreaChart = memo5(function AreaChart2(props) {
   const { data } = props;
   return data.length === 0 ? null : /* @__PURE__ */ jsx5(AreaChartWithData, { ...props });
 });
-var AreaChartWithData = memo4(function AreaChartWithData2({
+var AreaChartWithData = memo5(function AreaChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -929,9 +944,9 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
   const colors = data.map(
     (series, index) => series.styles?.color ?? theme3.colors.DATAVIZ_COLORS_LIST[index]
   );
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx5(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       StyledBox,
       {
         $colors: colors,
@@ -987,7 +1002,7 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx5(Box2, { mt: 350, children: /* @__PURE__ */ jsx5(AreaChartLegend, { data }) })
+          /* @__PURE__ */ jsx5(Box3, { mt: 350, children: /* @__PURE__ */ jsx5(AreaChartLegend, { data }) })
         ]
       }
     )
@@ -995,14 +1010,14 @@ var AreaChartWithData = memo4(function AreaChartWithData2({
 });
 
 // src/components/ChartXAnnotationDetails/ChartXAnnotationDetails.tsx
-import { memo as memo5 } from "react";
-import { Box as Box3 } from "@sproutsocial/seeds-react-box";
+import { memo as memo6 } from "react";
+import { Box as Box4 } 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 jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var ChartXAnnotationDetails = memo5(
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChartXAnnotationDetails = memo6(
   function ChartXAnnotationDetails2({ iconName, text }) {
-    return /* @__PURE__ */ jsx6(ChartTooltipHeader, { children: /* @__PURE__ */ jsxs3(Box3, { display: "flex", alignItems: "center", gap: 300, children: [
+    return /* @__PURE__ */ jsx6(ChartTooltipHeader, { children: /* @__PURE__ */ jsxs4(Box4, { 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 })
     ] }) });
@@ -1010,15 +1025,15 @@ var ChartXAnnotationDetails = memo5(
 );
 
 // src/components/ChartXAnnotationMarker/ChartXAnnotationMarker.tsx
-import { memo as memo6 } from "react";
-import { Box as Box4 } from "@sproutsocial/seeds-react-box";
+import { memo as memo7 } from "react";
+import { Box as Box5 } from "@sproutsocial/seeds-react-box";
 import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var ChartXAnnotationMarker = memo6(
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChartXAnnotationMarker = memo7(
   function ChartXAnnotationMarker2({ iconName }) {
-    return /* @__PURE__ */ jsxs4(Box4, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
+    return /* @__PURE__ */ jsxs5(Box5, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
       /* @__PURE__ */ jsx7(
-        Box4,
+        Box5,
         {
           display: "flex",
           alignItems: "center",
@@ -1030,21 +1045,21 @@ var ChartXAnnotationMarker = memo6(
           children: /* @__PURE__ */ jsx7(Icon3, { name: iconName, size: "mini", color: "icon.inverse" })
         }
       ),
-      /* @__PURE__ */ jsx7(Box4, { height: `199px`, width: "0.5px", bg: "neutral.200" })
+      /* @__PURE__ */ jsx7(Box5, { height: `199px`, width: "0.5px", bg: "neutral.200" })
     ] });
   }
 );
 
 // src/components/DonutChart/DonutChart.tsx
-import { memo as memo9, useState as useState3, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { memo as memo10, 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 styled3 from "styled-components";
-import { Box as Box6 } from "@sproutsocial/seeds-react-box";
+import { Box as Box7 } from "@sproutsocial/seeds-react-box";
 
 // src/components/DonutChart/components/DonutChartLegend.tsx
-import { memo as memo7 } from "react";
+import { memo as memo8 } from "react";
 import { theme as theme4 } from "@sproutsocial/seeds-react-theme";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var getDonutChartLegendLabels = ({
@@ -1055,21 +1070,21 @@ var getDonutChartLegendLabels = ({
     color: slice.styles?.color || theme4.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var DonutChartLegend = memo7(
+var DonutChartLegend = memo8(
   function DonutChartLegend2({ data }) {
     return /* @__PURE__ */ jsx8(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
 // src/components/DonutChart/components/DonutChartTooltip.tsx
-import { memo as memo8 } from "react";
-import { Box as Box5 } from "@sproutsocial/seeds-react-box";
+import { memo as memo9 } from "react";
+import { Box as Box6 } 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 Text3 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var DonutChartTooltip = memo8(
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var DonutChartTooltip = memo9(
   function DonutChartTooltip2({
     color,
     name,
@@ -1090,7 +1105,7 @@ var DonutChartTooltip = memo8(
             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: [
+            content: /* @__PURE__ */ jsxs6(Box6, { display: "inline-flex", alignItems: "center", gap: 350, children: [
               /* @__PURE__ */ jsx9(
                 Numeral2,
                 {
@@ -1116,9 +1131,9 @@ var DonutChartTooltip = memo8(
         ]
       }
     ];
-    return /* @__PURE__ */ jsxs5(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs6(ChartTooltip, { children: [
       /* @__PURE__ */ jsx9(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx9(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs5(Box5, { display: "flex", alignItems: "center", gap: 300, children: [
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx9(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs6(Box6, { 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
@@ -1144,16 +1159,16 @@ var transformDonutChartTooltipData = ({
 
 // src/components/DonutChart/DonutChart.tsx
 import { theme as theme6 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 highchartsAccessibility2(Highcharts2);
-var StyledBox2 = styled3(Box6)`
+var StyledBox2 = styled3(Box7)`
   ${donutChartStyles}
 `;
-var DonutChart = memo9(function DonutChart2(props) {
+var DonutChart = memo10(function DonutChart2(props) {
   const { data } = props;
   return data.length === 0 ? null : /* @__PURE__ */ jsx10(DonutChartWithData, { ...props });
 });
-var DonutChartWithData = memo9(
+var DonutChartWithData = memo10(
   function DonutChartWithData2({
     data,
     numberLocale = "en-us",
@@ -1224,9 +1239,9 @@ var DonutChartWithData = memo9(
     const colors = data.map(
       (series, index) => series.styles?.color ?? theme6.colors.DATAVIZ_COLORS_LIST[index] ?? ""
     );
-    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
       /* @__PURE__ */ jsx10(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsxs7(
         StyledBox2,
         {
           $colors: colors,
@@ -1266,7 +1281,7 @@ var DonutChartWithData = memo9(
                 }
               }
             ) : null,
-            hideLegend ? null : /* @__PURE__ */ jsx10(Box6, { mt: 350, children: /* @__PURE__ */ jsx10(DonutChartLegend, { data }) })
+            hideLegend ? null : /* @__PURE__ */ jsx10(Box7, { mt: 350, children: /* @__PURE__ */ jsx10(DonutChartLegend, { data }) })
           ]
         }
       )
@@ -1275,14 +1290,14 @@ var DonutChartWithData = memo9(
 );
 
 // src/components/DonutChart/components/DonutChartLegendTable.tsx
-import { memo as memo10 } from "react";
-import { Box as Box7 } from "@sproutsocial/seeds-react-box";
+import { memo as memo11 } from "react";
+import { Box as Box8 } 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 theme7 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var DonutChartLegendTable = memo10(
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var DonutChartLegendTable = memo11(
   function DonutChartLegendTable2({
     data,
     numberLocale = "en-us",
@@ -1305,7 +1320,7 @@ var DonutChartLegendTable = memo10(
             content: /* @__PURE__ */ jsx11(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx11(ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
-            content: /* @__PURE__ */ jsxs7(Box7, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+            content: /* @__PURE__ */ jsxs8(Box8, { display: "inline-flex", alignItems: "center", gap: 350, children: [
               /* @__PURE__ */ jsx11(Text4, { color: "text.body", children: /* @__PURE__ */ jsx11(
                 Numeral3,
                 {
@@ -1364,16 +1379,16 @@ var DonutChartLegendTable = memo10(
 );
 
 // src/components/LineChart/LineChart.tsx
-import { memo as memo13 } from "react";
+import { memo as memo14 } 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 styled4 from "styled-components";
-import { Box as Box9 } from "@sproutsocial/seeds-react-box";
+import { Box as Box10 } from "@sproutsocial/seeds-react-box";
 
 // src/components/LineChart/components/LineChartLegend.tsx
-import { memo as memo11 } from "react";
+import { memo as memo12 } from "react";
 import { theme as theme8 } from "@sproutsocial/seeds-react-theme";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var getLineChartLegendLabels = ({
@@ -1384,21 +1399,21 @@ var getLineChartLegendLabels = ({
     color: series.styles?.color || theme8.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var LineChartLegend = memo11(
+var LineChartLegend = memo12(
   function LineChartLegend2({ data }) {
     return /* @__PURE__ */ jsx12(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
 // src/components/LineChart/components/LineChartTooltip.tsx
-import { memo as memo12 } from "react";
-import { Box as Box8 } from "@sproutsocial/seeds-react-box";
+import { memo as memo13 } from "react";
+import { Box as Box9 } 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 Text5 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var LineChartTooltip = memo12(
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var LineChartTooltip = memo13(
   function LineChartTooltip2({
     data,
     invalidNumberLabel,
@@ -1435,11 +1450,11 @@ var LineChartTooltip = memo12(
         ]
       };
     });
-    return /* @__PURE__ */ jsxs8(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs9(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
       /* @__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: [
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx13(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs9(Box9, { 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
@@ -1449,17 +1464,17 @@ var LineChartTooltip = memo12(
 
 // src/components/LineChart/LineChart.tsx
 import { theme as theme9 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 highchartsAccessibility3(Highcharts3);
 highchartsAnnotations2(Highcharts3);
-var StyledBox3 = styled4(Box9)`
+var StyledBox3 = styled4(Box10)`
   ${lineChartStyles}
 `;
-var LineChart = memo13(function LineChart2(props) {
+var LineChart = memo14(function LineChart2(props) {
   const { data } = props;
   return data.length === 0 ? null : /* @__PURE__ */ jsx14(LineChartWithData, { ...props });
 });
-var LineChartWithData = memo13(function LineChartWithData2({
+var LineChartWithData = memo14(function LineChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -1506,9 +1521,9 @@ var LineChartWithData = memo13(function LineChartWithData2({
       patterns: []
     }
   );
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
     /* @__PURE__ */ jsx14(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10(
       StyledBox3,
       {
         $colors: colors,
@@ -1562,7 +1577,7 @@ var LineChartWithData = memo13(function LineChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx14(Box9, { mt: 350, children: /* @__PURE__ */ jsx14(LineChartLegend, { data }) })
+          /* @__PURE__ */ jsx14(Box10, { mt: 350, children: /* @__PURE__ */ jsx14(LineChartLegend, { data }) })
         ]
       }
     )
@@ -1570,16 +1585,16 @@ var LineChartWithData = memo13(function LineChartWithData2({
 });
 
 // src/components/VerticalBarChart/VerticalBarChart.tsx
-import { memo as memo16 } from "react";
+import { memo as memo17 } 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 styled5 from "styled-components";
-import { Box as Box11 } from "@sproutsocial/seeds-react-box";
+import { Box as Box12 } from "@sproutsocial/seeds-react-box";
 
 // src/components/VerticalBarChart/components/VerticalBarChartLegend.tsx
-import { memo as memo14 } from "react";
+import { memo as memo15 } from "react";
 import { theme as theme10 } from "@sproutsocial/seeds-react-theme";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var getVerticalBarChartLegendLabels = ({
@@ -1590,21 +1605,21 @@ var getVerticalBarChartLegendLabels = ({
     color: series.styles?.color || theme10.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var VerticalBarChartLegend = memo14(
+var VerticalBarChartLegend = memo15(
   function VerticalbarChartLegend({ data }) {
     return /* @__PURE__ */ jsx15(ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
   }
 );
 
 // src/components/VerticalBarChart/components/VerticalBarChartTooltip.tsx
-import { memo as memo15 } from "react";
-import { Box as Box10 } from "@sproutsocial/seeds-react-box";
+import { memo as memo16 } from "react";
+import { Box as Box11 } 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 Text6 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var VerticalBarChartTooltip = memo15(
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var VerticalBarChartTooltip = memo16(
   function VerticalBarChartTooltip2({
     data,
     invalidNumberLabel,
@@ -1641,11 +1656,11 @@ var VerticalBarChartTooltip = memo15(
         ]
       };
     });
-    return /* @__PURE__ */ jsxs10(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs11(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
       /* @__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: [
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx16(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs11(Box11, { 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
@@ -1676,13 +1691,13 @@ var verticalBarChartStyles = css`
 `;
 
 // src/components/VerticalBarChart/VerticalBarChart.tsx
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 highchartsAccessibility4(Highcharts4);
 highchartsAnnotations3(Highcharts4);
-var StyledBox4 = styled5(Box11)`
+var StyledBox4 = styled5(Box12)`
   ${verticalBarChartStyles}
 `;
-var VerticalBarChart = memo16(
+var VerticalBarChart = memo17(
   function VerticalBarChart2(props) {
     const { data, showSeriesLimitWarning = true } = props;
     const seriesLimit = props.seriesLimit ?? VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT;
@@ -1702,7 +1717,7 @@ var VerticalBarChart = memo16(
     return /* @__PURE__ */ jsx17(VerticalBarChartWithData, { ...props, data: chartData });
   }
 );
-var VerticalBarChartWithData = memo16(
+var VerticalBarChartWithData = memo17(
   function VerticalBarChartWithData2({
     data,
     invalidNumberLabel,
@@ -1786,9 +1801,9 @@ var VerticalBarChartWithData = memo16(
         patterns: []
       }
     );
-    return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs12(Fragment5, { children: [
       /* @__PURE__ */ jsx17(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs12(
         StyledBox4,
         {
           $colors: colors,
@@ -1841,7 +1856,7 @@ var VerticalBarChartWithData = memo16(
                 }
               }
             ) : null,
-            /* @__PURE__ */ jsx17(Box11, { mt: 350, children: /* @__PURE__ */ jsx17(VerticalBarChartLegend, { data }) })
+            /* @__PURE__ */ jsx17(Box12, { mt: 350, children: /* @__PURE__ */ jsx17(VerticalBarChartLegend, { data }) })
           ]
         }
       )