sag_components 1.0.259 → 1.0.260

package/dist/stories/components/PerformanceAnalytics.style.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TotalsDataContainer = exports.TooltipTitleROI = exports.TooltipLabelROI = exports.TooltipDivROI = exports.TitleAndValueContainer = exports.Title = exports.SegmentedButtonContainer = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
+exports.TotalsDataContainer = exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonContainer = exports.ControlsContainer = exports.Controls = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
   return props.rootFont;
 }, function (props) {
@@ -20,22 +20,8 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
 var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
 var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 10px 0 0 10px;\n"])));
-var TooltipDivROI = exports.TooltipDivROI = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
-var TooltipLabelROI = exports.TooltipLabelROI = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n"])));
-var TooltipTitleROI = exports.TooltipTitleROI = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n"])));
-var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
-var Title = exports.Title = _styledComponents.default.h4(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
-var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
-var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
-var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
-var DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-top: auto;\n  padding: 0 20px;\n"])));
-var DoughnutChart = exports.DoughnutChart = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 40%;\n  flex-basis: 40%;\n  min-height: 6rem;\n"])));
-var LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  padding-left: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
-var LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.375rem;\n"])));
-var LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
-var LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.875rem;\n"])));
-var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
-  return props.color;
-});
-var LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  gap: 5px;\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  white-space: nowrap;\n"])));
+var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
+var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n  margin: 0 6px 0 0;\n"])));
+var TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  width: fit-content;\n  margin: 0;\n"])));
+var TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  margin: 0;\n"])));
+var ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n"])));

package/dist/stories/components/PerformanceAnalyticsLegend.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PerformanceAnalyticsLegend = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LegendUnionIcon = require("./icons/LegendUnionIcon");
+var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend.style");
+var ICON_TYPE_SQUARE = "Square";
+var ICON_TYPE_LEGEND_UNION_ICON = "LegendUnionIcon";
+
+/* PerformanceAnalyticsLegend */
+var PerformanceAnalyticsLegend = exports.PerformanceAnalyticsLegend = function PerformanceAnalyticsLegend(_ref) {
+  var _ref$legendData = _ref.legendData,
+    legendData = _ref$legendData === void 0 ? [{
+      title: string,
+      iconType: ICON_TYPE_SQUARE,
+      iconColor: "#1F7677"
+    }] : _ref$legendData,
+    width = _ref.width,
+    height = _ref.height;
+  var getLegendData = function getLegendData() {
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.LegendDataContainer, {
+      id: "LegendDataContainer"
+    }, legendData === null || legendData === void 0 ? void 0 : legendData.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.TitleAndIconContainer, {
+        id: "TitleAndIconContainer"
+      }, item.iconType === ICON_TYPE_SQUARE ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.LegendColorRectangle, {
+        id: "LegendColorRectangle",
+        color: item.iconColor
+      }) : item.iconType === ICON_TYPE_LEGEND_UNION_ICON ? /*#__PURE__*/_react.default.createElement(_LegendUnionIcon.LegendUnionIcon, {
+        width: 30,
+        height: 30,
+        color: item.iconColor
+      }) : "", /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.Title, {
+        id: "Title",
+        width: width
+      }, item.title));
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.ControlsContainer, {
+    id: "ControlsContainer",
+    height: height,
+    width: width
+  }, (legendData === null || legendData === void 0 ? void 0 : legendData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.Controls, {
+    id: "Controls",
+    height: height,
+    width: width
+  }, getLegendData()) : "");
+};
+var _default = exports.default = PerformanceAnalyticsLegend;

package/dist/stories/components/PerformanceAnalyticsLegend.style.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleAndIconContainer = exports.Title = exports.LegendDataContainer = exports.LegendColorRectangle = exports.ControlsContainer = exports.Controls = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
+  return props.rootFont;
+}, function (props) {
+  return props.textColor;
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
+var LegendDataContainer = exports.LegendDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n"])));
+var TitleAndIconContainer = exports.TitleAndIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  //padding: 0 20px;\n  margin: 20px 20px 20px 10px;\n"])));
+var Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 27px;\n  margin: 0 0 0 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
+  return props.color;
+});

package/dist/stories/components/PerformanceAnalyticsOneColumn.js

@@ -0,0 +1,312 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PerformanceAnalyticsOneColumn = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
+var _NoDataFoundMessage = require("./NoDataFoundMessage");
+var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
+var _PerformanceAnalyticsOneColumn = require("./PerformanceAnalyticsOneColumn.style");
+var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
+var _CommonFunctions = require("./CommonFunctions");
+var _excluded = ["totalsData", "data", "colorBarchart1", "colorBarchart2", "width", "height", "lineChartValueType", "lineChartValueBold", "topBarPercentSigning", "topBarSigning", "noDataText"];
+var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = function PerformanceAnalyticsOneColumn(_ref) {
+  var _ref$totalsData = _ref.totalsData,
+    totalsData = _ref$totalsData === void 0 ? [{
+      title: 'tile',
+      value: 13,
+      dotCut: true,
+      currency: true,
+      currencyType: 'UGH',
+      growthPercent: 14,
+      showGrowthPercentSign: true
+    }] : _ref$totalsData,
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [{
+      retailer: '',
+      offerType: '',
+      period: '',
+      roiValue: 15,
+      // individual performance
+      packageCostValue: 66,
+      redemptionCostValue: 77,
+      incrementalSalesValue: 89,
+      // % Incremental Growth
+      IncrementalGrowthValue: 99,
+      // % Contribution of Total
+      packageCostPercentValue: 11,
+      redemptionCostPercentValue: 22,
+      incrementalSalesPercentValue: 33,
+      // New / existing Shoppers
+      newShoppersValue: 44,
+      newShoppersPercentValue: 55,
+      existingShoppersValue: 66,
+      existingShoppersPercentValue: 45
+    }] : _ref$data,
+    _ref$colorBarchart = _ref.colorBarchart1,
+    colorBarchart1 = _ref$colorBarchart === void 0 ? '#1F7677' : _ref$colorBarchart,
+    _ref$colorBarchart2 = _ref.colorBarchart2,
+    colorBarchart2 = _ref$colorBarchart2 === void 0 ? '#90CE9C' : _ref$colorBarchart2,
+    width = _ref.width,
+    height = _ref.height,
+    lineChartValueType = _ref.lineChartValueType,
+    lineChartValueBold = _ref.lineChartValueBold,
+    topBarPercentSigning = _ref.topBarPercentSigning,
+    topBarSigning = _ref.topBarSigning,
+    noDataText = _ref.noDataText,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // const {
+  //   totalsData,
+  //   noDataText,
+  //   height,
+  //   width,
+  // } = props;
+  var CustomTooltipBarChart = function CustomTooltipBarChart(_ref2) {
+    var active = _ref2.active,
+      payload = _ref2.payload;
+    if (active && payload && payload.length > 0) {
+      var _payload$0$payload, _payload$0$payload2, _payload$0$payload3, _payload$0$payload4;
+      var totalCostValue = ((_payload$0$payload = payload[0].payload) === null || _payload$0$payload === void 0 ? void 0 : _payload$0$payload.packageCostValue) + ((_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.redemptionCostValue);
+      var packageCostPercent = totalCostValue ? ((_payload$0$payload3 = payload[0].payload) === null || _payload$0$payload3 === void 0 ? void 0 : _payload$0$payload3.packageCostValue) / totalCostValue * 100 : 0;
+      var redemptionCostPercent = totalCostValue ? ((_payload$0$payload4 = payload[0].payload) === null || _payload$0$payload4 === void 0 ? void 0 : _payload$0$payload4.redemptionCostValue) / totalCostValue * 100 : 0;
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
+        id: "LegendColorRectangle",
+        color: "#1F7677"
+      }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "New Shoppers"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.newShoppersValue), "\n              (").concat(payload[0].payload.newShoppersPercentValue.toFixed(2), "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
+        id: "LegendColorRectangle",
+        color: "#90CE9C"
+      }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "Existing Shoppers"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.existingShoppersValue), "\n              (").concat(payload[0].payload.existingShoppersPercentValue.toFixed(2), "%) "))));
+    }
+    return null;
+  };
+  var getTopBarSigning = function getTopBarSigning(signing) {
+    if (signing === 'Dollar sign ($)') {
+      return '$';
+    }
+    if (signing === 'Euro sign (€)') {
+      return '€';
+    }
+    return '';
+  };
+  var CustomizedLabelBarchart = function CustomizedLabelBarchart(props) {
+    var x = props.x,
+      y = props.y,
+      width = props.width,
+      value = props.value,
+      index = props.index;
+    var i = data[index];
+    var totalValue = i.newShoppersValue + i.existingShoppersValue;
+    var radius = 10;
+    var plusSign = value > 0 ? '+' : '';
+    return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
+      x: x + width / 2,
+      y: y - radius,
+      fontWeight: 400,
+      fontSize: "16px",
+      textAnchor: "middle",
+      dominantBaseline: "middle"
+    }, "".concat(getTopBarSigning(topBarSigning)).concat(totalValue).concat(topBarPercentSigning ? '%' : '')));
+  };
+  var CustomizedTickBarChart = function CustomizedTickBarChart(props) {
+    var x = props.x,
+      y = props.y,
+      payload = props.payload;
+    if (data && data.length > 0 && payload) {
+      var retailerData = data.filter(function (item) {
+        return item.retailer === payload.value;
+      });
+      if (retailerData && retailerData.length > 0) {
+        return /*#__PURE__*/_react.default.createElement("g", {
+          transform: "translate(".concat(x, ",").concat(y, ")")
+        }, /*#__PURE__*/_react.default.createElement("text", {
+          x: 0,
+          y: 0,
+          dy: 16,
+          fill: "#212121"
+        }, /*#__PURE__*/_react.default.createElement("tspan", {
+          textAnchor: "middle",
+          x: "0",
+          dy: "50",
+          fontSize: 16,
+          fontWeight: 600
+        }, retailerData[0].retailer), /*#__PURE__*/_react.default.createElement("tspan", {
+          textAnchor: "middle",
+          x: "0",
+          dy: "30",
+          fontSize: 14,
+          fontWeight: 400
+        }, retailerData[0].offerType), /*#__PURE__*/_react.default.createElement("tspan", {
+          textAnchor: "middle",
+          x: "0",
+          dy: "30",
+          fontSize: 14,
+          fontWeight: 400
+        }, retailerData[0].period)));
+      }
+      return null;
+    }
+    return null;
+  };
+  var displayBarChart = function displayBarChart() {
+    if (data && data.length > 0) {
+      var formatedData = data.map(function (item) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          totalValue: item.packageCostValue + item.redemptionCostValue,
+          contributionTotalCostValue: item.contributionPackageCostValue + item.contributionRedemptionCostValue
+        });
+      });
+      return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+        id: "ResponsiveContainer",
+        height: 350,
+        width: width
+      }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+        data: formatedData,
+        maxBarSize: 60,
+        margin: {
+          top: 30,
+          right: 30,
+          left: 20,
+          bottom: 5
+        }
+      }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
+        dataKey: "retailer",
+        tick: CustomizedTickBarChart,
+        tickLine: false,
+        height: 120,
+        stroke: "#D0D0D0",
+        fill: "#212121"
+      }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+        cursor: {
+          fill: 'transparent'
+        },
+        content: CustomTooltipBarChart
+      }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+        dataKey: "existingShoppersValue",
+        fill: colorBarchart1,
+        stackId: "a"
+      }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+        dataKey: "newShoppersValue",
+        fill: colorBarchart2,
+        stackId: "a",
+        radius: [5, 5, 0, 0]
+      }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+        fill: "#212121",
+        dataKey: "totalShoppers",
+        content: CustomizedLabelBarchart
+      }))));
+    }
+    return null;
+  };
+  var displayTotalsData = function displayTotalsData() {
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TotalsDataContainer, {
+      id: "TotalsDataContainer"
+    }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.PerformanceAnalyticsTotals, {
+      totalsData: totalsData,
+      width: width
+    }));
+  };
+  var displayLegendData = function displayLegendData() {
+    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
+      legendData: [{
+        iconColor: '#1F7677',
+        iconType: 'Square',
+        title: '% New Shoppers'
+      }, {
+        iconColor: '#1F7677',
+        iconType: 'LegendUnionIcon',
+        title: '% New Shoppers'
+      }, {
+        iconColor: '#90CE9C',
+        iconType: 'Square',
+        title: '# Existing Shoppers'
+      }, {
+        iconColor: '#9CCB3B',
+        iconType: 'LegendUnionIcon',
+        title: '# Existing Shoppers'
+      }]
+    });
+  };
+  var CustomizedLabelROI = function CustomizedLabelROI(props) {
+    var x = props.x,
+      y = props.y,
+      stroke = props.stroke,
+      value = props.value;
+    return /*#__PURE__*/_react.default.createElement("text", {
+      x: x,
+      y: y,
+      dy: -8,
+      fill: stroke,
+      fontWeight: lineChartValueBold ? 600 : 400,
+      fontSize: 14,
+      textAnchor: "middle"
+    }, "".concat(value).concat(lineChartValueType ? '%' : ''));
+  };
+  var CustomTooltipROI = function CustomTooltipROI(_ref3) {
+    var active = _ref3.active,
+      payload = _ref3.payload;
+    if (active && payload && payload.length > 0) {
+      var _payload$0$payload5;
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipTitle, null, "".concat((_payload$0$payload5 = payload[0].payload) === null || _payload$0$payload5 === void 0 ? void 0 : _payload$0$payload5.retailer)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "Incremental Sales ROI:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value)))));
+    }
+    return null;
+  };
+  var displayLineChartROI = function displayLineChartROI() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+      id: "ResponsiveContainer",
+      height: 50,
+      width: width
+    }, /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
+      data: data,
+      margin: {
+        top: 20,
+        right: 90,
+        left: 90,
+        bottom: 10
+      }
+    }, /*#__PURE__*/_react.default.createElement(_recharts.Line, {
+      type: "monotone",
+      dataKey: "newShoppersPercentValue",
+      fill: colorBarchart2,
+      name: "newShopper",
+      stroke: colorBarchart2
+    }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+      content: /*#__PURE__*/_react.default.createElement(CustomizedLabelROI, null)
+    })))), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+      id: "ResponsiveContainer",
+      height: 50,
+      width: width
+    }, /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
+      data: data,
+      margin: {
+        top: 20,
+        right: 90,
+        left: 90,
+        bottom: 10
+      }
+    }, /*#__PURE__*/_react.default.createElement(_recharts.Line, {
+      type: "monotone",
+      dataKey: "existingShoppersPercentValue",
+      fill: colorBarchart1,
+      name: "existingShopper",
+      stroke: colorBarchart1
+    }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+      content: /*#__PURE__*/_react.default.createElement(CustomizedLabelROI, null)
+    })))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ControlsContainer, {
+    id: "ControlsContainer"
+  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.Controls, {
+    id: "Controls"
+  }, displayTotalsData(), displayLineChartROI(), displayBarChart(), displayLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, null));
+};
+var _default = exports.default = PerformanceAnalyticsOneColumn;
+PerformanceAnalyticsOneColumn.defaultProps = {
+  totalsData: [],
+  noDataText: 'No data'
+};

package/dist/stories/components/PerformanceAnalyticsOneColumn.style.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TotalsDataContainer = exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonContainer = exports.LegendTitle = exports.LegendColorRectangle = exports.ControlsContainer = exports.Controls = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: 'Poppins', sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
+  return props.rootFont;
+}, function (props) {
+  return props.textColor;
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
+var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 10px 0 0 10px;\n"])));
+var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
+var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n  margin: 0 6px 0 0;\n"])));
+var TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  width: fit-content;\n  margin: 0;\n"])));
+var TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  margin: 0;\n"])));
+var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
+  return props.color;
+});
+var ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
+var LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));

package/dist/stories/components/PerformanceAnalyticsTotals.js

@@ -19,24 +19,23 @@ var PerformanceAnalyticsTotals = exports.PerformanceAnalyticsTotals = function P
       dotCut: _propTypes.bool,
       currency: _propTypes.bool,
       currencyType: string | null,
-      growthPercent: _propTypes.number | null
+      growthPercent: _propTypes.number | null,
+      showGrowthPercentSign: _propTypes.bool
     }] : _ref$totalsData,
     _ref$textColor = _ref.textColor,
     textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
     width = _ref.width,
     height = _ref.height;
-  // const getGrowthPercent = (growthPercent) => {
-
-  //     if (!growthPercent) return "";
-
-  //     return 
-  //            <GrowthPercent id="GrowthPercent">
-
-  //        getGrowthPercent(item.growthPercent)
-
-  //   </GrowthPercent> ;
-  // };
-
+  var getGrowthPercent = function getGrowthPercent(growthPercent, showGrowthPercentSign) {
+    if (!growthPercent) {
+      return "";
+    } else {
+      var growthPercentSign = showGrowthPercentSign && growthPercent > 0 ? "+" : "";
+      return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.GrowthPercent, {
+        id: "GrowthPercent"
+      }, "(", growthPercentSign, growthPercent, "%)");
+    }
+  };
   var getTotalsData = function getTotalsData() {
     return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TotalsDataContainer, {
       id: "TotalsDataContainer"
@@ -53,7 +52,7 @@ var PerformanceAnalyticsTotals = exports.PerformanceAnalyticsTotals = function P
         width: width
       }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySign, {
         id: "CurrencySign"
-      }, item.currency ? (0, _CommonFunctions.getCurrencySign)(item.currencyType, item.value) : ""), item.dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), item.dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : "")));
+      }, item.currency ? (0, _CommonFunctions.getCurrencySign)(item.currencyType, item.value) : ""), item.dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), item.dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : "", item.growthPercent ? getGrowthPercent(item.growthPercent, item.showGrowthPercentSign) : "")));
     }));
   };
   return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.ControlsContainer, {

package/dist/stories/components/PerformanceAnalyticsTotals.style.js

@@ -20,9 +20,9 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
 var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;\n"])));
 var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n"])));
-var Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+var Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  line-height: 27px;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
 var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
-var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
-var GrowthPercent = exports.GrowthPercent = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
-var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+var GrowthPercent = exports.GrowthPercent = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
+var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  line-height: 60px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
 var LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.875rem;\n"])));

package/dist/stories/components/icons/ClockIcon.js

@@ -1,24 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ClockIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
 var ClockIcon = exports.ClockIcon = function ClockIcon(_ref) {
   var clicked = _ref.clicked,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? "8" : _ref$width,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? "9" : _ref$height;
-  return /*#__PURE__*/_react.default.createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     d: "M23.25 12C23.25 13.4774 22.959 14.9403 22.3936 16.3052C21.8283 17.6701 20.9996 18.9103 19.955 19.955C18.9103 20.9996 17.6701 21.8283 16.3052 22.3936C14.9403 22.959 13.4774 23.25 12 23.25C10.5226 23.25 9.05972 22.959 7.69481 22.3936C6.3299 21.8283 5.08971 20.9996 4.04505 19.955C3.00039 18.9103 2.17172 17.6701 1.60636 16.3052C1.04099 14.9403 0.75 13.4774 0.75 12C0.75 10.5226 1.04099 9.05972 1.60636 7.69481C2.17172 6.3299 3.00039 5.08971 4.04505 4.04505C5.08971 3.00039 6.3299 2.17172 7.69481 1.60636C9.05972 1.04099 10.5226 0.75 12 0.75C13.4774 0.75 14.9403 1.04099 16.3052 1.60636C17.6701 2.17172 18.9103 3.00039 19.955 4.04505C20.9996 5.08971 21.8283 6.3299 22.3936 7.69481C22.959 9.05972 23.25 10.5226 23.25 12ZM0 12C0 15.1826 1.26428 18.2348 3.51472 20.4853C5.76516 22.7357 8.8174 24 12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12ZM11.625 4.875V12C11.625 12.1266 11.6859 12.2438 11.7938 12.3141L16.2938 15.3141C16.4672 15.4313 16.6969 15.3844 16.8141 15.2109C16.9313 15.0375 16.8844 14.8078 16.7109 14.6906L12.375 11.7984V4.875C12.375 4.66875 12.2063 4.5 12 4.5C11.7937 4.5 11.625 4.66875 11.625 4.875Z",
     fill: "black"
   }));

package/dist/stories/components/icons/LegendUnionIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LegendUnionIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var LegendUnionIcon = exports.LegendUnionIcon = function LegendUnionIcon(_ref) {
+  var clicked = _ref.clicked,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "18" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "5" : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#9CCB3B" : _ref$color;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 18 5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M11.45 2H17C17.2761 2 17.5 2.22386 17.5 2.5C17.5 2.77614 17.2761 3 17 3H11.45C11.2184 4.14112 10.2095 5 9 5C7.79052 5 6.78164 4.14112 6.55001 3H1C0.723858 3 0.5 2.77614 0.5 2.5C0.5 2.22386 0.723858 2 1 2H6.55001C6.78164 0.85888 7.79052 0 9 0C10.2095 0 11.2184 0.85888 11.45 2Z",
+    fill: color
+  }));
+};
+var _default = exports.default = LegendUnionIcon;