@spscommerce/ds-react-charts 4.33.0 → 4.34.2-ie

package/lib/index.es.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React__default, { useMemo } from "react";
 import * as DSColors from "@spscommerce/ds-colors";
@@ -4630,13 +4611,57 @@ function impl() {
   return propTypes$3.exports.object;
 }
 propTypes$3.exports.oneOfType([propTypes$3.exports.node, propTypes$3.exports.func]);
-const spsGlobalPropTypes = {
+var spsGlobalPropTypes = {
   children: propTypes$3.exports.oneOfType([propTypes$3.exports.arrayOf(propTypes$3.exports.node), propTypes$3.exports.node]),
   className: propTypes$3.exports.string,
   "data-testid": propTypes$3.exports.string,
   unsafelyReplaceClassName: propTypes$3.exports.string
 };
-const propsDoc$2 = {
+var __assign$1 = function() {
+  __assign$1 = Object.assign || function(t) {
+    for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s = arguments[i2];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign$1.apply(this, arguments);
+};
+var __read$2 = function(o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m)
+    return o;
+  var i2 = m.call(o), r, ar = [], e;
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i2.next()).done)
+      ar.push(r.value);
+  } catch (error) {
+    e = { error };
+  } finally {
+    try {
+      if (r && !r.done && (m = i2["return"]))
+        m.call(i2);
+    } finally {
+      if (e)
+        throw e.error;
+    }
+  }
+  return ar;
+};
+var __spreadArray$2 = function(to, from, pack) {
+  if (pack || arguments.length === 2)
+    for (var i2 = 0, l = from.length, ar; i2 < l; i2++) {
+      if (ar || !(i2 in from)) {
+        if (!ar)
+          ar = Array.prototype.slice.call(from, 0, i2);
+        ar[i2] = from[i2];
+      }
+    }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var propsDoc$2 = {
   barFillColor1: "string",
   barFillColor2: "string",
   barFillColorHover: "string",
@@ -4649,84 +4674,51 @@ const propsDoc$2 = {
   yMaxValue: "number",
   yTickFormat: "(i: number) => string"
 };
-const propTypes$2 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  barFillColor1: propTypes$3.exports.string,
-  barFillColor2: propTypes$3.exports.string,
-  barFillColorHover: propTypes$3.exports.string,
-  chartData: propTypes$3.exports.arrayOf(impl()),
-  chartHeight: propTypes$3.exports.number,
-  chartWidth: propTypes$3.exports.number,
-  barSize: propTypes$3.exports.number,
-  yAxis: impl(),
-  xAxis: impl(),
-  yMaxValue: propTypes$3.exports.number,
-  yTickFormat: fun()
-});
+var propTypes$2 = __assign$1(__assign$1({}, spsGlobalPropTypes), { barFillColor1: propTypes$3.exports.string, barFillColor2: propTypes$3.exports.string, barFillColorHover: propTypes$3.exports.string, chartData: propTypes$3.exports.arrayOf(impl()), chartHeight: propTypes$3.exports.number, chartWidth: propTypes$3.exports.number, barSize: propTypes$3.exports.number, yAxis: impl(), xAxis: impl(), yMaxValue: propTypes$3.exports.number, yTickFormat: fun() });
 function SpsBarChart(props) {
-  const {
-    barFillColor1 = DSColors.colors.blue200,
-    barFillColor2 = "#007DB880",
-    barFillColorHover = DSColors.colors.blue300,
-    chartData,
-    chartHeight,
-    chartWidth,
-    barSize,
-    yAxis = {
-      tickValues: "value",
-      tickCount: 3
-    },
-    xAxis = {
-      tickValues: "label"
-    },
-    yMaxValue,
-    yTickFormat
-  } = props;
-  const margin = {
+  var _a = props.barFillColor1, barFillColor1 = _a === void 0 ? DSColors.colors.blue200 : _a, _b = props.barFillColor2, barFillColor2 = _b === void 0 ? "#007DB880" : _b, _c = props.barFillColorHover, barFillColorHover = _c === void 0 ? DSColors.colors.blue300 : _c, chartData = props.chartData, chartHeight = props.chartHeight, chartWidth = props.chartWidth, barSize = props.barSize, _d = props.yAxis, yAxis = _d === void 0 ? {
+    tickValues: "value",
+    tickCount: 3
+  } : _d, _e = props.xAxis, xAxis = _e === void 0 ? {
+    tickValues: "label"
+  } : _e, yMaxValue = props.yMaxValue, yTickFormat = props.yTickFormat;
+  var margin = {
     top: 30,
     bottom: 70,
     left: 50,
     right: 30
   };
-  const xMax = chartWidth - margin.left - margin.right;
-  const yMax = chartHeight - margin.top - margin.bottom;
-  const x = (d) => d[xAxis.tickValues];
-  const y = (d) => d[yAxis.tickValues];
-  const xScale = createBandScale({
+  var xMax = chartWidth - margin.left - margin.right;
+  var yMax = chartHeight - margin.top - margin.bottom;
+  var x = function(d) {
+    return d[xAxis.tickValues];
+  };
+  var y = function(d) {
+    return d[yAxis.tickValues];
+  };
+  var xScale = createBandScale({
     range: [0, xMax],
     round: true,
     domain: chartData.map(x),
     padding: 0.4
   });
-  const yScale = createLinearScale({
+  var yScale = createLinearScale({
     range: [yMax, 0],
     round: true,
-    domain: [0, yMaxValue || Math.max(...chartData.map(y))]
+    domain: [0, yMaxValue || Math.max.apply(Math, __spreadArray$2([], __read$2(chartData.map(y)), false))]
   });
-  const compose = (scale, accessor) => (data) => scale(accessor(data));
-  const xPoint = compose(xScale, x);
-  const yPoint = compose(yScale, y);
-  const colorGradientID = nanoid();
-  return /* @__PURE__ */ React.createElement("svg", {
-    width: chartWidth,
-    height: chartHeight,
-    className: "sps-chart-wrapper"
-  }, /* @__PURE__ */ React.createElement(GridRows, {
-    scale: yScale,
-    left: margin.left,
-    width: xMax,
-    numTicks: yAxis.tickCount,
-    stroke: DSColors.colors.gray400,
-    strokeOpacity: 0.2
-  }), /* @__PURE__ */ React.createElement(LinearGradient, {
-    id: colorGradientID,
-    from: barFillColor1,
-    to: barFillColor2
-  }), chartData.map((element, idx) => {
-    const barHeight = yMax - yPoint(element);
-    const barID = nanoid();
-    return /* @__PURE__ */ React.createElement(Group, {
-      key: idx
-    }, /* @__PURE__ */ React.createElement(BarRounded, {
+  var compose = function(scale, accessor) {
+    return function(data) {
+      return scale(accessor(data));
+    };
+  };
+  var xPoint = compose(xScale, x);
+  var yPoint = compose(yScale, y);
+  var colorGradientID = nanoid();
+  return React.createElement("svg", { width: chartWidth, height: chartHeight, className: "sps-chart-wrapper" }, React.createElement(GridRows, { scale: yScale, left: margin.left, width: xMax, numTicks: yAxis.tickCount, stroke: DSColors.colors.gray400, strokeOpacity: 0.2 }), React.createElement(LinearGradient, { id: colorGradientID, from: barFillColor1, to: barFillColor2 }), chartData.map(function(element, idx) {
+    var barHeight = yMax - yPoint(element);
+    var barID = nanoid();
+    return React.createElement(Group, { key: idx }, React.createElement(BarRounded, {
       id: barID,
       top: true,
       radius: 4,
@@ -4734,36 +4726,24 @@ function SpsBarChart(props) {
       y: yMax - barHeight,
       height: barHeight,
       width: barSize || xScale.bandwidth(),
-      fill: `url(#${colorGradientID})`,
-      onMouseEnter: (e) => {
-        const targetElement = e.target;
+      fill: "url(#" + colorGradientID + ")",
+      onMouseEnter: function(e) {
+        var targetElement = e.target;
         targetElement.style.fill = barFillColorHover;
       },
-      onMouseLeave: (e) => {
-        const targetElement = e.target;
+      onMouseLeave: function(e) {
+        var targetElement = e.target;
         targetElement.style.fill = null;
       }
-    }), /* @__PURE__ */ React.createElement(AxisLeft, {
-      scale: yScale,
-      left: margin.left,
-      hideTicks: true,
-      numTicks: yAxis.tickCount,
-      tickFormat: yTickFormat || void 0,
-      stroke: DSColors.colors.gray300,
-      tickLabelProps: () => ({
+    }), React.createElement(AxisLeft, { scale: yScale, left: margin.left, hideTicks: true, numTicks: yAxis.tickCount, tickFormat: yTickFormat || void 0, stroke: DSColors.colors.gray300, tickLabelProps: function() {
+      return {
         textAnchor: "end",
         fontSize: "12px",
         fill: DSColors.colors.gray400,
         fontWeight: "200"
-      })
-    }), /* @__PURE__ */ React.createElement(AxisBottom, {
-      top: yMax,
-      scale: xScale,
-      left: margin.left,
-      hideTicks: true,
-      hideAxisLine: true,
-      stroke: DSColors.colors.gray300,
-      tickLabelProps: () => ({
+      };
+    } }), React.createElement(AxisBottom, { top: yMax, scale: xScale, left: margin.left, hideTicks: true, hideAxisLine: true, stroke: DSColors.colors.gray300, tickLabelProps: function() {
+      return {
         textAnchor: "middle",
         fontSize: "12px",
         fontWeight: "200",
@@ -4771,10 +4751,8 @@ function SpsBarChart(props) {
         width: xScale.bandwidth() + xScale.bandwidth() / 2,
         lineHeight: "15px",
         verticalAnchor: "start"
-      })
-    }), /* @__PURE__ */ React.createElement(SpsTooltip, {
-      for: barID
-    }, element.label));
+      };
+    } }), React.createElement(SpsTooltip, { for: barID }, element.label));
   }));
 }
 Object.assign(SpsBarChart, {
@@ -4782,23 +4760,28 @@ Object.assign(SpsBarChart, {
   propTypes: propTypes$2,
   displayName: "SpsBarChart"
 });
-const SpsBarChartExamples = {
+var __makeTemplateObject$1 = function(cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", { value: raw });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
+};
+var SpsBarChartExamples = {
   general: {
     label: "General Usage",
-    description: ({ NavigateTo, Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "Use Bar Charts to visualize the comparison of a dataset across multiple categories or subjects. When using bar charts, the dataset should attempt to provide a clear answer to a clear question (i.e. avoid comparing multiple or unrelated datasets in a single chart)."), /* @__PURE__ */ React.createElement("p", null, "Bar Charts should not be used when the visualization of the data is too complex or the number of categories too numerous to be easily understood at a glance. In these cases consider the use of more general lists of content such as a", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
-      to: "Tables"
-    }, "Table"), "."), /* @__PURE__ */ React.createElement("h5", null, "Color"), /* @__PURE__ */ React.createElement("p", null, "The number of colors used should be directly related to the number of comparisons being made. When comparing categories across a single data set, only one color should be used. When comparing multiple categories across multiple series of data, use the appropriate number of colors to the number of categories. For more details on color usage visit the", " ", /* @__PURE__ */ React.createElement(Link, {
-      to: "/style-and-layout/colors"
-    }, "Colors"), " section."), /* @__PURE__ */ React.createElement("h5", null, "Interaction"), /* @__PURE__ */ React.createElement("p", null, "Charts should include interactivity on hover to give users insight to specifics of the data. Tooltips can be used to display expanded definitions or additional related data points for the selected category."))
+    description: function(_a) {
+      var NavigateTo = _a.NavigateTo, Link = _a.Link;
+      return React.createElement(React.Fragment, null, React.createElement("p", null, "Use Bar Charts to visualize the comparison of a dataset across multiple categories or subjects. When using bar charts, the dataset should attempt to provide a clear answer to a clear question (i.e. avoid comparing multiple or unrelated datasets in a single chart)."), React.createElement("p", null, "Bar Charts should not be used when the visualization of the data is too complex or the number of categories too numerous to be easily understood at a glance. In these cases consider the use of more general lists of content such as a", " ", React.createElement(NavigateTo, { to: "Tables" }, "Table"), "."), React.createElement("h5", null, "Color"), React.createElement("p", null, "The number of colors used should be directly related to the number of comparisons being made. When comparing categories across a single data set, only one color should be used. When comparing multiple categories across multiple series of data, use the appropriate number of colors to the number of categories. For more details on color usage visit the", " ", React.createElement(Link, { to: "/style-and-layout/colors" }, "Colors"), " section."), React.createElement("h5", null, "Interaction"), React.createElement("p", null, "Charts should include interactivity on hover to give users insight to specifics of the data. Tooltips can be used to display expanded definitions or additional related data points for the selected category."));
+    }
   },
   horizontal: {
     label: "Horizontal Bar Chart",
-    description: code`
-            <p>In Horizontal Bar Charts categories are listed vertically on the Y-axis and with data points are plotted horizontally on the X-axis.</p>
-        `,
+    description: code(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n            <p>In Horizontal Bar Charts categories are listed vertically on the Y-axis and with data points are plotted horizontally on the X-axis.</p>\n        "], ["\n            <p>In Horizontal Bar Charts categories are listed vertically on the Y-axis and with data points are plotted horizontally on the X-axis.</p>\n        "]))),
     examples: {
       vertical: {
-        react: code`
+        react: code(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1([`
                     function DemoComponent() {
                         const data = [
                             { value: 69, label: "Aktie Sports" },
@@ -4837,19 +4820,55 @@ const SpsBarChartExamples = {
                             />
                         )
                     }
-                `
+                `], [`
+                    function DemoComponent() {
+                        const data = [
+                            { value: 69, label: "Aktie Sports" },
+                            { value: 69, label: "Dicks Sporting Goods" },
+                            { value: 64, label: "FGL Sports" },
+                            { value: 62, label: "Foot Asylum" },
+                            { value: 55, label: "Hervis" },
+                            { value: 51, label: "Lovell Rugby" },
+                            { value: 48, label: "Modells Sporting Goods" },
+                            { value: 44, label: "Perry Sport" },
+                            { value: 44, label: "Sportman Warhouse Australia" },
+                            { value: 44, label: "Perry Sport 2" },
+                        ]
+
+                        xTickFormat = (i) => \\\`\\\${i}\\\${i !== 0 ? "%" : ""}\\\`
+
+                        return (
+                            <SpsHorizontalBarChart
+                                chartData={data}
+                                chartHeight={523}
+                                chartWidth={838}
+                                barFillColor1 = "#32BE6F"
+                                barFillColor2 = "#32BE6F80"
+                                barFillColorHover = "#289858"
+                                yAxis={{
+                                    tickValues: 'label',
+                                }}
+                                xAxis={{
+                                    tickValues: 'value',
+                                    tickCount: '10'
+                                }}
+                                marginLeft={135}
+                                xMaxValue={100}
+                                barSize={20}
+                                xTickFormat={xTickFormat}
+                            />
+                        )
+                    }
+                `])))
       }
     }
   },
   vertical: {
     label: "Vertical Bar Chart",
-    description: code`
-            <p>In Vertical Bar Charts data points are plotted vertically on the Y-axis and with categories being listed horizontally on the X-axis.</p>
-            <p>If the categories become too crowded along the X-axis, opt for a Horizontal Bar Chart instead.</p>
-        `,
+    description: code(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1(["\n            <p>In Vertical Bar Charts data points are plotted vertically on the Y-axis and with categories being listed horizontally on the X-axis.</p>\n            <p>If the categories become too crowded along the X-axis, opt for a Horizontal Bar Chart instead.</p>\n        "], ["\n            <p>In Vertical Bar Charts data points are plotted vertically on the Y-axis and with categories being listed horizontally on the X-axis.</p>\n            <p>If the categories become too crowded along the X-axis, opt for a Horizontal Bar Chart instead.</p>\n        "]))),
     examples: {
       vertical: {
-        react: code`
+        react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([`
                     function DemoComponent() {
                       const data = [
                         { value: 112, label: "Aktie Sports" },
@@ -4881,12 +4900,89 @@ const SpsBarChartExamples = {
                             />
                         )
                     }
-                `
+                `], [`
+                    function DemoComponent() {
+                      const data = [
+                        { value: 112, label: "Aktie Sports" },
+                        { value: 100, label: "Dicks Sporting Goods" },
+                        { value: 90, label: "FGL Sports" },
+                        { value: 82, label: "Foot Asylum" },
+                        { value: 76, label: "Hervis" },
+                        { value: 64, label: "Lovell Rugby" },
+                        { value: 64, label: "Modells Sporting Goods" },
+                      ]
+
+                        return (
+                            <SpsBarChart
+                                chartData={data}
+                                chartHeight={364}
+                                chartWidth={838}
+                                barFillColor1 = "#9B4B87"
+                                barFillColor2 = "#9B4B8780"
+                                barFillColorHover = "#7C3C6C"
+                                yAxis={{
+                                    tickValues: 'value',
+                                    tickCount: '5',
+                                }}
+                                xAxis={{
+                                    tickValues: 'label',
+                                }}
+                                yMaxValue={125}
+                                barSize={45}
+                            />
+                        )
+                    }
+                `])))
       }
     }
   }
 };
-const propsDoc$1 = {
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4;
+var __assign = function() {
+  __assign = Object.assign || function(t) {
+    for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s = arguments[i2];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __read$1 = function(o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m)
+    return o;
+  var i2 = m.call(o), r, ar = [], e;
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i2.next()).done)
+      ar.push(r.value);
+  } catch (error) {
+    e = { error };
+  } finally {
+    try {
+      if (r && !r.done && (m = i2["return"]))
+        m.call(i2);
+    } finally {
+      if (e)
+        throw e.error;
+    }
+  }
+  return ar;
+};
+var __spreadArray$1 = function(to, from, pack) {
+  if (pack || arguments.length === 2)
+    for (var i2 = 0, l = from.length, ar; i2 < l; i2++) {
+      if (ar || !(i2 in from)) {
+        if (!ar)
+          ar = Array.prototype.slice.call(from, 0, i2);
+        ar[i2] = from[i2];
+      }
+    }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var propsDoc$1 = {
   barFillColor1: "string",
   barFillColor2: "string",
   barFillColorHover: "string",
@@ -4900,98 +4996,58 @@ const propsDoc$1 = {
   xMaxValue: "number",
   xTickFormat: "(i: number) => string"
 };
-const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  barFillColor1: propTypes$3.exports.string,
-  barFillColor2: propTypes$3.exports.string,
-  barFillColorHover: propTypes$3.exports.string,
-  chartData: propTypes$3.exports.arrayOf(impl()),
-  chartHeight: propTypes$3.exports.number,
-  chartWidth: propTypes$3.exports.number,
-  barSize: propTypes$3.exports.number,
-  yAxis: impl(),
-  xAxis: impl(),
-  marginLeft: propTypes$3.exports.number,
-  xMaxValue: propTypes$3.exports.number,
-  xTickFormat: fun()
-});
+var propTypes$1 = __assign(__assign({}, spsGlobalPropTypes), { barFillColor1: propTypes$3.exports.string, barFillColor2: propTypes$3.exports.string, barFillColorHover: propTypes$3.exports.string, chartData: propTypes$3.exports.arrayOf(impl()), chartHeight: propTypes$3.exports.number, chartWidth: propTypes$3.exports.number, barSize: propTypes$3.exports.number, yAxis: impl(), xAxis: impl(), marginLeft: propTypes$3.exports.number, xMaxValue: propTypes$3.exports.number, xTickFormat: fun() });
 function SpsHorizontalBarChart(props) {
-  const {
-    barFillColor1 = DSColors.colors.blue200,
-    barFillColor2 = "#007DB880",
-    barFillColorHover = DSColors.colors.blue300,
-    chartData,
-    chartHeight,
-    chartWidth,
-    barSize,
-    yAxis = {
-      tickValues: "label"
-    },
-    xAxis = {
-      tickValues: "value",
-      tickCount: 3
-    },
-    marginLeft = 30,
-    xMaxValue,
-    xTickFormat
-  } = props;
-  const margin = {
+  var _a = props.barFillColor1, barFillColor1 = _a === void 0 ? DSColors.colors.blue200 : _a, _b = props.barFillColor2, barFillColor2 = _b === void 0 ? "#007DB880" : _b, _c = props.barFillColorHover, barFillColorHover = _c === void 0 ? DSColors.colors.blue300 : _c, chartData = props.chartData, chartHeight = props.chartHeight, chartWidth = props.chartWidth, barSize = props.barSize, _d = props.yAxis, yAxis = _d === void 0 ? {
+    tickValues: "label"
+  } : _d, _e = props.xAxis, xAxis = _e === void 0 ? {
+    tickValues: "value",
+    tickCount: 3
+  } : _e, _f = props.marginLeft, marginLeft = _f === void 0 ? 30 : _f, xMaxValue = props.xMaxValue, xTickFormat = props.xTickFormat;
+  var margin = {
     top: 30,
     bottom: 30,
     left: marginLeft,
     right: 30
   };
-  const xMax = chartWidth - margin.left - margin.right;
-  const yMax = chartHeight - margin.top - margin.bottom;
-  const x = (d) => d[xAxis.tickValues];
-  const y = (d) => d[yAxis.tickValues];
-  const yScale = createBandScale({
+  var xMax = chartWidth - margin.left - margin.right;
+  var yMax = chartHeight - margin.top - margin.bottom;
+  var x = function(d) {
+    return d[xAxis.tickValues];
+  };
+  var y = function(d) {
+    return d[yAxis.tickValues];
+  };
+  var yScale = createBandScale({
     range: [0, yMax],
     round: true,
     domain: chartData.map(y),
     padding: 0.4
   });
-  const xScale = createLinearScale({
+  var xScale = createLinearScale({
     range: [0, xMax],
     round: true,
-    domain: [0, xMaxValue || Math.max(...chartData.map(x))]
+    domain: [0, xMaxValue || Math.max.apply(Math, __spreadArray$1([], __read$1(chartData.map(x)), false))]
   });
-  const compose = (scale, accessor) => (data) => scale(accessor(data));
-  const xPoint = compose(xScale, x);
-  const yPoint = compose(yScale, y);
-  const colorGradientID = nanoid();
-  const bgColorGradientID = nanoid();
-  return /* @__PURE__ */ React.createElement("svg", {
-    width: chartWidth,
-    height: chartHeight,
-    className: "sps-chart-wrapper"
-  }, /* @__PURE__ */ React.createElement(GridColumns, {
-    scale: xScale,
-    left: margin.left,
-    height: yMax,
-    stroke: DSColors.colors.gray400,
-    strokeOpacity: 0.2
-  }), /* @__PURE__ */ React.createElement(LinearGradient, {
-    id: bgColorGradientID,
-    from: "#D2D4D580",
-    to: "#D2D4D5",
-    vertical: false
-  }), /* @__PURE__ */ React.createElement(LinearGradient, {
-    id: colorGradientID,
-    from: barFillColor2,
-    to: barFillColor1,
-    vertical: false
-  }), chartData.map((element, idx) => {
-    const barWidth = xPoint(element);
-    const barID = nanoid();
-    return /* @__PURE__ */ React.createElement(Group, {
-      key: idx
-    }, /* @__PURE__ */ React.createElement("rect", {
+  var compose = function(scale, accessor) {
+    return function(data) {
+      return scale(accessor(data));
+    };
+  };
+  var xPoint = compose(xScale, x);
+  var yPoint = compose(yScale, y);
+  var colorGradientID = nanoid();
+  var bgColorGradientID = nanoid();
+  return React.createElement("svg", { width: chartWidth, height: chartHeight, className: "sps-chart-wrapper" }, React.createElement(GridColumns, { scale: xScale, left: margin.left, height: yMax, stroke: DSColors.colors.gray400, strokeOpacity: 0.2 }), React.createElement(LinearGradient, { id: bgColorGradientID, from: "#D2D4D580", to: "#D2D4D5", vertical: false }), React.createElement(LinearGradient, { id: colorGradientID, from: barFillColor2, to: barFillColor1, vertical: false }), chartData.map(function(element, idx) {
+    var barWidth = xPoint(element);
+    var barID = nanoid();
+    return React.createElement(Group, { key: idx }, React.createElement("rect", {
       x: margin.left,
       y: yPoint(element) + (barSize ? (yScale.bandwidth() - barSize) / 2 : 0),
       height: barSize || yScale.bandwidth(),
       width: xMax,
-      fill: `url(#${bgColorGradientID})`
-    }), /* @__PURE__ */ React.createElement(BarRounded, {
+      fill: "url(#" + bgColorGradientID + ")"
+    }), React.createElement(BarRounded, {
       id: barID,
       right: true,
       radius: 4,
@@ -4999,46 +5055,32 @@ function SpsHorizontalBarChart(props) {
       y: yPoint(element) + (barSize ? (yScale.bandwidth() - barSize) / 2 : 0),
       height: barSize || yScale.bandwidth(),
       width: barWidth,
-      fill: `url(#${colorGradientID})`,
-      onMouseEnter: (e) => {
-        const targetElement = e.target;
+      fill: "url(#" + colorGradientID + ")",
+      onMouseEnter: function(e) {
+        var targetElement = e.target;
         targetElement.style.fill = barFillColorHover;
       },
-      onMouseLeave: (e) => {
-        const targetElement = e.target;
+      onMouseLeave: function(e) {
+        var targetElement = e.target;
         targetElement.style.fill = null;
       }
-    }), /* @__PURE__ */ React.createElement(AxisLeft, {
-      scale: yScale,
-      left: margin.left,
-      hideTicks: true,
-      hideAxisLine: true,
-      stroke: DSColors.colors.gray300,
-      tickLabelProps: () => ({
+    }), React.createElement(AxisLeft, { scale: yScale, left: margin.left, hideTicks: true, hideAxisLine: true, stroke: DSColors.colors.gray300, tickLabelProps: function() {
+      return {
         textAnchor: "end",
         fontSize: "12px",
         fill: DSColors.colors.gray400,
         fontWeight: "200",
         width: margin.left,
         verticalAnchor: "middle"
-      })
-    }), /* @__PURE__ */ React.createElement(AxisBottom, {
-      top: yMax,
-      scale: xScale,
-      left: margin.left,
-      hideTicks: true,
-      numTicks: xAxis.tickCount,
-      tickFormat: xTickFormat || void 0,
-      stroke: DSColors.colors.gray300,
-      tickLabelProps: () => ({
+      };
+    } }), React.createElement(AxisBottom, { top: yMax, scale: xScale, left: margin.left, hideTicks: true, numTicks: xAxis.tickCount, tickFormat: xTickFormat || void 0, stroke: DSColors.colors.gray300, tickLabelProps: function() {
+      return {
         textAnchor: "middle",
         fontSize: "12px",
         fontWeight: "200",
         fill: DSColors.colors.gray400
-      })
-    }), /* @__PURE__ */ React.createElement(SpsTooltip, {
-      for: barID
-    }, element.label));
+      };
+    } }), React.createElement(SpsTooltip, { for: barID }, element.label));
   }));
 }
 Object.assign(SpsHorizontalBarChart, {
@@ -5412,7 +5454,39 @@ Legend.propTypes = {
 function Ordinal(props) {
   return /* @__PURE__ */ React__default.createElement(Legend, props);
 }
-const propsDoc = {
+var __read = function(o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m)
+    return o;
+  var i2 = m.call(o), r, ar = [], e;
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i2.next()).done)
+      ar.push(r.value);
+  } catch (error) {
+    e = { error };
+  } finally {
+    try {
+      if (r && !r.done && (m = i2["return"]))
+        m.call(i2);
+    } finally {
+      if (e)
+        throw e.error;
+    }
+  }
+  return ar;
+};
+var __spreadArray = function(to, from, pack) {
+  if (pack || arguments.length === 2)
+    for (var i2 = 0, l = from.length, ar; i2 < l; i2++) {
+      if (ar || !(i2 in from)) {
+        if (!ar)
+          ar = Array.prototype.slice.call(from, 0, i2);
+        ar[i2] = from[i2];
+      }
+    }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var propsDoc = {
   chartData: "ChartDataProps[]",
   chartHeight: "number",
   chartWidth: "number",
@@ -5420,7 +5494,7 @@ const propsDoc = {
   goal: "number",
   total: "number"
 };
-const propTypes = {
+var propTypes = {
   chartData: propTypes$3.exports.arrayOf(impl()),
   chartHeight: propTypes$3.exports.number,
   chartWidth: propTypes$3.exports.number,
@@ -5429,220 +5503,116 @@ const propTypes = {
   total: propTypes$3.exports.number
 };
 function SpsStackedHorizontalBarChart(props) {
-  const {
-    chartData,
-    chartHeight,
-    chartWidth,
-    goal,
-    target,
-    total
-  } = props;
-  const margin = {
+  var chartData = props.chartData, chartHeight = props.chartHeight, chartWidth = props.chartWidth, goal = props.goal, target = props.target, total = props.total;
+  var margin = {
     top: 25,
     bottom: 40,
     left: 30,
     right: 30
   };
   function hexToRGB(hex2, alpha) {
-    const r = parseInt(hex2.slice(1, 3), 16);
-    const g = parseInt(hex2.slice(3, 5), 16);
-    const b = parseInt(hex2.slice(5, 7), 16);
+    var r = parseInt(hex2.slice(1, 3), 16);
+    var g = parseInt(hex2.slice(3, 5), 16);
+    var b = parseInt(hex2.slice(5, 7), 16);
     if (alpha) {
-      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+      return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
     }
-    return `rgb(${r}, ${g}, ${b})`;
+    return "rgb(" + r + ", " + g + ", " + b + ")";
   }
-  const colors = chartData.map((c) => c.color);
-  const keys = chartData.map((c) => c.label);
-  const xScale = createLinearScale({
+  var colors = chartData.map(function(c) {
+    return c.color;
+  });
+  var keys = chartData.map(function(c) {
+    return c.label;
+  });
+  var xScale = createLinearScale({
     domain: [0, 100],
     nice: true
   });
-  const data = [chartData.reduce((obj, item) => Object.assign(obj, { [item.label]: item.value }), {})];
-  const yScale = createBandScale({
+  var data = [chartData.reduce(function(obj, item) {
+    var _a;
+    return Object.assign(obj, (_a = {}, _a[item.label] = item.value, _a));
+  }, {})];
+  var yScale = createBandScale({
     domain: data,
     padding: 0.2
   });
-  const colorScale = createOrdinalScale({
-    domain: keys.map((c) => `${c}: ${data[0][c]}%`),
-    range: [...colors]
+  var colorScale = createOrdinalScale({
+    domain: keys.map(function(c) {
+      return c + ": " + data[0][c] + "%";
+    }),
+    range: __spreadArray([], __read(colors), false)
   });
-  const xMax = chartWidth - margin.left - margin.right;
-  const yMax = chartHeight - margin.top - margin.bottom;
+  var xMax = chartWidth - margin.left - margin.right;
+  var yMax = chartHeight - margin.top - margin.bottom;
   xScale.rangeRound([0, xMax]);
   yScale.rangeRound([yMax, 0]);
-  const tickFormat2 = (i2) => `${i2}%`;
-  return /* @__PURE__ */ React.createElement("div", {
-    style: { width: chartWidth },
-    className: "position-relative"
-  }, /* @__PURE__ */ React.createElement(Ordinal, {
-    className: "fs-12 lh-18 gray600",
-    scale: colorScale,
-    direction: "row",
-    shape: "rect",
-    shapeWidth: 30,
-    shapeHeight: 4,
-    shapeMargin: "0 5px 0 0",
-    shapeStyle: () => ({ borderRadius: "2px" }),
-    labelMargin: "0",
-    itemMargin: "0 10px 0 10px",
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      fontSize: "16px"
-    }
-  }), goal && target && total && /* @__PURE__ */ React.createElement("div", {
-    className: "position-absolute",
-    style: {
-      top: "26px",
-      width: `${chartWidth - margin.left - margin.right}px`,
-      margin: `0 ${margin.left}px`,
-      height: "12px"
-    }
-  }, /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-chevron-down green200 fs-14 position-absolute",
-    style: { left: `calc(${total}% - 5px)` }
-  }), /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-chevron-down gray600 fs-14 position-absolute",
-    style: { left: `calc(${target}% - 5px)` }
-  }), /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-chevron-down red200 fs-14 position-absolute",
-    style: { left: `calc(${goal}% - 5px)` }
-  })), /* @__PURE__ */ React.createElement("svg", {
-    width: chartWidth,
-    height: chartHeight
-  }, /* @__PURE__ */ React.createElement(Group, {
-    top: margin.top,
-    left: margin.left
-  }, /* @__PURE__ */ React.createElement(BarStackHorizontal, {
-    data,
-    keys,
-    height: yMax,
-    y: () => "",
-    xScale,
-    yScale,
-    color: colorScale
-  }, (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => /* @__PURE__ */ React.createElement(Group, {
-    key: `barstack-horizontal-${barStack.index}-${bar.index}`
-  }, /* @__PURE__ */ React.createElement(LinearGradient, {
-    id: `gradient-${barStack.index}`,
-    vertical: false,
-    from: hexToRGB(bar.color, 0.5),
-    to: bar.color
-  }), /* @__PURE__ */ React.createElement("rect", {
-    id: bar.key,
-    x: bar.x !== 0 ? bar.x + 1.5 : bar.x,
-    y: bar.y,
-    width: bar.x !== 0 ? barStacks.length - 1 === barStack.index ? bar.width - 1.5 : bar.width - 3 : bar.width - 1.5,
-    height: 20,
-    fill: `url(#gradient-${barStack.index})`
-  }, /* @__PURE__ */ React.createElement(SpsTooltip, {
-    for: bar.key
-  }, bar.key, /* @__PURE__ */ React.createElement("div", {
-    className: "text-center"
-  }, data[0][barStack.key]))))))), /* @__PURE__ */ React.createElement(AxisBottom, {
-    top: yMax + 6,
-    tickFormat: tickFormat2,
-    scale: xScale,
-    stroke: DSColors.colors.gray400,
-    tickStroke: DSColors.colors.gray400,
-    tickLength: 4,
-    tickLineProps: {
-      y1: -11,
-      y2: 5
-    },
-    tickLabelProps: () => ({
+  var tickFormat2 = function(i2) {
+    return i2 + "%";
+  };
+  return React.createElement("div", { style: { width: chartWidth }, className: "position-relative" }, React.createElement(Ordinal, { className: "fs-12 lh-18 gray600", scale: colorScale, direction: "row", shape: "rect", shapeWidth: 30, shapeHeight: 4, shapeMargin: "0 5px 0 0", shapeStyle: function() {
+    return { borderRadius: "2px" };
+  }, labelMargin: "0", itemMargin: "0 10px 0 10px", style: {
+    display: "flex",
+    justifyContent: "center",
+    fontSize: "16px"
+  } }), goal && target && total && React.createElement("div", { className: "position-absolute", style: {
+    top: "26px",
+    width: chartWidth - margin.left - margin.right + "px",
+    margin: "0 " + margin.left + "px",
+    height: "12px"
+  } }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down green200 fs-14 position-absolute", style: { left: "calc(" + total + "% - 5px)" } }), React.createElement("i", { className: "sps-icon sps-icon-chevron-down gray600 fs-14 position-absolute", style: { left: "calc(" + target + "% - 5px)" } }), React.createElement("i", { className: "sps-icon sps-icon-chevron-down red200 fs-14 position-absolute", style: { left: "calc(" + goal + "% - 5px)" } })), React.createElement("svg", { width: chartWidth, height: chartHeight }, React.createElement(Group, { top: margin.top, left: margin.left }, React.createElement(BarStackHorizontal, { data, keys, height: yMax, y: function() {
+    return "";
+  }, xScale, yScale, color: colorScale }, function(barStacks) {
+    return barStacks.map(function(barStack) {
+      return barStack.bars.map(function(bar) {
+        return React.createElement(Group, { key: "barstack-horizontal-" + barStack.index + "-" + bar.index }, React.createElement(LinearGradient, { id: "gradient-" + barStack.index, vertical: false, from: hexToRGB(bar.color, 0.5), to: bar.color }), React.createElement("rect", { id: bar.key, x: bar.x !== 0 ? bar.x + 1.5 : bar.x, y: bar.y, width: bar.x !== 0 ? barStacks.length - 1 === barStack.index ? bar.width - 1.5 : bar.width - 3 : bar.width - 1.5, height: 20, fill: "url(#gradient-" + barStack.index + ")" }, React.createElement(SpsTooltip, { for: bar.key }, bar.key, React.createElement("div", { className: "text-center" }, data[0][barStack.key]))));
+      });
+    });
+  }), React.createElement(AxisBottom, { top: yMax + 6, tickFormat: tickFormat2, scale: xScale, stroke: DSColors.colors.gray400, tickStroke: DSColors.colors.gray400, tickLength: 4, tickLineProps: {
+    y1: -11,
+    y2: 5
+  }, tickLabelProps: function() {
+    return {
       fill: DSColors.colors.gray400,
       fontSize: 12,
       textAnchor: "middle"
-    })
-  }))), goal && target && total && /* @__PURE__ */ React.createElement("footer", {
-    className: "fs-12 lh-18 gray600 d-flex justify-content-center"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "d-flex align-items-center"
-  }, /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-chevron-down green200 fs-14 mr-1"
-  }), "Current Total:", /* @__PURE__ */ React.createElement("span", {
-    className: "sps-text-semibold gray600 ml-1"
-  }, total, "%")), /* @__PURE__ */ React.createElement("span", {
-    className: "ml-3 d-flex align-items-center"
-  }, /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-chevron-down gray600 fs-14 mr-1"
-  }), "Current Target:", /* @__PURE__ */ React.createElement("span", {
-    className: "sps-text-semibold gray600 ml-1"
-  }, target, "%")), /* @__PURE__ */ React.createElement("span", {
-    className: "ml-3 d-flex align-items-center"
-  }, /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-chevron-down red200 fs-14 mr-1"
-  }), "Goal:", /* @__PURE__ */ React.createElement("span", {
-    className: "sps-text-semibold gray600 ml-1"
-  }, goal, "%"))));
+    };
+  } }))), goal && target && total && React.createElement("footer", { className: "fs-12 lh-18 gray600 d-flex justify-content-center" }, React.createElement("span", { className: "d-flex align-items-center" }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down green200 fs-14 mr-1" }), "Current Total:", React.createElement("span", { className: "sps-text-semibold gray600 ml-1" }, total, "%")), React.createElement("span", { className: "ml-3 d-flex align-items-center" }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down gray600 fs-14 mr-1" }), "Current Target:", React.createElement("span", { className: "sps-text-semibold gray600 ml-1" }, target, "%")), React.createElement("span", { className: "ml-3 d-flex align-items-center" }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down red200 fs-14 mr-1" }), "Goal:", React.createElement("span", { className: "sps-text-semibold gray600 ml-1" }, goal, "%"))));
 }
 Object.assign(SpsStackedHorizontalBarChart, {
   props: propsDoc,
   propTypes,
   displayName: "SpsStackedHorizontalBarChart"
 });
-const SpsStackedHorizontalBarChartExamples = {
+var __makeTemplateObject = function(cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", { value: raw });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
+};
+var SpsStackedHorizontalBarChartExamples = {
   basic: {
     label: "Basic",
-    description: code`
-            <p>Stacked horizontal bar chart example.</p>
-        `,
+    description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>Stacked horizontal bar chart example.</p>\n        "], ["\n            <p>Stacked horizontal bar chart example.</p>\n        "]))),
     examples: {
       basic: {
-        react: code`
-                    function DemoComponent() {
-                        // The sum of the values must be 100
-                        const data = [
-                            {label: 'Label 1', value: 10, color: '#6c5efb'},
-                            {label: 'Label 2', value: 7, color: '#ff9632'},
-                            {label: 'Label 3', value: 35, color: '#a44afe'},
-                            {label: 'Label 4', value: 29, color: '#32be6f'},
-                            {label: 'Label 5', value: 19, color: '#a5a9ab'}
-                        ];
-
-                        return (
-                            <SpsStackedHorizontalBarChart
-                                chartData={data}
-                                chartHeight={100}
-                                chartWidth={800}
-                            />
-                        )
-                    }
-                `
+        react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                            />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                            />\n                        )\n                    }\n                "])))
       },
       vertical: {
-        react: code`
-                    function DemoComponent() {
-                        // The sum of the values must be 100
-                        const data = [
-                            {label: 'Label 1', value: 10, color: '#6c5efb'},
-                            {label: 'Label 2', value: 7, color: '#ff9632'},
-                            {label: 'Label 3', value: 35, color: '#a44afe'},
-                            {label: 'Label 4', value: 29, color: '#32be6f'},
-                            {label: 'Label 5', value: 19, color: '#a5a9ab'}
-                        ];
-
-                        return (
-                            <SpsStackedHorizontalBarChart
-                                chartData={data}
-                                chartHeight={100}
-                                chartWidth={800}
-                                total={81}
-                                target={67}
-                                goal={99}
-                            />
-                        )
-                    }
-                `
+        react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                                total={81}\n                                target={67}\n                                goal={99}\n                            />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                                total={81}\n                                target={67}\n                                goal={99}\n                            />\n                        )\n                    }\n                "])))
       }
     }
   }
 };
-const MANIFEST = {
+var templateObject_1, templateObject_2, templateObject_3;
+var MANIFEST = {
   "Bar Chart": {
-    description: () => /* @__PURE__ */ React.createElement("p", null, "Bar Charts are a data visualization used to compare sets of data to more easily analyze questions or identify gaps oriented toward user goals. ", /* @__PURE__ */ React.createElement("br", null), "Each chart should focus on answering a single question about the dataset."),
+    description: function() {
+      return React.createElement("p", null, "Bar Charts are a data visualization used to compare sets of data to more easily analyze questions or identify gaps oriented toward user goals. ", React.createElement("br", null), "Each chart should focus on answering a single question about the dataset.");
+    },
     components: [SpsBarChart, SpsHorizontalBarChart],
     examples: SpsBarChartExamples
   },