sag_components 1.0.250 → 1.0.252

package/.history/package_20231004111550.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.251",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.7",
+    "eslint": "^8.50.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^4.5.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/x-date-pickers": "^6.11.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.9",
+    "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.6.2",
+    "storybook": "^7.4.5",
+    "styled-components": "^5.3.11"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/.history/package_20231004135419.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.252",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "react-scripts start",
+    "lint": "eslint .",
+    "build": "cross-env BABEL_ENV=production babel src -d dist  ",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "SAG",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.7",
+    "eslint": "^8.50.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^4.5.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/x-date-pickers": "^6.11.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.9",
+    "hoopy": "^0.1.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.6.2",
+    "storybook": "^7.4.5",
+    "styled-components": "^5.3.11"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/dist/stories/components/CommonFunctions.js

@@ -5,46 +5,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
 var getCurrencySign = function getCurrencySign(currencyTypeToConvert, value) {
-  if (!currencyTypeToConvert) return "";
-  var currencySign = "";
-  var currencyFormatter = new Intl.NumberFormat("en-US", {
-    style: "currency",
+  if (!currencyTypeToConvert) return '';
+  var currencySign = '';
+  var currencyFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
     currency: currencyTypeToConvert
   });
-  currencySign = currencyFormatter.format(value).substring(0, 1);
+  currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
   return currencySign;
 };
 exports.getCurrencySign = getCurrencySign;
 var getFormattedUnits = function getFormattedUnits(num) {
   if (Math.abs(num) >= 1000000000) {
-    return "B";
+    return 'B';
   }
   if (Math.abs(num) >= 1000000) {
-    return "M";
+    return 'M';
   }
   if (Math.abs(num) >= 1000) {
-    return "K";
+    return 'K';
   }
-  return "";
+  return '';
 };
 exports.getFormattedUnits = getFormattedUnits;
 var getFormattedValue = function getFormattedValue(num) {
   if (Math.abs(num) >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, '');
   }
   if (Math.abs(num) >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, "");
+    return (num / 1000000).toFixed(1).replace(/\.0$/, '');
   }
   if (Math.abs(num) >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, "");
+    return (num / 1000).toFixed(1).replace(/\.0$/, '');
   }
   return num;
 };
 exports.getFormattedValue = getFormattedValue;
 var getNumberWithCommas = function getNumberWithCommas(x) {
-  x = x.toString();
+  var param = x.toString();
   var pattern = /(-?\d+)(\d{3})/;
-  while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
-  return x;
+  while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
+  return param;
 };
 exports.getNumberWithCommas = getNumberWithCommas;

package/dist/stories/components/Datepicker.js

@@ -29,7 +29,9 @@ var Datepicker = function Datepicker(_ref) {
     value = _ref.value,
     disableClearable = _ref.disableClearable,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$labelColor = _ref.labelColor,
+    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor;
   /**
    *  SAG Datepicker
    */
@@ -53,38 +55,68 @@ 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: "6px"
+            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,
           }
         },
-        "& .MuiAutocomplete-inputRoot": {
-          fontFamily: "Poppins",
+
+        "& .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",
-          fontWidth: 400,
-          paddingLeft: "10px !important",
-          borderRadius: "12px",
-          width: width
+          color: disabled ? "#E7E7E7" : valueState ? labelColor : "#757575"
         },
         "& .MuiInputLabel-outlined": {
           fontFamily: "Poppins",
-          fontSize: "14px",
+          paddingLeft: "10px",
+          color: disabled ? "#E7E7E7" : valueState ? labelColor : "#757575",
           fontWidth: 400,
-          paddingLeft: "10px"
+          fontSize: "18px"
         },
         "& .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,6 +20,7 @@ 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";
@@ -110,20 +111,44 @@ var Dropdown = function Dropdown(_ref) {
         "& .MuiOutlinedInput-root": {
           borderRadius: "12px",
           legend: {
-            marginLeft: "6px"
+            marginLeft: "10px"
           }
         },
         "& .MuiAutocomplete-inputRoot": {
           paddingLeft: "10px !important",
-          borderRadius: "12px"
+          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"
         },
         "& .MuiInputLabel-outlined": {
-          paddingLeft: "10px"
+          paddingLeft: "10px",
+          color: disabled ? "#E7E7E7" : labelColor,
+          fontSize: "18px"
         },
         "& .MuiInputLabel-shrink": {
           marginLeft: "1px",
           paddingLeft: "4px",
-          paddingRight: 0,
+          paddingRight: "6px",
           background: "white"
         }
       };
@@ -137,6 +162,7 @@ var Dropdown = function Dropdown(_ref) {
       syntheticBaseEvent: event,
       inputValue: newInputValue
     });
+    console.log("newInputValue", newInputValue);
   };
   var onChangeHandler = function onChangeHandler(event, newValue) {
     setCurrentOption({
@@ -189,14 +215,7 @@ var Dropdown = function Dropdown(_ref) {
       },
       disabled: disabled,
       disablePortal: true,
-      disableClearable: disableClearable
-      // value={defaultValue && !currentOption?.newValue ? defaultValue : currentOption?.newValue}
-      // value={
-      //   defaultValue && !defaultValueSetFlag
-      //     ? defaultValue
-      //     : currentOption?.newValue
-      // }
-      ,
+      disableClearable: disableClearable,
       defaultValue: defaultValue,
       id: "combo-box",
       options: options,
@@ -235,7 +254,7 @@ var Dropdown = function Dropdown(_ref) {
           InputLabelProps: {
             style: {
               //color: labelColor,
-              fontSize: "14px",
+              //fontSize: "14px",
               fontFamily: "Poppins"
             }
           }

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  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* width: 95%;\n  height: 70%; */\n"])));
+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"])));
 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.7rem;\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.77778rem;\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,16 +43,15 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hover = _useState2[0],
     setHover = _useState2[1];
-  var _useState3 = (0, _react.useState)(200),
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     offsetWidth = _useState4[0],
     setOffsetWidth = _useState4[1];
   var anotherRef = (0, _react.useRef)(null);
-  // useEffect(() => {
-  //   setOffsetWidth(anotherRef.current.offsetWidth);
-  //   console.log(anotherRef.current.offsetWidth);
-  // }, [anotherRef]);
-
+  (0, _react.useEffect)(function () {
+    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,
@@ -68,7 +67,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
       display: display,
       gridTemplateColumns: gridTemplateColumns
     },
-    ref: nodeRef
+    ref: anotherRef
   }, console.log(anotherRef), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
     id: "loadingDiv"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
@@ -88,7 +87,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     id: "InfoTextContainer",
     width: width,
     height: height
-  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTitleLabel, {
+  }, infoTitle && /*#__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: 700;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 1.1em;\n\n  /* overflow: scroll; */\n"])));
+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"])));
 exports.InfoTitleLabel = InfoTitleLabel;
-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"])));
+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"])));
 exports.InfoTextLabel = InfoTextLabel;
-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"])));
+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"])));
 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,7 +41,9 @@ 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;
+    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],
@@ -98,13 +100,14 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           height: {
             height: height
           },
-          paddingTop: 0,
+          paddingTop: multiline ? "12px" : "0",
           marginTop: 0,
           borderColor: "green",
           borderRadius: "12px",
           legend: {
             marginLeft: "6px"
-          }
+          },
+          alignItems: multiline ? "flex-start" : "center"
         },
         "& .MuiAutocomplete-inputRoot": {
           paddingLeft: "10px !important",
@@ -146,6 +149,7 @@ 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
@@ -157,6 +161,7 @@ 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",
@@ -172,7 +177,23 @@ 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"
@@ -192,6 +213,7 @@ 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  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) {
+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) {
   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;
+  var _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
   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"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
+  }, (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, {
     id: "PeriodLabel"
-  }, "Event Dates:  "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
+  }, "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, {
     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 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"])));
+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"])));
 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: 700;\n  font-size: 1.2rem;\n  margin: 0;\n"])));
+var EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\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"])));
+var ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0 5px;\n  font-weight: 400;\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: #1b30aa;\n  margin: 0;\n"])));
+var FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\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)([""])));
+var ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
 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  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  white-space: pre-wrap;\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)([""])));
+var PeriodLabel = _styledComponents.default.strong(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
 exports.PeriodLabel = PeriodLabel;
 var PeriodValue = _styledComponents.default.p(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
 exports.PeriodValue = PeriodValue;