sag_components 1.0.375 → 1.0.377

package/dist/stories/components/Dropdown.js

@@ -33,7 +33,7 @@ var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
  */
 var Dropdown = exports.Dropdown = function Dropdown(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "100%" : _ref$width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
     size = _ref.size,
     text = _ref.text,
     shape = _ref.shape,
@@ -46,23 +46,18 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     onChange = _ref.onChange,
     onInputChange = _ref.onInputChange,
     _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor,
+    labelColor = _ref$labelColor === void 0 ? '#1B30AA' : _ref$labelColor,
     required = _ref.required,
     inputRef = _ref.inputRef,
     defaultValue = _ref.defaultValue,
     _ref$allowedInput = _ref.allowedInput,
-    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
+    allowedInput = _ref$allowedInput === void 0 ? 'all' : _ref$allowedInput,
     _ref$reset = _ref.reset,
     reset = _ref$reset === void 0 ? false : _ref$reset,
     _ref$disableClearable = _ref.disableClearable,
     disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$dropdownListfont = _ref.dropdownListfontSize,
-    dropdownListfontSize = _ref$dropdownListfont === void 0 ? "14px" : _ref$dropdownListfont,
-    _ref$placeHolderFontS = _ref.placeHolderFontSize,
-    placeHolderFontSize = _ref$placeHolderFontS === void 0 ? "14px" : _ref$placeHolderFontS,
-    filterOptionsMultiSelect = _ref.filterOptionsMultiSelect;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   /**
    *  SAG Dropdown
    */
@@ -71,13 +66,16 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentInputValue = _useState2[0],
     setCurrentInputValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(filterOptionsMultiSelect ? filterOptionsMultiSelect : undefined),
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    filterMultiSelectState = _useState4[0],
-    setFilterMultiSelectState = _useState4[1];
-  (0, _react.useEffect)(function () {
-    setFilterMultiSelectState(filterOptionsMultiSelect);
-  }, [filterOptionsMultiSelect]);
+    currentOption = _useState4[0],
+    setCurrentOption = _useState4[1];
+  // const [defaultValueSetFlag, setDefaultValueSetFlag] = useState(false);
+
+  // useEffect(() => {
+  //   reset ? setDefaultValueSetFlag(false) : null;
+  // }, [reset]);
+
   (0, _react.useEffect)(function () {
     var delayDebounceFn = setTimeout(function () {
       onInputChange(currentInputValue);
@@ -91,114 +89,60 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: "#db3131"
+            color: '#db3131'
           }
         }
       }
     }
   });
 
-  // Single Text Style
-  var getTextFieldStyleSingle = function getTextFieldStyleSingle() {
-    if (shape === "round") {
+  // defines shape: squire or round
+  var getTextFieldStyle = function getTextFieldStyle() {
+    if (shape === 'round') {
       // round
       return {
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "12px",
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
           legend: {
-            marginLeft: "10px"
+            marginLeft: '10px'
           }
         },
-        "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "10px !important",
-          borderRadius: "12px",
+        '& .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"
+            paddingLeft: '10px'
           },
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#E7E7E7"
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
           },
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
           },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
           }
         },
-        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
+        '& .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"
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
         },
-        "& .MuiInputLabel-outlined": {
-          paddingLeft: "10px",
-          color: disabled ? "#E7E7E7" : labelColor,
-          fontSize: "18px"
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : labelColor,
+          fontSize: '18px'
         },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "1px",
-          paddingLeft: "4px",
-          paddingRight: "6px",
-          background: "white"
-        }
-      };
-    }
-    // square
-    return null;
-  };
-
-  // ---------------------------- Multi Text Style -----------------------------------------
-  var getTextFieldStyleMulti = function getTextFieldStyleMulti() {
-    if (shape === "round") {
-      // round
-      return {
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "12px",
-          legend: {
-            marginLeft: "10px"
-          }
-        },
-        "& .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"
-        },
-        "& .MuiInputLabel-outlined": {
-          paddingLeft: "10px",
-          color: disabled ? "#E7E7E7" : labelColor,
-          fontSize: "18px"
-        },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "1px",
-          paddingLeft: "4px",
-          paddingRight: "6px",
-          background: "white"
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: '6px',
+          background: 'white'
         }
       };
     }
@@ -212,34 +156,45 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     });
   };
   var onChangeHandler = function onChangeHandler(event, newValue) {
-    setFilterMultiSelectState(newValue);
+    setCurrentOption({
+      syntheticBaseEvent: event,
+      newValue: newValue
+    });
+    // setDefaultValueSetFlag(true);
     onChange({
       syntheticBaseEvent: event,
       newValue: newValue
     });
   };
+  var getOptionByLabel = function getOptionByLabel(label) {
+    if (!label) return null;
+    if (!options) return null;
+    var foundOption = options.find(function (item) {
+      return item.label === label;
+    });
+    if (!foundOption) return null;
+    return foundOption;
+  };
   var isInputAllowed = function isInputAllowed(inputChar) {
     var NUMERIC_REGEX = /^[0-9-]+$/;
     var ALPHA_REGEX = /^[a-zA-Z]+$/;
     var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
-      case "all":
+      case 'all':
         return true;
-      case "alpha":
+      case 'alpha':
         if (ALPHA_REGEX.test(inputChar)) return true;
         return false;
-      case "numeric":
+      case 'numeric':
         if (NUMERIC_REGEX.test(inputChar)) return true;
         return false;
-      case "alphaNumeric":
+      case 'alphaNumeric':
         if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
         return false;
       default:
         return true;
     }
   };
-
-  // --------------------------------------- DROPDOWN SINGLE --------------------------------
   var getAutocompleteSingle = function getAutocompleteSingle() {
     return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
       theme: theme
@@ -256,9 +211,10 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
       disableClearable: disableClearable,
       defaultValue: defaultValue,
       id: "combo-box",
-      options: options
-      // sx={{ width }}
-      ,
+      options: options,
+      sx: {
+        width: width
+      },
       popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
         width: "0.5em",
         height: "0.5em"
@@ -275,40 +231,45 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
           label: text,
           inputRef: inputRef || null,
           size: size,
-          sx: getTextFieldStyleSingle(),
+          sx: getTextFieldStyle(),
           placeholder: placeHolder,
           InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
             style: {
-              fontSize: placeHolderFontSize,
-              fontFamily: "Poppins"
+              fontSize: '14px',
+              fontFamily: 'Poppins'
             },
             startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
               position: "start"
             }, /*#__PURE__*/_react.default.createElement(_Search.default, {
               fontSize: "medium"
             })) : null
-          })
+          }),
+          InputLabelProps: {
+            style: {
+              // color: labelColor,
+              // fontSize: "14px",
+              fontFamily: 'Poppins'
+            }
+          }
         }));
       },
       ListboxProps: {
         style: {
-          fontSize: dropdownListfontSize,
-          //default: 14px
-          fontFamily: "Poppins"
+          fontSize: '14px',
+          fontFamily: 'Poppins'
         }
       }
     }));
   };
-
-  // --------------------------------------- DROPDOWN MULTI --------------------------------
   var getAutocompleteMulti = function getAutocompleteMulti() {
     return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
       theme: theme
     }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
       key: reset,
-      defaultValue: defaultValue
-      //style={{ width }}
-      ,
+      defaultValue: defaultValue,
+      style: {
+        width: width
+      },
       onChange: function onChange(event, newValue) {
         onChangeHandler(event, newValue);
       },
@@ -319,7 +280,6 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
       limitTags: limitTagsOnMultiSelect,
       id: "checkboxes-tags",
       options: options,
-      value: filterMultiSelectState,
       disabled: disabled,
       disableCloseOnSelect: true,
       disableClearable: disableClearable,
@@ -335,54 +295,74 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
         return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
           icon: icon,
           checkedIcon: checkedIcon,
-          checked: isOptionChecked(option) //{selected}
+          style: {
+            marginRight: 8,
+            fontSize: '14px',
+            fontFamily: 'Poppins'
+          },
+          checked: selected
         }), option.label);
       },
       renderInput: function renderInput(params) {
-        return (
-          /*#__PURE__*/
-          //showSearchIcon &&
-          _react.default.createElement(_TextField.default, Object.assign({}, params, {
-            label: text,
-            size: size,
-            sx: getTextFieldStyleMulti(),
-            placeholder: placeHolder,
-            InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-              style: {
-                fontSize: placeHolderFontSize,
-                fontFamily: "Poppins"
-              }
-            }),
-            onKeyDown: function onKeyDown(event) {
-              if (!isInputAllowed(event.key)) {
-                event.preventDefault();
-              }
+        return showSearchIcon && (!currentOption || currentOption && currentOption.length === 0) ? /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+          label: text,
+          size: size,
+          sx: getTextFieldStyle(),
+          placeholder: placeHolder,
+          onKeyDown: function onKeyDown(event) {
+            if (!isInputAllowed(event.key)) {
+              event.preventDefault();
+            }
+          },
+          inputRef: inputRef || null,
+          required: required,
+          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
+            style: {
+              fontSize: '14px',
+              fontFamily: 'Poppins'
             },
-            inputRef: inputRef || null,
-            required: required
-          }))
-        );
+            startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+              position: "start"
+            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
+              fontSize: "medium"
+            }))
+          }),
+          InputLabelProps: {
+            style: {
+              // color: labelColor,
+              fontSize: '16px',
+              fontFamily: 'Poppins'
+            }
+          }
+        })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+          label: text,
+          size: size,
+          sx: getTextFieldStyle(),
+          placeholder: placeHolder,
+          onKeyDown: function onKeyDown(event) {
+            if (!isInputAllowed(event.key)) {
+              event.preventDefault();
+            }
+          },
+          inputRef: inputRef || null,
+          required: required,
+          InputLabelProps: {
+            style: {
+              // color: labelColor,
+              fontSize: '16px',
+              fontFamily: 'Poppins'
+            }
+          }
+        }));
       },
       ListboxProps: {
         style: {
-          fontSize: dropdownListfontSize,
-          //default: 14px
-          fontFamily: "Poppins"
+          fontSize: '14px',
+          fontFamily: 'Poppins'
         }
       }
     }));
   };
-  var isOptionChecked = function isOptionChecked(option) {
-    if (filterMultiSelectState && filterMultiSelectState !== null && filterMultiSelectState !== void 0 && filterMultiSelectState.map(function (itemFilter) {
-      return itemFilter.label;
-    }).includes(option.label)) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  // --------------------------------- MAIN -------------------------------------
   return /*#__PURE__*/_react.default.createElement(_Dropdown.DropdownContainer, {
     width: width
   }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());

package/dist/stories/components/IconButton.js

@@ -15,11 +15,12 @@ var _ExitIcon = require("./icons/ExitIcon");
 var _FlyIcon = require("./icons/FlyIcon");
 var _MaintenanceIcon = require("./icons/MaintenanceIcon");
 var _EyeIcon = require("./icons/EyeIcon");
-var _IconButtonStyle = require("./IconButton.style.js");
-var _excluded = ["iconName", "width", "height", "disabled", "onClick"];
-/*IconButton*/
+var _IconButton = require("./IconButton.style");
+var _excluded = ["buttonText", "iconName", "width", "height", "disabled", "onClick"];
+/* IconButton */
 var IconButton = exports.IconButton = function IconButton(_ref) {
-  var iconName = _ref.iconName,
+  var buttonText = _ref.buttonText,
+    iconName = _ref.iconName,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 30 : _ref$width,
     _ref$height = _ref.height,
@@ -34,38 +35,38 @@ var IconButton = exports.IconButton = function IconButton(_ref) {
     setMouseDownPressed = _useState2[1];
   var getIcon = function getIcon(iconName, iconHeight, iconWidth) {
     switch (iconName) {
-      case "download":
+      case 'download':
         return /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
           height: iconHeight,
           width: iconWidth
         });
-      case "fly":
+      case 'fly':
         return /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
           height: iconHeight,
           width: iconWidth
         });
-      case "bell":
+      case 'bell':
         return /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
           height: iconHeight,
           width: iconWidth
         });
-      case "maintenance":
+      case 'maintenance':
         return /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
           height: iconHeight,
           width: iconWidth
         });
-      case "exit":
+      case 'exit':
         return /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
           height: iconHeight,
           width: iconWidth
         });
-      case "eye":
+      case 'eye':
         return /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
           height: iconHeight,
           width: iconWidth
         });
       default:
-        return "";
+        return '';
     }
   };
   var onMouseDownHandler = function onMouseDownHandler() {
@@ -82,18 +83,18 @@ var IconButton = exports.IconButton = function IconButton(_ref) {
     setMouseDownPressed(false);
   };
   var getClassNameExtention = function getClassNameExtention() {
-    if (disabled) return "disabled";
-    if (mouseDownPressed) return "mouseDownPressed";
-    return "";
+    if (disabled) return 'disabled';
+    if (mouseDownPressed) return 'mouseDownPressed';
+    return '';
   };
   var onClickHandler = function onClickHandler(event) {
     if (disabled) return;
     onClick(event);
   };
-  return /*#__PURE__*/_react.default.createElement(_IconButtonStyle.ControlsContainer, {
+  return /*#__PURE__*/_react.default.createElement(_IconButton.ControlsContainer, {
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_IconButtonStyle.ControlsSubContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.ControlsSubContainer, {
     className: getClassNameExtention(),
     height: height,
     width: width,
@@ -103,6 +104,6 @@ var IconButton = exports.IconButton = function IconButton(_ref) {
     onClick: function onClick(event) {
       onClickHandler(event);
     }
-  }, /*#__PURE__*/_react.default.createElement(_IconButtonStyle.IconButtonContainer, null, getIcon(iconName, height, width))));
+  }, (buttonText !== '' || buttonText !== undefined) && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText), getIcon(iconName, height, width)));
 };
 var _default = exports.default = IconButton;

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

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconButtonContainer = exports.ControlsSubContainer = exports.ControlsContainer = void 0;
+exports.SpanText = exports.ControlsSubContainer = exports.ControlsContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
-var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n \n  display: flex;\n  //border: 1px solid green;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n\n"])), function (props) {
-  return props.width.toString().concat("", "px");
+var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+  return props.width.toString().concat('', 'px');
 }, function (props) {
-  return props.height.toString().concat("", "px");
+  return props.height.toString().concat('', 'px');
 });
-var ControlsSubContainer = exports.ControlsSubContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 2px 0 2px;  \n  border-radius: 100px;\n  //border: 1px solid blue;\n  &:hover {\n    cursor: pointer;\n    background-color: #e7f0ff;\n  }\n  &.disabled {\n    background-color: #ccc;\n  }\n  &.mouseDownPressed {\n    margin: 1px 0 1px;  \n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n  }\n"])));
-var IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: 95%;\n  height: 95%;\n  //border: 1px solid red;\n  border-radius: 100px;\n"])));
+var ControlsSubContainer = exports.ControlsSubContainer = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 2px 0 2px;  \n  border: none;\n  background: transparent;\n  &:hover {\n    cursor: pointer;\n    background-color: #e7f0ff;\n  }\n  &.disabled {\n    background-color: #ccc;\n  }\n  &.mouseDownPressed {\n    margin: 1px 0 1px;  \n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n  }\n"])));
+var SpanText = exports.SpanText = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/ReportTable.js

@@ -34,6 +34,7 @@ var ReportTable = exports.ReportTable = function ReportTable(props) {
     color: "#1B30AA"
   }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")));
 };
+var _default = exports.default = ReportTable;
 ReportTable.defaultProps = {
   tableData: {
     columnsHeadings: [{
@@ -72,5 +73,4 @@ ReportTable.defaultProps = {
     }]
   },
   maxColumnsNumber: 3
-};
-var _default = exports.default = ReportTable;
+};

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

@@ -15,8 +15,8 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
 }, function (props) {
   return props.height;
 });
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  gap: 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  background: #ffffff;\n  border-radius: 12px;\n"])));
-var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n"])));
+var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background: #ffffff;\n  border-radius: 12px;\n  flex-basis: 100%;\n"])));
+var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 50%;\n"])));
 var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  background: #ffffff;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
 var TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n"])));
 var TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: normal;\n"])));

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

@@ -7,11 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.BellIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var BellIcon = exports.BellIcon = function BellIcon(_ref) {
-  var clicked = _ref.clicked,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "8" : _ref$width,
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '8' : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "9" : _ref$height;
+    height = _ref$height === void 0 ? '9' : _ref$height;
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
     height: height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.375",
+  "version": "1.0.377",
   "description": "",
   "main": "dist/index.js",
   "scripts": {