sag_components 1.0.283 → 1.0.285

package/dist/stories/components/PerformanceAnalytics.js

@@ -18,7 +18,7 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
 var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
 var _CommonFunctions = require("./CommonFunctions");
 var _PerformanceAnalytics = require("./PerformanceAnalytics.style");
-var _excluded = ["totalsData", "data", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textColor", "width", "height", "lineChartHeight", "noDataText"];
+var _excluded = ["totalsData", "data", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textcolor", "width", "height", "lineChartHeight", "noDataText"];
 var INDIVIDUAL_PERFORMANCE_STR = 'Individual Performance';
 var PERCENT_INCREMENTAL_GROWTH_STR = '% Incremental Growth';
 var PERCENT_CONTRIBUTION_OF_TOTAL_STR = '% Contribution of Total';
@@ -65,8 +65,8 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
     colorBarchart1 = _ref$colorBarchart === void 0 ? '#1F7677' : _ref$colorBarchart,
     _ref$colorBarchart2 = _ref.colorBarchart2,
     colorBarchart2 = _ref$colorBarchart2 === void 0 ? '#90CE9C' : _ref$colorBarchart2,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? '#212121' : _ref$textColor,
+    _ref$textcolor = _ref.textcolor,
+    textcolor = _ref$textcolor === void 0 ? '#212121' : _ref$textcolor,
     width = _ref.width,
     height = _ref.height,
     _ref$lineChartHeight = _ref.lineChartHeight,
@@ -95,18 +95,18 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
       }, {
         value: PERCENT_CONTRIBUTION_OF_TOTAL_STR
       }],
-      backgroundColor: "#F2F2F2",
-      controlRadius: 8,
+      backgroundcolor: "#F2F2F2",
+      controlradius: 8,
       defaultIndex: 0,
       fontSize: 12,
       name: "segmentedDollarsOrUnits",
       onClick: function onClick(event) {
         setSegmentedButtonsFilter(event.value);
       },
-      segmentRadius: 8,
-      selectedSegmentColor: "#ffffff",
-      selectedTextColor: "#212121",
-      unselectedTextColor: "#212121",
+      segmentradius: 8,
+      selectedsegmentcolor: "#ffffff",
+      selectedtextcolor: "#212121",
+      unselectedtextcolor: "#212121",
       width: 490,
       heigth: 14
     }));
@@ -193,7 +193,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
     return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
       x: x + width / 2,
       y: y - radius,
-      fill: textColor,
+      fill: textcolor,
       fontWeight: 400,
       fontSize: "16px",
       textAnchor: "middle",
@@ -358,12 +358,12 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
     id: "ControlsContainer",
     height: height,
     width: width,
-    textColor: textColor
+    textcolor: textcolor
   }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.Controls, {
     id: "Controls"
   }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
-    backgroundColor: "#F2F2F2",
-    controlRadius: 8,
+    backgroundcolor: "#F2F2F2",
+    controlradius: 8,
     defaultIndex: 1,
     fontSize: 14,
     height: 40,
@@ -374,14 +374,14 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
     }, {
       value: 'Units'
     }],
-    segmentRadius: 8,
-    selectedSegmentColor: "#FFFFFF",
-    selectedTextColor: "#212121",
-    unselectedTextColor: "#212121",
+    segmentradius: 8,
+    selectedsegmentcolor: "#FFFFFF",
+    selectedtextcolor: "#212121",
+    unselectedtextcolor: "#212121",
     width: 200
   }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
-    backgroundColor: "#F2F2F2",
-    controlRadius: 8,
+    backgroundcolor: "#F2F2F2",
+    controlradius: 8,
     defaultIndex: 1,
     fontSize: 14,
     height: 40,
@@ -392,14 +392,14 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
     }, {
       value: 'STLY'
     }],
-    segmentRadius: 8,
-    selectedSegmentColor: "#FFFFFF",
-    selectedTextColor: "#212121",
-    unselectedTextColor: "#212121",
+    segmentradius: 8,
+    selectedsegmentcolor: "#FFFFFF",
+    selectedtextcolor: "#212121",
+    unselectedtextcolor: "#212121",
     width: 200
   }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
-    backgroundColor: "#F2F2F2",
-    controlRadius: 8,
+    backgroundcolor: "#F2F2F2",
+    controlradius: 8,
     defaultIndex: 1,
     fontSize: 14,
     height: 40,
@@ -410,10 +410,10 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
     }, {
       value: 'Actual Sales'
     }],
-    segmentRadius: 8,
-    selectedSegmentColor: "#FFFFFF",
-    selectedTextColor: "#212121",
-    unselectedTextColor: "#212121",
+    segmentradius: 8,
+    selectedsegmentcolor: "#FFFFFF",
+    selectedtextcolor: "#212121",
+    unselectedtextcolor: "#212121",
     width: 200
   }), displayTotalsData(), displaySegmentedButtons(), displayLineChartROI(), displayBarChart(), displayLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText

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

@@ -12,13 +12,13 @@ var scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    w
 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;
+  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  width: 100%;\n  height: 100%;\n  padding: 24px 40px;\n  background: white;\n  overflow-y: auto;\n  ", "\n  @media (max-width: 1536px) {\n    padding: 12px 32px;\n  } \n  > #SegmentedButtonContainer {\n    padding-left: 0;\n  }\n"])), scrollableStyles);
+var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  padding: 24px 40px;\n  background: white;\n  overflow-y: auto;\n  ", "\n  @media (max-width: 1536px) {\n    padding: 12px 32px;\n  } \n  > #SegmentedButtonContainer {\n    padding-left: 0;\n    > #Controls {\n      background: #f2f2f2;\n    }\n  }\n"])), scrollableStyles);
 var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 10px 0 0 10px;\n"])));
 var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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(_templateObject5 || (_templateObject5 = (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"])));

package/dist/stories/components/PerformanceAnalyticsLegend.js

@@ -8,8 +8,8 @@ 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";
+var ICON_TYPE_SQUARE = 'Square';
+var ICON_TYPE_LEGEND_UNION_ICON = 'LegendUnionIcon';
 
 /* PerformanceAnalyticsLegend */
 var PerformanceAnalyticsLegend = exports.PerformanceAnalyticsLegend = function PerformanceAnalyticsLegend(_ref) {
@@ -17,16 +17,17 @@ var PerformanceAnalyticsLegend = exports.PerformanceAnalyticsLegend = function P
     legendData = _ref$legendData === void 0 ? [{
       title: string,
       iconType: ICON_TYPE_SQUARE,
-      iconColor: "#1F7677"
+      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) {
+    }, legendData === null || legendData === void 0 ? void 0 : legendData.map(function (item, i) {
       return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.TitleAndIconContainer, {
-        id: "TitleAndIconContainer"
+        id: "TitleAndIconContainer",
+        key: "".concat(item.title + i)
       }, item.iconType === ICON_TYPE_SQUARE ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.LegendColorRectangle, {
         id: "LegendColorRectangle",
         color: item.iconColor
@@ -34,7 +35,7 @@ var PerformanceAnalyticsLegend = exports.PerformanceAnalyticsLegend = function P
         width: 30,
         height: 30,
         color: item.iconColor
-      }) : "", /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.Title, {
+      }) : '', /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.Title, {
         id: "Title",
         width: width
       }, item.title));
@@ -48,6 +49,6 @@ var PerformanceAnalyticsLegend = exports.PerformanceAnalyticsLegend = function P
     id: "Controls",
     height: height,
     width: width
-  }, getLegendData()) : "");
+  }, getLegendData()) : '');
 };
 var _default = exports.default = PerformanceAnalyticsLegend;

package/dist/stories/components/PerformanceAnalyticsTotals.js

@@ -22,26 +22,26 @@ var PerformanceAnalyticsTotals = exports.PerformanceAnalyticsTotals = function P
       growthPercent: _propTypes.number | null,
       showGrowthPercentSign: _propTypes.bool
     }] : _ref$totalsData,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
+    _ref$textcolor = _ref.textcolor,
+    textcolor = _ref$textcolor === void 0 ? '#212121' : _ref$textcolor,
     width = _ref.width,
     height = _ref.height;
   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, "%)");
+      return '';
     }
+    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"
-    }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map(function (item) {
+    }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map(function (item, i) {
       return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TitleAndValueContainer, {
-        id: "TitleAndValueContainer"
+        id: "TitleAndValueContainer",
+        key: "".concat(item.title + i)
       }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Title, {
         id: "Title",
         width: width
@@ -52,18 +52,18 @@ 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.growthPercent ? getGrowthPercent(item.growthPercent, item.showGrowthPercentSign) : "")));
+      }, 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, {
     id: "ControlsContainer",
     height: height,
     width: width,
-    textColor: textColor
+    textcolor: textcolor
   }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Controls, {
     id: "Controls",
     height: height,
     width: width
-  }, getTotalsData()) : "");
+  }, getTotalsData()) : '');
 };
 var _default = exports.default = PerformanceAnalyticsTotals;

package/dist/stories/components/SegmentedButton.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _SegmentedButton = require("./SegmentedButton.style");
-var _excluded = ["name", "options", "width", "height", "controlRadius", "segmentRadius", "fontSize", "backgroundColor", "selectedSegmentColor", "selectedTextColor", "unselectedTextColor", "defaultIndex", "onClick"];
+var _excluded = ["name", "options", "width", "height", "controlradius", "segmentradius", "fontSize", "backgroundcolor", "selectedsegmentcolor", "selectedtextcolor", "unselectedtextcolor", "defaultIndex", "onClick"];
 /* eslint-disable react/require-default-props */
 /* SegmentedButton */
 var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
@@ -21,20 +21,20 @@ var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
     width = _ref$width === void 0 ? 120 : _ref$width,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 40 : _ref$height,
-    _ref$controlRadius = _ref.controlRadius,
-    controlRadius = _ref$controlRadius === void 0 ? 8 : _ref$controlRadius,
-    _ref$segmentRadius = _ref.segmentRadius,
-    segmentRadius = _ref$segmentRadius === void 0 ? 8 : _ref$segmentRadius,
+    _ref$controlradius = _ref.controlradius,
+    controlradius = _ref$controlradius === void 0 ? 8 : _ref$controlradius,
+    _ref$segmentradius = _ref.segmentradius,
+    segmentradius = _ref$segmentradius === void 0 ? 8 : _ref$segmentradius,
     _ref$fontSize = _ref.fontSize,
     fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? '#ECF0FF' : _ref$backgroundColor,
-    _ref$selectedSegmentC = _ref.selectedSegmentColor,
-    selectedSegmentColor = _ref$selectedSegmentC === void 0 ? '#3a9df9' : _ref$selectedSegmentC,
-    _ref$selectedTextColo = _ref.selectedTextColor,
-    selectedTextColor = _ref$selectedTextColo === void 0 ? 'white' : _ref$selectedTextColo,
-    _ref$unselectedTextCo = _ref.unselectedTextColor,
-    unselectedTextColor = _ref$unselectedTextCo === void 0 ? 'black' : _ref$unselectedTextCo,
+    _ref$backgroundcolor = _ref.backgroundcolor,
+    backgroundcolor = _ref$backgroundcolor === void 0 ? '#ECF0FF' : _ref$backgroundcolor,
+    _ref$selectedsegmentc = _ref.selectedsegmentcolor,
+    selectedsegmentcolor = _ref$selectedsegmentc === void 0 ? '#3a9df9' : _ref$selectedsegmentc,
+    _ref$selectedtextcolo = _ref.selectedtextcolor,
+    selectedtextcolor = _ref$selectedtextcolo === void 0 ? 'white' : _ref$selectedtextcolo,
+    _ref$unselectedtextco = _ref.unselectedtextcolor,
+    unselectedtextcolor = _ref$unselectedtextco === void 0 ? 'black' : _ref$unselectedtextco,
     _ref$defaultIndex = _ref.defaultIndex,
     defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
     onClick = _ref.onClick,
@@ -77,29 +77,28 @@ var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
       value: value
     });
   };
-  var segmentWidth = 120;
+  var segmentwidth = 120;
   if (options && options.length > 0 && width && width > 0) {
-    segmentWidth = width / options.length;
+    segmentwidth = width / options.length;
   }
   return /*#__PURE__*/_react.default.createElement(_SegmentedButton.ButtonsControlsContainer, {
     fontSize: fontSize,
     ref: controlRef
   }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.Controls, {
     id: "Controls",
-    selectedSegmentColor: selectedSegmentColor,
-    segmentRadius: segmentRadius,
-    controlRadius: controlRadius,
-    segmentWidth: segmentWidth,
+    selectedsegmentcolor: selectedsegmentcolor,
+    segmentradius: segmentradius,
+    controlradius: controlradius,
+    segmentwidth: segmentwidth,
     className: "controls ".concat(componentReady.current ? 'ready' : 'idle')
   }, optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.map(function (item, i) {
     return /*#__PURE__*/_react.default.createElement(_SegmentedButton.Segment, {
       id: "Segment",
       key: item.id,
-      backgroundColor: backgroundColor,
-      selectedSegmentColor: selectedSegmentColor,
-      segmentRadius: segmentRadius,
-      controlRadius: controlRadius,
-      segmentWidth: segmentWidth,
+      backgroundcolor: backgroundcolor,
+      selectedsegmentcolor: selectedsegmentcolor,
+      controlradius: controlradius,
+      segmentwidth: segmentwidth,
       className: "".concat(activeIndex === i ? 'active' : 'inactive'),
       ref: item.ref
     }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.ControlsInput, {
@@ -113,8 +112,8 @@ var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
       checked: i === activeIndex
     }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentLabel, {
       id: "SegmentLabel",
-      selectedTextColor: selectedTextColor,
-      unselectedTextColor: unselectedTextColor,
+      selectedtextcolor: selectedtextcolor,
+      unselectedtextcolor: unselectedtextcolor,
       segmentheight: height / 5,
       className: "".concat(activeIndex === i ? 'active' : 'inactive', " "),
       htmlFor: item.value

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

@@ -14,20 +14,20 @@ var ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledCompone
   return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat('', 'px Poppins, sans-serif');
 });
 var Controls = exports.Controls = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  justify-content: space-between;  \n  background: ", ";\n  border-radius:  ", "; //12px\n  // max-width: 500px; //use this to limit max lenght of the control \n  padding: 6px;\n  overflow: hidden;\n  position: relative;\n  &.controls::before {\n    content: \"\";\n    background:  ", "; /* #3a9df9;  #5465ff;*/\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n    border-radius:  ", "; //12px\n    width: var(--highlight-width);\n    transform: translateX(var(--highlight-x-pos));\n    position: absolute;\n    top: 3px;\n    bottom: 3px;\n    left: 0; \n    z-index: 0;\n  }\n  &.controls.ready::before {\n    transition: transform 0.3s ease, width 0.3s ease;\n  }\n"])), function (props) {
-  return props.backgroundColor;
+  return props.backgroundcolor;
 }, function (props) {
-  return props.controlRadius.toString().concat('', 'px');
+  return props.controlradius.toString().concat('', 'px');
 }, function (props) {
-  return props.selectedSegmentColor;
+  return props.selectedsegmentcolor;
 }, function (props) {
-  return props.segmentRadius.toString().concat('', 'px');
+  return props.segmentradius.toString().concat('', 'px');
 });
 var ControlsInput = exports.ControlsInput = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  opacity: 0;\n  margin: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  cursor: pointer;\n  height: 100%;\n"])));
 var Segment = exports.Segment = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 100%; uncomment for each segment to have matching width */  \n  min-width: ", ";  //120px;\n  position: relative;\n  text-align: center;\n  z-index: 1;  \n"])), function (props) {
-  return props.segmentWidth.toString().concat('', 'px');
+  return props.segmentwidth.toString().concat('', 'px');
 });
 var SegmentLabel = exports.SegmentLabel = _styledComponents.default.label(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: block;\n  transition: color 0.5s ease;\n  &.active {\n    color: ", ";\n  }\n  &.inactive {\n    color: ", ";\n  }\n"])), function (props) {
-  return props.selectedTextColor;
+  return props.selectedtextcolor;
 }, function (props) {
-  return props.unselectedTextColor;
+  return props.unselectedtextcolor;
 });

package/dist/stories/components/TextField.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TextField = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _TextFieldStyle = require("./TextField.style.js");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
@@ -19,20 +18,21 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
 var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
 var _styles = require("@mui/material/styles");
+var _TextField2 = require("./TextField.style");
 /**
  *  SAG TextField
  */
 var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "100%" : _ref$width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "49px" : _ref$height,
+    height = _ref$height === void 0 ? '49px' : _ref$height,
     label = _ref.label,
     labelColor = _ref.labelColor,
     shape = _ref.shape,
     size = _ref.size,
     _ref$placeHolder = _ref.placeHolder,
-    placeHolder = _ref$placeHolder === void 0 ? "Type..." : _ref$placeHolder,
+    placeHolder = _ref$placeHolder === void 0 ? 'Type...' : _ref$placeHolder,
     _ref$passwordField = _ref.passwordField,
     passwordField = _ref$passwordField === void 0 ? false : _ref$passwordField,
     defaultValue = _ref.defaultValue,
@@ -40,7 +40,7 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
     required = _ref.required,
     inputRef = _ref.inputRef,
     _ref$allowedInput = _ref.allowedInput,
-    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
+    allowedInput = _ref$allowedInput === void 0 ? 'all' : _ref$allowedInput,
     onChange = _ref.onChange,
     _ref$multiline = _ref.multiline,
     multiline = _ref$multiline === void 0 ? false : _ref$multiline;
@@ -78,7 +78,7 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: "#db3131"
+            color: '#db3131'
           }
         }
       }
@@ -88,75 +88,77 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
     event.preventDefault();
   };
 
-  //defines shape: squire or round
+  // defines shape: squire or round
   var getTextFieldStyle = function getTextFieldStyle() {
-    if (shape === "round") {
+    if (shape === 'round') {
       // round
       return {
-        "& .MuiOutlinedInput-root": {
+        '& .MuiOutlinedInput-root': {
           width: {
             width: width
           },
           height: {
             height: height
           },
-          paddingTop: multiline ? "12px" : "0",
+          paddingTop: multiline ? '12px' : '0',
           marginTop: 0,
-          borderColor: "green",
-          borderRadius: "12px",
+          borderColor: 'green',
+          borderRadius: '12px',
           legend: {
-            marginLeft: "6px"
+            marginLeft: '6px'
           },
-          alignItems: multiline ? "flex-start" : "center"
+          alignitems: multiline ? 'flex-start' : 'center'
         },
-        "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "10px !important",
-          borderRadius: "12px"
+        '& .MuiAutocomplete-inputRoot': {
+          paddingLeft: '10px !important',
+          borderRadius: '12px'
         },
-        "& .MuiInputLabel-outlined": {
-          paddingLeft: "10px",
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
           color: labelColor,
-          paddingTop: "4px"
+          paddingTop: '4px'
         },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "1px",
-          paddingLeft: "4px",
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
           paddingRight: 0,
-          background: "white",
+          background: 'white',
           paddingTop: 0
         }
       };
-    } else {
-      //square
-      return null;
     }
+    // square
+    return null;
   };
   var isInputAllowed = function isInputAllowed(inputChar) {
     var NUMERIC_REGEX = /^[0-9-]+$/;
     var ALPHA_REGEX = /^[a-zA-Z]+$/;
     var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
-      case "all":
+      case 'all':
         return true;
-      case "alpha":
-        if (ALPHA_REGEX.test(inputChar)) return true;else return false;
-      case "numeric":
-        if (NUMERIC_REGEX.test(inputChar)) return true;else return false;
-      case "alphaNumeric":
-        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;else return false;
+      case 'alpha':
+        if (ALPHA_REGEX.test(inputChar)) return true;
+        return false;
+      case 'numeric':
+        if (NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      case 'alphaNumeric':
+        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
       default:
         return true;
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_TextFieldStyle.TextFieldContainer, {
+  return /*#__PURE__*/_react.default.createElement(_TextField2.TextFieldContainer, {
     id: "TextFieldContainer",
     width: width
   }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
     theme: theme
   }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     sx: {
-      display: "flex",
-      flexWrap: "wrap"
+      display: 'flex',
+      flexWrap: 'wrap'
     }
   }, /*#__PURE__*/_react.default.createElement("div", null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
     key: resetDefaultValue,
@@ -179,21 +181,15 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
       onChangeHandler(event);
     },
     InputProps: {
-      textAlign: "flex-start",
-      alignItems: "flex-start",
-      alignContent: "flex-start",
-      disableUnderline: true,
+      textalign: 'flex-start',
+      alignitems: 'flex-start',
+      aligncontent: 'flex-start',
+      disableunderline: true.toString(),
       style: {
-        //color: 'red',
-        textAlign: "start"
+        // color: 'red',
+        textalign: 'start'
       }
     }
-
-    // style={{
-    //   // height: '50px',
-    //   // width: '50px',
-    //   textAlign: 'start',
-    //   justifyContent: 'start'}}
   }), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
     sx: getTextFieldStyle(),
     variant: "outlined"
@@ -201,7 +197,7 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
     htmlFor: "outlined-adornment-password"
   }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
     id: "outlined-adornment-password",
-    type: showPassword ? "text" : "password",
+    type: showPassword ? 'text' : 'password',
     size: size,
     endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
       position: "end"

package/dist/stories/components/TitleDescription.js

@@ -14,7 +14,7 @@ var _HannafordIcon = require("./icons/HannafordIcon");
 var _StopAndShopIcon = require("./icons/StopAndShopIcon");
 var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
 var _TitleDescription = require("./TitleDescription.style");
-var _excluded = ["showRetailerIcon", "data", "viewCreativeOnClick", "width", "height", "textColor", "disabled"];
+var _excluded = ["showRetailerIcon", "data", "viewCreativeOnClick", "width", "height", "textcolor", "disabled"];
 /* TitleDescription */
 var TitleDescription = exports.TitleDescription = function TitleDescription(_ref) {
   var _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
@@ -26,8 +26,8 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
     width = _ref$width === void 0 ? '100%' : _ref$width,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100%' : _ref$height,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? '#212121' : _ref$textColor,
+    _ref$textcolor = _ref.textcolor,
+    textcolor = _ref$textcolor === void 0 ? '#212121' : _ref$textcolor,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -80,7 +80,7 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
     id: "MainContainer",
     height: height,
     width: width,
-    textColor: textColor
+    textcolor: textcolor
   }, /*#__PURE__*/_react.default.createElement(_TitleDescription.PanelContainer, {
     id: "PanelContainer"
   }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventNameAndViewCreativeContainer, {

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

@@ -9,7 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 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, _templateObject22, _templateObject23, _templateObject24;
 var MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n"])), function (props) {
-  return props.textColor ? props.textColor : '#000';
+  return props.textcolor ? props.textcolor : '#000';
 }, function (props) {
   return props.width;
 }, function (props) {
@@ -26,9 +26,9 @@ var ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.de
 });
 var ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0 5px;\n  font-weight: 400;\n"])));
 var FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 0.5rem;\n"])));
-var FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  //color: #1b30aa;\n  margin: 0;\n"])));
+var FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  margin: 0;\n"])));
 var FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
-var Retailer = exports.Retailer = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
+var Retailer = exports.Retailer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
 var Space = exports.Space = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
 var RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
 var ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 75%;\n"])));