@sproutsocial/seeds-react-data-viz 0.4.2 → 0.5.0

package/dist/esm/index.js

@@ -101,7 +101,7 @@ var StyledBox = styled2(Box2)`
   list-style: none;
   display: flex;
   align-items: center;
-  gap: ${({ theme: theme14 }) => theme14.space[300]};
+  gap: ${({ theme: theme16 }) => theme16.space[300]};
 `;
 var ChartLegendLabel = memo(
   function ChartLegendLabel2({
@@ -333,7 +333,7 @@ var StyledSeedsTable = styled4(SeedsTable)`
   }
 `;
 var StyledSeedsTableRow = styled4(SeedsTable.TableRow)`
-  ${({ $isAppendedRow, theme: theme14 }) => $isAppendedRow ? `border-top: 2px solid ${theme14.colors.container.border.base}` : ""}
+  ${({ $isAppendedRow, theme: theme16 }) => $isAppendedRow ? `border-top: 2px solid ${theme16.colors.container.border.base}` : ""}
 `;
 var ChartTable = memo9(function ChartTable2({
   rows
@@ -1331,7 +1331,7 @@ var GlobalChartStyleOverrides = createGlobalStyle`
   }
 `;
 var baseChartStyles = css2`
-  --highcharts-background-color: ${({ theme: theme14 }) => theme14.colors.container.background.base};
+  --highcharts-background-color: ${({ theme: theme16 }) => theme16.colors.container.background.base};
 
   // set color variables and map to each series
   ${({ $colors }) => $colors.map((color, index) => {
@@ -1350,7 +1350,7 @@ var baseChartStyles = css2`
 
   // set overall chart background color
   .highcharts-background {
-    fill: ${({ theme: theme14 }) => theme14.colors.container.background.base};
+    fill: ${({ theme: theme16 }) => theme16.colors.container.background.base};
   }
 
   g.highcharts-annotation-label {
@@ -1368,17 +1368,17 @@ var timeSeriesChartStyles = css2`
 
   // vertical crosshair styles
 	.highcharts-crosshair {
-    stroke: ${({ theme: theme14 }) => theme14.colors.container.border.decorative.neutral};
+    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.decorative.neutral};
     stroke-width: 1;
   }
 
   // axis and gridline styles
   .highcharts-grid-line {
-    stroke: ${({ theme: theme14 }) => theme14.colors.container.border.base};
+    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.base};
   }
 
   .highcharts-axis-line {
-    stroke: ${({ theme: theme14 }) => theme14.colors.container.border.base};
+    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.base};
   }
 
   .highcharts-tick {
@@ -1387,10 +1387,10 @@ var timeSeriesChartStyles = css2`
   .highcharts-xaxis-labels,
   .highcharts-yaxis-labels {
     > span {
-      font-family: ${({ theme: theme14 }) => theme14.fontFamily};
-      ${({ theme: theme14 }) => theme14.typography[100]};
-      font-weight: ${({ theme: theme14 }) => theme14.fontWeights.normal};
-      color: ${({ theme: theme14 }) => theme14.colors.text.subtext};
+      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 {
@@ -1399,7 +1399,7 @@ var timeSeriesChartStyles = css2`
       flex-direction: column;
       align-items: center;
       > span:nth-of-type(2) {
-        font-weight: ${({ theme: theme14 }) => theme14.fontWeights.semibold};
+        font-weight: ${({ theme: theme16 }) => theme16.fontWeights.semibold};
       }
     }
   }
@@ -1423,7 +1423,7 @@ var timeSeriesChartStyles = css2`
  		}`}
 
   path.highcharts-plot-line.y-axis-zero-line {
-    stroke: ${({ theme: theme14 }) => theme14.colors.container.border.decorative.neutral};
+    stroke: ${({ theme: theme16 }) => theme16.colors.container.border.decorative.neutral};
   }
 `;
 var lineChartStyles = css2`
@@ -1598,41 +1598,82 @@ 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 { 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(
+  ({ 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 })
+    ] }) });
+  }
+);
+
+// src/components/ChartXAnnotationMarker/ChartXAnnotationMarker.tsx
+import { memo as memo16 } from "react";
+import { Box as Box11 } 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(
+  ({ iconName }) => {
+    return /* @__PURE__ */ jsxs6(Box11, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
+      /* @__PURE__ */ jsx17(
+        Box11,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "20px",
+          height: "20px",
+          bg: "icon.base",
+          borderRadius: "50%",
+          children: /* @__PURE__ */ jsx17(Icon3, { name: iconName, size: "mini", color: "icon.inverse" })
+        }
+      ),
+      /* @__PURE__ */ jsx17(Box11, { height: `199px`, width: "0.5px", bg: "neutral.200" })
+    ] });
+  }
+);
+
 // src/components/DonutChart/DonutChart.tsx
-import { memo as memo17, useState as useState4, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { memo as memo19, useState as useState4, useEffect as useEffect3, 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 Box11 } from "@sproutsocial/seeds-react-box";
+import { Box as Box13 } from "@sproutsocial/seeds-react-box";
 
 // src/components/DonutChart/components/DonutChartLegend.tsx
-import { memo as memo15 } from "react";
+import { memo as memo17 } from "react";
 import { theme as theme8 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ jsx16(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    content: /* @__PURE__ */ jsx18(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
     color: slice.styles?.color || theme8.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var DonutChartLegend = memo15(
+var DonutChartLegend = memo17(
   function DonutChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx16(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx18(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
 // src/components/DonutChart/components/DonutChartTooltip.tsx
-import { memo as memo16 } from "react";
-import { Box as Box10 } from "@sproutsocial/seeds-react-box";
+import { memo as memo18 } from "react";
+import { Box as Box12 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration2 } from "@sproutsocial/seeds-react-duration";
-import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
+import { Icon as Icon4 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral2 } from "@sproutsocial/seeds-react-numeral";
-import { Text as Text5 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var DonutChartTooltip = memo16(
+import { Text as Text6 } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+var DonutChartTooltip = memo18(
   function DonutChartTooltip2({
     color,
     name,
@@ -1650,11 +1691,11 @@ var DonutChartTooltip = memo16(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx17(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx17(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx17(Text5, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx19(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx19(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx19(Text6, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: /* @__PURE__ */ jsxs5(Box10, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx17(
+            content: /* @__PURE__ */ jsxs7(Box12, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ jsx19(
                 Numeral2,
                 {
                   number: percent,
@@ -1663,7 +1704,7 @@ var DonutChartTooltip = memo16(
                   locale: numberLocale
                 }
               ),
-              /* @__PURE__ */ jsx17(Text5, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx17(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx19(Text6, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx19(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx19(
                 Numeral2,
                 {
                   abbreviate: false,
@@ -1679,11 +1720,11 @@ var DonutChartTooltip = memo16(
         ]
       }
     ];
-    return /* @__PURE__ */ jsxs5(ChartTooltip, { children: [
-      /* @__PURE__ */ jsx17(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx17(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs5(Box10, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx17(Icon2, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx17(Text5, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+    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 })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
@@ -1707,16 +1748,16 @@ var transformDonutChartTooltipData = ({
 
 // src/components/DonutChart/DonutChart.tsx
 import { theme as theme10 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 highchartsAccessibility2(Highcharts2);
-var StyledBox4 = styled6(Box11)`
+var StyledBox4 = styled6(Box13)`
   ${donutChartStyles}
 `;
-var DonutChart = memo17(function DonutChart2(props) {
+var DonutChart = memo19(function DonutChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx18(DonutChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx20(DonutChartWithData, { ...props });
 });
-var DonutChartWithData = memo17(
+var DonutChartWithData = memo19(
   function DonutChartWithData2({
     data,
     numberLocale = "en-us",
@@ -1772,7 +1813,7 @@ var DonutChartWithData = memo17(
                 colorIndex: index,
                 events: onClick ? {
                   click: function() {
-                    onClick({ x: item.name });
+                    onClick({ x: item.name, ...item });
                   }
                 } : void 0
               };
@@ -1787,16 +1828,16 @@ var DonutChartWithData = memo17(
     const colors = data.map(
       (series, index) => series.styles?.color ?? theme10.colors.DATAVIZ_COLORS_LIST[index] ?? ""
     );
-    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx18(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx20(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ jsxs8(
         StyledBox4,
         {
           $colors: colors,
           $hasOnClick: Boolean(onClick),
           bg: "container.background.base",
           children: [
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx20(
               HighchartsReact2,
               {
                 highcharts: Highcharts2,
@@ -1804,13 +1845,13 @@ var DonutChartWithData = memo17(
                 callback
               }
             ),
-            chart && !disableTooltips ? /* @__PURE__ */ jsx18(
+            chart && !disableTooltips ? /* @__PURE__ */ jsx20(
               ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
                   const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx18(
+                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx20(
                     DonutChartTooltip,
                     {
                       color,
@@ -1829,7 +1870,7 @@ var DonutChartWithData = memo17(
                 }
               }
             ) : null,
-            hideLegend ? null : /* @__PURE__ */ jsx18(Box11, { mt: 350, children: /* @__PURE__ */ jsx18(DonutChartLegend, { data }) })
+            hideLegend ? null : /* @__PURE__ */ jsx20(Box13, { mt: 350, children: /* @__PURE__ */ jsx20(DonutChartLegend, { data }) })
           ]
         }
       )
@@ -1838,14 +1879,14 @@ var DonutChartWithData = memo17(
 );
 
 // src/components/DonutChart/components/DonutChartLegendTable.tsx
-import { memo as memo18 } from "react";
-import { Box as Box12 } from "@sproutsocial/seeds-react-box";
+import { memo as memo20 } from "react";
+import { Box as Box14 } 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 Text6 } from "@sproutsocial/seeds-react-text";
+import { Text as Text7 } from "@sproutsocial/seeds-react-text";
 import { theme as theme11 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
-var DonutChartLegendTable = memo18(
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+var DonutChartLegendTable = memo20(
   function DonutChartLegendTable2({
     data,
     numberLocale = "en-us",
@@ -1865,11 +1906,11 @@ var DonutChartLegendTable = memo18(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx19(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx19(ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ jsx21(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx21(ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
-            content: /* @__PURE__ */ jsxs7(Box12, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx19(Text6, { color: "text.body", children: /* @__PURE__ */ jsx19(
+            content: /* @__PURE__ */ jsxs9(Box14, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ jsx21(Text7, { color: "text.body", children: /* @__PURE__ */ jsx21(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -1878,7 +1919,7 @@ var DonutChartLegendTable = memo18(
                   number: value / total * 100
                 }
               ) }),
-              /* @__PURE__ */ jsx19(Text6, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx19(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx21(Text7, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx21(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx21(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -1898,10 +1939,10 @@ var DonutChartLegendTable = memo18(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx19(Text6, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
+            content: /* @__PURE__ */ jsx21(Text7, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
           },
           {
-            content: /* @__PURE__ */ jsx19(Text6, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx19(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx19(
+            content: /* @__PURE__ */ jsx21(Text7, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx21(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx21(
               Numeral3,
               {
                 abbreviate: false,
@@ -1917,7 +1958,7 @@ var DonutChartLegendTable = memo18(
         isAppendedRow: true
       }
     ];
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx21(
       ChartTable,
       {
         rows: [...rows, ...totalRow]
@@ -1927,41 +1968,41 @@ var DonutChartLegendTable = memo18(
 );
 
 // src/components/LineChart/LineChart.tsx
-import { memo as memo21 } from "react";
+import { memo as memo23 } 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 Box14 } from "@sproutsocial/seeds-react-box";
+import { Box as Box16 } from "@sproutsocial/seeds-react-box";
 
 // src/components/LineChart/components/LineChartLegend.tsx
-import { memo as memo19 } from "react";
+import { memo as memo21 } from "react";
 import { theme as theme12 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx20(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    content: /* @__PURE__ */ jsx22(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
     color: series.styles?.color || theme12.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var LineChartLegend = memo19(
+var LineChartLegend = memo21(
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx20(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx22(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
 // src/components/LineChart/components/LineChartTooltip.tsx
-import { memo as memo20 } from "react";
-import { Box as Box13 } from "@sproutsocial/seeds-react-box";
+import { memo as memo22 } from "react";
+import { Box as Box15 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration4 } from "@sproutsocial/seeds-react-duration";
-import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
+import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral4 } from "@sproutsocial/seeds-react-numeral";
-import { Text as Text7 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
-var LineChartTooltip = memo20(
+import { Text as Text8 } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+var LineChartTooltip = memo22(
   function LineChartTooltip2({
     data,
     invalidNumberLabel,
@@ -1980,10 +2021,10 @@ var LineChartTooltip = memo20(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx21(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx21(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx21(Text7, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx23(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx23(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx23(Text8, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx21(Text7, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx21(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx21(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx23(Text8, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx23(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx23(
               Numeral4,
               {
                 abbreviate: false,
@@ -1998,13 +2039,13 @@ var LineChartTooltip = memo20(
         ]
       };
     });
-    return /* @__PURE__ */ jsxs8(ChartTooltip, { children: [
+    return /* @__PURE__ */ jsxs10(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ jsx21(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx21(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx21(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs8(Box13, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx21(Icon3, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx21(Text7, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      /* @__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 })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
@@ -2012,17 +2053,17 @@ var LineChartTooltip = memo20(
 
 // src/components/LineChart/LineChart.tsx
 import { theme as theme13 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 highchartsAccessibility3(Highcharts3);
 highchartsAnnotations2(Highcharts3);
-var StyledBox5 = styled7(Box14)`
+var StyledBox5 = styled7(Box16)`
   ${lineChartStyles}
 `;
-var LineChart = memo21(function LineChart2(props) {
+var LineChart = memo23(function LineChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx22(LineChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx24(LineChartWithData, { ...props });
 });
-var LineChartWithData = memo21(function LineChartWithData2({
+var LineChartWithData = memo23(function LineChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -2065,9 +2106,9 @@ var LineChartWithData = memo21(function LineChartWithData2({
       patterns: []
     }
   );
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    /* @__PURE__ */ jsx22(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsx24(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ jsxs11(
       StyledBox5,
       {
         $colors: colors,
@@ -2075,7 +2116,7 @@ var LineChartWithData = memo21(function LineChartWithData2({
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx24(
             HighchartsReact3,
             {
               highcharts: Highcharts3,
@@ -2083,14 +2124,14 @@ var LineChartWithData = memo21(function LineChartWithData2({
               callback
             }
           ),
-          chart && chart.annotations?.length ? /* @__PURE__ */ jsx22(
+          chart && chart.annotations?.length ? /* @__PURE__ */ jsx24(
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
               annotationContext: chart.annotations?.[0]
             }
           ) : null,
-          chart && !disableTooltips ? /* @__PURE__ */ jsx22(
+          chart && !disableTooltips ? /* @__PURE__ */ jsx24(
             ChartTooltipPortal,
             {
               chart,
@@ -2101,7 +2142,7 @@ var LineChartWithData = memo21(function LineChartWithData2({
                 });
                 const x = context.x;
                 const xAnnotationDetails = xAnnotations?.[x]?.details;
-                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx22(
+                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx24(
                   LineChartTooltip,
                   {
                     currency,
@@ -2120,12 +2161,291 @@ var LineChartWithData = memo21(function LineChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx22(Box14, { mt: 350, children: /* @__PURE__ */ jsx22(LineChartLegend, { data }) })
+          /* @__PURE__ */ jsx24(Box16, { mt: 350, children: /* @__PURE__ */ jsx24(LineChartLegend, { data }) })
         ]
       }
     )
   ] });
 });
+
+// src/components/VerticalBarChart/VerticalBarChart.tsx
+import { memo as memo26 } 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";
+
+// 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";
+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]
+  }));
+};
+var VerticalBarChartLegend = memo24(
+  function VerticalbarChartLegend({ data }) {
+    return /* @__PURE__ */ jsx25(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 { 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(
+  function VerticalBarChartTooltip2({
+    data,
+    invalidNumberLabel,
+    numberLocale,
+    textLocale,
+    tooltipDateFormatter,
+    x,
+    // optional
+    currency = "USD",
+    numberFormat = "decimal",
+    onClick,
+    tooltipClickLabel,
+    xAnnotationDetails
+  }) {
+    const rows = data.map(({ color, icon, name, value }) => {
+      return {
+        cells: [
+          {
+            content: /* @__PURE__ */ jsx26(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx26(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx26(Text9, { "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(
+              Numeral5,
+              {
+                abbreviate: false,
+                currency,
+                format: numberFormat,
+                locale: numberLocale,
+                number: value
+              }
+            ),
+            align: "right"
+          }
+        ]
+      };
+    });
+    return /* @__PURE__ */ jsxs12(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 })
+      ] }) : 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";
+highchartsAccessibility4(Highcharts4);
+highchartsAnnotations3(Highcharts4);
+var StyledBox6 = styled8(Box18)`
+  ${verticalBarChartStyles}
+`;
+var VerticalBarChart = memo26(
+  function VerticalBarChart2(props) {
+    const { data, showSeriesLimitWarning = true } = props;
+    const seriesLimit = props.seriesLimit ?? VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT;
+    const isSeriesLimitOverridden = props.seriesLimit !== void 0;
+    if (data.length === 0) {
+      return null;
+    }
+    let chartData = data;
+    if (data.length > seriesLimit) {
+      if (!isSeriesLimitOverridden && showSeriesLimitWarning) {
+        console.warn(
+          `VerticalBarChart: Maximum number of series (${seriesLimit}) exceeded. Only the first ${seriesLimit} series will be displayed.`
+        );
+      }
+      chartData = data.slice(0, seriesLimit);
+    }
+    return /* @__PURE__ */ jsx27(VerticalBarChartWithData, { ...props, data: chartData });
+  }
+);
+var VerticalBarChartWithData = memo26(
+  function VerticalBarChartWithData2({
+    data,
+    invalidNumberLabel,
+    numberLocale = "en-us",
+    textLocale = "en-us",
+    tooltipDateFormatter,
+    // optional
+    currency = "USD",
+    numberFormat = "decimal",
+    tooltip,
+    yAxisLabelFormatter: yAxisLabelFormatter2,
+    onClick,
+    tooltipClickLabel,
+    timeFormat = "12",
+    xAnnotations,
+    xAxisLabelFormatter: xAxisLabelFormatter2
+  }) {
+    const shouldUseTimeFormatter = isHourlyTimeData(data) || isCategoricalHourData(data);
+    const autoTimeXAxisLabelFormatter = ({
+      value,
+      timeFormat: timeFormat2
+    }) => {
+      if (typeof value === "string") {
+        const hour12Match = value.match(/^(\d{1,2}) (AM|PM)$/);
+        if (hour12Match) {
+          const [, hourStr = "0", period = ""] = hour12Match;
+          const hour2 = parseInt(hourStr, 10);
+          if (hour2 === 12) return `<span>12</span><span>${period}</span>`;
+          return `<span>${hour2}</span>`;
+        }
+        const hour24Match = value.match(/^([01]?\d|2[0-3]):([0-5]\d)$/);
+        if (hour24Match) {
+          const [, hourStr = "0"] = hour24Match;
+          const hour2 = parseInt(hourStr, 10);
+          if (timeFormat2 === "24") {
+            return `<span>${hour2.toString().padStart(2, "0")}</span>`;
+          } else {
+            const displayHour2 = hour2 % 12 === 0 ? 12 : hour2 % 12;
+            const period = hour2 < 12 ? "AM" : "PM";
+            if (hour2 === 0 || hour2 === 12)
+              return `<span>12</span><span>${period}</span>`;
+            return `<span>${displayHour2}</span>`;
+          }
+        }
+        return value;
+      }
+      const numValue = typeof value === "string" ? Number(value) : value;
+      if (isNaN(numValue)) return "";
+      const date = new Date(numValue);
+      let hour = date.getUTCHours();
+      let displayHour = hour % 12 === 0 ? 12 : hour % 12;
+      if (hour === 0) return "<span>12</span><span>AM</span>";
+      if (hour === 12) return "<span>12</span><span>PM</span>";
+      return `<span>${displayHour}</span>`;
+    };
+    const resolvedXAxisLabelFormatter = shouldUseTimeFormatter && !xAxisLabelFormatter2 ? (params) => autoTimeXAxisLabelFormatter({ ...params, timeFormat }) : xAxisLabelFormatter2;
+    const { options, chart, callback } = useTimeSeriesChartOptions({
+      currency,
+      data,
+      numberFormat,
+      numberLocale,
+      // Although we call this chart vertical bar chart, highcharts uses the term "column"
+      seriesType: "column",
+      textLocale,
+      yAxisLabelFormatter: yAxisLabelFormatter2,
+      onClick,
+      timeFormat,
+      xAnnotations,
+      xAxisLabelFormatter: resolvedXAxisLabelFormatter
+    });
+    const { colors, patterns } = data.reduce(
+      (acc, item, index) => {
+        acc.colors.push(
+          item.styles?.color ?? theme15.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+        );
+        acc.patterns.push(item.styles?.pattern ?? "solid");
+        return acc;
+      },
+      {
+        colors: [],
+        patterns: []
+      }
+    );
+    return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+      /* @__PURE__ */ jsx27(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ jsxs13(
+        StyledBox6,
+        {
+          $colors: colors,
+          $hasOnClick: Boolean(onClick),
+          bg: "container.background.base",
+          children: [
+            /* @__PURE__ */ jsx27(
+              HighchartsReact4,
+              {
+                highcharts: Highcharts4,
+                options,
+                callback
+              }
+            ),
+            chart && chart.annotations?.length ? /* @__PURE__ */ jsx27(
+              ChartXAnnotationMarkerPortal,
+              {
+                xAnnotations,
+                annotationContext: chart.annotations?.[0]
+              }
+            ) : null,
+            chart ? /* @__PURE__ */ jsx27(
+              ChartTooltipPortal,
+              {
+                chart,
+                renderContent: (context) => {
+                  const tooltipData = transformTimeSeriesTooltipData({
+                    context,
+                    data
+                  });
+                  const x = context.x;
+                  const xAnnotationDetails = typeof x === "number" ? xAnnotations?.[x]?.details : void 0;
+                  return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx27(
+                    VerticalBarChartTooltip,
+                    {
+                      currency,
+                      data: tooltipData,
+                      invalidNumberLabel,
+                      numberFormat,
+                      numberLocale,
+                      textLocale,
+                      tooltipDateFormatter,
+                      onClick,
+                      tooltipClickLabel,
+                      x,
+                      xAnnotationDetails
+                    }
+                  );
+                }
+              }
+            ) : null,
+            /* @__PURE__ */ jsx27(Box18, { mt: 350, children: /* @__PURE__ */ jsx27(VerticalBarChartLegend, { data }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
 export {
   AreaChart,
   ChartLegend,
@@ -2137,6 +2457,8 @@ export {
   ChartTooltipPortal,
   ChartTooltipTable,
   ChartTooltipTitle,
+  ChartXAnnotationDetails,
+  ChartXAnnotationMarker,
   ColorBox,
   DONUT_CHART_HALO_SIZE,
   DONUT_CHART_HEIGHT,
@@ -2149,6 +2471,7 @@ export {
   NetworkColorBox,
   TIME_SERIES_CHART_HEIGHT,
   VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT,
+  VerticalBarChart,
   areaChartOptions,
   areaChartStyles,
   baseChartOptions,