sag_components 1.0.396 → 1.0.398

package/dist/stories/components/ReportTable.js

@@ -8,32 +8,29 @@ exports.default = exports.ReportTable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ReportTable = require("./ReportTable.style");
 var _InfoIcon = require("./icons/InfoIcon");
-var ReportTable = exports.ReportTable = function ReportTable(props) {
-  var tableData = props.tableData,
-    maxColumnsNumber = props.maxColumnsNumber;
-  var columnsNumber = tableData.columnsHeadings.length;
-  var tableWidthSize = 100 / maxColumnsNumber * columnsNumber;
+const ReportTable = props => {
+  const {
+    tableData,
+    maxColumnsNumber
+  } = props;
+  const columnsNumber = tableData.columnsHeadings.length;
+  const tableWidthSize = 100 / maxColumnsNumber * columnsNumber;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
     maxColumnsNumber: maxColumnsNumber,
     columnsNumber: columnsNumber
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
     tableWidthSize: tableWidthSize
-  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, tableData.columnsHeadings.map(function (headline, index) {
-    return /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
-      key: index
-    }, headline.label);
-  }))), /*#__PURE__*/_react.default.createElement("tbody", null, tableData.rowsValues.map(function (data, index) {
-    return /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
-      key: index
-    }, Object.values(data).map(function (value, dataIndex) {
-      return /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
-        key: dataIndex
-      }, value);
-    }));
-  })))), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+    key: index
+  }, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, tableData.rowsValues.map((data, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
+    key: index
+  }, Object.values(data).map((value, dataIndex) => /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
+    key: dataIndex
+  }, value))))))), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     color: "#1B30AA"
   }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")));
 };
+exports.ReportTable = ReportTable;
 var _default = exports.default = ReportTable;
 ReportTable.defaultProps = {
   tableData: {

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

@@ -8,17 +8,11 @@ exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = ex
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-var scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    height: 10px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
-var TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n  border: 1px solid #dddddd;\n  border-radius: ", ";\n  overflow-x: ", ";\n  ", "\n\n"])), function (props) {
-  return props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px';
-}, function (props) {
-  return props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden';
-}, scrollableStyles);
-var Table = exports.Table = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  table-layout: fixed;\n  position: relative;\n  background-color: white;\n  border-collapse: collapse; \n  th,\n  td {\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), function (props) {
-  return "".concat(props.tableWidthSize, "%");
-});
-var Th = exports.Th = _styledComponents.default.th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 12px;\n  font-family: \"poppins\";\n  color: #212121;\n  padding-top: 16px;\n  padding-left: 40px;\n"])));
-var Td = exports.Td = _styledComponents.default.td(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 12px;\n  font-family: \"poppins\";\n  padding-top: 20px;\n  padding-bottom: 20px;\n  padding-top: 16px;\n  padding-left: 40px;\n"])));
-var Tr = exports.Tr = _styledComponents.default.tr(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 1px solid #F3F4F6;\n  &:last-of-type {\n    &::after {\n      content: \"\";\n      position: absolute;\n      pointer-events: none;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(transparent 50%, white);\n      z-index: 2;\n    }\n  }\n"])));
-var InfoText = exports.InfoText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  font-family: \"poppins\";\n  color: #212121;\n  padding-top: 20px;\n  padding-bottom: 20px;\n"])));
-var InfoBlock = exports.InfoBlock = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  background-color: white;\n"])));
+const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    height: 10px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n  border: 1px solid #dddddd;\n  border-radius: ", ";\n  overflow-x: ", ";\n  ", "\n\n"])), props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px', props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden', scrollableStyles);
+const Table = exports.Table = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  table-layout: fixed;\n  position: relative;\n  background-color: white;\n  border-collapse: collapse; \n  th,\n  td {\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), props => "".concat(props.tableWidthSize, "%"));
+const Th = exports.Th = _styledComponents.default.th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 12px;\n  font-family: \"poppins\";\n  color: #212121;\n  padding-top: 16px;\n  padding-left: 40px;\n"])));
+const Td = exports.Td = _styledComponents.default.td(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 12px;\n  font-family: \"poppins\";\n  padding-top: 20px;\n  padding-bottom: 20px;\n  padding-top: 16px;\n  padding-left: 40px;\n"])));
+const Tr = exports.Tr = _styledComponents.default.tr(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 1px solid #F3F4F6;\n  &:last-of-type {\n    &::after {\n      content: \"\";\n      position: absolute;\n      pointer-events: none;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(transparent 50%, white);\n      z-index: 2;\n    }\n  }\n"])));
+const InfoText = exports.InfoText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  font-family: \"poppins\";\n  color: #212121;\n  padding-top: 20px;\n  padding-bottom: 20px;\n"])));
+const InfoBlock = exports.InfoBlock = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  background-color: white;\n"])));

package/dist/stories/components/SegmentedButton.js

@@ -1,70 +1,68 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SegmentedButton = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _SegmentedButton = require("./SegmentedButton.style");
 /* eslint-disable react/require-default-props */
 
 /* SegmentedButton */
-var SegmentedButton = exports.SegmentedButton = function SegmentedButton(props) {
-  var name = props.name,
-    options = props.options,
-    width = props.width,
-    height = props.height,
-    controlradius = props.controlradius,
-    segmentradius = props.segmentradius,
-    fontSize = props.fontSize,
-    selectedsegmentcolor = props.selectedsegmentcolor,
-    selectedtextcolor = props.selectedtextcolor,
-    unselectedtextcolor = props.unselectedtextcolor,
-    defaultIndex = props.defaultIndex,
-    onClick = props.onClick;
-  var _useState = (0, _react.useState)(defaultIndex),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeIndex = _useState2[0],
-    setActiveIndex = _useState2[1];
-  var controlRef = (0, _react.useRef)();
-  var componentReady = (0, _react.useRef)();
-  var optionsRef = options === null || options === void 0 ? void 0 : options.map(function (item, i) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-      id: i,
-      ref: (0, _react.useRef)()
-    });
-  });
+const SegmentedButton = props => {
+  const {
+    name,
+    options,
+    width,
+    height,
+    controlradius,
+    segmentradius,
+    fontSize,
+    selectedsegmentcolor,
+    selectedtextcolor,
+    unselectedtextcolor,
+    defaultIndex,
+    onClick
+  } = props;
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(defaultIndex);
+  const controlRef = (0, _react.useRef)();
+  const componentReady = (0, _react.useRef)();
+  const optionsRef = options === null || options === void 0 ? void 0 : options.map((item, i) => ({
+    ...item,
+    id: i,
+    ref: (0, _react.useRef)()
+  }));
 
   // Determine when the component is "ready"
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     componentReady.current = true;
   }, []);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (defaultIndex >= 0 && defaultIndex < (options === null || options === void 0 ? void 0 : options.length)) {
       setActiveIndex(defaultIndex);
     }
   }, [defaultIndex]);
-  (0, _react.useEffect)(function () {
-    var activeSegmentRef = optionsRef[activeIndex].ref;
-    var _activeSegmentRef$cur = activeSegmentRef.current,
-      offsetWidth = _activeSegmentRef$cur.offsetWidth,
-      offsetLeft = _activeSegmentRef$cur.offsetLeft;
-    var style = controlRef.current.style;
+  (0, _react.useEffect)(() => {
+    const activeSegmentRef = optionsRef[activeIndex].ref;
+    const {
+      offsetWidth,
+      offsetLeft
+    } = activeSegmentRef.current;
+    const {
+      style
+    } = controlRef.current;
     style.setProperty('--highlight-width', "".concat(offsetWidth, "px"));
     style.setProperty('--highlight-x-pos', "".concat(offsetLeft, "px"));
   }, [activeIndex, controlRef, optionsRef]);
-  var onInputChangeHandler = function onInputChangeHandler(value, index) {
+  const onInputChangeHandler = (value, index) => {
     setActiveIndex(index);
     onClick({
-      index: index,
-      value: value
+      index,
+      value
     });
   };
-  var segmentwidth = 120;
+  let segmentwidth = 120;
   if (options && options.length > 0 && width && width > 0) {
     segmentwidth = width / options.length;
   }
@@ -78,34 +76,31 @@ var SegmentedButton = exports.SegmentedButton = function SegmentedButton(props)
     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,
-      selectedsegmentcolor: selectedsegmentcolor,
-      controlradius: controlradius,
-      segmentwidth: segmentwidth,
-      className: "".concat(activeIndex === i ? 'active' : 'inactive'),
-      ref: item.ref
-    }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.ControlsInput, {
-      type: "radio",
-      value: item.value,
-      id: item.id,
-      name: name,
-      onChange: function onChange() {
-        return onInputChangeHandler(item.value, item.id);
-      },
-      checked: i === activeIndex
-    }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentLabel, {
-      id: "SegmentLabel",
-      selectedtextcolor: selectedtextcolor,
-      unselectedtextcolor: unselectedtextcolor,
-      segmentheight: height / 5,
-      className: "".concat(activeIndex === i ? 'active' : 'inactive', " "),
-      htmlFor: item.value
-    }, item.value));
-  })));
+  }, optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.map((item, i) => /*#__PURE__*/_react.default.createElement(_SegmentedButton.Segment, {
+    id: "Segment",
+    key: item.id,
+    selectedsegmentcolor: selectedsegmentcolor,
+    controlradius: controlradius,
+    segmentwidth: segmentwidth,
+    className: "".concat(activeIndex === i ? 'active' : 'inactive'),
+    ref: item.ref
+  }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.ControlsInput, {
+    type: "radio",
+    value: item.value,
+    id: item.id,
+    name: name,
+    onChange: () => onInputChangeHandler(item.value, item.id),
+    checked: i === activeIndex
+  }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentLabel, {
+    id: "SegmentLabel",
+    selectedtextcolor: selectedtextcolor,
+    unselectedtextcolor: unselectedtextcolor,
+    segmentheight: height / 5,
+    className: "".concat(activeIndex === i ? 'active' : 'inactive', " "),
+    htmlFor: item.value
+  }, item.value)))));
 };
+exports.SegmentedButton = SegmentedButton;
 SegmentedButton.defaultProps = {
   name: '',
   options: [{
@@ -124,6 +119,6 @@ SegmentedButton.defaultProps = {
   selectedtextcolor: '#212121',
   unselectedtextcolor: 'black',
   defaultIndex: 0,
-  onClick: function onClick() {}
+  onClick: () => {}
 };
 var _default = exports.default = SegmentedButton;

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

@@ -8,22 +8,12 @@ exports.SegmentedButtonGroup = exports.SegmentLabel = exports.Segment = exports.
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var SegmentedButtonGroup = exports.SegmentedButtonGroup = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 28px;\n  @media (max-width: 1536px) {\n    gap: 20px;\n  }\n  @media (max-width: 1366px) {\n    gap: 17px;\n  }\n"])));
-var ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  font: ", "; \n  margin: 0;\n  --highlight-width: auto;\n  --highlight-x-pos: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  float: left;\n\n  &:not(:first-of-type) {\n    padding-left: 40px;\n    @media (max-width: 1536px) {\n      padding-left: 35px;\n    }\n    @media (max-width: 1366px) {\n      padding-left: 24px;\n    }\n  }\n"])), function (props) {
+const SegmentedButtonGroup = exports.SegmentedButtonGroup = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 28px;\n  @media (max-width: 1536px) {\n    gap: 20px;\n  }\n  @media (max-width: 1366px) {\n    gap: 17px;\n  }\n"])));
+const ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  font: ", "; \n  margin: 0;\n  --highlight-width: auto;\n  --highlight-x-pos: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  float: left;\n\n  &:not(:first-of-type) {\n    padding-left: 40px;\n    @media (max-width: 1536px) {\n      padding-left: 35px;\n    }\n    @media (max-width: 1366px) {\n      padding-left: 24px;\n    }\n  }\n"])), props => {
   var _props$fontSize;
   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: #f2f2f2;\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    color: #212121;\n    background: #FFFFFF;\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.controlradius.toString().concat('', 'px');
-}, function (props) {
-  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');
-});
-var SegmentLabel = exports.SegmentLabel = _styledComponents.default.label(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: block;\n  padding: 0 6px;\n  transition: color 0.5s ease;\n  &.active {\n    color: ", ";\n  }\n  &.inactive {\n    color: ", ";\n  }\n"])), function (props) {
-  return props.selectedtextcolor;
-}, function (props) {
-  return props.unselectedtextcolor;
-});
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  justify-content: space-between;  \n  background: #f2f2f2;\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    color: #212121;\n    background: #FFFFFF;\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"])), props => props.controlradius.toString().concat('', 'px'), props => props.segmentradius.toString().concat('', 'px'));
+const 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"])));
+const 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"])), props => props.segmentwidth.toString().concat('', 'px'));
+const SegmentLabel = exports.SegmentLabel = _styledComponents.default.label(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: block;\n  padding: 0 6px;\n  transition: color 0.5s ease;\n  &.active {\n    color: ", ";\n  }\n  &.inactive {\n    color: ", ";\n  }\n"])), props => props.selectedtextcolor, props => props.unselectedtextcolor);

package/dist/stories/components/TextField.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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.TextField = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -22,41 +21,27 @@ 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,
-    _ref$height = _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 ? 'Enter your email address' : _ref$placeHolder,
-    _ref$passwordField = _ref.passwordField,
-    passwordField = _ref$passwordField === void 0 ? false : _ref$passwordField,
-    defaultValue = _ref.defaultValue,
-    resetDefaultValue = _ref.resetDefaultValue,
-    required = _ref.required,
-    inputRef = _ref.inputRef,
-    _ref$allowedInput = _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;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    currentInputValue = _useState2[0],
-    setCurrentInputValue = _useState2[1];
-  var _React$useState = _react.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    showPassword = _React$useState2[0],
-    setShowPassword = _React$useState2[1];
-  var handleClickShowPassword = function handleClickShowPassword() {
-    return setShowPassword(function (show) {
-      return !show;
-    });
-  };
+const TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    width = '100%',
+    height = '49px',
+    label,
+    labelColor,
+    shape,
+    size,
+    placeHolder = 'Enter your email address',
+    passwordField = false,
+    defaultValue,
+    resetDefaultValue,
+    required,
+    inputRef,
+    allowedInput = 'all',
+    onChange,
+    multiline = false
+  } = _ref;
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [showPassword, setShowPassword] = _react.default.useState(false);
+  const handleClickShowPassword = () => setShowPassword(show => !show);
 
   // useEffect(() => {
   //   const delayDebounceFn = setTimeout(() => {
@@ -66,14 +51,14 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
   //   return () => clearTimeout(delayDebounceFn);
   // }, [currentInputValue]);
 
-  var onChangeHandler = function onChangeHandler(event) {
+  const onChangeHandler = event => {
     onChange(event);
     setCurrentInputValue({
-      event: event,
+      event,
       value: event.target.value
     });
   };
-  var theme = (0, _styles.createTheme)({
+  const theme = (0, _styles.createTheme)({
     components: {
       MuiFormLabel: {
         styleOverrides: {
@@ -84,21 +69,21 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
       }
     }
   });
-  var handleMouseDownPassword = function handleMouseDownPassword(event) {
+  const handleMouseDownPassword = event => {
     event.preventDefault();
   };
 
   // defines shape: squire or round
-  var getTextFieldStyle = function getTextFieldStyle() {
+  const getTextFieldStyle = () => {
     if (shape === 'round') {
       // round
       return {
         '& .MuiOutlinedInput-root': {
           width: {
-            width: width
+            width
           },
           height: {
-            height: height
+            height
           },
           paddingTop: multiline ? '12px' : '0',
           marginTop: 0,
@@ -136,10 +121,10 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
     // 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-]+$/;
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
       case 'all':
         return true;
@@ -178,12 +163,12 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
     required: required,
     inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
     ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: function onKeyDown(event) {
+    onKeyDown: event => {
       if (!isInputAllowed(event.key)) {
         event.preventDefault();
       }
     },
-    onChange: function onChange(event) {
+    onChange: event => {
       onChangeHandler(event);
     },
     InputProps: {
@@ -218,12 +203,12 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
     multiline: multiline,
     inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
     ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: function onKeyDown(event) {
+    onKeyDown: event => {
       if (!isInputAllowed(event.key)) {
         event.preventDefault();
       }
     },
-    onChange: function onChange(event) {
+    onChange: event => {
       onChangeHandler(event);
     }
   }))))));

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

@@ -10,6 +10,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 //import './font.css';
 
-var TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: flex-start;\n  justify-content: flex-start;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), function (props) {
-  return props.width;
-});
+const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: flex-start;\n  justify-content: flex-start;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);

package/dist/stories/components/TitleDescription.js

@@ -1,13 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TitleDescription = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _EyeIcon = require("./icons/EyeIcon");
 var _FoodLionIcon = require("./icons/FoodLionIcon");
@@ -20,41 +17,36 @@ var _ComboBoxArrowUpIcon = require("./icons/ComboBoxArrowUpIcon");
 var _ListBox = require("./ListBox");
 var _TitleDescription = require("./TitleDescription.style");
 /* TitleDescription */
-var TitleDescription = exports.TitleDescription = function TitleDescription(props) {
+const TitleDescription = props => {
   var _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
-  var showRetailerIcon = props.showRetailerIcon,
-    showPeriodIcon = props.showPeriodIcon,
-    viewCreativeRetailersData = props.viewCreativeRetailersData,
-    data = props.data,
-    viewCreativeOnClick = props.viewCreativeOnClick,
-    width = props.width,
-    height = props.height,
-    textcolor = props.textcolor,
-    disabled = props.disabled;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    retailersDataState = _useState2[0],
-    setRetailersDataState = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    viewCreativeListBoxOpenedState = _useState4[0],
-    setViewCreativeListBoxOpenedState = _useState4[1];
-  var viewCreativeContainerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    var newData = [];
+  const {
+    showRetailerIcon,
+    showPeriodIcon,
+    viewCreativeRetailersData,
+    data,
+    viewCreativeOnClick,
+    width,
+    height,
+    textcolor,
+    disabled
+  } = props;
+  const [retailersDataState, setRetailersDataState] = (0, _react.useState)(null);
+  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = (0, _react.useState)(false);
+  const viewCreativeContainerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    let newData = [];
     if (viewCreativeRetailersData && viewCreativeRetailersData.length > 0) {
-      newData = viewCreativeRetailersData === null || viewCreativeRetailersData === void 0 ? void 0 : viewCreativeRetailersData.map(function (item) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-          checked: false,
-          disabled: false
-        });
-      });
+      newData = viewCreativeRetailersData === null || viewCreativeRetailersData === void 0 ? void 0 : viewCreativeRetailersData.map(item => ({
+        ...item,
+        checked: false,
+        disabled: false
+      }));
       setRetailersDataState(newData);
     } else {
       setRetailersDataState(null);
     }
   }, [viewCreativeRetailersData]);
-  var getRetailerIcon = function getRetailerIcon(retailerName) {
+  const getRetailerIcon = retailerName => {
     switch (retailerName) {
       case 'Food Lion':
         return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
@@ -99,7 +91,7 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(prop
         }, " | "));
     }
   };
-  var viewCreativeOnClickHandler = function viewCreativeOnClickHandler() {
+  const viewCreativeOnClickHandler = () => {
     if (retailersDataState && retailersDataState.length > 0) {
       setViewCreativeListBoxOpenedState(!viewCreativeListBoxOpenedState);
     } else {
@@ -108,24 +100,28 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(prop
       });
     }
   };
-  var listBoxViewCreativeOnClickHandler = function listBoxViewCreativeOnClickHandler(props) {
+  const listBoxViewCreativeOnClickHandler = props => {
     var _props$selectedData, _props$selectedData2;
-    var selectedRetailer = ((_props$selectedData = props.selectedData) === null || _props$selectedData === void 0 ? void 0 : _props$selectedData.length) > 0 ? props.selectedData[0].label : null;
+    const selectedRetailer = ((_props$selectedData = props.selectedData) === null || _props$selectedData === void 0 ? void 0 : _props$selectedData.length) > 0 ? props.selectedData[0].label : null;
     if (selectedRetailer) {
       viewCreativeOnClick({
-        selectedRetailer: selectedRetailer
+        selectedRetailer
       });
     }
     if (((_props$selectedData2 = props.selectedData) === null || _props$selectedData2 === void 0 ? void 0 : _props$selectedData2.length) > 0) {
       setViewCreativeListBoxOpenedState(false);
     }
   };
-  var getViewCreativeContainerLeft = function getViewCreativeContainerLeft() {
-    var offsetLeft = viewCreativeContainerRef.current.offsetLeft;
+  const getViewCreativeContainerLeft = () => {
+    const {
+      offsetLeft
+    } = viewCreativeContainerRef.current;
     return offsetLeft.toString().concat('', 'px');
   };
-  var getViewCreativeContainerTop = function getViewCreativeContainerTop() {
-    var offsetTop = viewCreativeContainerRef.current.offsetTop;
+  const getViewCreativeContainerTop = () => {
+    const {
+      offsetTop
+    } = viewCreativeContainerRef.current;
     return (offsetTop + 33).toString().concat('', 'px');
   };
   return /*#__PURE__*/_react.default.createElement(_TitleDescription.MainContainer, {
@@ -159,7 +155,7 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(prop
     top: getViewCreativeContainerTop(),
     width: "100%",
     height: "100%",
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: () => {
       setViewCreativeListBoxOpenedState(false);
     }
   }, /*#__PURE__*/_react.default.createElement(_ListBox.ListBox, {
@@ -173,7 +169,7 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(prop
     buttonsTextColorUnchecked: "#212121",
     height: "100%",
     width: "100%",
-    onClick: function onClick(props) {
+    onClick: props => {
       listBoxViewCreativeOnClickHandler(props);
     }
   }))))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
@@ -227,6 +223,7 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(prop
     id: "PeriodValue"
   }, data.eventDatesValue) : '')))));
 };
+exports.TitleDescription = TitleDescription;
 var _default = exports.default = TitleDescription;
 TitleDescription.defaultProps = {
   showRetailerIcon: true,
@@ -255,7 +252,7 @@ TitleDescription.defaultProps = {
     supplier: '',
     brand: ''
   },
-  viewCreativeOnClick: function viewCreativeOnClick() {},
+  viewCreativeOnClick: () => {},
   width: '100%',
   height: '100%',
   textcolor: '#212121',