sag_components 1.0.249 → 1.0.250

package/dist/stories/components/CodeEditor.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactAce = _interopRequireDefault(require("react-ace"));
+require("ace-builds/src-noconflict/mode-mysql");
+require("ace-builds/src-noconflict/theme-monokai");
+require("ace-builds/src-noconflict/ext-language_tools");
+require("ace-builds/src-noconflict/snippets/mysql");
+// CodeEditor.js
+
+var CodeEditor = function CodeEditor(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
+    style: {
+      height: "200px"
+    },
+    mode: "mysql",
+    theme: "monokai",
+    value: value,
+    onChange: onChange,
+    name: "code-editor",
+    editorProps: {
+      $blockScrolling: true
+    },
+    setOptions: {
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      enableSnippets: true,
+      showLineNumbers: true,
+      tabSize: 1
+    }
+  });
+};
+var _default = CodeEditor;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AceEditorContent = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactAce = _interopRequireDefault(require("react-ace"));
+var _templateObject;
+var AceEditorContent = (0, _styledComponents.default)(_reactAce.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n"])));
+exports.AceEditorContent = AceEditorContent;

package/dist/stories/components/CommonFunctions.js

@@ -11,7 +11,7 @@ var getCurrencySign = function getCurrencySign(currencyTypeToConvert, value) {
     style: "currency",
     currency: currencyTypeToConvert
   });
-  currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
+  currencySign = currencyFormatter.format(value).substring(0, 1);
   return currencySign;
 };
 exports.getCurrencySign = getCurrencySign;

package/dist/stories/components/Datepicker.js

@@ -29,9 +29,7 @@ var Datepicker = function Datepicker(_ref) {
     value = _ref.value,
     disableClearable = _ref.disableClearable,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   /**
    *  SAG Datepicker
    */
@@ -55,68 +53,38 @@ var Datepicker = function Datepicker(_ref) {
     if (shape === "round") {
       // round
       return {
-        "& .MuiInputLabel-inputRoot": {
-          fontFamily: "Poppins",
-          fontSize: "14px",
-          fontWidth: 400,
-          paddingLeft: "10px !important",
-          borderRadius: "12px",
-          width: width
-          //color: labelColor,
-        },
-
         "& .MuiOutlinedInput-root": {
           borderRadius: "12px",
           fontFamily: "Poppins",
           fontSize: "14px",
           fontWidth: 400,
           width: width,
-          //color: labelColor,
           legend: {
-            marginLeft: "10px"
-          },
-          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
-          '&[class*="MuiOutlinedInput-root"] .MuiInputLabel-input:first-of-type': {
-            // Default left padding is 6px
-            paddingLeft: "10px"
-          },
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#E7E7E7"
-            //color: labelColor,
-          },
-
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor //  "#757575",        
-            //color: labelColor,
-          },
-
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
-            //color: labelColor,
+            marginLeft: "6px"
           }
         },
-
-        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
-          // Default transform is "translate(14px, 20px) scale(1)""
-          // This lines up the label with the initial cursor position in the input
-          // after changing its padding-left.
-          transform: "translate(14px, 18px) scale(1);",
+        "& .MuiAutocomplete-inputRoot": {
+          fontFamily: "Poppins",
           fontSize: "14px",
-          color: disabled ? "#E7E7E7" : valueState ? labelColor : "#757575"
+          fontWidth: 400,
+          paddingLeft: "10px !important",
+          borderRadius: "12px",
+          width: width
         },
         "& .MuiInputLabel-outlined": {
           fontFamily: "Poppins",
-          paddingLeft: "10px",
-          color: disabled ? "#E7E7E7" : valueState ? labelColor : "#757575",
+          fontSize: "14px",
           fontWidth: 400,
-          fontSize: "18px"
+          paddingLeft: "10px"
         },
         "& .MuiInputLabel-shrink": {
+          fontFamily: "Poppins",
+          fontSize: "14px",
+          fontWidth: 400,
           marginLeft: "1px",
           paddingLeft: "4px",
           paddingRight: 0,
           background: "white"
-          //color: labelColor,
         }
       };
     } else {

package/dist/stories/components/Dropdown.js

@@ -20,7 +20,6 @@ var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/
 var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search.js"));
 var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
-var _colors = require("@mui/material/colors");
 //import PropTypes from "prop-types";
 
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -111,44 +110,20 @@ var Dropdown = function Dropdown(_ref) {
         "& .MuiOutlinedInput-root": {
           borderRadius: "12px",
           legend: {
-            marginLeft: "10px"
+            marginLeft: "6px"
           }
         },
         "& .MuiAutocomplete-inputRoot": {
           paddingLeft: "10px !important",
-          borderRadius: "12px",
-          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
-          '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
-            // Default left padding is 6px
-            paddingLeft: "10px"
-          },
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#E7E7E7"
-          },
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
-          },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
-          }
-        },
-        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
-          // Default transform is "translate(14px, 20px) scale(1)""
-          // This lines up the label with the initial cursor position in the input
-          // after changing its padding-left.
-          transform: "translate(14px, 18px) scale(1);",
-          fontSize: "14px",
-          color: disabled ? "#E7E7E7" : currentInputValue && currentInputValue.length > 0 ? "#212121" : "#757575"
+          borderRadius: "12px"
         },
         "& .MuiInputLabel-outlined": {
-          paddingLeft: "10px",
-          color: disabled ? "#E7E7E7" : labelColor,
-          fontSize: "18px"
+          paddingLeft: "10px"
         },
         "& .MuiInputLabel-shrink": {
           marginLeft: "1px",
           paddingLeft: "4px",
-          paddingRight: "6px",
+          paddingRight: 0,
           background: "white"
         }
       };
@@ -162,7 +137,6 @@ var Dropdown = function Dropdown(_ref) {
       syntheticBaseEvent: event,
       inputValue: newInputValue
     });
-    console.log("newInputValue", newInputValue);
   };
   var onChangeHandler = function onChangeHandler(event, newValue) {
     setCurrentOption({
@@ -215,7 +189,14 @@ var Dropdown = function Dropdown(_ref) {
       },
       disabled: disabled,
       disablePortal: true,
-      disableClearable: disableClearable,
+      disableClearable: disableClearable
+      // value={defaultValue && !currentOption?.newValue ? defaultValue : currentOption?.newValue}
+      // value={
+      //   defaultValue && !defaultValueSetFlag
+      //     ? defaultValue
+      //     : currentOption?.newValue
+      // }
+      ,
       defaultValue: defaultValue,
       id: "combo-box",
       options: options,
@@ -254,7 +235,7 @@ var Dropdown = function Dropdown(_ref) {
           InputLabelProps: {
             style: {
               //color: labelColor,
-              //fontSize: "14px",
+              fontSize: "14px",
               fontFamily: "Poppins"
             }
           }

package/dist/stories/components/Modal.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Modal = require("./Modal.style");
+var Modal = function Modal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    children = _ref.children;
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalOverlay, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalContent, null, children, /*#__PURE__*/_react.default.createElement(_Modal.CloseButton, {
+    onClick: onClose
+  }, "Close")));
+};
+var _default = Modal;
+exports.default = _default;

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

@@ -0,0 +1,21 @@
+"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.SubmitButton = exports.ModalOverlay = exports.ModalContent = exports.CloseButton = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index:999999;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  animation: ", " 0.3s ease-in-out;\n"])), fadeIn);
+exports.ModalOverlay = ModalOverlay;
+var ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #fff;\n  overflow: scroll;\n  padding: 20px;\n  border-radius: 8px;\n  width: 50%;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.5s ease-in-out;\n"])), fadeIn);
+exports.ModalContent = ModalContent;
+var CloseButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));
+exports.CloseButton = CloseButton;
+var SubmitButton = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  margin-right: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));
+exports.SubmitButton = SubmitButton;

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

@@ -8,9 +8,9 @@ exports.NoDataFoundTitle = exports.NoDataFoundText = exports.NoDataFoundContaine
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
-var NoDataFoundContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 0.8rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
+var NoDataFoundContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* width: 95%;\n  height: 70%; */\n"])));
 exports.NoDataFoundContainer = NoDataFoundContainer;
-var NoDataFoundTitle = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0;\n  margin-top: 1.5rem;\n  padding-right: 0.77778rem;\n"])));
+var NoDataFoundTitle = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 1rem;\n  margin: 0;\n  margin-top: 1.5rem;\n  padding-right: 0.7rem;\n"])));
 exports.NoDataFoundTitle = NoDataFoundTitle;
 var NoDataFoundText = _styledComponents.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.8rem;\n  margin: 0;\n  margin-top: 0.4rem;\n  text-align: center;\n  line-height: 1.1rem;\n"])));
 exports.NoDataFoundText = NoDataFoundText;

package/dist/stories/components/OneColumnContainer.js

@@ -43,15 +43,16 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hover = _useState2[0],
     setHover = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
+  var _useState3 = (0, _react.useState)(200),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     offsetWidth = _useState4[0],
     setOffsetWidth = _useState4[1];
   var anotherRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    setOffsetWidth(anotherRef.current.offsetWidth);
-    console.log(anotherRef.current.offsetWidth);
-  }, [anotherRef]);
+  // useEffect(() => {
+  //   setOffsetWidth(anotherRef.current.offsetWidth);
+  //   console.log(anotherRef.current.offsetWidth);
+  // }, [anotherRef]);
+
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
     className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
     width: width,
@@ -67,7 +68,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
       display: display,
       gridTemplateColumns: gridTemplateColumns
     },
-    ref: anotherRef
+    ref: nodeRef
   }, console.log(anotherRef), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
     id: "loadingDiv"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
@@ -87,7 +88,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     id: "InfoTextContainer",
     width: width,
     height: height
-  }, infoTitle && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTitleLabel, {
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTitleLabel, {
     id: "InfoTitleLabel",
     dangerouslySetInnerHTML: {
       __html: infoTitle

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

@@ -20,11 +20,11 @@ var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_temp
   return props.height;
 });
 exports.InfoTextContainer = InfoTextContainer;
-var InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 18px;\n  line-height: 32px;\n  /* overflow: scroll; */\n  overflow: hidden;\n"])));
+var InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 1.1em;\n\n  /* overflow: scroll; */\n"])));
 exports.InfoTitleLabel = InfoTitleLabel;
-var InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n\n  /* overflow: scroll; */\n  overflow: hidden;\n"])));
+var InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 0.9em;\n  line-height: 1.4em;\n  font-weight: 500;\n\n  /* overflow: scroll; */\n"])));
 exports.InfoTextLabel = InfoTextLabel;
-var IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  margin-top: 10px;\n  margin-right: 10px;\n  top: 0;\n  right: 0;\n  padding: 0;\n"])));
+var IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  margin-top: 10px;\n  margin-right: 10px;\n  top: 0;\n  right: 0;\n"])));
 exports.IconContainer = IconContainer;
 var LoadingDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 76%;\n  height: 65%;\n"])));
 exports.LoadingDiv = LoadingDiv;

package/dist/stories/components/TextField.js

@@ -41,9 +41,7 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     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;
+    onChange = _ref.onChange;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentInputValue = _useState2[0],
@@ -100,14 +98,13 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           height: {
             height: height
           },
-          paddingTop: multiline ? "12px" : "0",
+          paddingTop: 0,
           marginTop: 0,
           borderColor: "green",
           borderRadius: "12px",
           legend: {
             marginLeft: "6px"
-          },
-          alignItems: multiline ? "flex-start" : "center"
+          }
         },
         "& .MuiAutocomplete-inputRoot": {
           paddingLeft: "10px !important",
@@ -149,7 +146,6 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_TextFieldStyle.TextFieldContainer, {
-    id: "TextFieldContainer",
     width: width
   }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
     theme: theme
@@ -161,7 +157,6 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/_react.default.createElement("div", null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
     key: resetDefaultValue,
     label: label,
-    multiline: multiline,
     defaultValue: defaultValue,
     placeholder: placeHolder,
     id: "outlined-start-adornment",
@@ -177,23 +172,7 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     },
     onChange: function onChange(event) {
       onChangeHandler(event);
-    },
-    InputProps: {
-      textAlign: "flex-start",
-      alignItems: "flex-start",
-      alignContent: "flex-start",
-      disableUnderline: true,
-      style: {
-        //color: 'red',
-        textAlign: "start"
-      }
     }
-
-    // style={{
-    //   // height: '50px',
-    //   // width: '50px',
-    //   textAlign: 'start',
-    //   justifyContent: 'start'}}
   }), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
     sx: getTextFieldStyle(),
     variant: "outlined"
@@ -213,7 +192,6 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
     defaultValue: defaultValue,
     label: label,
-    multiline: multiline,
     inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
     ref: ref !== null && ref !== void 0 ? ref : null,
     onKeyDown: function onKeyDown(event) {

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

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

package/dist/stories/components/TitleDescription.js

@@ -19,7 +19,7 @@ var _TitleDescriptionStyle = require("./TitleDescription.style.js");
 var _excluded = ["showRetailerIcon", "data", "viewCreativeOnClick", "width", "height", "textColor", "disabled"];
 /*TitleDescription*/
 var TitleDescription = function TitleDescription(_ref) {
-  var _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
+  var _data$objectivesDescr;
   var _ref$showRetailerIcon = _ref.showRetailerIcon,
     showRetailerIcon = _ref$showRetailerIcon === void 0 ? true : _ref$showRetailerIcon,
     data = _ref.data,
@@ -134,11 +134,11 @@ var TitleDescription = function TitleDescription(_ref) {
     id: "SubLineContainer"
   }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
     id: "SubLineContainer"
-  }, (data === null || data === void 0 ? void 0 : (_data$eventDatesValue = data.eventDatesValue) === null || _data$eventDatesValue === void 0 ? void 0 : _data$eventDatesValue.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
     id: "PeriodLabel"
-  }, "Event Dates:  ") : "", (data === null || data === void 0 ? void 0 : (_data$eventDatesValue2 = data.eventDatesValue) === null || _data$eventDatesValue2 === void 0 ? void 0 : _data$eventDatesValue2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
+  }, "Event Dates:  "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
     id: "PeriodValue"
-  }, data.eventDatesValue) : "")))));
+  }, data.eventDatesValue))))));
 };
 exports.TitleDescription = TitleDescription;
 var _default = TitleDescription;

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

@@ -16,13 +16,13 @@ var MainContainer = _styledComponents.default.div(_templateObject || (_templateO
   return props.height;
 });
 exports.MainContainer = MainContainer;
-var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem 1rem 1rem 2.5rem;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
+var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem 1rem 1rem 3rem;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
 exports.PanelContainer = PanelContainer;
 var EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
 exports.EventNameAndViewCreativeContainer = EventNameAndViewCreativeContainer;
 var EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n"])));
 exports.EventNameViewCreativeSubContainer = EventNameViewCreativeSubContainer;
-var EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\n"])));
+var EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  font-size: 1.2rem;\n  margin: 0;\n"])));
 exports.EventName = EventName;
 var ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  border: 1px solid #ccc;\n  margin-left: 10px;\n  padding: 3px 10px;\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
   return props.disabled ? "#B1B1B1" : "#212121";
@@ -30,11 +30,11 @@ var ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_
   return !props.disabled ? "pointer" : "default";
 });
 exports.ViewCreativeContainer = ViewCreativeContainer;
-var ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0 5px;\n  font-weight: 400;\n"])));
+var ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0 5px;\n"])));
 exports.ViewCreativeTextField = ViewCreativeTextField;
 var 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"])));
 exports.FilterValuesContainer = FilterValuesContainer;
-var FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  //color: #1b30aa;\n  margin: 0;\n"])));
+var FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n"])));
 exports.FilterValue = FilterValue;
 var FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
 exports.FieldsDelimiter = FieldsDelimiter;
@@ -48,7 +48,7 @@ var ObjectiesContainer = _styledComponents.default.div(_templateObject14 || (_te
 exports.ObjectiesContainer = ObjectiesContainer;
 var ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
 exports.ObjectiesAndPeriodsContainer = ObjectiesAndPeriodsContainer;
-var ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
+var ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.ObjectivesTitle = ObjectivesTitle;
 var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
 exports.ObjectivesDescription = ObjectivesDescription;
@@ -62,11 +62,11 @@ var BottonsContainer = _styledComponents.default.div(_templateObject19 || (_temp
 exports.BottonsContainer = BottonsContainer;
 var DownloadButtonContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.DownloadButtonContainer = DownloadButtonContainer;
-var PeriodsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: flex-start;\n  white-space: pre-wrap;\n  margin-left: 40px;\n  width: 25%;\n"])));
+var PeriodsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: flex-start;\n  margin-left: 40px;\n  width: 25%;\n"])));
 exports.PeriodsContainer = PeriodsContainer;
 var SubLineContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
 exports.SubLineContainer = SubLineContainer;
-var PeriodLabel = _styledComponents.default.strong(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
+var PeriodLabel = _styledComponents.default.strong(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.PeriodLabel = PeriodLabel;
 var PeriodValue = _styledComponents.default.p(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
 exports.PeriodValue = PeriodValue;

package/dist/stories/components/TotalBenchmark.js

@@ -69,14 +69,14 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.FormattedValue, {
       id: "FormattedValue",
       width: width
-    }, item.value != undefined && item.value != null ? dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value) : "", item.value != undefined && item.value != null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : "", item.value === undefined || item.value === null ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.FormattedValueNoData, null, "No Data") : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
+    }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
       id: "BenchmarkContainer",
       width: width
     }, item.totalValue ? /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
       id: "Benchmark",
       totalValue: item.totalValue,
-      currentValue: item.value ? item.value : 0,
-      benchmarkValue: item.benchmarkValue ? item.benchmarkValue : 0,
+      currentValue: item.value,
+      benchmarkValue: item.benchmarkValue,
       height: 12 * getSizeFactor(),
       width: 85 * getSizeFactor(),
       color: "#79DB95",
@@ -85,11 +85,9 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
       underAvarageColor: "#FD5959",
       backgroundColor: "#F2F2F2"
     }) : ""))));
-  }) : /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.NoDataFoundContainer, {
-    id: "NoDataFoundContainer"
-  }, /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  }) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
-  })));
+  }));
 };
 exports.TotalBenchmark = TotalBenchmark;
 var _default = TotalBenchmark;

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleAndValueContainer = exports.Title = exports.NoDataFoundContainer = exports.FormattedValueNoData = exports.FormattedValue = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainerParent = exports.BenchmarkContainer = void 0;
+exports.TitleAndValueContainer = exports.Title = exports.FormattedValue = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainerParent = exports.BenchmarkContainer = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 var MIN_HEIGHT = 300;
 var MIN_WIDTH = 260;
-var ControlsContainer = _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: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  place-content: space-between;\n  justify-content: space-between;\n  align-items: flex-start;\n  background: #ffffff;\n"])), function (props) {
+var ControlsContainer = _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: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column; \n  place-content: space-between;\n  align-items: flex-start; \n  background: #ffffff;  \n"])), function (props) {
   return props.rootFont;
 }, function (props) {
   return props.textColor;
@@ -20,19 +20,15 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
   return props.height;
 });
 exports.ControlsContainer = ControlsContainer;
-var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  //display: flex;\n  border-radius: 12px;\n  /* width: 90%;\n  height: 40%; */\n  //justify-content: center;\n  //align-items: flex-start;\n  background: #ffffff;\n  margin-bottom: 2rem;\n  padding: 0px 0.8rem;\n"])));
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  //display: flex;\n  border-radius: 12px;\n  /* width: 90%;\n  height: 40%; */\n  //justify-content: center;  \n  //align-items: flex-start;\n  background: #ffffff;\n  margin-bottom: 2rem;\n  padding: 0px 0.8rem;\n"])));
 exports.Controls = Controls;
 var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  //display: flex;\n  //flex-direction: column;\n  width: 100%;\n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;
-var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  //margin-bottom: 1rem;\n"])));
+var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 1rem;\n  margin-bottom: 1rem;\n"])));
 exports.Title = Title;
-var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  font-weight: 500;\n  font-size: 2.22rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var FormattedValueNoData = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  font-weight: 700;\n  font-size: 16px;\n"])));
-exports.FormattedValueNoData = FormattedValueNoData;
-var BenchmarkContainerParent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: baseline;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n"])));
+var BenchmarkContainerParent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  align-items: baseline;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n\n"])));
 exports.BenchmarkContainerParent = BenchmarkContainerParent;
-var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-top: 0;\n  margin-left: 1rem;\n  height: 0.9rem;\n  //margin: 0;\n"])));
-exports.BenchmarkContainer = BenchmarkContainer;
-var NoDataFoundContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"])));
-exports.NoDataFoundContainer = NoDataFoundContainer;
+var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-top: 0;\n  margin-left: 1rem;\n  height: 0.9rem;\n  //margin: 0;\n"])));
+exports.BenchmarkContainer = BenchmarkContainer;