@sproutsocial/seeds-react-data-viz 0.1.0 → 0.1.1

package/dist/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,15 +30,96 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/object-assign/index.js
+var require_object_assign = __commonJS({
+  "../../node_modules/object-assign/index.js"(exports, module2) {
+    "use strict";
+    var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+    var hasOwnProperty = Object.prototype.hasOwnProperty;
+    var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+    function toObject(val) {
+      if (val === null || val === void 0) {
+        throw new TypeError("Object.assign cannot be called with null or undefined");
+      }
+      return Object(val);
+    }
+    function shouldUseNative() {
+      try {
+        if (!Object.assign) {
+          return false;
+        }
+        var test1 = new String("abc");
+        test1[5] = "de";
+        if (Object.getOwnPropertyNames(test1)[0] === "5") {
+          return false;
+        }
+        var test2 = {};
+        for (var i = 0; i < 10; i++) {
+          test2["_" + String.fromCharCode(i)] = i;
+        }
+        var order2 = Object.getOwnPropertyNames(test2).map(function(n2) {
+          return test2[n2];
+        });
+        if (order2.join("") !== "0123456789") {
+          return false;
+        }
+        var test3 = {};
+        "abcdefghijklmnopqrst".split("").forEach(function(letter) {
+          test3[letter] = letter;
+        });
+        if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
+          return false;
+        }
+        return true;
+      } catch (err) {
+        return false;
+      }
+    }
+    module2.exports = shouldUseNative() ? Object.assign : function(target, source) {
+      var from;
+      var to = toObject(target);
+      var symbols;
+      for (var s = 1; s < arguments.length; s++) {
+        from = Object(arguments[s]);
+        for (var key in from) {
+          if (hasOwnProperty.call(from, key)) {
+            to[key] = from[key];
+          }
+        }
+        if (getOwnPropertySymbols) {
+          symbols = getOwnPropertySymbols(from);
+          for (var i = 0; i < symbols.length; i++) {
+            if (propIsEnumerable.call(from, symbols[i])) {
+              to[symbols[i]] = from[symbols[i]];
+            }
+          }
+        }
+      }
+      return to;
+    };
+  }
+});
+
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AreaChart: () => AreaChart,
+  ChartLegend: () => ChartLegend,
+  ChartLegendLabel: () => ChartLegendLabel,
   ChartTable: () => ChartTable,
+  ChartTooltip: () => ChartTooltip,
+  ChartTooltipFooter: () => ChartTooltipFooter,
+  ChartTooltipHeader: () => ChartTooltipHeader,
+  ChartTooltipTable: () => ChartTooltipTable,
+  ChartTooltipTitle: () => ChartTooltipTitle,
   ColorBox: () => ColorBox,
   DONUT_CHART_HALO_SIZE: () => DONUT_CHART_HALO_SIZE,
   DONUT_CHART_HEIGHT: () => DONUT_CHART_HEIGHT,
   DONUT_CHART_WIDTH: () => DONUT_CHART_WIDTH,
   DatavizColorBox: () => DatavizColorBox,
+  DonutChart: () => DonutChart,
+  DonutChartLegendTable: () => DonutChartLegendTable,
+  LineChart: () => LineChart,
   NetworkColorBox: () => NetworkColorBox,
   TIME_SERIES_CHART_HEIGHT: () => TIME_SERIES_CHART_HEIGHT,
   areaChartOptions: () => areaChartOptions,
@@ -52,14 +136,16 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/ChartTable/ChartTable.tsx
-var import_react4 = require("react");
-var import_styled_components3 = __toESM(require("styled-components"));
+// src/components/AreaChart/AreaChart.tsx
+var import_react22 = require("react");
+var import_highcharts2 = __toESM(require("highcharts"));
+var import_highcharts_react_official = require("highcharts-react-official");
+var import_accessibility = __toESM(require("highcharts/modules/accessibility"));
+var import_styled_components15 = __toESM(require("styled-components"));
 
-// ../seeds-react-text/dist/esm/index.js
-var import_react2 = require("react");
+// ../seeds-react-box/dist/esm/index.js
+var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_styled_components2 = __toESM(require("styled-components"));
 
 // ../seeds-react-system-props/dist/index.mjs
 var import_react = require("react");
@@ -499,181 +585,9 @@ var De = y(l({ cursor: true, whiteSpace: true }));
 var Ve = y(L({ key: "typography", prop: "typeScale" }));
 var mo = y(De, Ve, V, I, A, D, G, E, H, $, N, M);
 
-// ../seeds-react-text/dist/esm/index.js
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react3 = require("react");
-var Container = import_styled_components2.default.span`
-  margin: 0;
-  padding-left: 0;
-  padding-right: 0;
-  font-family: ${(props) => props.theme.fontFamily};
-  font-style: ${(props) => {
-  return props.isItalicized && "italic";
-}};
-
-  ${(props) => props.truncated && import_styled_components2.css`
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    `}
-
-  ${(props) => props.breakWord && import_styled_components2.css`
-      word-break: break-word;
-      hyphens: auto;
-    `}
-
-  ${ke}
-  ${Fe}
-  ${Ee}
-  ${Me}
-  ${Ne}
-`;
-var styles_default = Container;
-var Headline = (0, import_styled_components.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[400]}
-`;
-var SubHeadline = (0, import_styled_components.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[300]}
-`;
-var SmallSubHeadline = (0, import_styled_components.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.headline};
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  ${(props) => props.theme.typography[200]}
-`;
-var Byline = (0, import_styled_components.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[200]}
-`;
-var SmallByline = (0, import_styled_components.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.subtext};
-  ${(props) => props.theme.typography[100]}
-`;
-var BodyCopy = (0, import_styled_components.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.body};
-  ${(props) => props.theme.typography[300]}
-`;
-var SmallBodyCopy = (0, import_styled_components.default)(styles_default)`
-  color: ${(props) => props.theme.colors.text.body};
-  ${(props) => props.theme.typography[200]}
-`;
-var Text = ({ fontSize, children, qa, color, ...rest }) => {
-  const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    styles_default,
-    {
-      typeScale: fontSize,
-      "data-qa-text": qaText,
-      color,
-      ...qa,
-      ...rest,
-      children
-    }
-  );
-};
-var withTextLogic = (Component) => {
-  return ({ children, ...props }) => {
-    const qaText = typeof children === "string" ? children : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { "data-qa-text": qaText, ...props, children });
-  };
-};
-var HeadlineWithLogic = withTextLogic(Headline);
-HeadlineWithLogic.displayName = "Text.Headline";
-Text.Headline = HeadlineWithLogic;
-var SubHeadlineWithLogic = withTextLogic(SubHeadline);
-SubHeadlineWithLogic.displayName = "Text.SubHeadline";
-Text.SubHeadline = SubHeadlineWithLogic;
-var SmallSubHeadlineWithLogic = withTextLogic(SmallSubHeadline);
-SmallSubHeadlineWithLogic.displayName = "Text.SmallSubHeadline";
-Text.SmallSubHeadline = SmallSubHeadlineWithLogic;
-var BylineWithLogic = withTextLogic(Byline);
-BylineWithLogic.displayName = "Text.Byline";
-Text.Byline = BylineWithLogic;
-var SmallBylineWithLogic = withTextLogic(SmallByline);
-SmallBylineWithLogic.displayName = "Text.SmallByline";
-Text.SmallByline = SmallBylineWithLogic;
-var BodyCopyWithLogic = withTextLogic(BodyCopy);
-BodyCopyWithLogic.displayName = "Text.BodyCopy";
-Text.BodyCopy = BodyCopyWithLogic;
-var SmallBodyCopyWithLogic = withTextLogic(SmallBodyCopy);
-SmallBodyCopyWithLogic.displayName = "Text.SmallBodyCopy";
-Text.SmallBodyCopy = SmallBodyCopyWithLogic;
-var Text_default = Text;
-
-// src/components/ChartTable/ChartTable.tsx
-var import_racine = require("@sproutsocial/racine");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var StyledRacineTable = (0, import_styled_components3.default)(import_racine.Table)`
-  tbody tr:last-child {
-    border-bottom: none;
-  }
-  tr:last-child td,
-  tr:last-child th {
-    padding-bottom: 0;
-  }
-  tr:first-child td,
-  tr:first-child th {
-    padding-top: 0;
-  }
-  tr th {
-    padding-left: 0;
-  }
-  tr td:last-child {
-    padding-right: 0;
-  }
-`;
-var StyledRacineTableRow = (0, import_styled_components3.default)(import_racine.Table.TableRow)`
-  ${({ $isAppendedRow, theme: theme2 }) => $isAppendedRow ? `border-top: 2px solid ${theme2.colors.container.border.base}` : ""}
-`;
-var ChartTable = (0, import_react4.memo)(function ChartTable2({
-  rows
-}) {
-  if (!rows || rows.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledRacineTable, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_racine.Table.TableBody, { children: rows.map(({ cells, isAppendedRow }, rowIndex) => {
-    if (!cells || cells.length === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      StyledRacineTableRow,
-      {
-        $isAppendedRow: isAppendedRow,
-        children: cells.map(
-          ({ content, align = "left", colSpan = 1 }, cellIndex) => {
-            const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_racine.Table.Cell,
-              {
-                id: uniqueIdentifier,
-                scope: cellIndex === 0 ? "row" : void 0,
-                align,
-                colSpan,
-                py: 200,
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default.SmallBodyCopy, { as: "div", children: content })
-              },
-              uniqueIdentifier
-            );
-          }
-        )
-      },
-      `chart-tooltip-table-row-${rowIndex}`
-    );
-  }) }) });
-});
-
-// src/components/ColorBox/ColorBox.tsx
-var import_styled_components6 = require("styled-components");
-
 // ../seeds-react-box/dist/esm/index.js
-var React = __toESM(require("react"));
-var import_styled_components4 = __toESM(require("styled-components"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Container2 = import_styled_components4.default.div`
+var import_jsx_runtime = require("react/jsx-runtime");
+var Container = import_styled_components.default.div`
   box-sizing: border-box;
   font-family: ${({ theme: theme2 }) => theme2.fontFamily};
 
@@ -684,25 +598,25 @@ var Container2 = import_styled_components4.default.div`
   ${Ee}
   ${Me}
 `;
-var styles_default2 = Container2;
+var styles_default = Container;
 var Box = React.forwardRef(
-  ({ color, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      styles_default2,
+  ({ color: color2, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      styles_default,
       {
         ...props,
         ref,
-        color
+        color: color2
       }
     );
   }
 );
 Box.displayName = "Box";
 var Box_default = Box;
+var src_default = Box_default;
 
-// ../seeds-react-theme-provider/dist/index.mjs
-var import_react5 = require("react");
-var import_styled_components5 = require("styled-components");
+// src/components/AreaChart/components/AreaChartLegend.tsx
+var import_react8 = require("react");
 
 // ../../node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
@@ -922,8 +836,8 @@ var PolishedError = /* @__PURE__ */ function(_Error) {
   }
   return PolishedError2;
 }(/* @__PURE__ */ _wrapNativeSuper(Error));
-function colorToInt(color) {
-  return Math.round(color * 255);
+function colorToInt(color2) {
+  return Math.round(color2 * 255);
 }
 function convertToInt(red3, green3, blue3) {
   return colorToInt(red3) + "," + colorToInt(green3) + "," + colorToInt(blue3);
@@ -1116,11 +1030,11 @@ var namedColorMap = {
   yellow: "ff0",
   yellowgreen: "9acd32"
 };
-function nameToHex(color) {
-  if (typeof color !== "string")
-    return color;
-  var normalizedColorName = color.toLowerCase();
-  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+function nameToHex(color2) {
+  if (typeof color2 !== "string")
+    return color2;
+  var normalizedColorName = color2.toLowerCase();
+  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
 }
 var hexRegex = /^#[a-fA-F0-9]{6}$/;
 var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
@@ -1130,11 +1044,11 @@ var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
 var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
 var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
 var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-function parseToRgb(color) {
-  if (typeof color !== "string") {
+function parseToRgb(color2) {
+  if (typeof color2 !== "string") {
     throw new PolishedError(3);
   }
-  var normalizedColor = nameToHex(color);
+  var normalizedColor = nameToHex(color2);
   if (normalizedColor.match(hexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -1260,10 +1174,10 @@ function curry(f2) {
 function guard(lowerBoundary, upperBoundary, value) {
   return Math.max(lowerBoundary, Math.min(upperBoundary, value));
 }
-function transparentize(amount, color) {
-  if (color === "transparent")
-    return color;
-  var parsedColor = parseToRgb(color);
+function transparentize(amount, color2) {
+  if (color2 === "transparent")
+    return color2;
+  var parsedColor = parseToRgb(color2);
   var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
   var colorWithAlpha = _extends({}, parsedColor, {
     alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
@@ -3415,70 +3329,1933 @@ var darkTheme2 = _objectSpread4(_objectSpread4({}, theme_default2), {}, {
   })
 });
 
-// ../seeds-react-theme-provider/dist/index.mjs
-var import_jsx_runtime4 = require("react/jsx-runtime");
+// src/components/ChartLegend/ChartLegend.tsx
+var import_react6 = require("react");
 
-// src/components/ColorBox/ColorBox.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ColorBox = ({
-  display = "inline-block",
-  height = "16px",
-  width = "16px",
-  minWidth = width,
-  borderRadius = "400",
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Box_default,
+// src/components/ChartLegend/components/ChartLegendLabel.tsx
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_react5 = require("react");
+
+// ../seeds-react-text/dist/esm/index.js
+var import_react2 = require("react");
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var Container2 = import_styled_components3.default.span`
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+  font-family: ${(props) => props.theme.fontFamily};
+  font-style: ${(props) => {
+  return props.isItalicized && "italic";
+}};
+
+  ${(props) => props.truncated && import_styled_components3.css`
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    `}
+
+  ${(props) => props.breakWord && import_styled_components3.css`
+      word-break: break-word;
+      hyphens: auto;
+    `}
+
+  ${ke}
+  ${Fe}
+  ${Ee}
+  ${Me}
+  ${Ne}
+`;
+var styles_default2 = Container2;
+var Headline = (0, import_styled_components2.default)(styles_default2)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[400]}
+`;
+var SubHeadline = (0, import_styled_components2.default)(styles_default2)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[300]}
+`;
+var SmallSubHeadline = (0, import_styled_components2.default)(styles_default2)`
+  color: ${(props) => props.theme.colors.text.headline};
+  font-weight: ${(props) => props.theme.fontWeights.bold};
+  ${(props) => props.theme.typography[200]}
+`;
+var Byline = (0, import_styled_components2.default)(styles_default2)`
+  color: ${(props) => props.theme.colors.text.subtext};
+  ${(props) => props.theme.typography[200]}
+`;
+var SmallByline = (0, import_styled_components2.default)(styles_default2)`
+  color: ${(props) => props.theme.colors.text.subtext};
+  ${(props) => props.theme.typography[100]}
+`;
+var BodyCopy = (0, import_styled_components2.default)(styles_default2)`
+  color: ${(props) => props.theme.colors.text.body};
+  ${(props) => props.theme.typography[300]}
+`;
+var SmallBodyCopy = (0, import_styled_components2.default)(styles_default2)`
+  color: ${(props) => props.theme.colors.text.body};
+  ${(props) => props.theme.typography[200]}
+`;
+var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
+  const qaText = typeof children === "string" ? children : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    styles_default2,
     {
-      ...props,
-      display,
-      height,
-      width,
-      minWidth,
-      borderRadius,
-      css: import_styled_components6.css`
-          cursor: ${(props2) => props2?.onClick ? "pointer" : "default"};
-        `
+      typeScale: fontSize2,
+      "data-qa-text": qaText,
+      color: color2,
+      ...qa,
+      ...rest,
+      children
     }
   );
 };
+var withTextLogic = (Component) => {
+  return ({ children, ...props }) => {
+    const qaText = typeof children === "string" ? children : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { "data-qa-text": qaText, ...props, children });
+  };
+};
+var HeadlineWithLogic = withTextLogic(Headline);
+HeadlineWithLogic.displayName = "Text.Headline";
+Text.Headline = HeadlineWithLogic;
+var SubHeadlineWithLogic = withTextLogic(SubHeadline);
+SubHeadlineWithLogic.displayName = "Text.SubHeadline";
+Text.SubHeadline = SubHeadlineWithLogic;
+var SmallSubHeadlineWithLogic = withTextLogic(SmallSubHeadline);
+SmallSubHeadlineWithLogic.displayName = "Text.SmallSubHeadline";
+Text.SmallSubHeadline = SmallSubHeadlineWithLogic;
+var BylineWithLogic = withTextLogic(Byline);
+BylineWithLogic.displayName = "Text.Byline";
+Text.Byline = BylineWithLogic;
+var SmallBylineWithLogic = withTextLogic(SmallByline);
+SmallBylineWithLogic.displayName = "Text.SmallByline";
+Text.SmallByline = SmallBylineWithLogic;
+var BodyCopyWithLogic = withTextLogic(BodyCopy);
+BodyCopyWithLogic.displayName = "Text.BodyCopy";
+Text.BodyCopy = BodyCopyWithLogic;
+var SmallBodyCopyWithLogic = withTextLogic(SmallBodyCopy);
+SmallBodyCopyWithLogic.displayName = "Text.SmallBodyCopy";
+Text.SmallBodyCopy = SmallBodyCopyWithLogic;
+var Text_default = Text;
+
+// src/components/ColorBox/ColorBox.tsx
+var import_styled_components5 = require("styled-components");
+
+// ../seeds-react-theme-provider/dist/index.mjs
+var import_react4 = require("react");
+var import_styled_components4 = require("styled-components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/components/ColorBox/ColorBox.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ColorBox = ({
+  display: display2 = "inline-block",
+  height: height2 = "16px",
+  width: width2 = "16px",
+  minWidth: minWidth2 = width2,
+  borderRadius: borderRadius2 = "400",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Box_default,
+    {
+      ...props,
+      display: display2,
+      height: height2,
+      width: width2,
+      minWidth: minWidth2,
+      borderRadius: borderRadius2,
+      css: import_styled_components5.css`
+          cursor: ${(props2) => props2?.onClick ? "pointer" : "default"};
+        `
+    }
+  );
+};
+
+// src/components/ColorBox/DatavizColorBox.tsx
+var import_styled_components6 = __toESM(require("styled-components"));
+var DatavizColorBox = (0, import_styled_components6.default)(ColorBox).attrs(
+  ({ colorIndex }) => ({
+    style: {
+      background: getDatavizColor(colorIndex),
+      opacity: getDatavizOpacity(colorIndex)
+    }
+  })
+)``;
+var getDatavizColor = (colorIndex) => theme_default.colors.DATAVIZ_COLORS_LIST[colorIndex % theme_default.colors.DATAVIZ_COLORS_LIST.length] || "";
+var getDatavizOpacity = (colorIndex) => {
+  const opacitySteps = [1, 0.6, 0.4, 0.2];
+  const opacityStep = Math.floor(colorIndex / theme_default.colors.DATAVIZ_COLORS_LIST.length) % opacitySteps.length;
+  return opacitySteps[opacityStep];
+};
+var getDatavizColorWithAlpha = (colorIndex) => {
+  const color2 = getDatavizColor(colorIndex);
+  const opacity2 = getDatavizOpacity(colorIndex);
+  if (opacity2 < 0 || opacity2 > 1) {
+    return color2;
+  }
+  return `${color2}${Math.floor(opacity2 * 255).toString(16).padStart(2, "0")}`;
+};
+
+// src/components/ColorBox/NetworkColorBox.tsx
+var import_seeds_networkcolor2 = __toESM(require("@sproutsocial/seeds-networkcolor"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NetworkColorBox = ({
+  networkColor,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColorBox, { ...props, bg: import_seeds_networkcolor2.default[networkColor] });
+};
+
+// src/components/ChartLegend/components/ChartLegendLabel.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var StyledBox = (0, import_styled_components7.default)(Box_default)`
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme2 }) => theme2.space[300]};
+`;
+var ChartLegendLabel = (0, import_react5.memo)(
+  function ChartLegendLabel2({
+    children,
+    color: color2 = "#CCC",
+    containerBoxProps = {}
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(StyledBox, { ...containerBoxProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ColorBox, { bg: color2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { as: "div", fontSize: 200, color: "text.subtext", children })
+    ] });
+  }
+);
+
+// src/components/ChartLegend/ChartLegend.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ChartLegend = (0, import_react6.memo)(function ChartLegend2({
+  legendLabels,
+  containerBoxProps = {},
+  stacked = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Box_default,
+    {
+      as: "ul",
+      "aria-hidden": "true",
+      display: "flex",
+      justifyContent: "center",
+      flexDirection: stacked ? "column" : "row",
+      flexWrap: "wrap",
+      columnGap: 450,
+      rowGap: 200,
+      m: 0,
+      p: 0,
+      ...containerBoxProps,
+      children: legendLabels.map(({ color: color2, content }, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ChartLegendLabel,
+        {
+          color: color2 || theme_default.colors.DATAVIZ_COLORS_LIST[index],
+          containerBoxProps: { as: "li" },
+          children: content
+        },
+        `chart-legend-label-${index}`
+      ))
+    }
+  );
+});
+
+// src/components/ChartLegend/components/ChartLegendLabelContentWithIcon.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ChartLegendLabelContentWithIcon = (0, import_react7.memo)(
+  function ChartLegendLabelContentWithIcon2({
+    children,
+    icon
+  }) {
+    return icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: 200, children: [
+      icon,
+      children
+    ] }) : children;
+  }
+);
+
+// src/components/AreaChart/components/AreaChartLegend.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getAreaChartLegendLabels = ({
+  data
+}) => {
+  return data.map((series, index) => ({
+    content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme_default.colors.DATAVIZ_COLORS_LIST[index]
+  }));
+};
+var AreaChartLegend = (0, import_react8.memo)(
+  function AreaChartLegend2({ data }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
+  }
+);
+
+// src/components/AreaChart/components/AreaChartTooltip.tsx
+var import_react19 = require("react");
+
+// ../seeds-react-icon/dist/esm/index.js
+var import_react11 = require("react");
+var import_styled_components10 = __toESM(require("styled-components"));
+
+// ../seeds-react-partner-logo/dist/esm/index.js
+var import_react9 = require("react");
+var import_styled_components8 = require("styled-components");
+var import_styled_components9 = __toESM(require("styled-components"));
+
+// ../../node_modules/@styled-system/core/dist/index.esm.js
+var import_object_assign = __toESM(require_object_assign());
+var merge = function merge2(a3, b2) {
+  var result = (0, import_object_assign.default)({}, a3, b2);
+  for (var key in a3) {
+    var _assign;
+    if (!a3[key] || typeof b2[key] !== "object")
+      continue;
+    (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a3[key], b2[key]), _assign));
+  }
+  return result;
+};
+var sort = function sort2(obj) {
+  var next = {};
+  Object.keys(obj).sort(function(a3, b2) {
+    return a3.localeCompare(b2, void 0, {
+      numeric: true,
+      sensitivity: "base"
+    });
+  }).forEach(function(key) {
+    next[key] = obj[key];
+  });
+  return next;
+};
+var defaults = {
+  breakpoints: [40, 52, 64].map(function(n2) {
+    return n2 + "em";
+  })
+};
+var createMediaQuery = function createMediaQuery2(n2) {
+  return "@media screen and (min-width: " + n2 + ")";
+};
+var getValue = function getValue2(n2, scale) {
+  return get(scale, n2, n2);
+};
+var get = function get2(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var createParser = function createParser2(config9) {
+  var cache = {};
+  var parse = function parse2(props) {
+    var styles = {};
+    var shouldSort = false;
+    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+    for (var key in props) {
+      if (!config9[key])
+        continue;
+      var sx = config9[key];
+      var raw = props[key];
+      var scale = get(props.theme, sx.scale, sx.defaults);
+      if (typeof raw === "object") {
+        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+        if (Array.isArray(raw)) {
+          cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
+          styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+          continue;
+        }
+        if (raw !== null) {
+          styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+          shouldSort = true;
+        }
+        continue;
+      }
+      (0, import_object_assign.default)(styles, sx(raw, scale, props));
+    }
+    if (shouldSort) {
+      styles = sort(styles);
+    }
+    return styles;
+  };
+  parse.config = config9;
+  parse.propNames = Object.keys(config9);
+  parse.cache = cache;
+  var keys = Object.keys(config9).filter(function(k2) {
+    return k2 !== "config";
+  });
+  if (keys.length > 1) {
+    keys.forEach(function(key) {
+      var _createParser;
+      parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[key], _createParser));
+    });
+  }
+  return parse;
+};
+var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
+  var styles = {};
+  raw.slice(0, mediaQueries.length).forEach(function(value, i) {
+    var media = mediaQueries[i];
+    var style = sx(value, scale, _props);
+    if (!media) {
+      (0, import_object_assign.default)(styles, style);
+    } else {
+      var _assign2;
+      (0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
+    }
+  });
+  return styles;
+};
+var parseResponsiveObject = function parseResponsiveObject2(breakpoints2, sx, scale, raw, _props) {
+  var styles = {};
+  for (var key in raw) {
+    var breakpoint = breakpoints2[key];
+    var value = raw[key];
+    var style = sx(value, scale, _props);
+    if (!breakpoint) {
+      (0, import_object_assign.default)(styles, style);
+    } else {
+      var _assign3;
+      var media = createMediaQuery(breakpoint);
+      (0, import_object_assign.default)(styles, (_assign3 = {}, _assign3[media] = (0, import_object_assign.default)({}, styles[media], style), _assign3));
+    }
+  }
+  return styles;
+};
+var createStyleFunction = function createStyleFunction2(_ref) {
+  var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
+  properties = properties || [property];
+  var sx = function sx2(value, scale2, _props) {
+    var result = {};
+    var n2 = transform(value, scale2, _props);
+    if (n2 === null)
+      return;
+    properties.forEach(function(prop) {
+      result[prop] = n2;
+    });
+    return result;
+  };
+  sx.scale = scale;
+  sx.defaults = defaultScale;
+  return sx;
+};
+var system = function system2(args) {
+  if (args === void 0) {
+    args = {};
+  }
+  var config9 = {};
+  Object.keys(args).forEach(function(key) {
+    var conf = args[key];
+    if (conf === true) {
+      config9[key] = createStyleFunction({
+        property: key,
+        scale: key
+      });
+      return;
+    }
+    if (typeof conf === "function") {
+      config9[key] = conf;
+      return;
+    }
+    config9[key] = createStyleFunction(conf);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+var compose = function compose2() {
+  var config9 = {};
+  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
+    parsers[_key] = arguments[_key];
+  }
+  parsers.forEach(function(parser2) {
+    if (!parser2 || !parser2.config)
+      return;
+    (0, import_object_assign.default)(config9, parser2.config);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+
+// ../../node_modules/@styled-system/layout/dist/index.esm.js
+var isNumber = function isNumber2(n2) {
+  return typeof n2 === "number" && !isNaN(n2);
+};
+var getWidth = function getWidth2(n2, scale) {
+  return get(scale, n2, !isNumber(n2) || n2 > 1 ? n2 : n2 * 100 + "%");
+};
+var config = {
+  width: {
+    property: "width",
+    scale: "sizes",
+    transform: getWidth
+  },
+  height: {
+    property: "height",
+    scale: "sizes"
+  },
+  minWidth: {
+    property: "minWidth",
+    scale: "sizes"
+  },
+  minHeight: {
+    property: "minHeight",
+    scale: "sizes"
+  },
+  maxWidth: {
+    property: "maxWidth",
+    scale: "sizes"
+  },
+  maxHeight: {
+    property: "maxHeight",
+    scale: "sizes"
+  },
+  size: {
+    properties: ["width", "height"],
+    scale: "sizes"
+  },
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  display: true,
+  verticalAlign: true
+};
+var layout = system(config);
+var index_esm_default = layout;
+
+// ../../node_modules/@styled-system/color/dist/index.esm.js
+var config2 = {
+  color: {
+    property: "color",
+    scale: "colors"
+  },
+  backgroundColor: {
+    property: "backgroundColor",
+    scale: "colors"
+  },
+  opacity: true
+};
+config2.bg = config2.backgroundColor;
+var color = system(config2);
+var index_esm_default2 = color;
+
+// ../../node_modules/@styled-system/typography/dist/index.esm.js
+var defaults2 = {
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var config3 = {
+  fontFamily: {
+    property: "fontFamily",
+    scale: "fonts"
+  },
+  fontSize: {
+    property: "fontSize",
+    scale: "fontSizes",
+    defaultScale: defaults2.fontSizes
+  },
+  fontWeight: {
+    property: "fontWeight",
+    scale: "fontWeights"
+  },
+  lineHeight: {
+    property: "lineHeight",
+    scale: "lineHeights"
+  },
+  letterSpacing: {
+    property: "letterSpacing",
+    scale: "letterSpacings"
+  },
+  textAlign: true,
+  fontStyle: true
+};
+var typography2 = system(config3);
+var index_esm_default3 = typography2;
+
+// ../../node_modules/@styled-system/flexbox/dist/index.esm.js
+var config4 = {
+  alignItems: true,
+  alignContent: true,
+  justifyItems: true,
+  justifyContent: true,
+  flexWrap: true,
+  flexDirection: true,
+  // item
+  flex: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: true,
+  justifySelf: true,
+  alignSelf: true,
+  order: true
+};
+var flexbox = system(config4);
+var index_esm_default4 = flexbox;
+
+// ../../node_modules/@styled-system/grid/dist/index.esm.js
+var defaults3 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config5 = {
+  gridGap: {
+    property: "gridGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridColumnGap: {
+    property: "gridColumnGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridRowGap: {
+    property: "gridRowGap",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridAutoRows: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var grid = system(config5);
+var index_esm_default5 = grid;
+
+// ../../node_modules/@styled-system/border/dist/index.esm.js
+var config6 = {
+  border: {
+    property: "border",
+    scale: "borders"
+  },
+  borderWidth: {
+    property: "borderWidth",
+    scale: "borderWidths"
+  },
+  borderStyle: {
+    property: "borderStyle",
+    scale: "borderStyles"
+  },
+  borderColor: {
+    property: "borderColor",
+    scale: "colors"
+  },
+  borderRadius: {
+    property: "borderRadius",
+    scale: "radii"
+  },
+  borderTop: {
+    property: "borderTop",
+    scale: "borders"
+  },
+  borderTopLeftRadius: {
+    property: "borderTopLeftRadius",
+    scale: "radii"
+  },
+  borderTopRightRadius: {
+    property: "borderTopRightRadius",
+    scale: "radii"
+  },
+  borderRight: {
+    property: "borderRight",
+    scale: "borders"
+  },
+  borderBottom: {
+    property: "borderBottom",
+    scale: "borders"
+  },
+  borderBottomLeftRadius: {
+    property: "borderBottomLeftRadius",
+    scale: "radii"
+  },
+  borderBottomRightRadius: {
+    property: "borderBottomRightRadius",
+    scale: "radii"
+  },
+  borderLeft: {
+    property: "borderLeft",
+    scale: "borders"
+  },
+  borderX: {
+    properties: ["borderLeft", "borderRight"],
+    scale: "borders"
+  },
+  borderY: {
+    properties: ["borderTop", "borderBottom"],
+    scale: "borders"
+  }
+};
+config6.borderTopWidth = {
+  property: "borderTopWidth",
+  scale: "borderWidths"
+};
+config6.borderTopColor = {
+  property: "borderTopColor",
+  scale: "colors"
+};
+config6.borderTopStyle = {
+  property: "borderTopStyle",
+  scale: "borderStyles"
+};
+config6.borderTopLeftRadius = {
+  property: "borderTopLeftRadius",
+  scale: "radii"
+};
+config6.borderTopRightRadius = {
+  property: "borderTopRightRadius",
+  scale: "radii"
+};
+config6.borderBottomWidth = {
+  property: "borderBottomWidth",
+  scale: "borderWidths"
+};
+config6.borderBottomColor = {
+  property: "borderBottomColor",
+  scale: "colors"
+};
+config6.borderBottomStyle = {
+  property: "borderBottomStyle",
+  scale: "borderStyles"
+};
+config6.borderBottomLeftRadius = {
+  property: "borderBottomLeftRadius",
+  scale: "radii"
+};
+config6.borderBottomRightRadius = {
+  property: "borderBottomRightRadius",
+  scale: "radii"
+};
+config6.borderLeftWidth = {
+  property: "borderLeftWidth",
+  scale: "borderWidths"
+};
+config6.borderLeftColor = {
+  property: "borderLeftColor",
+  scale: "colors"
+};
+config6.borderLeftStyle = {
+  property: "borderLeftStyle",
+  scale: "borderStyles"
+};
+config6.borderRightWidth = {
+  property: "borderRightWidth",
+  scale: "borderWidths"
+};
+config6.borderRightColor = {
+  property: "borderRightColor",
+  scale: "colors"
+};
+config6.borderRightStyle = {
+  property: "borderRightStyle",
+  scale: "borderStyles"
+};
+var border = system(config6);
+var index_esm_default6 = border;
+
+// ../../node_modules/@styled-system/background/dist/index.esm.js
+var config7 = {
+  background: true,
+  backgroundImage: true,
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true
+};
+config7.bgImage = config7.backgroundImage;
+config7.bgSize = config7.backgroundSize;
+config7.bgPosition = config7.backgroundPosition;
+config7.bgRepeat = config7.backgroundRepeat;
+var background = system(config7);
+var index_esm_default7 = background;
+
+// ../../node_modules/@styled-system/position/dist/index.esm.js
+var defaults4 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config8 = {
+  position: true,
+  zIndex: {
+    property: "zIndex",
+    scale: "zIndices"
+  },
+  top: {
+    property: "top",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  right: {
+    property: "right",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  bottom: {
+    property: "bottom",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  left: {
+    property: "left",
+    scale: "space",
+    defaultScale: defaults4.space
+  }
+};
+var position = system(config8);
+var index_esm_default8 = position;
+
+// ../../node_modules/@styled-system/space/dist/index.esm.js
+var defaults5 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var isNumber3 = function isNumber4(n2) {
+  return typeof n2 === "number" && !isNaN(n2);
+};
+var getMargin = function getMargin2(n2, scale) {
+  if (!isNumber3(n2)) {
+    return get(scale, n2, n2);
+  }
+  var isNegative = n2 < 0;
+  var absolute = Math.abs(n2);
+  var value = get(scale, absolute, absolute);
+  if (!isNumber3(value)) {
+    return isNegative ? "-" + value : value;
+  }
+  return value * (isNegative ? -1 : 1);
+};
+var configs = {};
+configs.margin = {
+  margin: {
+    property: "margin",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginTop: {
+    property: "marginTop",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginRight: {
+    property: "marginRight",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginBottom: {
+    property: "marginBottom",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginLeft: {
+    property: "marginLeft",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginX: {
+    properties: ["marginLeft", "marginRight"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  },
+  marginY: {
+    properties: ["marginTop", "marginBottom"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults5.space
+  }
+};
+configs.margin.m = configs.margin.margin;
+configs.margin.mt = configs.margin.marginTop;
+configs.margin.mr = configs.margin.marginRight;
+configs.margin.mb = configs.margin.marginBottom;
+configs.margin.ml = configs.margin.marginLeft;
+configs.margin.mx = configs.margin.marginX;
+configs.margin.my = configs.margin.marginY;
+configs.padding = {
+  padding: {
+    property: "padding",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingTop: {
+    property: "paddingTop",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingRight: {
+    property: "paddingRight",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingBottom: {
+    property: "paddingBottom",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingLeft: {
+    property: "paddingLeft",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingX: {
+    properties: ["paddingLeft", "paddingRight"],
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  paddingY: {
+    properties: ["paddingTop", "paddingBottom"],
+    scale: "space",
+    defaultScale: defaults5.space
+  }
+};
+configs.padding.p = configs.padding.padding;
+configs.padding.pt = configs.padding.paddingTop;
+configs.padding.pr = configs.padding.paddingRight;
+configs.padding.pb = configs.padding.paddingBottom;
+configs.padding.pl = configs.padding.paddingLeft;
+configs.padding.px = configs.padding.paddingX;
+configs.padding.py = configs.padding.paddingY;
+var margin = system(configs.margin);
+var padding = system(configs.padding);
+var space2 = compose(margin, padding);
+
+// ../../node_modules/@styled-system/shadow/dist/index.esm.js
+var shadow = system({
+  boxShadow: {
+    property: "boxShadow",
+    scale: "shadows"
+  },
+  textShadow: {
+    property: "textShadow",
+    scale: "shadows"
+  }
+});
+
+// ../../node_modules/@styled-system/css/dist/index.esm.js
+function _extends2() {
+  _extends2 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends2.apply(this, arguments);
+}
+var get3 = function get4(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var defaultBreakpoints = [40, 52, 64].map(function(n2) {
+  return n2 + "em";
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var aliases = {
+  bg: "backgroundColor",
+  m: "margin",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  mx: "marginX",
+  my: "marginY",
+  p: "padding",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  px: "paddingX",
+  py: "paddingY"
+};
+var multiples = {
+  marginX: ["marginLeft", "marginRight"],
+  marginY: ["marginTop", "marginBottom"],
+  paddingX: ["paddingLeft", "paddingRight"],
+  paddingY: ["paddingTop", "paddingBottom"],
+  size: ["width", "height"]
+};
+var scales = {
+  color: "colors",
+  backgroundColor: "colors",
+  borderColor: "colors",
+  margin: "space",
+  marginTop: "space",
+  marginRight: "space",
+  marginBottom: "space",
+  marginLeft: "space",
+  marginX: "space",
+  marginY: "space",
+  padding: "space",
+  paddingTop: "space",
+  paddingRight: "space",
+  paddingBottom: "space",
+  paddingLeft: "space",
+  paddingX: "space",
+  paddingY: "space",
+  top: "space",
+  right: "space",
+  bottom: "space",
+  left: "space",
+  gridGap: "space",
+  gridColumnGap: "space",
+  gridRowGap: "space",
+  gap: "space",
+  columnGap: "space",
+  rowGap: "space",
+  fontFamily: "fonts",
+  fontSize: "fontSizes",
+  fontWeight: "fontWeights",
+  lineHeight: "lineHeights",
+  letterSpacing: "letterSpacings",
+  border: "borders",
+  borderTop: "borders",
+  borderRight: "borders",
+  borderBottom: "borders",
+  borderLeft: "borders",
+  borderWidth: "borderWidths",
+  borderStyle: "borderStyles",
+  borderRadius: "radii",
+  borderTopRightRadius: "radii",
+  borderTopLeftRadius: "radii",
+  borderBottomRightRadius: "radii",
+  borderBottomLeftRadius: "radii",
+  borderTopWidth: "borderWidths",
+  borderTopColor: "colors",
+  borderTopStyle: "borderStyles",
+  borderBottomWidth: "borderWidths",
+  borderBottomColor: "colors",
+  borderBottomStyle: "borderStyles",
+  borderLeftWidth: "borderWidths",
+  borderLeftColor: "colors",
+  borderLeftStyle: "borderStyles",
+  borderRightWidth: "borderWidths",
+  borderRightColor: "colors",
+  borderRightStyle: "borderStyles",
+  outlineColor: "colors",
+  boxShadow: "shadows",
+  textShadow: "shadows",
+  zIndex: "zIndices",
+  width: "sizes",
+  minWidth: "sizes",
+  maxWidth: "sizes",
+  height: "sizes",
+  minHeight: "sizes",
+  maxHeight: "sizes",
+  flexBasis: "sizes",
+  size: "sizes",
+  // svg
+  fill: "colors",
+  stroke: "colors"
+};
+var positiveOrNegative = function positiveOrNegative2(scale, value) {
+  if (typeof value !== "number" || value >= 0) {
+    return get3(scale, value, value);
+  }
+  var absolute = Math.abs(value);
+  var n2 = get3(scale, absolute, absolute);
+  if (typeof n2 === "string")
+    return "-" + n2;
+  return n2 * -1;
+};
+var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
+  var _extends22;
+  return _extends2({}, acc, (_extends22 = {}, _extends22[curr] = positiveOrNegative, _extends22));
+}, {});
+var responsive = function responsive2(styles) {
+  return function(theme2) {
+    var next = {};
+    var breakpoints2 = get3(theme2, "breakpoints", defaultBreakpoints);
+    var mediaQueries = [null].concat(breakpoints2.map(function(n2) {
+      return "@media screen and (min-width: " + n2 + ")";
+    }));
+    for (var key in styles) {
+      var value = typeof styles[key] === "function" ? styles[key](theme2) : styles[key];
+      if (value == null)
+        continue;
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+        next[media] = next[media] || {};
+        if (value[i] == null)
+          continue;
+        next[media][key] = value[i];
+      }
+    }
+    return next;
+  };
+};
+var css3 = function css4(args) {
+  return function(props) {
+    if (props === void 0) {
+      props = {};
+    }
+    var theme2 = _extends2({}, defaultTheme, {}, props.theme || props);
+    var result = {};
+    var obj = typeof args === "function" ? args(theme2) : args;
+    var styles = responsive(obj)(theme2);
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === "function" ? x(theme2) : x;
+      if (key === "variant") {
+        var variant3 = css4(get3(theme2, val))(theme2);
+        result = _extends2({}, result, {}, variant3);
+        continue;
+      }
+      if (val && typeof val === "object") {
+        result[key] = css4(val)(theme2);
+        continue;
+      }
+      var prop = get3(aliases, key, key);
+      var scaleName = get3(scales, prop);
+      var scale = get3(theme2, scaleName, get3(theme2, prop, {}));
+      var transform = get3(transforms, prop, get3);
+      var value = transform(scale, val, val);
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+    return result;
+  };
+};
+var index_esm_default9 = css3;
+
+// ../../node_modules/@styled-system/variant/dist/index.esm.js
+var variant = function variant2(_ref) {
+  var _config;
+  var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
+  var sx;
+  if (Object.keys(variants).length) {
+    sx = function sx2(value, scale2, props) {
+      return index_esm_default9(get(scale2, value, null))(props.theme);
+    };
+  } else {
+    sx = function sx2(value, scale2) {
+      return get(scale2, value, null);
+    };
+  }
+  sx.scale = scale || key;
+  sx.defaults = variants;
+  var config9 = (_config = {}, _config[prop] = sx, _config);
+  var parser = createParser(config9);
+  return parser;
+};
+var buttonStyle = variant({
+  key: "buttons"
+});
+var textStyle = variant({
+  key: "textStyles",
+  prop: "textStyle"
+});
+var colorStyle = variant({
+  key: "colorStyles",
+  prop: "colors"
+});
+
+// ../../node_modules/styled-system/dist/index.esm.js
+var width = index_esm_default.width;
+var height = index_esm_default.height;
+var minWidth = index_esm_default.minWidth;
+var minHeight = index_esm_default.minHeight;
+var maxWidth = index_esm_default.maxWidth;
+var maxHeight = index_esm_default.maxHeight;
+var size = index_esm_default.size;
+var verticalAlign = index_esm_default.verticalAlign;
+var display = index_esm_default.display;
+var overflow = index_esm_default.overflow;
+var overflowX = index_esm_default.overflowX;
+var overflowY = index_esm_default.overflowY;
+var opacity = index_esm_default2.opacity;
+var fontSize = index_esm_default3.fontSize;
+var fontFamily2 = index_esm_default3.fontFamily;
+var fontWeight = index_esm_default3.fontWeight;
+var lineHeight = index_esm_default3.lineHeight;
+var textAlign = index_esm_default3.textAlign;
+var fontStyle = index_esm_default3.fontStyle;
+var letterSpacing = index_esm_default3.letterSpacing;
+var alignItems = index_esm_default4.alignItems;
+var alignContent = index_esm_default4.alignContent;
+var justifyItems = index_esm_default4.justifyItems;
+var justifyContent = index_esm_default4.justifyContent;
+var flexWrap = index_esm_default4.flexWrap;
+var flexDirection = index_esm_default4.flexDirection;
+var flex = index_esm_default4.flex;
+var flexGrow = index_esm_default4.flexGrow;
+var flexShrink = index_esm_default4.flexShrink;
+var flexBasis = index_esm_default4.flexBasis;
+var justifySelf = index_esm_default4.justifySelf;
+var alignSelf = index_esm_default4.alignSelf;
+var order = index_esm_default4.order;
+var gridGap = index_esm_default5.gridGap;
+var gridColumnGap = index_esm_default5.gridColumnGap;
+var gridRowGap = index_esm_default5.gridRowGap;
+var gridColumn = index_esm_default5.gridColumn;
+var gridRow = index_esm_default5.gridRow;
+var gridAutoFlow = index_esm_default5.gridAutoFlow;
+var gridAutoColumns = index_esm_default5.gridAutoColumns;
+var gridAutoRows = index_esm_default5.gridAutoRows;
+var gridTemplateColumns = index_esm_default5.gridTemplateColumns;
+var gridTemplateRows = index_esm_default5.gridTemplateRows;
+var gridTemplateAreas = index_esm_default5.gridTemplateAreas;
+var gridArea = index_esm_default5.gridArea;
+var borderWidth = index_esm_default6.borderWidth;
+var borderStyle = index_esm_default6.borderStyle;
+var borderColor = index_esm_default6.borderColor;
+var borderTop = index_esm_default6.borderTop;
+var borderRight = index_esm_default6.borderRight;
+var borderBottom = index_esm_default6.borderBottom;
+var borderLeft = index_esm_default6.borderLeft;
+var borderRadius = index_esm_default6.borderRadius;
+var backgroundImage = index_esm_default7.backgroundImage;
+var backgroundSize = index_esm_default7.backgroundSize;
+var backgroundPosition = index_esm_default7.backgroundPosition;
+var backgroundRepeat = index_esm_default7.backgroundRepeat;
+var zIndex = index_esm_default8.zIndex;
+var top = index_esm_default8.top;
+var right = index_esm_default8.right;
+var bottom = index_esm_default8.bottom;
+var left = index_esm_default8.left;
+
+// ../seeds-react-partner-logo/dist/esm/index.js
+var import_react10 = require("react");
+
+// ../../seeds-assets/seeds-partner-logos/dist/index.mjs
+var ViewBoxes = { "adobe-experience-manager-dark": "0 0 18 18", "adobe-experience-manager": "0 0 18 18", "android-dark": "0 0 18 18", "android": "0 0 18 18", "apple-app-store-dark": "0 0 18 18", "apple-app-store": "0 0 18 18", "apple-dark": "0 0 18 18", "apple": "0 0 18 18", "bigcommerce-dark": "0 0 18 18", "bigcommerce-lockup-dark": "0 0 291 66", "bigcommerce-lockup": "0 0 291 66", "bigcommerce": "0 0 18 18", "bitly-dark": "0 0 18 18", "bitly": "0 0 18 18", "bluesky-dark": "0 0 18 18", "bluesky": "0 0 18 18", "bynder-dark": "0 0 18 18", "bynder": "0 0 18 18", "canva-dark": "0 0 18 18", "canva": "0 0 18 18", "dropbox-dark": "0 0 18 18", "dropbox-lockup-dark": "0 0 291 57", "dropbox-lockup": "0 0 291 57", "dropbox-wordmark-dark": "0 0 308 71", "dropbox-wordmark": "0 0 308 71", "dropbox": "0 0 18 18", "facebook-audience-network-dark": "0 0 18 18", "facebook-audience-network": "0 0 18 18", "facebook-dark": "0 0 18 18", "facebook-groups-dark": "0 0 18 18", "facebook-groups": "0 0 18 18", "facebook-shops-dark": "0 0 18 18", "facebook-shops": "0 0 18 18", "facebook": "0 0 18 18", "feedly-dark": "0 0 18 18", "feedly": "0 0 18 18", "github-dark": "0 0 18 18", "github": "0 0 18 18", "glassdoor-dark": "0 0 18 18", "glassdoor": "0 0 18 18", "google-analytics-dark": "0 0 18 18", "google-analytics": "0 0 18 18", "google-business-messages-dark": "0 0 18 18", "google-business-messages": "0 0 18 18", "google-drive-dark": "0 0 18 18", "google-drive": "0 0 18 18", "google-my-business-dark": "0 0 18 18", "google-my-business": "0 0 18 18", "google-play-store-dark": "0 0 16 18", "google-play-store": "0 0 16 18", "hubspot-dark": "0 0 18 18", "hubspot": "0 0 18 18", "instagram-dark": "0 0 18 18", "instagram": "0 0 18 18", "linkedin-audience-network-dark": "0 0 18 18", "linkedin-audience-network": "0 0 18 18", "linkedin-dark": "0 0 18 18", "linkedin": "0 0 18 18", "marketo-dark": "0 0 18 18", "marketo": "0 0 18 18", "messenger-dark": "0 0 18 18", "messenger": "0 0 18 18", "meta-dark": "0 0 18 18", "meta-lockup-dark": "0 0 273 55", "meta-lockup": "0 0 273 55", "meta": "0 0 18 18", "microsoft-dynamics-dark": "0 0 18 18", "microsoft-dynamics": "0 0 18 18", "paypal-lockup-dark": "0 0 245 60", "paypal-lockup": "0 0 245 60", "pinterest-dark": "0 0 18 18", "pinterest": "0 0 18 18", "reddit-dark": "0 0 18 18", "reddit": "0 0 18 18", "salesforce-cloud-dark": "0 0 20 18", "salesforce-cloud": "0 0 20 18", "salesforce-dark": "0 0 20 18", "salesforce": "0 0 20 18", "shopify-dark": "0 0 18 18", "shopify": "0 0 18 18", "slack-dark": "0 0 18 18", "slack": "0 0 18 18", "sproutsocial-dark": "0 0 18 18", "sproutsocial-lockup-dark": "0 0 291 58", "sproutsocial-lockup": "0 0 291 58", "sproutsocial-wordmark-dark": "0 0 320 52", "sproutsocial-wordmark": "0 0 320 52", "sproutsocial": "0 0 18 18", "tableau-dark": "0 0 18 18", "tableau-lockup-dark": "0 0 291 56", "tableau-lockup": "0 0 291 56", "tableau": "0 0 18 18", "threads-dark": "0 0 18 18", "threads": "0 0 18 18", "tiktok-dark": "0 0 18 18", "tiktok-lockup-dark": "0 0 276 68", "tiktok-lockup": "0 0 275 67", "tiktok": "0 0 18 18", "tripadvisor-dark": "0 0 18 18", "tripadvisor": "0 0 18 18", "trustpilot-dark": "0 0 18 18", "trustpilot": "0 0 18 18", "tumblr-dark": "0 0 18 18", "tumblr": "0 0 18 18", "twitter-audience-network-dark": "0 0 18 18", "twitter-audience-network": "0 0 18 18", "twitter-dark": "0 0 18 18", "twitter": "0 0 18 18", "whatsapp-dark": "0 0 18 18", "whatsapp": "0 0 18 18", "woocommerce-dark": "0 0 18 18", "woocommerce": "0 0 18 18", "x-twitter-dark": "0 0 18 18", "x-twitter": "0 0 18 18", "yelp-dark": "0 0 18 18", "yelp": "0 0 18 18", "youtube-dark": "0 0 18 18", "youtube-lockup-dark": "0 0 265 59", "youtube-lockup": "0 0 265 59", "youtube": "0 0 18 18", "zendesk-dark": "0 0 18 18", "zendesk-lockup-dark": "0 0 160 115", "zendesk-lockup": "0 0 160 115", "zendesk-wordmark-dark": "0 0 350 68", "zendesk-wordmark": "0 0 350 68", "zendesk": "0 0 18 18" };
+var LogoNamesWithoutVariants = ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bluesky", "bynder", "canva", "dropbox", "facebook-audience-network", "facebook", "facebook-groups", "facebook-shops", "feedly", "github", "glassdoor", "google-analytics", "google-business-messages", "google-drive", "google-my-business", "google-play-store", "hubspot", "instagram", "linkedin-audience-network", "linkedin", "marketo", "messenger", "meta", "microsoft-dynamics", "paypal", "pinterest", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "threads", "tiktok", "tripadvisor", "trustpilot", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "x-twitter", "yelp", "youtube", "zendesk"];
+
+// ../seeds-react-partner-logo/dist/esm/index.js
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PartnerLogoSizes = {
+  mini: "12px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var stylesForSize = (height2, logoSize) => import_styled_components9.css`
+  height: ${logoSize ? logoSize : height2};
+  line-height: ${logoSize ? logoSize : height2};
+
+  .logo-svg {
+    height: ${logoSize ? logoSize : height2};
+    width: ${logoSize ? logoSize : ""};
+  }
+`;
+var Container3 = (0, import_styled_components9.default)("span")`
+  display: inline-block;
+  color: inherit;
+  vertical-align: middle;
+  ${ke}
+  ${Ee}
+  ${verticalAlign}
+  ${(props) => stylesForSize(props.height, PartnerLogoSizes[props.logoSize])}
+`;
+var styles_default3 = Container3;
+var whichLogo = ({
+  backgroundType,
+  logoType,
+  partnerName
+}, mode) => {
+  const logo = logoType && logoType !== "symbol" ? partnerName + "-" + logoType : partnerName;
+  if (backgroundType && backgroundType === "dark") {
+    return `${logo}-dark`;
+  } else if (backgroundType && backgroundType === "light") {
+    return logo;
+  } else if (mode === "dark") {
+    return `${logo}-dark`;
+  } else {
+    return logo;
+  }
+};
+var PartnerLogo = ({
+  partnerName,
+  backgroundType,
+  logoType = "symbol",
+  height: height2,
+  width: width2,
+  size: size2,
+  "aria-label": ariaLabel,
+  svgProps,
+  ...rest
+}) => {
+  const { mode } = (0, import_styled_components8.useTheme)();
+  const logo = whichLogo({ backgroundType, logoType, partnerName }, mode);
+  const logoViewBox = ViewBoxes[logo];
+  const viewBoxCoordinates = logoViewBox?.split(" ") || [];
+  const defaultWidth = viewBoxCoordinates[2];
+  const defaultHeight = viewBoxCoordinates[3];
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    styles_default3,
+    {
+      height: height2 ? height2 : defaultHeight + "px",
+      width: width2 ? width2 : defaultWidth + "px",
+      logoSize: size2,
+      className: "logo",
+      role: "img",
+      "aria-label": ariaLabel,
+      "data-qa-logo": partnerName,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "svg",
+        {
+          className: "logo-svg",
+          viewBox: logoViewBox,
+          focusable: false,
+          "data-qa-logo-svg": `${partnerName}-svg`,
+          ...svgProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "use",
+            {
+              xmlnsXlink: "http://www.w3.org/1999/xlink",
+              xlinkHref: `#seeds-svgs_${logo}`
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var PartnerLogo_default = PartnerLogo;
+var src_default2 = PartnerLogo_default;
+
+// ../seeds-react-utilities/dist/index.mjs
+function includes(coll, el) {
+  return coll.includes(el);
+}
+
+// ../seeds-react-icon/dist/esm/index.js
+var import_styled_components11 = __toESM(require("styled-components"));
+
+// ../../seeds-assets/seeds-icons/dist/index.mjs
+var GeneralViewBoxes = { "alarm-clock-outline": "0 0 18 18", "alarm-clock-solid": "0 0 18 18", "all-caps-outline": "0 0 18 18", "all-caps-solid": "0 0 18 18", "alt-text-outline": "0 0 18 18", "alt-text-solid": "0 0 18 18", "arrow-down-outline": "0 0 18 18", "arrow-down-solid": "0 0 18 18", "arrow-down-to-bracket-outline": "0 0 18 18", "arrow-down-to-bracket-solid": "0 0 18 18", "arrow-down-to-line-outline": "0 0 18 18", "arrow-down-to-line-solid": "0 0 18 18", "arrow-left-outline": "0 0 18 18", "arrow-left-solid": "0 0 18 18", "arrow-left-to-line-outline": "0 0 18 18", "arrow-left-to-line-solid": "0 0 18 18", "arrow-right-down-outline": "0 0 18 18", "arrow-right-down-solid": "0 0 18 18", "arrow-right-from-bracket-outline": "0 0 18 18", "arrow-right-from-bracket-solid": "0 0 18 18", "arrow-right-outline": "0 0 18 18", "arrow-right-solid": "0 0 18 18", "arrow-right-to-line-outline": "0 0 18 18", "arrow-right-to-line-solid": "0 0 18 18", "arrow-right-up-outline": "0 0 18 18", "arrow-right-up-solid": "0 0 18 18", "arrow-turn-left-outline": "0 0 18 18", "arrow-turn-left-solid": "0 0 18 18", "arrow-turn-right-outline": "0 0 18 18", "arrow-turn-right-solid": "0 0 18 18", "arrow-up-from-bracket-outline": "0 0 18 18", "arrow-up-from-bracket-solid": "0 0 18 18", "arrow-up-outline": "0 0 18 18", "arrow-up-solid": "0 0 18 18", "arrow-up-to-line-outline": "0 0 18 18", "arrow-up-to-line-solid": "0 0 18 18", "arrows-left-right-outline": "0 0 18 18", "arrows-left-right-solid": "0 0 18 18", "arrows-pointing-in-outline": "0 0 18 18", "arrows-pointing-in-solid": "0 0 18 18", "arrows-pointing-out-outline": "0 0 18 18", "arrows-pointing-out-solid": "0 0 18 18", "arrows-rotate-outline": "0 0 18 18", "arrows-rotate-solid": "0 0 18 18", "arrows-up-down-left-right-outline": "0 0 18 18", "arrows-up-down-left-right-solid": "0 0 18 18", "art-palette-outline": "0 0 18 18", "art-palette-solid": "0 0 18 18", "atom-outline": "0 0 18 18", "atom-solid": "0 0 18 18", "audio-outline": "0 0 18 18", "audio-solid": "0 0 18 18", "ban-outline": "0 0 18 18", "ban-solid": "0 0 18 18", "barcode-outline": "0 0 18 18", "barcode-solid": "0 0 18 18", "bars-density-large-outline": "0 0 18 18", "bars-density-large-solid": "0 0 18 18", "bars-density-medium-outline": "0 0 18 18", "bars-density-medium-solid": "0 0 18 18", "bars-density-small-outline": "0 0 18 18", "bars-density-small-solid": "0 0 18 18", "bars-density-two-panel-outline": "0 0 18 18", "bars-density-two-panel-solid": "0 0 18 18", "basketball-outline": "0 0 18 18", "basketball-solid": "0 0 18 18", "beaker-outline": "0 0 18 18", "beaker-solid": "0 0 18 18", "bell-outline": "0 0 18 18", "bell-slash-outline": "0 0 18 18", "bell-slash-solid": "0 0 18 18", "bell-solid": "0 0 18 18", "bold-outline": "0 0 18 18", "bold-solid": "0 0 18 18", "book-open-outline": "0 0 18 18", "book-open-solid": "0 0 18 18", "book-outline": "0 0 18 18", "book-solid": "0 0 18 18", "bookmark-filter-outline": "0 0 18 18", "bookmark-filter-solid": "0 0 18 18", "bookmark-outline": "0 0 18 18", "bookmark-reply-outline": "0 0 18 18", "bookmark-reply-solid": "0 0 18 18", "bookmark-solid": "0 0 18 18", "briefcase-outline": "0 0 18 18", "briefcase-solid": "0 0 18 18", "browser-nav-bar-outline": "0 0 18 18", "browser-nav-bar-solid": "0 0 18 18", "browser-outline": "0 0 18 18", "browser-restore-outline": "0 0 18 18", "browser-restore-solid": "0 0 18 18", "browser-solid": "0 0 18 18", "bullseye-arrow-outline": "0 0 18 18", "bullseye-arrow-solid": "0 0 18 18", "calculator-outline": "0 0 18 18", "calculator-solid": "0 0 18 18", "calendar-clock-outline": "0 0 18 18", "calendar-clock-solid": "0 0 18 18", "calendar-day-outline": "0 0 18 18", "calendar-day-solid": "0 0 18 18", "calendar-outline": "0 0 18 18", "calendar-range-outline": "0 0 18 18", "calendar-range-solid": "0 0 18 18", "calendar-solid": "0 0 18 18", "camera-outline": "0 0 18 18", "camera-solid": "0 0 18 18", "camera-story-outline": "0 0 18 18", "camera-story-solid": "0 0 18 18", "camera-x-outline": "0 0 18 18", "camera-x-solid": "0 0 18 18", "caret-down-outline": "0 0 18 18", "caret-down-solid": "0 0 18 18", "caret-up-down-outline": "0 0 18 18", "caret-up-down-solid": "0 0 18 18", "caret-up-down-sort-down-outline": "0 0 18 18", "caret-up-down-sort-down-solid": "0 0 18 18", "caret-up-down-sort-up-outline": "0 0 18 18", "caret-up-down-sort-up-solid": "0 0 18 18", "caret-up-outline": "0 0 18 18", "caret-up-solid": "0 0 18 18", "carousel-outline": "0 0 18 18", "carousel-solid": "0 0 18 18", "cart-outline": "0 0 18 18", "cart-plus-outline": "0 0 18 18", "cart-plus-solid": "0 0 18 18", "cart-solid": "0 0 18 18", "chart-area-outline": "0 0 18 18", "chart-area-solid": "0 0 18 18", "chart-arrow-down-outline": "0 0 18 18", "chart-arrow-down-solid": "0 0 18 18", "chart-arrow-neutral-outline": "0 0 18 18", "chart-arrow-neutral-solid": "0 0 18 18", "chart-arrow-up-outline": "0 0 18 18", "chart-arrow-up-solid": "0 0 18 18", "chart-bar-outline": "0 0 18 18", "chart-bar-simple-outline": "0 0 18 18", "chart-bar-simple-solid": "0 0 18 18", "chart-bar-solid": "0 0 18 18", "chart-bar-sparkle-outline": "0 0 18 18", "chart-bar-sparkle-solid": "0 0 18 18", "chart-donut-outline": "0 0 18 18", "chart-donut-solid": "0 0 18 18", "chart-line-average-outline": "0 0 18 18", "chart-line-average-solid": "0 0 18 18", "chart-line-outline": "0 0 18 18", "chart-line-solid": "0 0 18 18", "chart-pie-outline": "0 0 18 18", "chart-pie-solid": "0 0 18 18", "check-outline": "0 0 18 18", "check-solid": "0 0 18 18", "chevron-down-outline": "0 0 18 18", "chevron-down-solid": "0 0 18 18", "chevron-left-outline": "0 0 18 18", "chevron-left-solid": "0 0 18 18", "chevron-right-outline": "0 0 18 18", "chevron-right-solid": "0 0 18 18", "chevron-up-outline": "0 0 18 18", "chevron-up-solid": "0 0 18 18", "circle-check-double-outline": "0 0 21 18", "circle-check-double-solid": "0 0 21 18", "circle-check-outline": "0 0 18 18", "circle-check-solid": "0 0 18 18", "circle-dollar-arrow-up-outline": "0 0 22 18", "circle-dollar-arrow-up-solid": "0 0 22 18", "circle-dollar-outline": "0 0 18 18", "circle-dollar-solid": "0 0 18 18", "circle-exclamation-outline": "0 0 18 18", "circle-exclamation-solid": "0 0 18 18", "circle-fill-outline": "0 0 18 18", "circle-fill-solid": "0 0 18 18", "circle-half-outline": "0 0 18 18", "circle-half-solid": "0 0 18 18", "circle-i-outline": "0 0 18 18", "circle-i-solid": "0 0 18 18", "circle-minus-outline": "0 0 18 18", "circle-minus-solid": "0 0 18 18", "circle-no-fill-outline": "0 0 18 18", "circle-no-fill-solid": "0 0 18 18", "circle-overlap-outline": "0 0 18 18", "circle-overlap-solid": "0 0 18 18", "circle-person-outline": "0 0 18 18", "circle-person-solid": "0 0 18 18", "circle-question-outline": "0 0 18 18", "circle-question-solid": "0 0 18 18", "circle-user-outline": "0 0 18 18", "circle-user-solid": "0 0 18 18", "circle-vertical-lines-outline": "0 0 18 18", "circle-vertical-lines-solid": "0 0 18 18", "circle-x-outline": "0 0 18 18", "circle-x-solid": "0 0 18 18", "clipboard-outline": "0 0 18 18", "clipboard-solid": "0 0 18 18", "clock-outline": "0 0 18 18", "clock-rotate-left-outline": "0 0 18 18", "clock-rotate-left-solid": "0 0 18 18", "clock-solid": "0 0 18 18", "closed-caption-outline": "0 0 18 18", "closed-caption-solid": "0 0 18 18", "cloud-outline": "0 0 18 18", "cloud-solid": "0 0 18 18", "code-outline": "0 0 18 18", "code-solid": "0 0 18 18", "columns-outline": "0 0 18 18", "columns-solid": "0 0 18 18", "comment-plus-outline": "0 0 18 18", "comment-plus-solid": "0 0 18 18", "comment-slash-outline": "0 0 18 18", "comment-slash-solid": "0 0 18 18", "comment-star-outline": "0 0 18 18", "comment-star-slash-outline": "0 0 18 18", "comment-star-slash-solid": "0 0 18 18", "comment-star-solid": "0 0 18 18", "compass-outline": "0 0 18 18", "compass-solid": "0 0 18 18", "credit-card-outline": "0 0 18 18", "credit-card-solid": "0 0 18 18", "crop-outline": "0 0 18 18", "crop-solid": "0 0 18 18", "crown-outline": "0 0 18 18", "crown-solid": "0 0 18 18", "curly-brackets-plus-outline": "0 0 18 18", "curly-brackets-plus-solid": "0 0 18 18", "delete-left-outline": "0 0 18 18", "delete-left-solid": "0 0 18 18", "diamond-line-outline": "0 0 18 18", "diamond-line-solid": "0 0 18 18", "diamond-outline": "0 0 18 18", "diamond-solid": "0 0 18 18", "diamond-vs-outline": "0 0 18 18", "diamond-vs-solid": "0 0 18 18", "dollar-outline": "0 0 18 18", "dollar-solid": "0 0 18 18", "ellipsis-horizontal-outline": "0 0 18 18", "ellipsis-horizontal-solid": "0 0 18 18", "ellipsis-vertical-outline": "0 0 18 18", "ellipsis-vertical-solid": "0 0 18 18", "envelope-outline": "0 0 18 18", "envelope-solid": "0 0 18 18", "expression-frown-outline": "0 0 18 18", "expression-frown-solid": "0 0 18 18", "expression-neutral-outline": "0 0 18 18", "expression-neutral-solid": "0 0 18 18", "expression-smile-open-outline": "0 0 18 18", "expression-smile-open-solid": "0 0 18 18", "eye-dropper-outline": "0 0 18 18", "eye-dropper-solid": "0 0 18 18", "eye-outline": "0 0 18 18", "eye-slash-outline": "0 0 18 18", "eye-slash-solid": "0 0 18 18", "eye-solid": "0 0 18 18", "face-frown-open-outline": "0 0 18 18", "face-frown-open-solid": "0 0 18 18", "face-frown-outline": "0 0 18 18", "face-frown-solid": "0 0 18 18", "face-neutral-outline": "0 0 18 18", "face-neutral-solid": "0 0 18 18", "face-smile-open-outline": "0 0 18 18", "face-smile-open-solid": "0 0 18 18", "face-smile-outline": "0 0 18 18", "face-smile-solid": "0 0 18 18", "file-box-arrow-up-outline": "0 0 18 18", "file-box-arrow-up-solid": "0 0 18 18", "file-box-outline": "0 0 18 18", "file-box-solid": "0 0 18 18", "filter-outline": "0 0 18 18", "filter-solid": "0 0 18 18", "fire-outline": "0 0 18 18", "fire-solid": "0 0 18 18", "flag-outline": "0 0 18 18", "flag-solid": "0 0 18 18", "folder-open-outline": "0 0 18 18", "folder-open-solid": "0 0 18 18", "folder-outline": "0 0 18 18", "folder-solid": "0 0 18 18", "font-case-outline": "0 0 18 18", "font-case-solid": "0 0 18 18", "four-squares-outline": "0 0 18 18", "four-squares-solid": "0 0 18 18", "gauge-outline": "0 0 18 18", "gauge-solid": "0 0 18 18", "gear-outline": "0 0 18 18", "gear-solid": "0 0 18 18", "gem-outline": "0 0 18 18", "gem-solid": "0 0 18 18", "gif-outline": "0 0 18 18", "gif-solid": "0 0 18 18", "glasses-outline": "0 0 18 18", "glasses-solid": "0 0 18 18", "globe-outline": "0 0 18 18", "globe-solid": "0 0 18 18", "grip-lines-vertical-outline": "0 0 18 18", "grip-lines-vertical-solid": "0 0 18 18", "h1-outline": "0 0 18 18", "h1-solid": "0 0 18 18", "h2-outline": "0 0 18 18", "h2-solid": "0 0 18 18", "h3-outline": "0 0 18 18", "h3-solid": "0 0 18 18", "h4-outline": "0 0 18 18", "h4-solid": "0 0 18 18", "hand-pointer-clicking-outline": "0 0 18 18", "hand-pointer-clicking-solid": "0 0 18 18", "handshake-outline": "0 0 18 18", "handshake-solid": "0 0 18 18", "hashtag-outline": "0 0 18 18", "hashtag-solid": "0 0 18 18", "headset-outline": "0 0 18 18", "headset-solid": "0 0 18 18", "heart-outline": "0 0 18 18", "heart-pulse-outline": "0 0 18 18", "heart-pulse-solid": "0 0 18 18", "heart-solid": "0 0 18 18", "horizontal-lines-outline": "0 0 18 18", "horizontal-lines-solid": "0 0 18 18", "hourglass-outline": "0 0 18 18", "hourglass-solid": "0 0 18 18", "house-outline": "0 0 18 18", "house-solid": "0 0 18 18", "image-outline": "0 0 18 18", "image-solid": "0 0 18 18", "images-outline": "0 0 18 18", "images-solid": "0 0 18 18", "inbox-arrow-up-outline": "0 0 18 18", "inbox-arrow-up-solid": "0 0 18 18", "inbox-check-outline": "0 0 18 18", "inbox-check-solid": "0 0 18 18", "inbox-lightning-bolt-outline": "0 0 18 18", "inbox-lightning-bolt-solid": "0 0 18 18", "inbox-outline": "0 0 18 18", "inbox-solid": "0 0 18 18", "inboxes-outline": "0 0 18 18", "inboxes-solid": "0 0 18 18", "infinity-outline": "0 0 18 18", "infinity-solid": "0 0 18 18", "insert-after-outline": "0 0 18 18", "insert-after-solid": "0 0 18 18", "italics-outline": "0 0 18 18", "italics-solid": "0 0 18 18", "justify-center-outline": "0 0 18 18", "justify-center-solid": "0 0 18 18", "justify-left-outline": "0 0 18 18", "justify-left-solid": "0 0 18 18", "justify-right-outline": "0 0 18 18", "justify-right-solid": "0 0 18 18", "key-outline": "0 0 18 18", "key-solid": "0 0 18 18", "keyboard-outline": "0 0 18 18", "keyboard-solid": "0 0 18 18", "language-outline": "0 0 18 18", "language-solid": "0 0 18 18", "laptop-mobile-outline": "0 0 18 18", "laptop-mobile-solid": "0 0 18 18", "large-circle-small-circle-outline": "0 0 18 18", "large-circle-small-circle-solid": "0 0 18 18", "larger-circle-small-circle-outline": "0 0 24 24", "larger-circle-small-circle-solid": "0 0 24 24", "lightbulb-outline": "0 0 18 18", "lightbulb-solid": "0 0 18 18", "lightning-bolt-outline": "0 0 18 18", "lightning-bolt-solid": "0 0 18 18", "link-broken-outline": "0 0 18 18", "link-broken-solid": "0 0 18 18", "link-outline": "0 0 18 18", "link-slash-outline": "0 0 18 18", "link-slash-solid": "0 0 18 18", "link-solid": "0 0 18 18", "locate-outline": "0 0 24 24", "locate-solid": "0 0 24 24", "location-pin-outline": "0 0 18 18", "location-pin-solid": "0 0 18 18", "lock-outline": "0 0 18 18", "lock-solid": "0 0 18 18", "magic-wand-outline": "0 0 18 18", "magic-wand-solid": "0 0 18 18", "magnifying-glass-chart-outline": "0 0 18 18", "magnifying-glass-chart-solid": "0 0 18 18", "magnifying-glass-outline": "0 0 18 18", "magnifying-glass-solid": "0 0 18 18", "magnifying-glass-twitter-outline": "0 0 18 18", "magnifying-glass-twitter-solid": "0 0 18 18", "make-longer-outline": "0 0 18 18", "make-longer-solid": "0 0 18 18", "make-shorter-outline": "0 0 18 18", "make-shorter-solid": "0 0 18 18", "masks-theater-outline": "0 0 22 18", "masks-theater-soild": "0 0 22 18", "masks-theater-solid": "0 0 22 18", "megaphone-dollar-outline": "0 0 18 18", "megaphone-dollar-solid": "0 0 18 18", "megaphone-outline": "0 0 18 18", "megaphone-solid": "0 0 18 18", "metric-table-outline": "0 0 18 18", "metric-table-solid": "0 0 18 18", "microphone-outline": "0 0 18 18", "microphone-solid": "0 0 18 18", "minus-outline": "0 0 18 18", "minus-solid": "0 0 18 18", "mobile-outline": "0 0 18 18", "mobile-solid": "0 0 18 18", "mood-boards-outline": "0 0 18 18", "mood-boards-solid": "0 0 18 18", "moon-crescent-outline": "0 0 18 18", "moon-crescent-solid": "0 0 18 18", "newspaper-outline": "0 0 18 18", "newspaper-solid": "0 0 18 18", "note-outline": "0 0 18 18", "note-solid": "0 0 18 18", "office-building-outline": "0 0 18 18", "office-building-solid": "0 0 18 18", "ordered-list-outline": "0 0 18 18", "ordered-list-solid": "0 0 18 18", "paint-can-outline": "0 0 18 18", "paint-can-solid": "0 0 18 18", "paper-bars-outline": "0 0 18 18", "paper-bars-solid": "0 0 18 18", "paper-outline": "0 0 18 18", "paper-pencil-outline": "0 0 18 18", "paper-pencil-solid": "0 0 18 18", "paper-plane-arrows-rotate-outline": "0 0 18 18", "paper-plane-arrows-rotate-solid": "0 0 18 18", "paper-plane-outline": "0 0 18 18", "paper-plane-solid": "0 0 18 18", "paper-solid": "0 0 18 18", "paper-x-outline": "0 0 18 18", "paper-x-solid": "0 0 18 18", "paperclip-outline": "0 0 18 18", "paperclip-solid": "0 0 18 18", "papers-outline": "0 0 18 18", "papers-solid": "0 0 18 18", "pattern-circle-triangle-square-outline": "0 0 18 18", "pattern-circle-triangle-square-solid": "0 0 18 18", "pause-outline": "0 0 18 18", "pause-solid": "0 0 18 18", "pencil-outline": "0 0 18 18", "pencil-solid": "0 0 18 18", "pencil-sparkle-outline": "0 0 18 18", "pencil-sparkle-solid": "0 0 18 18", "person-hiking-outline": "0 0 18 18", "person-hiking-solid": "0 0 18 18", "phone-outline": "0 0 18 18", "phone-solid": "0 0 18 18", "play-outline": "0 0 18 18", "play-solid": "0 0 18 18", "plug-outline": "0 0 18 18", "plug-solid": "0 0 18 18", "plus-outline": "0 0 18 18", "plus-solid": "0 0 18 18", "pointer-outline": "0 0 18 18", "pointer-solid": "0 0 18 18", "profile-card-outline": "0 0 18 18", "profile-card-solid": "0 0 18 18", "pulse-outline": "0 0 18 18", "pulse-solid": "0 0 18 18", "puzzle-piece-outline": "0 0 18 18", "puzzle-piece-solid": "0 0 18 18", "qr-code-outline": "0 0 18 18", "qr-code-solid": "0 0 18 18", "question-mark-outline": "0 0 18 18", "question-mark-solid": "0 0 18 18", "quotes-outline": "0 0 18 18", "quotes-solid": "0 0 18 18", "radar-outline": "0 0 18 18", "radar-solid": "0 0 18 18", "rectangle-caption-outline": "0 0 18 18", "rectangle-caption-solid": "0 0 18 18", "reply-outline": "0 0 18 18", "reply-solid": "0 0 18 18", "repost-outline": "0 0 18 18", "repost-solid": "0 0 18 18", "robot-outline": "0 0 19 18", "robot-solid": "0 0 19 18", "route-outline": "0 0 18 18", "route-solid": "0 0 18 18", "rss-outline": "0 0 18 18", "rss-solid": "0 0 18 18", "screwdriver-hammer-outline": "0 0 18 18", "screwdriver-hammer-solid": "0 0 18 18", "seeds-outline": "0 0 18 18", "seeds-solid": "0 0 18 18", "shopping-bag-outline": "0 0 18 18", "shopping-bag-solid": "0 0 18 18", "sitemap-outline": "0 0 18 18", "sitemap-solid": "0 0 18 18", "slider-outline": "0 0 18 18", "slider-solid": "0 0 18 18", "social-post-outline": "0 0 18 18", "social-post-solid": "0 0 18 18", "sort-ascending-outline": "0 0 18 18", "sort-ascending-solid": "0 0 18 18", "sort-descending-outline": "0 0 18 18", "sort-descending-solid": "0 0 18 18", "sparkle-outline": "0 0 18 18", "sparkle-solid": "0 0 18 18", "square-check-outline": "0 0 18 18", "square-check-solid": "0 0 18 18", "square-outline": "0 0 18 18", "square-slash-outline": "0 0 18 18", "square-slash-solid": "0 0 18 18", "square-solid": "0 0 18 18", "squares-arrow-up-right-outline": "0 0 18 18", "squares-arrow-up-right-solid": "0 0 18 18", "stamp-check-outline": "0 0 20 18", "stamp-check-solid": "0 0 20 18", "stamp-outline": "0 0 18 18", "stamp-solid": "0 0 18 18", "star-full-outline": "0 0 18 18", "star-full-solid": "0 0 18 18", "star-half-outline": "0 0 18 18", "star-half-solid": "0 0 18 18", "star-of-life-outline": "0 0 18 18", "star-of-life-solid": "0 0 18 18", "star-outline": "0 0 18 18", "star-solid": "0 0 18 18", "story-outline": "0 0 18 18", "story-solid": "0 0 18 18", "strikethrough-outline": "0 0 18 18", "strikethrough-solid": "0 0 18 18", "sun-outline": "0 0 18 18", "sun-solid": "0 0 18 18", "symbol-at-outline": "0 0 18 18", "symbol-at-solid": "0 0 18 18", "symbol-mars-outline": "0 0 18 18", "symbol-mars-solid": "0 0 18 18", "symbol-venus-outline": "0 0 18 18", "symbol-venus-solid": "0 0 18 18", "tag-outline": "0 0 18 18", "tag-solid": "0 0 18 18", "tag-x-outline": "0 0 18 18", "tag-x-solid": "0 0 18 18", "tags-outline": "0 0 18 18", "tags-solid": "0 0 18 18", "text-serif-outline": "0 0 18 18", "text-serif-solid": "0 0 18 18", "thread-outline": "0 0 18 18", "thread-solid": "0 0 18 18", "thumbs-down-outline": "0 0 18 18", "thumbs-down-solid": "0 0 18 18", "thumbs-up-outline": "0 0 18 18", "thumbs-up-solid": "0 0 18 18", "thumbtack-check-outline": "0 0 18 18", "thumbtack-check-solid": "0 0 18 18", "thumbtack-outline": "0 0 18 18", "thumbtack-solid": "0 0 18 18", "ticket-outline": "0 0 18 18", "ticket-solid": "0 0 18 18", "trash-outline": "0 0 18 18", "trash-solid": "0 0 18 18", "triangle-exclamation-outline": "0 0 18 18", "triangle-exclamation-solid": "0 0 18 18", "triangle-outline": "0 0 18 18", "triangle-solid": "0 0 18 18", "trophy-outline": "0 0 18 18", "trophy-solid": "0 0 18 18", "underline-outline": "0 0 18 18", "underline-solid": "0 0 18 18", "unlock-outline": "0 0 18 18", "unlock-solid": "0 0 18 18", "unordered-list-outline": "0 0 18 18", "unordered-list-solid": "0 0 18 18", "user-arrow-up-outline": "0 0 21 18", "user-arrow-up-solid": "0 0 21 18", "user-check-outline": "0 0 21 18", "user-check-solid": "0 0 21 18", "user-minus-outline": "0 0 20 18", "user-minus-solid": "0 0 20 18", "user-outline": "0 0 18 18", "user-plus-outline": "0 0 20 18", "user-plus-solid": "0 0 20 18", "user-solid": "0 0 18 18", "user-x-outline": "0 0 20 18", "user-x-solid": "0 0 20 18", "users-outline": "0 0 18 18", "users-solid": "0 0 18 18", "video-camera-outline": "0 0 18 18", "video-camera-solid": "0 0 18 18", "video-camera-story-outline": "0 0 18 18", "video-camera-story-solid": "0 0 18 18", "weight-outline": "0 0 18 18", "weight-solid": "0 0 18 18", "wifi-outline": "0 0 18 18", "wifi-slash-outline": "0 0 18 18", "wifi-slash-solid": "0 0 18 18", "wifi-solid": "0 0 18 18", "window-arrow-up-left-outline": "0 0 18 18", "window-arrow-up-left-solid": "0 0 18 18", "window-dock-left-outline": "0 0 24 24", "window-dock-left-solid": "0 0 24 24", "window-dock-right-outline": "0 0 24 24", "window-dock-right-solid": "0 0 24 24", "window-docked-left-outline": "0 0 18 18", "window-docked-left-solid": "0 0 18 18", "window-docked-right-outline": "0 0 18 18", "window-docked-right-solid": "0 0 18 18", "window-full-outline": "0 0 18 18", "window-full-solid": "0 0 18 18", "window-minimize-outline": "0 0 18 18", "window-minimize-solid": "0 0 18 18", "window-modal-outline": "0 0 18 18", "window-modal-solid": "0 0 18 18", "x-outline": "0 0 18 18", "x-solid": "0 0 18 18" };
+var ExternalViewBoxes = { "fb-reactions-angry": "0 0 18 18", "fb-reactions-care": "0 0 18 18", "fb-reactions-haha": "0 0 18 18", "fb-reactions-like": "0 0 18 18", "fb-reactions-love": "0 0 18 18", "fb-reactions-pride": "0 0 18 18", "fb-reactions-sad": "0 0 18 18", "fb-reactions-wow": "0 0 18 18", "recommendation": "0 0 18 18", "reels-outline": "0 0 18 18", "reels-solid": "0 0 18 18", "tripadvisor-circle-outline": "0 0 18 18", "tripadvisor-circle-solid": "0 0 18 18", "trustpilot-star": "0 0 18 18", "verified": "0 0 18 18", "yelp-full-star": "0 0 18 18", "yelp-half-star": "0 0 18 18" };
+var ExternalIconNames = ["fb-reactions-angry", "fb-reactions-care", "fb-reactions-haha", "fb-reactions-like", "fb-reactions-love", "fb-reactions-pride", "fb-reactions-sad", "fb-reactions-wow", "recommendation", "reels-outline", "reels-solid", "tripadvisor-circle-outline", "tripadvisor-circle-solid", "trustpilot-star", "verified", "yelp-full-star", "yelp-half-star"];
+var SproutViewBoxes = { "advocacy-outline": "0 0 18 18", "advocacy-solid": "0 0 18 18", "asset-library-outline": "0 0 18 18", "asset-library-plus-outline": "0 0 18 18", "asset-library-plus-solid": "0 0 18 18", "asset-library-solid": "0 0 18 18", "bambu-outline": "0 0 18 18", "bambu-solid": "0 0 18 18", "comment-arrow-up-outline": "0 0 18 18", "comment-arrow-up-solid": "0 0 18 18", "comment-bookmark-outline": "0 0 18 18", "comment-bookmark-solid": "0 0 18 18", "comment-dash-outline": "0 0 18 18", "comment-dash-solid": "0 0 18 18", "comment-exclamation-outline": "0 0 18 18", "comment-exclamation-solid": "0 0 18 18", "comment-eye-outline": "0 0 18 18", "comment-eye-solid": "0 0 18 18", "comment-heart-outline": "0 0 18 18", "comment-heart-solid": "0 0 18 18", "comment-light-bulb-outline": "0 0 18 18", "comment-light-bulb-solid": "0 0 18 18", "comment-outline": "0 0 18 18", "comment-solid": "0 0 18 18", "comment-sparkle-outline": "0 0 18 18", "comment-sparkle-solid": "0 0 18 18", "comments-outline": "0 0 18 18", "comments-solid": "0 0 18 18", "hand-sparkle-outline": "0 0 18 18", "hand-sparkle-solid": "0 0 18 18", "leaf-minus-outline": "0 0 18 18", "leaf-minus-solid": "0 0 18 18", "leaf-plus-outline": "0 0 18 18", "leaf-plus-solid": "0 0 18 18", "leaf-stacked-dotted-outline": "0 0 18 18", "leaf-stacked-dotted-solid": "0 0 18 18", "listening-outline": "0 0 18 18", "listening-solid": "0 0 18 18", "pencil-to-square-outline": "0 0 18 18", "pencil-to-square-solid": "0 0 18 18", "queue-outline": "0 0 18 18", "queue-solid": "0 0 18 18", "sprout-leaf-ellipsis-outline": "0 0 18 18", "sprout-leaf-ellipsis-solid": "0 0 18 18", "sprout-leaf-lightning-bolt-outline": "0 0 18 18", "sprout-leaf-lightning-bolt-solid": "0 0 18 18", "sprout-leaf-outline": "0 0 18 18", "sprout-leaf-solid": "0 0 18 18", "sprout-leaf-sync-outline": "0 0 18 18", "sprout-leaf-sync-solid": "0 0 18 18", "square-round-arrow-up-right-outline": "0 0 16 16", "square-round-arrow-up-right-solid": "0 0 16 16", "team-sprout-outline": "0 0 18 18", "team-sprout-solid": "0 0 18 18", "user-sprout-outline": "0 0 18 18", "user-sprout-solid": "0 0 18 18" };
+
+// ../seeds-react-icon/dist/esm/index.js
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var sizes = {
+  mini: "12px",
+  /** TODO: deprecate default  in favor of small in future release */
+  default: "16px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var stylesForSize2 = (iconActualSize, fixedWidth) => import_styled_components11.css`
+  line-height: ${iconActualSize};
+
+  &,
+  .Icon-svg {
+    height: ${iconActualSize};
+    fill: currentColor;
+  }
+
+  ${fixedWidth && `
+    &,
+    & .Icon-svg {
+      width: ${iconActualSize}
+    }
+  `}
+`;
+var Container4 = import_styled_components11.default.span.attrs({
+  className: "Icon"
+})`
+  display: inline-block;
+  color: inherit;
+  vertical-align: middle;
+
+  ${(props) => stylesForSize2(sizes[props.iconSize], props.fixedWidth)}
+
+  ${ke}
+  ${verticalAlign}
+`;
+var styles_default4 = Container4;
+var AllViewboxes = {
+  ...ExternalViewBoxes,
+  ...GeneralViewBoxes,
+  ...SproutViewBoxes
+};
+var Icon = ({
+  name,
+  size: size2 = "small",
+  fixedWidth = false,
+  ariaLabel,
+  color: color2,
+  svgProps,
+  ...rest
+}) => {
+  if (includes(LogoNamesWithoutVariants, name)) {
+    const logoSize = size2 === "default" ? "small" : size2;
+    const logoProps = {
+      partnerName: name,
+      size: logoSize,
+      logoType: "symbol",
+      svgProps
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      src_default2,
+      {
+        "aria-label": ariaLabel,
+        ...rest,
+        ...logoProps
+      }
+    );
+  }
+  const defaultVariant = size2 === "mini" ? "solid" : "outline";
+  const iconName = (
+    // if not external and has no variant
+    !name?.endsWith("-outline") && !name?.endsWith("-solid") && !includes(ExternalIconNames, name) ? (
+      // then add default variant
+      `${name}-${defaultVariant}`
+    ) : (
+      // else use name as is
+      name
+    )
+  );
+  const iconViewBox = AllViewboxes[iconName];
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    styles_default4,
+    {
+      iconSize: size2,
+      fixedWidth: !!fixedWidth,
+      role: "img",
+      "aria-label": ariaLabel,
+      "data-qa-icon": iconName,
+      color: color2,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "svg",
+        {
+          className: "Icon-svg",
+          viewBox: iconViewBox,
+          focusable: false,
+          "data-qa-icon-svg": `${iconName}-svg`,
+          ...svgProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "use",
+            {
+              xmlnsXlink: "http://www.w3.org/1999/xlink",
+              xlinkHref: `#seeds-svgs_${iconName}`
+            }
+          )
+        }
+      )
+    },
+    iconName
+  );
+};
+var ToggleableIcon = (0, import_styled_components10.default)(Icon)`
+  transition: all ${(p) => p.theme.duration.fast} linear;
+
+  ${(p) => p.active && import_styled_components10.css`
+      opacity: 1;
+      transform: scale(1);
+    `}
+
+  ${(p) => !p.active && import_styled_components10.css`
+      position: absolute;
+      opacity: 0;
+      transform: scale(0);
+    `}
+`;
+var IconToggle = ({
+  activeName,
+  inactiveName,
+  isActive,
+  size: size2 = "small",
+  fixedWidth = false,
+  ariaLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(src_default, { as: "span", position: "relative", display: "inline-flex", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ToggleableIcon,
+      {
+        active: isActive,
+        name: activeName,
+        size: size2,
+        fixedWidth,
+        "aria-label": ariaLabel,
+        "aria-hidden": !isActive
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ToggleableIcon,
+      {
+        active: !isActive,
+        name: inactiveName,
+        size: size2,
+        fixedWidth,
+        "aria-label": ariaLabel,
+        "aria-hidden": isActive
+      }
+    )
+  ] });
+};
+IconToggle.displayName = "Icon.Toggle";
+Icon.Toggle = IconToggle;
+var Icon_default = Icon;
+
+// src/components/AreaChart/components/AreaChartTooltip.tsx
+var import_racine2 = require("@sproutsocial/racine");
+
+// src/components/ChartTooltip/ChartTooltip.tsx
+var import_react13 = require("react");
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var StyledBox2 = (0, import_styled_components12.default)(Box_default)`
+  .Icon,
+  .logo {
+    stroke: none;
+  }
+`;
+var ChartTooltip = (0, import_react13.memo)(function ChartTooltip2({
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    StyledBox2,
+    {
+      bg: "container.background.base",
+      boxShadow: "medium",
+      border: 500,
+      borderColor: "container.border.base",
+      borderRadius: 500,
+      p: 400,
+      minWidth: 285,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: 350, children })
+    }
+  );
+});
+
+// src/components/ChartTooltip/components/ChartTooltipFooter.tsx
+var import_react14 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ChartTooltipFooter = (0, import_react14.memo)(
+  function ChartTooltipFooter2({ children }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Box_default,
+      {
+        borderTop: 500,
+        borderColor: "container.border.base",
+        mx: -400,
+        mb: -200,
+        px: 400,
+        pt: 350,
+        children
+      }
+    );
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipHeader.tsx
+var import_react15 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ChartTooltipHeader = (0, import_react15.memo)(
+  function ChartTooltipHeader2({ children }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Box_default,
+      {
+        borderBottom: 500,
+        borderColor: "container.border.base",
+        mx: -400,
+        mt: -200,
+        px: 400,
+        pb: 350,
+        children
+      }
+    );
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipTable.tsx
+var import_react17 = require("react");
+
+// src/components/ChartTable/ChartTable.tsx
+var import_react16 = require("react");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_racine = require("@sproutsocial/racine");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var StyledRacineTable = (0, import_styled_components13.default)(import_racine.Table)`
+  tbody tr:last-child {
+    border-bottom: none;
+  }
+  tr:last-child td,
+  tr:last-child th {
+    padding-bottom: 0;
+  }
+  tr:first-child td,
+  tr:first-child th {
+    padding-top: 0;
+  }
+  tr th {
+    padding-left: 0;
+  }
+  tr td:last-child {
+    padding-right: 0;
+  }
+`;
+var StyledRacineTableRow = (0, import_styled_components13.default)(import_racine.Table.TableRow)`
+  ${({ $isAppendedRow, theme: theme2 }) => $isAppendedRow ? `border-top: 2px solid ${theme2.colors.container.border.base}` : ""}
+`;
+var ChartTable = (0, import_react16.memo)(function ChartTable2({
+  rows
+}) {
+  if (!rows || rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledRacineTable, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_racine.Table.TableBody, { children: rows.map(({ cells, isAppendedRow }, rowIndex) => {
+    if (!cells || cells.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      StyledRacineTableRow,
+      {
+        $isAppendedRow: isAppendedRow,
+        children: cells.map(
+          ({ content, align = "left", colSpan = 1 }, cellIndex) => {
+            const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_racine.Table.Cell,
+              {
+                id: uniqueIdentifier,
+                scope: cellIndex === 0 ? "row" : void 0,
+                align,
+                colSpan,
+                py: 200,
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default.SmallBodyCopy, { as: "div", children: content })
+              },
+              uniqueIdentifier
+            );
+          }
+        )
+      },
+      `chart-tooltip-table-row-${rowIndex}`
+    );
+  }) }) });
+});
 
-// src/components/ColorBox/DatavizColorBox.tsx
-var import_styled_components7 = __toESM(require("styled-components"));
-var DatavizColorBox = (0, import_styled_components7.default)(ColorBox).attrs(
-  ({ colorIndex }) => ({
-    style: {
-      background: getDatavizColor(colorIndex),
-      opacity: getDatavizOpacity(colorIndex)
-    }
-  })
-)``;
-var getDatavizColor = (colorIndex) => theme_default.colors.DATAVIZ_COLORS_LIST[colorIndex % theme_default.colors.DATAVIZ_COLORS_LIST.length] || "";
-var getDatavizOpacity = (colorIndex) => {
-  const opacitySteps = [1, 0.6, 0.4, 0.2];
-  const opacityStep = Math.floor(colorIndex / theme_default.colors.DATAVIZ_COLORS_LIST.length) % opacitySteps.length;
-  return opacitySteps[opacityStep];
+// src/components/ChartTooltip/components/ChartTooltipTable.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ChartTooltipTable = (0, import_react17.memo)(
+  function ChartTooltipTable2({ rows }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartTable, { rows });
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipTitle.tsx
+var import_react18 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ChartTooltipTitle = (0, import_react18.memo)(
+  function ChartTooltipTitle2({ children }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default.SmallSubHeadline, { as: "p", children });
+  }
+);
+
+// src/components/AreaChart/components/AreaChartTooltip.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var AreaChartTooltip = (0, import_react19.memo)(
+  function AreaChartTooltip2({
+    data,
+    invalidNumberLabel,
+    numberLocale,
+    textLocale,
+    tooltipDateFormatter,
+    tooltipTotalLabel,
+    total,
+    x,
+    // optional
+    currency = "USD",
+    numberFormat = "decimal",
+    onClick,
+    tooltipClickLabel
+  }) {
+    const rows = data.map(({ color: color2, icon, name, value }) => {
+      return {
+        cells: [
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartLegendLabel, { color: color2, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { "aria-label": `${name}: `, children: name }) }) })
+          },
+          {
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_racine2.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              import_racine2.Numeral,
+              {
+                abbreviate: false,
+                currency,
+                format: numberFormat,
+                locale: numberLocale,
+                number: value
+              }
+            ),
+            align: "right"
+          }
+        ]
+      };
+    });
+    const appendedRows = data.length > 1 ? [
+      {
+        cells: [
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Text_default,
+              {
+                fontWeight: "semibold",
+                "aria-label": `${tooltipTotalLabel}: `,
+                children: tooltipTotalLabel
+              }
+            )
+          },
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontWeight: "bold", children: total === null && invalidNumberLabel ? invalidNumberLabel : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_racine2.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              import_racine2.Numeral,
+              {
+                abbreviate: false,
+                currency,
+                format: numberFormat,
+                locale: numberLocale,
+                number: total
+              }
+            ) }),
+            align: "right"
+          }
+        ],
+        isAppendedRow: true
+      }
+    ] : [];
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ChartTooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ChartTooltipTable,
+        {
+          rows: [...rows, ...appendedRows]
+        }
+      ),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      ] }) : tooltipClickLabel }) : null
+    ] });
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipPortal.tsx
+var import_react20 = require("react");
+var import_react_dom = require("react-dom");
+var generateChartTooltipPortalId = (chartId) => `highcharts-custom-tooltip-${chartId}`;
+var ChartTooltipPortal = (0, import_react20.memo)(
+  function ChartTooltipPortal2({
+    chart,
+    renderContent
+  }) {
+    const isInitialized = (0, import_react20.useRef)(false);
+    const [node, setNode] = (0, import_react20.useState)(null);
+    const [context, setContext] = (0, import_react20.useState)(null);
+    (0, import_react20.useEffect)(() => {
+      const formatter = function() {
+        if (!isInitialized.current) {
+          isInitialized.current = true;
+          chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
+          chart.tooltip.hide(0);
+        }
+        setContext(this);
+        return `<div id="${generateChartTooltipPortalId(
+          chart.index
+        )}" role='tooltip'></div>`;
+      };
+      chart.update({ tooltip: { formatter } });
+    }, [chart]);
+    (0, import_react20.useEffect)(() => {
+      if (context?.series?.chart?.tooltip) {
+        const tooltip = context.series.chart.tooltip;
+        const textElement = tooltip.label.text.element;
+        tooltip.label.box.attr({
+          height: textElement.offsetHeight,
+          width: textElement.offsetWidth
+        });
+        setNode(
+          document.getElementById(generateChartTooltipPortalId(chart.index))
+        );
+      }
+    }, [context, chart.index]);
+    return node && context ? (0, import_react_dom.createPortal)(renderContent(context), node) : null;
+  }
+);
+
+// src/helpers/transformDataToSeries.ts
+var transformDataToSeries = ({ data }, type) => {
+  return data.map((dataItem, dataIndex) => {
+    const points = dataItem.points || [];
+    const dataPoints = points.map((point, pointsIndex) => {
+      let enableMarker = false;
+      const isFirstPoint = pointsIndex === 0;
+      const isLastPoint = pointsIndex === points.length - 1;
+      const previousY = isFirstPoint ? null : points[pointsIndex - 1].y;
+      const nextY = isLastPoint ? null : points[pointsIndex + 1].y;
+      if (isFirstPoint && nextY === null) {
+        enableMarker = true;
+      } else if (isLastPoint && previousY === null) {
+        enableMarker = true;
+      } else if (previousY === null && nextY === null) {
+        enableMarker = true;
+      }
+      return {
+        x: point.x,
+        y: point.y,
+        marker: {
+          enabled: enableMarker ? enableMarker : void 0,
+          symbol: enableMarker ? "circle" : void 0
+        }
+      };
+    });
+    return {
+      colorIndex: dataIndex,
+      data: dataPoints,
+      name: dataItem.name,
+      type
+    };
+  });
 };
-var getDatavizColorWithAlpha = (colorIndex) => {
-  const color = getDatavizColor(colorIndex);
-  const opacity = getDatavizOpacity(colorIndex);
-  if (opacity < 0 || opacity > 1) {
-    return color;
+
+// src/helpers/transformTimeSeriesTooltipData.ts
+var transformTimeSeriesTooltipData = ({
+  context,
+  data
+}) => {
+  return (context.series.chart.series || []).map((series, index) => {
+    const pointIndex = context.point.index;
+    const { y: y2 } = series.points[pointIndex];
+    return {
+      color: data[index]?.styles?.color || theme_default.colors.DATAVIZ_COLORS_LIST[index],
+      ...data[index]?.icon ? { icon: data[index]?.icon } : {},
+      name: series.name,
+      value: typeof y2 === "number" ? y2 : null
+    };
+  });
+};
+
+// src/helpers/xAxisLabelFormatter.ts
+var xAxisLabelFormatter = ({
+  textLocale,
+  tickPositions = [],
+  unitName,
+  value
+}) => {
+  const tickIndex = tickPositions.indexOf(value);
+  const isFirst = tickIndex === 0;
+  const previousValue = tickPositions[tickIndex - 1];
+  const valueDate = new Date(value);
+  const previousValueDate = new Date(previousValue);
+  let firstPartOptions = {};
+  let secondPartOptions = {};
+  switch (unitName) {
+    case "hour":
+      firstPartOptions = { hour: "numeric" };
+      if (isFirst || valueDate.getUTCDate() !== previousValueDate.getUTCDate()) {
+        secondPartOptions = { day: "numeric", month: "short" };
+      }
+      break;
+    case "day":
+    case "week":
+      firstPartOptions = { day: "numeric" };
+      if (isFirst || valueDate.getUTCMonth() !== previousValueDate.getUTCMonth()) {
+        secondPartOptions = { month: "short" };
+      }
+      break;
+    case "month":
+      firstPartOptions = { month: "short" };
+      if (isFirst || valueDate.getUTCFullYear() !== previousValueDate.getUTCFullYear()) {
+        secondPartOptions = { year: "numeric" };
+      }
+      break;
+    case "year":
+      firstPartOptions = { year: "numeric" };
+      break;
+    default:
+      firstPartOptions = {};
+      break;
   }
-  return `${color}${Math.floor(opacity * 255).toString(16).padStart(2, "0")}`;
+  const firstPart = new Intl.DateTimeFormat(textLocale, {
+    ...firstPartOptions,
+    timeZone: "UTC"
+  }).format(valueDate);
+  const secondPart = Object.keys(secondPartOptions).length > 0 ? new Intl.DateTimeFormat(textLocale, {
+    ...secondPartOptions,
+    timeZone: "UTC"
+  }).format(valueDate) : void 0;
+  return `<span>${firstPart}</span>${secondPart ? `<span>${secondPart}</span>` : ""}`;
 };
 
-// src/components/ColorBox/NetworkColorBox.tsx
-var import_seeds_networkcolor2 = __toESM(require("@sproutsocial/seeds-networkcolor"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var NetworkColorBox = ({
-  networkColor,
-  ...props
+// src/helpers/yAxisLabelFormatter.ts
+var import_racine3 = require("@sproutsocial/racine");
+var yAxisLabelFormatter = ({
+  numberLocale,
+  textLocale,
+  tickPositions,
+  value,
+  currency = "USD",
+  numberFormat = "decimal"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ColorBox, { ...props, bg: import_seeds_networkcolor2.default[networkColor] });
+  const numberValue = Number(value);
+  if (numberValue === 0) {
+    return (0, import_racine3.formatNumeral)({
+      locale: numberLocale,
+      number: numberValue
+    });
+  }
+  if (numberFormat === "duration") {
+    return (0, import_racine3.formatDuration)({
+      display: "narrow",
+      locale: textLocale,
+      milliseconds: numberValue
+    });
+  }
+  const maxValue = tickPositions && tickPositions.length > 0 ? tickPositions[tickPositions.length - 1] : void 0;
+  const abbreviate = typeof maxValue === "number" && maxValue > 9999 ? 1e3 : true;
+  return (0, import_racine3.formatNumeral)({
+    abbreviate,
+    currency,
+    format: numberFormat,
+    locale: numberLocale,
+    number: numberValue
+  });
 };
 
+// src/hooks/useTimeSeriesChartOptions.ts
+var import_react21 = require("react");
+var import_highcharts = require("highcharts");
+
 // src/constants/chartOptions.ts
 var import_lodash = __toESM(require("lodash"));
 var baseChartOptions = {
@@ -3553,185 +5330,841 @@ var timeSeriesChartOptions = import_lodash.default.merge({}, baseChartOptions, {
       text: void 0
     }
   }
-});
-var lineChartOptions = import_lodash.default.merge({}, timeSeriesChartOptions, {
-  // plotOptions.spline.events.click is set at the component level because of the optional onClick prop
-});
-var areaChartOptions = import_lodash.default.merge({}, timeSeriesChartOptions, {
-  plotOptions: {
-    areaspline: {
-      // events.click is set at the component level because of the optional onClick prop
-      stacking: "normal"
+});
+var lineChartOptions = import_lodash.default.merge({}, timeSeriesChartOptions, {
+  // plotOptions.spline.events.click is set at the component level because of the optional onClick prop
+});
+var areaChartOptions = import_lodash.default.merge({}, timeSeriesChartOptions, {
+  plotOptions: {
+    areaspline: {
+      // events.click is set at the component level because of the optional onClick prop
+      stacking: "normal"
+    }
+  }
+});
+var DONUT_CHART_HALO_SIZE = 10;
+var DONUT_CHART_HEIGHT = 250 + DONUT_CHART_HALO_SIZE * 2;
+var DONUT_CHART_WIDTH = DONUT_CHART_HEIGHT;
+var donutChartOptions = import_lodash.default.merge({}, baseChartOptions, {
+  chart: {
+    height: DONUT_CHART_HEIGHT,
+    spacing: [0, 0, 0, 0]
+  },
+  plotOptions: {
+    pie: {
+      animation: false,
+      borderRadius: 0,
+      // must be handled here instead of css because of path rendering
+      dataLabels: {
+        enabled: false
+      },
+      innerSize: "50%"
+    }
+  }
+});
+
+// src/hooks/useTimeSeriesChartOptions.ts
+var useTimeSeriesChartOptions = ({
+  data,
+  numberLocale,
+  seriesType,
+  textLocale,
+  currency = "USD",
+  numberFormat = "decimal",
+  yAxisLabelFormatter: yAxisLabelFormatter2,
+  onClick
+}) => {
+  const [options, setOptions] = (0, import_react21.useState)(
+    seriesType === "areaspline" ? areaChartOptions : lineChartOptions
+  );
+  const [chart, setChart] = (0, import_react21.useState)(null);
+  const callback = (0, import_react21.useCallback)((chartInstance) => {
+    setChart(chartInstance);
+  }, []);
+  (0, import_react21.useEffect)(() => {
+    setOptions({
+      accessibility: {
+        point: {
+          descriptionFormatter: function() {
+            return " ";
+          }
+        }
+      },
+      chart: {
+        events: {
+          click: onClick ? function() {
+            return onClick({ x: this?.hoverPoint?.x });
+          } : void 0,
+          render: function() {
+            const allPoints = this.series.flatMap((series) => series.data);
+            const tooltipId = generateChartTooltipPortalId(this.index);
+            allPoints.forEach((point) => {
+              const pointElement = point?.graphic?.element;
+              pointElement?.setAttribute("aria-describedby", tooltipId);
+              pointElement?.addEventListener("focus", () => {
+                point.series.chart.tooltip.refresh(point);
+              });
+              pointElement?.addEventListener("blur", () => {
+                point.series.chart.tooltip.hide(0);
+              });
+            });
+          }
+        }
+      },
+      plotOptions: {
+        areaspline: {
+          events: {
+            click: onClick && seriesType === "areaspline" ? function(event) {
+              return onClick({ x: event.point.x });
+            } : void 0
+          }
+        },
+        spline: {
+          events: {
+            click: onClick && seriesType === "spline" ? function(event) {
+              return onClick({ x: event.point.x });
+            } : void 0
+          }
+        }
+      },
+      series: transformDataToSeries({ data }, seriesType),
+      xAxis: {
+        labels: {
+          formatter: function() {
+            return xAxisLabelFormatter({
+              textLocale,
+              tickPositions: this.axis.tickPositions || [],
+              unitName: this.tickPositionInfo.unitName,
+              value: this.value
+            });
+          }
+        }
+      },
+      yAxis: {
+        labels: {
+          formatter: function() {
+            return yAxisLabelFormatter2 ? yAxisLabelFormatter2({
+              y: this.value,
+              yValues: this.axis.tickPositions
+            }) : yAxisLabelFormatter({
+              currency,
+              numberFormat,
+              numberLocale,
+              textLocale,
+              tickPositions: this.axis.tickPositions || [],
+              value: this.value
+            });
+          }
+        }
+      }
+    });
+  }, [
+    currency,
+    data,
+    numberFormat,
+    numberLocale,
+    onClick,
+    seriesType,
+    textLocale,
+    yAxisLabelFormatter2
+  ]);
+  return { options, chart, callback };
+};
+
+// src/styles/chartStyles.ts
+var import_styled_components14 = require("styled-components");
+var baseChartStyles = import_styled_components14.css`
+  // set color variables and map to each series
+  ${({ $colors }) => $colors.map((color2, index) => {
+  const chartColor = color2 || theme_default.colors.DATAVIZ_COLORS_LIST[index];
+  return `
+				// map colors to custom assigned colors or fallback to default data viz color rotation
+				--highcharts-color-${index}: ${chartColor};
+
+				// highcharts already accounts for 10 series, but if we have more, we need to add them
+				.highcharts-color-${index} {
+					color: var(--highcharts-color-${index});
+					stroke: var(--highcharts-color-${index});
+					fill: var(--highcharts-color-${index});
+				}`;
+}).join("\n")}
+
+  // set overall chart background color
+	.highcharts-background {
+    fill: ${({ theme: theme2 }) => theme2.colors.container.background.base};
+  }
+`;
+var timeSeriesChartStyles = import_styled_components14.css`
+  ${baseChartStyles}
+
+  // vertical crosshair styles
+	.highcharts-crosshair {
+    stroke: ${({ theme: theme2 }) => theme2.colors.container.border.decorative.neutral};
+    stroke-width: 1;
+  }
+
+  // axis and gridline styles
+  .highcharts-grid-line {
+    stroke: ${({ theme: theme2 }) => theme2.colors.container.border.base};
+  }
+  .highcharts-axis-line {
+    stroke: ${({ theme: theme2 }) => theme2.colors.container.border.base};
+  }
+  .highcharts-tick {
+    stroke: none;
+  }
+  .highcharts-xaxis-labels,
+  .highcharts-yaxis-labels {
+    > span {
+      font-family: ${({ theme: theme2 }) => theme2.fontFamily};
+      ${({ theme: theme2 }) => theme2.typography[100]};
+      font-weight: ${({ theme: theme2 }) => theme2.fontWeights.normal};
+      color: ${({ theme: theme2 }) => theme2.colors.text.subtext};
+    }
+  }
+  .highcharts-xaxis-labels {
+    > span {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      > span:nth-of-type(2) {
+        font-weight: ${({ theme: theme2 }) => theme2.fontWeights.semibold};
+      }
     }
   }
+
+  // we don't want to drop the opacity when another item is hovered
+  .highcharts-series-inactive {
+    opacity: 1;
+  }
+
+  // apply cursor pointer when click functionality is turned on
+  ${({ $hasOnClick }) => $hasOnClick && `
+ 			.highcharts-series,
+ 			.highcharts-point {
+ 				cursor: pointer;
+ 			}
+ 			.highcharts-plot-background,
+ 			.highcharts-crosshair,
+ 			.highcharts-grid-line {
+ 				fill: transparent;
+ 				cursor: pointer;
+ 		}`}
+`;
+var lineChartStyles = import_styled_components14.css`
+  ${timeSeriesChartStyles}
+
+  // set the line stroke
+	.highcharts-graph {
+    stroke-width: 3;
+  }
+
+  // dashed line styles
+  ${({ $patterns }) => $patterns.map((pattern, index) => {
+  return pattern === "dashed" ? `
+ 					// highcharts already accounts for 10 series, but if we have more, we need to add them
+ 					.highcharts-series-${index} {
+ 						stroke-dasharray: 2, 8;
+ 					}` : "";
+})}
+`;
+var areaChartStyles = import_styled_components14.css`
+  ${timeSeriesChartStyles}
+
+  // don't need to show a stroke for the line part of each area
+	.highcharts-graph {
+    stroke-width: 0;
+  }
+
+  // fill areas to full opacity
+  .highcharts-area {
+    fill-opacity: 1;
+  }
+`;
+var donutChartStyles = import_styled_components14.css`
+  ${baseChartStyles}
+
+  // remove 250ms fade in/out when hovering over different donut chart slices
+	.highcharts-point {
+    transition: opacity 0s;
+  }
+
+  // remove stroke on donut slices
+  .highcharts-point,
+  .highcharts-pie-series {
+    stroke: none;
+  }
+
+  // don't reduce opacity when hovering
+  .highcharts-point-hover {
+    fill-opacity: none;
+  }
+`;
+
+// src/components/AreaChart/AreaChart.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+(0, import_accessibility.default)(import_highcharts2.default);
+var StyledBox3 = (0, import_styled_components15.default)(Box_default)`
+  ${areaChartStyles}
+`;
+var AreaChart = (0, import_react22.memo)(function AreaChart2(props) {
+  const { data } = props;
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AreaChartWithData, { ...props });
 });
-var DONUT_CHART_HALO_SIZE = 10;
-var DONUT_CHART_HEIGHT = 250 + DONUT_CHART_HALO_SIZE * 2;
-var DONUT_CHART_WIDTH = DONUT_CHART_HEIGHT;
-var donutChartOptions = import_lodash.default.merge({}, baseChartOptions, {
-  chart: {
-    height: DONUT_CHART_HEIGHT,
-    spacing: [0, 0, 0, 0]
-  },
-  plotOptions: {
-    pie: {
-      animation: false,
-      borderRadius: 0,
-      // must be handled here instead of css because of path rendering
-      dataLabels: {
-        enabled: false
-      },
-      innerSize: "50%"
+var AreaChartWithData = (0, import_react22.memo)(function AreaChartWithData2({
+  data,
+  invalidNumberLabel,
+  numberLocale = "en-us",
+  textLocale = "en-us",
+  tooltipDateFormatter,
+  tooltipTotalLabel,
+  // optional
+  currency = "USD",
+  numberFormat = "decimal",
+  tooltip,
+  yAxisLabelFormatter: yAxisLabelFormatter2,
+  onClick,
+  tooltipClickLabel
+}) {
+  const { options, chart, callback } = useTimeSeriesChartOptions({
+    currency,
+    data,
+    numberFormat,
+    numberLocale,
+    seriesType: "areaspline",
+    textLocale,
+    yAxisLabelFormatter: yAxisLabelFormatter2,
+    onClick
+  });
+  const colors3 = data.map(
+    (series, index) => series.styles?.color ?? theme_default.colors.DATAVIZ_COLORS_LIST[index]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    StyledBox3,
+    {
+      $colors: colors3,
+      $hasOnClick: Boolean(onClick),
+      bg: "container.background.base",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_highcharts_react_official.HighchartsReact,
+          {
+            highcharts: import_highcharts2.default,
+            options,
+            callback
+          }
+        ),
+        chart ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          ChartTooltipPortal,
+          {
+            chart,
+            renderContent: (context) => {
+              const tooltipData = transformTimeSeriesTooltipData({
+                context,
+                data
+              });
+              const x = context.x;
+              const total = context.total;
+              return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                AreaChartTooltip,
+                {
+                  currency,
+                  data: tooltipData,
+                  invalidNumberLabel,
+                  numberFormat,
+                  numberLocale,
+                  textLocale,
+                  tooltipDateFormatter,
+                  tooltipTotalLabel,
+                  total,
+                  x,
+                  onClick,
+                  tooltipClickLabel
+                }
+              );
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box_default, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AreaChartLegend, { data }) })
+      ]
     }
-  }
+  );
 });
 
-// src/helpers/transformDataToSeries.ts
-var transformDataToSeries = ({ data }, type) => {
-  return data.map((dataItem, dataIndex) => {
-    const points = dataItem.points || [];
-    const dataPoints = points.map((point, pointsIndex) => {
-      let enableMarker = false;
-      const isFirstPoint = pointsIndex === 0;
-      const isLastPoint = pointsIndex === points.length - 1;
-      const previousY = isFirstPoint ? null : points[pointsIndex - 1].y;
-      const nextY = isLastPoint ? null : points[pointsIndex + 1].y;
-      if (isFirstPoint && nextY === null) {
-        enableMarker = true;
-      } else if (isLastPoint && previousY === null) {
-        enableMarker = true;
-      } else if (previousY === null && nextY === null) {
-        enableMarker = true;
-      }
-      return {
-        x: point.x,
-        y: point.y,
-        marker: {
-          enabled: enableMarker ? enableMarker : void 0,
-          symbol: enableMarker ? "circle" : void 0
-        }
-      };
-    });
-    return {
-      colorIndex: dataIndex,
-      data: dataPoints,
-      name: dataItem.name,
-      type
-    };
-  });
+// src/components/DonutChart/DonutChart.tsx
+var import_react25 = require("react");
+var import_highcharts3 = __toESM(require("highcharts"));
+var import_highcharts_react_official2 = require("highcharts-react-official");
+var import_accessibility2 = __toESM(require("highcharts/modules/accessibility"));
+var import_styled_components16 = __toESM(require("styled-components"));
+
+// src/components/DonutChart/components/DonutChartLegend.tsx
+var import_react23 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var getDonutChartLegendLabels = ({
+  data
+}) => {
+  return data.map((slice, index) => ({
+    content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    color: slice.styles?.color || theme_default.colors.DATAVIZ_COLORS_LIST[index]
+  }));
 };
+var DonutChartLegend = (0, import_react23.memo)(
+  function DonutChartLegend2({ data }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+  }
+);
 
-// src/helpers/transformTimeSeriesTooltipData.ts
-var transformTimeSeriesTooltipData = ({
+// src/components/DonutChart/components/DonutChartTooltip.tsx
+var import_react24 = require("react");
+var import_racine4 = require("@sproutsocial/racine");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var DonutChartTooltip = (0, import_react24.memo)(
+  function DonutChartTooltip2({
+    color: color2,
+    name,
+    numberLocale,
+    percent,
+    textLocale,
+    value,
+    currency,
+    icon,
+    numberFormat
+  }) {
+    const rows = [
+      {
+        cells: [
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegendLabel, { color: color2, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { "aria-label": `${name}: `, children: name }) }) })
+          },
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Box_default, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_racine4.Numeral,
+                {
+                  number: percent,
+                  format: "percent",
+                  abbreviate: false,
+                  locale: numberLocale
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_racine4.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_racine4.Numeral,
+                {
+                  abbreviate: false,
+                  currency,
+                  format: numberFormat,
+                  locale: numberLocale,
+                  number: value
+                }
+              ) })
+            ] }),
+            align: "right"
+          }
+        ]
+      }
+    ];
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltip, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltipTable, { rows }) });
+  }
+);
+
+// src/components/DonutChart/helpers/transformDonutChartTooltipData.ts
+var transformDonutChartTooltipData = ({
   context,
   data
 }) => {
-  return (context.series.chart.series || []).map((series, index) => {
-    const pointIndex = context.point.index;
-    const { y: y2 } = series.points[pointIndex];
-    return {
-      color: data[index]?.styles?.color || theme_default.colors.DATAVIZ_COLORS_LIST[index],
-      ...data[index]?.icon ? { icon: data[index]?.icon } : {},
-      name: series.name,
-      value: typeof y2 === "number" ? y2 : null
-    };
-  });
+  const colorIndex = context.colorIndex;
+  return {
+    color: data[colorIndex]?.styles?.color ?? theme_default.colors.DATAVIZ_COLORS_LIST[colorIndex] ?? "",
+    ...data[colorIndex]?.icon ? { icon: data[colorIndex]?.icon } : {},
+    name: context.key,
+    percent: context.percentage,
+    value: context.y
+  };
 };
 
-// src/helpers/xAxisLabelFormatter.ts
-var xAxisLabelFormatter = ({
-  textLocale,
-  tickPositions = [],
-  unitName,
-  value
-}) => {
-  const tickIndex = tickPositions.indexOf(value);
-  const isFirst = tickIndex === 0;
-  const previousValue = tickPositions[tickIndex - 1];
-  const valueDate = new Date(value);
-  const previousValueDate = new Date(previousValue);
-  let firstPartOptions = {};
-  let secondPartOptions = {};
-  switch (unitName) {
-    case "hour":
-      firstPartOptions = { hour: "numeric" };
-      if (isFirst || valueDate.getUTCDate() !== previousValueDate.getUTCDate()) {
-        secondPartOptions = { day: "numeric", month: "short" };
-      }
-      break;
-    case "day":
-    case "week":
-      firstPartOptions = { day: "numeric" };
-      if (isFirst || valueDate.getUTCMonth() !== previousValueDate.getUTCMonth()) {
-        secondPartOptions = { month: "short" };
+// src/components/DonutChart/DonutChart.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+(0, import_accessibility2.default)(import_highcharts3.default);
+var StyledBox4 = (0, import_styled_components16.default)(Box_default)`
+  ${donutChartStyles}
+`;
+var DonutChart = (0, import_react25.memo)(function DonutChart2(props) {
+  const { data } = props;
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DonutChartWithData, { ...props });
+});
+var DonutChartWithData = (0, import_react25.memo)(
+  function DonutChartWithData2({
+    data,
+    numberLocale = "en-us",
+    textLocale = "en-us",
+    // optional
+    currency = "USD",
+    hideLegend = false,
+    numberFormat = "decimal",
+    tooltip
+  }) {
+    const [options, setOptions] = (0, import_react25.useState)(donutChartOptions);
+    const [chart, setChart] = (0, import_react25.useState)(null);
+    const callback = (0, import_react25.useCallback)((chartInstance) => {
+      setChart(chartInstance);
+    }, []);
+    (0, import_react25.useEffect)(() => {
+      setOptions({
+        accessibility: {
+          point: {
+            descriptionFormatter: function() {
+              return " ";
+            }
+          }
+        },
+        chart: {
+          events: {
+            render: function() {
+              const allSlices = this.series[0]?.data ?? [];
+              const tooltipId = generateChartTooltipPortalId(this.index);
+              allSlices.forEach((slice) => {
+                const sliceElement = slice?.graphic?.element;
+                sliceElement?.setAttribute("aria-describedby", tooltipId);
+                sliceElement?.addEventListener("focus", () => {
+                  slice.series.chart.tooltip.refresh(slice);
+                });
+                sliceElement?.addEventListener("blur", () => {
+                  slice.series.chart.tooltip.hide(0);
+                });
+              });
+            }
+          }
+        },
+        series: [
+          {
+            type: "pie",
+            data: data.map((item, index) => {
+              return {
+                name: item.name,
+                y: item.value,
+                colorIndex: index
+              };
+            })
+          }
+        ]
+      });
+    }, [data]);
+    const colors3 = data.map(
+      (series, index) => series.styles?.color ?? theme_default.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledBox4, { $colors: colors3, bg: "container.background.base", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_highcharts_react_official2.HighchartsReact,
+        {
+          highcharts: import_highcharts3.default,
+          options,
+          callback
+        }
+      ),
+      chart ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        ChartTooltipPortal,
+        {
+          chart,
+          renderContent: (context) => {
+            const { color: color2, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
+            return tooltip ? tooltip({ color: color2, icon, name, percent, value }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              DonutChartTooltip,
+              {
+                color: color2,
+                currency,
+                icon,
+                name,
+                numberFormat,
+                numberLocale,
+                percent,
+                textLocale,
+                value
+              }
+            );
+          }
+        }
+      ) : null,
+      hideLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Box_default, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DonutChartLegend, { data }) })
+    ] });
+  }
+);
+
+// src/components/DonutChart/components/DonutChartLegendTable.tsx
+var import_react26 = require("react");
+var import_racine5 = require("@sproutsocial/racine");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var DonutChartLegendTable = (0, import_react26.memo)(
+  function DonutChartLegendTable2({
+    data,
+    numberLocale = "en-us",
+    textLocale = "en-us",
+    totalLabel,
+    // optional
+    currency = "USD",
+    numberFormat = "decimal"
+  }) {
+    const total = data.reduce(
+      (accumulator, dataItem) => accumulator + dataItem.value,
+      0
+    );
+    const rows = data.map((dataPoint, index) => {
+      const { name, icon, styles, value } = dataPoint;
+      const color2 = styles?.color || theme_default.colors.DATAVIZ_COLORS_LIST[index];
+      return {
+        cells: [
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartLegendLabel, { color: color2, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartLegendLabelContentWithIcon, { icon, children: name }) })
+          },
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Box_default, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { color: "text.body", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_racine5.Numeral,
+                {
+                  abbreviate: false,
+                  format: "percent",
+                  locale: numberLocale,
+                  number: value / total * 100
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_racine5.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_racine5.Numeral,
+                {
+                  abbreviate: false,
+                  currency,
+                  format: numberFormat,
+                  locale: numberLocale,
+                  number: value
+                }
+              ) })
+            ] }),
+            align: "right"
+          }
+        ]
+      };
+    });
+    const totalRow = [
+      {
+        cells: [
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
+          },
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_racine5.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_racine5.Numeral,
+              {
+                abbreviate: false,
+                currency,
+                format: numberFormat,
+                locale: numberLocale,
+                number: total
+              }
+            ) }),
+            align: "right"
+          }
+        ],
+        isAppendedRow: true
       }
-      break;
-    case "month":
-      firstPartOptions = { month: "short" };
-      if (isFirst || valueDate.getUTCFullYear() !== previousValueDate.getUTCFullYear()) {
-        secondPartOptions = { year: "numeric" };
+    ];
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      ChartTable,
+      {
+        rows: [...rows, ...totalRow]
       }
-      break;
-    case "year":
-      firstPartOptions = { year: "numeric" };
-      break;
-    default:
-      firstPartOptions = {};
-      break;
+    );
   }
-  const firstPart = new Intl.DateTimeFormat(textLocale, {
-    ...firstPartOptions,
-    timeZone: "UTC"
-  }).format(valueDate);
-  const secondPart = Object.keys(secondPartOptions).length > 0 ? new Intl.DateTimeFormat(textLocale, {
-    ...secondPartOptions,
-    timeZone: "UTC"
-  }).format(valueDate) : void 0;
-  return `<span>${firstPart}</span>${secondPart ? `<span>${secondPart}</span>` : ""}`;
-};
+);
 
-// src/helpers/yAxisLabelFormatter.ts
-var import_racine2 = require("@sproutsocial/racine");
-var yAxisLabelFormatter = ({
-  numberLocale,
-  textLocale,
-  tickPositions,
-  value,
-  currency = "USD",
-  numberFormat = "decimal"
+// src/components/LineChart/LineChart.tsx
+var import_react29 = require("react");
+var import_highcharts4 = __toESM(require("highcharts"));
+var import_highcharts_react_official3 = require("highcharts-react-official");
+var import_accessibility3 = __toESM(require("highcharts/modules/accessibility"));
+var import_styled_components17 = __toESM(require("styled-components"));
+
+// src/components/LineChart/components/LineChartLegend.tsx
+var import_react27 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var getLineChartLegendLabels = ({
+  data
 }) => {
-  const numberValue = Number(value);
-  if (numberValue === 0) {
-    return (0, import_racine2.formatNumeral)({
-      locale: numberLocale,
-      number: numberValue
-    });
+  return data.map((series, index) => ({
+    content: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    color: series.styles?.color || theme_default.colors.DATAVIZ_COLORS_LIST[index]
+  }));
+};
+var LineChartLegend = (0, import_react27.memo)(
+  function LineChartLegend2({ data }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
-  if (numberFormat === "duration") {
-    return (0, import_racine2.formatDuration)({
-      display: "narrow",
-      locale: textLocale,
-      milliseconds: numberValue
+);
+
+// src/components/LineChart/components/LineChartTooltip.tsx
+var import_react28 = require("react");
+var import_racine6 = require("@sproutsocial/racine");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var LineChartTooltip = (0, import_react28.memo)(
+  function LineChartTooltip2({
+    data,
+    invalidNumberLabel,
+    numberLocale,
+    textLocale,
+    tooltipDateFormatter,
+    x,
+    // optional
+    currency = "USD",
+    numberFormat = "decimal",
+    onClick,
+    tooltipClickLabel
+  }) {
+    const rows = data.map(({ color: color2, icon, name, value }) => {
+      return {
+        cells: [
+          {
+            content: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartLegendLabel, { color: color2, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { "aria-label": `${name}: `, children: name }) }) })
+          },
+          {
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_racine6.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_racine6.Numeral,
+              {
+                abbreviate: false,
+                currency,
+                format: numberFormat,
+                locale: numberLocale,
+                number: value
+              }
+            ),
+            align: "right"
+          }
+        ]
+      };
     });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ChartTooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      ] }) : tooltipClickLabel }) : null
+    ] });
   }
-  const maxValue = tickPositions && tickPositions.length > 0 ? tickPositions[tickPositions.length - 1] : void 0;
-  const abbreviate = typeof maxValue === "number" && maxValue > 9999 ? 1e3 : true;
-  return (0, import_racine2.formatNumeral)({
-    abbreviate,
+);
+
+// src/components/LineChart/LineChart.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+(0, import_accessibility3.default)(import_highcharts4.default);
+var StyledBox5 = (0, import_styled_components17.default)(Box_default)`
+  ${lineChartStyles}
+`;
+var LineChart = (0, import_react29.memo)(function LineChart2(props) {
+  const { data } = props;
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LineChartWithData, { ...props });
+});
+var LineChartWithData = (0, import_react29.memo)(function LineChartWithData2({
+  data,
+  invalidNumberLabel,
+  numberLocale = "en-us",
+  textLocale = "en-us",
+  tooltipDateFormatter,
+  // optional
+  currency = "USD",
+  numberFormat = "decimal",
+  tooltip,
+  yAxisLabelFormatter: yAxisLabelFormatter2,
+  onClick,
+  tooltipClickLabel
+}) {
+  const { options, chart, callback } = useTimeSeriesChartOptions({
     currency,
-    format: numberFormat,
-    locale: numberLocale,
-    number: numberValue
+    data,
+    numberFormat,
+    numberLocale,
+    seriesType: "spline",
+    textLocale,
+    yAxisLabelFormatter: yAxisLabelFormatter2,
+    onClick
   });
-};
+  const { colors: colors3, patterns } = data.reduce(
+    (acc, item, index) => {
+      acc.colors.push(
+        item.styles?.color ?? theme_default.colors.DATAVIZ_COLORS_LIST[index] ?? ""
+      );
+      acc.patterns.push(item.styles?.pattern ?? "solid");
+      return acc;
+    },
+    {
+      colors: [],
+      patterns: []
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    StyledBox5,
+    {
+      $colors: colors3,
+      $patterns: patterns,
+      $hasOnClick: Boolean(onClick),
+      bg: "container.background.base",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_highcharts_react_official3.HighchartsReact,
+          {
+            highcharts: import_highcharts4.default,
+            options,
+            callback
+          }
+        ),
+        chart ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          ChartTooltipPortal,
+          {
+            chart,
+            renderContent: (context) => {
+              const tooltipData = transformTimeSeriesTooltipData({
+                context,
+                data
+              });
+              const x = context.x;
+              return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                LineChartTooltip,
+                {
+                  currency,
+                  data: tooltipData,
+                  invalidNumberLabel,
+                  numberFormat,
+                  numberLocale,
+                  textLocale,
+                  tooltipDateFormatter,
+                  x,
+                  onClick,
+                  tooltipClickLabel
+                }
+              );
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box_default, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LineChartLegend, { data }) })
+      ]
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AreaChart,
+  ChartLegend,
+  ChartLegendLabel,
   ChartTable,
+  ChartTooltip,
+  ChartTooltipFooter,
+  ChartTooltipHeader,
+  ChartTooltipTable,
+  ChartTooltipTitle,
   ColorBox,
   DONUT_CHART_HALO_SIZE,
   DONUT_CHART_HEIGHT,
   DONUT_CHART_WIDTH,
   DatavizColorBox,
+  DonutChart,
+  DonutChartLegendTable,
+  LineChart,
   NetworkColorBox,
   TIME_SERIES_CHART_HEIGHT,
   areaChartOptions,
@@ -3748,6 +6181,15 @@ var yAxisLabelFormatter = ({
 });
 /*! Bundled license information:
 
+object-assign/index.js:
+  (*
+  object-assign
+  (c) Sindre Sorhus
+  @license MIT
+  *)
+*/
+/*! Bundled license information:
+
 object-assign/index.js:
   (*
   object-assign