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

package/dist/index.js

@@ -40,6 +40,8 @@ __export(index_exports, {
   ChartTooltipPortal: () => ChartTooltipPortal,
   ChartTooltipTable: () => ChartTooltipTable,
   ChartTooltipTitle: () => ChartTooltipTitle,
+  ChartXAnnotationDetails: () => ChartXAnnotationDetails,
+  ChartXAnnotationMarker: () => ChartXAnnotationMarker,
   ColorBox: () => ColorBox,
   DONUT_CHART_HALO_SIZE: () => DONUT_CHART_HALO_SIZE,
   DONUT_CHART_HEIGHT: () => DONUT_CHART_HEIGHT,
@@ -52,6 +54,7 @@ __export(index_exports, {
   NetworkColorBox: () => NetworkColorBox,
   TIME_SERIES_CHART_HEIGHT: () => TIME_SERIES_CHART_HEIGHT,
   VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT: () => VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT,
+  VerticalBarChart: () => VerticalBarChart,
   areaChartOptions: () => areaChartOptions,
   areaChartStyles: () => areaChartStyles,
   baseChartOptions: () => baseChartOptions,
@@ -181,7 +184,7 @@ var StyledBox = (0, import_styled_components4.default)(import_seeds_react_box2.B
   list-style: none;
   display: flex;
   align-items: center;
-  gap: ${({ theme: theme14 }) => theme14.space[300]};
+  gap: ${({ theme: theme16 }) => theme16.space[300]};
 `;
 var ChartLegendLabel = (0, import_react2.memo)(
   function ChartLegendLabel2({
@@ -413,7 +416,7 @@ var StyledSeedsTable = (0, import_styled_components6.default)(import_seeds_react
   }
 `;
 var StyledSeedsTableRow = (0, import_styled_components6.default)(import_seeds_react_table.Table.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 = (0, import_react10.memo)(function ChartTable2({
   rows
@@ -1411,7 +1414,7 @@ var GlobalChartStyleOverrides = import_styled_components7.createGlobalStyle`
   }
 `;
 var baseChartStyles = import_styled_components7.css`
-  --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) => {
@@ -1430,7 +1433,7 @@ var baseChartStyles = import_styled_components7.css`
 
   // 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 {
@@ -1448,17 +1451,17 @@ var timeSeriesChartStyles = import_styled_components7.css`
 
   // 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 {
@@ -1467,10 +1470,10 @@ var timeSeriesChartStyles = import_styled_components7.css`
   .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 {
@@ -1479,7 +1482,7 @@ var timeSeriesChartStyles = import_styled_components7.css`
       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};
       }
     }
   }
@@ -1503,7 +1506,7 @@ var timeSeriesChartStyles = import_styled_components7.css`
  		}`}
 
   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 = import_styled_components7.css`
@@ -1678,41 +1681,82 @@ var AreaChartWithData = (0, import_react16.memo)(function AreaChartWithData2({
   ] });
 });
 
+// src/components/ChartXAnnotationDetails/ChartXAnnotationDetails.tsx
+var import_react17 = require("react");
+var import_seeds_react_box10 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_text5 = require("@sproutsocial/seeds-react-text");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ChartXAnnotationDetails = (0, import_react17.memo)(
+  ({ iconName, text }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartTooltipHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_seeds_react_box10.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon2.Icon, { name: iconName, size: "mini", color: "icon.base" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_text5.Text, { color: "text.body", fontSize: 200, children: text })
+    ] }) });
+  }
+);
+
+// src/components/ChartXAnnotationMarker/ChartXAnnotationMarker.tsx
+var import_react18 = require("react");
+var import_seeds_react_box11 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ChartXAnnotationMarker = (0, import_react18.memo)(
+  ({ iconName }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_seeds_react_box11.Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_seeds_react_box11.Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "20px",
+          height: "20px",
+          bg: "icon.base",
+          borderRadius: "50%",
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_icon3.Icon, { name: iconName, size: "mini", color: "icon.inverse" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_box11.Box, { height: `199px`, width: "0.5px", bg: "neutral.200" })
+    ] });
+  }
+);
+
 // src/components/DonutChart/DonutChart.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_highcharts4 = __toESM(require("highcharts"));
 var import_highcharts_react_official2 = require("highcharts-react-official");
 var import_accessibility2 = __toESM(require("highcharts/modules/accessibility"));
 var import_styled_components9 = __toESM(require("styled-components"));
-var import_seeds_react_box11 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_box13 = require("@sproutsocial/seeds-react-box");
 
 // src/components/DonutChart/components/DonutChartLegend.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_seeds_react_theme9 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
     color: slice.styles?.color || import_seeds_react_theme9.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var DonutChartLegend = (0, import_react17.memo)(
+var DonutChartLegend = (0, import_react19.memo)(
   function DonutChartLegend2({ data }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
 // src/components/DonutChart/components/DonutChartTooltip.tsx
-var import_react18 = require("react");
-var import_seeds_react_box10 = require("@sproutsocial/seeds-react-box");
+var import_react20 = require("react");
+var import_seeds_react_box12 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration3 = require("@sproutsocial/seeds-react-duration");
-var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_icon4 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_numeral3 = require("@sproutsocial/seeds-react-numeral");
-var import_seeds_react_text5 = require("@sproutsocial/seeds-react-text");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var DonutChartTooltip = (0, import_react18.memo)(
+var import_seeds_react_text6 = require("@sproutsocial/seeds-react-text");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DonutChartTooltip = (0, import_react20.memo)(
   function DonutChartTooltip2({
     color,
     name,
@@ -1730,11 +1774,11 @@ var DonutChartTooltip = (0, import_react18.memo)(
       {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_text5.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_seeds_react_box10.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_seeds_react_box12.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 import_seeds_react_numeral3.Numeral,
                 {
                   number: percent,
@@ -1743,7 +1787,7 @@ var DonutChartTooltip = (0, import_react18.memo)(
                   locale: numberLocale
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_text5.Text, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_duration3.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_duration3.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 import_seeds_react_numeral3.Numeral,
                 {
                   abbreviate: false,
@@ -1759,11 +1803,11 @@ var DonutChartTooltip = (0, import_react18.memo)(
         ]
       }
     ];
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ChartTooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_seeds_react_box10.Box, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_icon2.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_text5.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ChartTooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_seeds_react_box12.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_icon4.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
@@ -1787,16 +1831,16 @@ var transformDonutChartTooltipData = ({
 
 // src/components/DonutChart/DonutChart.tsx
 var import_seeds_react_theme11 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 (0, import_accessibility2.default)(import_highcharts4.default);
-var StyledBox4 = (0, import_styled_components9.default)(import_seeds_react_box11.Box)`
+var StyledBox4 = (0, import_styled_components9.default)(import_seeds_react_box13.Box)`
   ${donutChartStyles}
 `;
-var DonutChart = (0, import_react19.memo)(function DonutChart2(props) {
+var DonutChart = (0, import_react21.memo)(function DonutChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DonutChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DonutChartWithData, { ...props });
 });
-var DonutChartWithData = (0, import_react19.memo)(
+var DonutChartWithData = (0, import_react21.memo)(
   function DonutChartWithData2({
     data,
     numberLocale = "en-us",
@@ -1810,12 +1854,12 @@ var DonutChartWithData = (0, import_react19.memo)(
     onClick,
     tooltipClickLabel
   }) {
-    const [options, setOptions] = (0, import_react19.useState)(donutChartOptions);
-    const [chart, setChart] = (0, import_react19.useState)(null);
-    const callback = (0, import_react19.useCallback)((chartInstance) => {
+    const [options, setOptions] = (0, import_react21.useState)(donutChartOptions);
+    const [chart, setChart] = (0, import_react21.useState)(null);
+    const callback = (0, import_react21.useCallback)((chartInstance) => {
       setChart(chartInstance);
     }, []);
-    (0, import_react19.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       setOptions({
         accessibility: {
           point: {
@@ -1852,7 +1896,7 @@ var DonutChartWithData = (0, import_react19.memo)(
                 colorIndex: index,
                 events: onClick ? {
                   click: function() {
-                    onClick({ x: item.name });
+                    onClick({ x: item.name, ...item });
                   }
                 } : void 0
               };
@@ -1867,16 +1911,16 @@ var DonutChartWithData = (0, import_react19.memo)(
     const colors = data.map(
       (series, index) => series.styles?.color ?? import_seeds_react_theme11.theme.colors.DATAVIZ_COLORS_LIST[index] ?? ""
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         StyledBox4,
         {
           $colors: colors,
           $hasOnClick: Boolean(onClick),
           bg: "container.background.base",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               import_highcharts_react_official2.HighchartsReact,
               {
                 highcharts: import_highcharts4.default,
@@ -1884,13 +1928,13 @@ var DonutChartWithData = (0, import_react19.memo)(
                 callback
               }
             ),
-            chart && !disableTooltips ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            chart && !disableTooltips ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               ChartTooltipPortal,
               {
                 chart,
                 renderContent: (context) => {
                   const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     DonutChartTooltip,
                     {
                       color,
@@ -1909,7 +1953,7 @@ var DonutChartWithData = (0, import_react19.memo)(
                 }
               }
             ) : null,
-            hideLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_box11.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DonutChartLegend, { data }) })
+            hideLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_seeds_react_box13.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DonutChartLegend, { data }) })
           ]
         }
       )
@@ -1918,14 +1962,14 @@ var DonutChartWithData = (0, import_react19.memo)(
 );
 
 // src/components/DonutChart/components/DonutChartLegendTable.tsx
-var import_react20 = require("react");
-var import_seeds_react_box12 = require("@sproutsocial/seeds-react-box");
+var import_react22 = require("react");
+var import_seeds_react_box14 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration4 = require("@sproutsocial/seeds-react-duration");
 var import_seeds_react_numeral4 = require("@sproutsocial/seeds-react-numeral");
-var import_seeds_react_text6 = require("@sproutsocial/seeds-react-text");
+var import_seeds_react_text7 = require("@sproutsocial/seeds-react-text");
 var import_seeds_react_theme12 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var DonutChartLegendTable = (0, import_react20.memo)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DonutChartLegendTable = (0, import_react22.memo)(
   function DonutChartLegendTable2({
     data,
     numberLocale = "en-us",
@@ -1945,11 +1989,11 @@ var DonutChartLegendTable = (0, import_react20.memo)(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_seeds_react_box12.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { color: "text.body", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_seeds_react_box14.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { color: "text.body", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 import_seeds_react_numeral4.Numeral,
                 {
                   abbreviate: false,
@@ -1958,7 +2002,7 @@ var DonutChartLegendTable = (0, import_react20.memo)(
                   number: value / total * 100
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 import_seeds_react_numeral4.Numeral,
                 {
                   abbreviate: false,
@@ -1978,10 +2022,10 @@ var DonutChartLegendTable = (0, import_react20.memo)(
       {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
+            content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
           },
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               import_seeds_react_numeral4.Numeral,
               {
                 abbreviate: false,
@@ -1997,7 +2041,7 @@ var DonutChartLegendTable = (0, import_react20.memo)(
         isAppendedRow: true
       }
     ];
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ChartTable,
       {
         rows: [...rows, ...totalRow]
@@ -2007,41 +2051,41 @@ var DonutChartLegendTable = (0, import_react20.memo)(
 );
 
 // src/components/LineChart/LineChart.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_highcharts5 = __toESM(require("highcharts"));
 var import_highcharts_react_official3 = require("highcharts-react-official");
 var import_accessibility3 = __toESM(require("highcharts/modules/accessibility"));
 var import_annotations2 = __toESM(require("highcharts/modules/annotations"));
 var import_styled_components10 = __toESM(require("styled-components"));
-var import_seeds_react_box14 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_box16 = require("@sproutsocial/seeds-react-box");
 
 // src/components/LineChart/components/LineChartLegend.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_seeds_react_theme13 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
     color: series.styles?.color || import_seeds_react_theme13.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var LineChartLegend = (0, import_react21.memo)(
+var LineChartLegend = (0, import_react23.memo)(
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
 // src/components/LineChart/components/LineChartTooltip.tsx
-var import_react22 = require("react");
-var import_seeds_react_box13 = require("@sproutsocial/seeds-react-box");
+var import_react24 = require("react");
+var import_seeds_react_box15 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration5 = require("@sproutsocial/seeds-react-duration");
-var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_numeral5 = require("@sproutsocial/seeds-react-numeral");
-var import_seeds_react_text7 = require("@sproutsocial/seeds-react-text");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var LineChartTooltip = (0, import_react22.memo)(
+var import_seeds_react_text8 = require("@sproutsocial/seeds-react-text");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var LineChartTooltip = (0, import_react24.memo)(
   function LineChartTooltip2({
     data,
     invalidNumberLabel,
@@ -2060,10 +2104,10 @@ var LineChartTooltip = (0, import_react22.memo)(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_seeds_react_text8.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_duration5.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_seeds_react_text8.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_seeds_react_duration5.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               import_seeds_react_numeral5.Numeral,
               {
                 abbreviate: false,
@@ -2078,13 +2122,13 @@ var LineChartTooltip = (0, import_react22.memo)(
         ]
       };
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ChartTooltip, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChartTooltip, { children: [
       xAnnotationDetails ? xAnnotationDetails() : void 0,
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_seeds_react_box13.Box, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_icon3.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_seeds_react_box15.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_seeds_react_icon5.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_seeds_react_text8.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
@@ -2092,17 +2136,17 @@ var LineChartTooltip = (0, import_react22.memo)(
 
 // src/components/LineChart/LineChart.tsx
 var import_seeds_react_theme14 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 (0, import_accessibility3.default)(import_highcharts5.default);
 (0, import_annotations2.default)(import_highcharts5.default);
-var StyledBox5 = (0, import_styled_components10.default)(import_seeds_react_box14.Box)`
+var StyledBox5 = (0, import_styled_components10.default)(import_seeds_react_box16.Box)`
   ${lineChartStyles}
 `;
-var LineChart = (0, import_react23.memo)(function LineChart2(props) {
+var LineChart = (0, import_react25.memo)(function LineChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LineChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineChartWithData, { ...props });
 });
-var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
+var LineChartWithData = (0, import_react25.memo)(function LineChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -2145,9 +2189,9 @@ var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
       patterns: []
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       StyledBox5,
       {
         $colors: colors,
@@ -2155,7 +2199,7 @@ var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             import_highcharts_react_official3.HighchartsReact,
             {
               highcharts: import_highcharts5.default,
@@ -2163,14 +2207,14 @@ var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
               callback
             }
           ),
-          chart && chart.annotations?.length ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          chart && chart.annotations?.length ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             ChartXAnnotationMarkerPortal,
             {
               xAnnotations,
               annotationContext: chart.annotations?.[0]
             }
           ) : null,
-          chart && !disableTooltips ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          chart && !disableTooltips ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             ChartTooltipPortal,
             {
               chart,
@@ -2181,7 +2225,7 @@ var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
                 });
                 const x = context.x;
                 const xAnnotationDetails = xAnnotations?.[x]?.details;
-                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   LineChartTooltip,
                   {
                     currency,
@@ -2200,12 +2244,291 @@ var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
               }
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_seeds_react_box14.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LineChartLegend, { data }) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_seeds_react_box16.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LineChartLegend, { data }) })
         ]
       }
     )
   ] });
 });
+
+// src/components/VerticalBarChart/VerticalBarChart.tsx
+var import_react28 = require("react");
+var import_highcharts6 = __toESM(require("highcharts"));
+var import_highcharts_react_official4 = require("highcharts-react-official");
+var import_accessibility4 = __toESM(require("highcharts/modules/accessibility"));
+var import_annotations3 = __toESM(require("highcharts/modules/annotations"));
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_seeds_react_box18 = require("@sproutsocial/seeds-react-box");
+
+// src/components/VerticalBarChart/components/VerticalBarChartLegend.tsx
+var import_react26 = require("react");
+var import_seeds_react_theme15 = require("@sproutsocial/seeds-react-theme");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var getVerticalBarChartLegendLabels = ({
+  data
+}) => {
+  return data.map((series, index) => ({
+    content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || import_seeds_react_theme15.theme.colors.DATAVIZ_COLORS_LIST[index]
+  }));
+};
+var VerticalBarChartLegend = (0, import_react26.memo)(
+  function VerticalbarChartLegend({ data }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
+  }
+);
+
+// src/components/VerticalBarChart/components/VerticalBarChartTooltip.tsx
+var import_react27 = require("react");
+var import_seeds_react_box17 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_duration6 = require("@sproutsocial/seeds-react-duration");
+var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_numeral6 = require("@sproutsocial/seeds-react-numeral");
+var import_seeds_react_text9 = require("@sproutsocial/seeds-react-text");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var VerticalBarChartTooltip = (0, import_react27.memo)(
+  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__ */ (0, import_jsx_runtime27.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_text9.Text, { "aria-label": `${name}: `, children: name }) }) })
+          },
+          {
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_text9.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_duration6.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              import_seeds_react_numeral6.Numeral,
+              {
+                abbreviate: false,
+                currency,
+                format: numberFormat,
+                locale: numberLocale,
+                number: value
+              }
+            ),
+            align: "right"
+          }
+        ]
+      };
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ChartTooltip, { children: [
+      xAnnotationDetails ? xAnnotationDetails() : void 0,
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_seeds_react_box17.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_icon6.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_text9.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      ] }) : tooltipClickLabel }) : null
+    ] });
+  }
+);
+
+// src/components/VerticalBarChart/VerticalBarChart.tsx
+var import_seeds_react_theme16 = require("@sproutsocial/seeds-react-theme");
+
+// src/components/VerticalBarChart/styles.ts
+var import_styled_components11 = require("styled-components");
+var verticalBarChartStyles = import_styled_components11.css`
+  ${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
+var import_jsx_runtime28 = require("react/jsx-runtime");
+(0, import_accessibility4.default)(import_highcharts6.default);
+(0, import_annotations3.default)(import_highcharts6.default);
+var StyledBox6 = (0, import_styled_components12.default)(import_seeds_react_box18.Box)`
+  ${verticalBarChartStyles}
+`;
+var VerticalBarChart = (0, import_react28.memo)(
+  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__ */ (0, import_jsx_runtime28.jsx)(VerticalBarChartWithData, { ...props, data: chartData });
+  }
+);
+var VerticalBarChartWithData = (0, import_react28.memo)(
+  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 ?? import_seeds_react_theme16.theme.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+        );
+        acc.patterns.push(item.styles?.pattern ?? "solid");
+        return acc;
+      },
+      {
+        colors: [],
+        patterns: []
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        StyledBox6,
+        {
+          $colors: colors,
+          $hasOnClick: Boolean(onClick),
+          bg: "container.background.base",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              import_highcharts_react_official4.HighchartsReact,
+              {
+                highcharts: import_highcharts6.default,
+                options,
+                callback
+              }
+            ),
+            chart && chart.annotations?.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              ChartXAnnotationMarkerPortal,
+              {
+                xAnnotations,
+                annotationContext: chart.annotations?.[0]
+              }
+            ) : null,
+            chart ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              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__ */ (0, import_jsx_runtime28.jsx)(
+                    VerticalBarChartTooltip,
+                    {
+                      currency,
+                      data: tooltipData,
+                      invalidNumberLabel,
+                      numberFormat,
+                      numberLocale,
+                      textLocale,
+                      tooltipDateFormatter,
+                      onClick,
+                      tooltipClickLabel,
+                      x,
+                      xAnnotationDetails
+                    }
+                  );
+                }
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_seeds_react_box18.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VerticalBarChartLegend, { data }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AreaChart,
@@ -2218,6 +2541,8 @@ var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
   ChartTooltipPortal,
   ChartTooltipTable,
   ChartTooltipTitle,
+  ChartXAnnotationDetails,
+  ChartXAnnotationMarker,
   ColorBox,
   DONUT_CHART_HALO_SIZE,
   DONUT_CHART_HEIGHT,
@@ -2230,6 +2555,7 @@ var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
   NetworkColorBox,
   TIME_SERIES_CHART_HEIGHT,
   VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT,
+  VerticalBarChart,
   areaChartOptions,
   areaChartStyles,
   baseChartOptions,