sag_components 1.0.358 → 1.0.360

package/.history/package_20231122100718.json

@@ -0,0 +1,77 @@
+{
+  "name": "sag_components",
+  "version": "1.0.338",
+  "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/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-preset-react-app": "^10.0.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "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_20231128125149.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.346",
+  "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/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-preset-react-app": "^10.0.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "bundler": {
+    "exportEntries": ["src/index.ts"],
+    "managerEntries": ["src/manager.ts"],
+    "previewEntries": ["src/preview.ts"]
+  },
+  "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_20231128125208.json

@@ -0,0 +1,82 @@
+{
+  "name": "sag_components",
+  "version": "1.0.346",
+  "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/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-preset-react-app": "^10.0.1",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.0",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
+    "recharts": "^2.9.2",
+    "storybook": "^7.4.6",
+    "styled-components": "^5.3.1"
+  },
+  "bundler": {
+    "exportEntries": ["src/index.js"],
+    "managerEntries": ["src/manager.js"],
+    "previewEntries": ["src/preview.js"]
+  },
+  "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/Benchmark.js

@@ -39,6 +39,9 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     } else {
       benchmarkCurrentValue = benchmarkValue / totalValue;
     }
+    if (currentValue === benchmarkValue) {
+      return color;
+    }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return underAvarageColor;
     }
@@ -55,6 +58,9 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     } else {
       benchmarkCurrentValue = benchmarkValue / totalValue;
     }
+    if (currentValue === benchmarkValue) {
+      return linearGradientColor;
+    }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return linearGradientUnderAvarageColor;
     }
@@ -117,5 +123,5 @@ Benchmark.defaultProps = {
   linearGradientUnderAvarageColor: '#FDB1B1',
   backgroundColor: '#F2F2F2',
   tooltipLabel: 'Benchmark',
-  tooltipDirection: 'top'
+  tooltipDirection: 'bottom'
 };

package/dist/stories/components/CodeEditor.js

@@ -18,7 +18,8 @@ var CodeEditor = function CodeEditor(_ref) {
     onChange = _ref.onChange;
   return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
     style: {
-      height: "200px"
+      height: '300px',
+      width: '100%'
     },
     mode: "mysql",
     theme: "monokai",

package/dist/stories/components/KpiFilter.js

@@ -28,12 +28,12 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     onClick = props.onClick,
     onClickIncludeBenchmark = props.onClickIncludeBenchmark,
     onClickPeriod = props.onClickPeriod;
-  var DEFAULT_PERIOD = "4 weeks";
+  var DEFAULT_PERIOD = '4 weeks';
   var _useState = (0, _react.useState)(kpiData),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     KpiDataState = _useState2[0],
     setKpiDataState = _useState2[1];
-  var _useState3 = (0, _react.useState)("4 weeks"),
+  var _useState3 = (0, _react.useState)('4 weeks'),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     periodState = _useState4[0],
     setPeriodSate = _useState4[1];
@@ -54,7 +54,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
         }
         if (kpiSelectedData[i][j].secondButtonLabel && kpiSelectedData[i][j].secondButtonChecked === true) {
-          kpiSelectedButtonsLabels.push("".concat("", kpiSelectedData[i][j].label, ":", kpiSelectedData[i][j].secondButtonLabel));
+          kpiSelectedButtonsLabels.push(''.concat('', kpiSelectedData[i][j].label, ':', kpiSelectedData[i][j].secondButtonLabel));
         }
       }
     }
@@ -66,7 +66,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
   // ------------------------- Buttons OnClick Handler - End ------------------
 
   var dispalyColumnButtons = function dispalyColumnButtons(data, height) {
-    var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
+    var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
     if (data && data.length > 0) {
       return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonsContainer, {
         id: "ButtonsContainer",
@@ -76,8 +76,8 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
         var _item$marginBottom;
         return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
           id: "ButtonContainer",
-          className: item.marginBottom ? "marginBottom" : "",
-          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : "0px"
+          className: item.marginBottom ? 'marginBottom' : '',
+          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : '0px'
         }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
           backgroundColorChecked: buttonsBackgroundColorChecked,
           backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
@@ -101,7 +101,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
                 })
               });
             });
-            console.log("newDataKpi", newDataKpi);
+            console.log('newDataKpi', newDataKpi);
             setKpiDataState(newDataKpi);
           },
           textColorChecked: buttonsTextColorChecked,
@@ -118,26 +118,26 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           height: "29px",
           iconColor: buttonsIconColor,
           iconSize: "12px",
-          label: "".concat("", item.label, ":", item.secondButtonLabel),
+          label: ''.concat('', item.label, ':', item.secondButtonLabel),
           displayLabel: item.secondButtonLabel,
           onClick: function onClick(props) {
             var newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
               var _itemColumn$buttonsAr3;
               return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
                 buttonsArray: (_itemColumn$buttonsAr3 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr3 === void 0 ? void 0 : _itemColumn$buttonsAr3.map(function (itemButton) {
-                  return "".concat("", itemButton.label, ":", itemButton.secondButtonLabel) === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
+                  return ''.concat('', itemButton.label, ':', itemButton.secondButtonLabel) === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
                     secondButtonChecked: props.checked
                   }) : (0, _objectSpread2.default)({}, itemButton);
                 })
               });
             });
             setKpiDataState(newDataKpi);
-            console.log("newDataKpi", newDataKpi, props);
+            console.log('newDataKpi', newDataKpi, props);
           },
           textColorChecked: buttonsTextColorChecked,
           textColorUnchecked: buttonsTextColorUnchecked,
           width: "100%"
-        }) : "");
+        }) : '');
       }));
     }
   };
@@ -199,7 +199,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "4 weeks",
-      checked: periodState === "4 weeks" ? true : false,
+      checked: periodState === '4 weeks',
       colorChecked: buttonsIconColor,
       colorUnchecked: buttonsIconColor,
       colorDisabled: buttonsIconColor,
@@ -207,14 +207,14 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === "4 weeks" ? true : false,
+      disabled: periodState === '4 weeks',
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "8 weeks",
-      checked: periodState === "8 weeks" ? true : false,
+      checked: periodState === '8 weeks',
       colorChecked: buttonsIconColor,
       colorUnchecked: buttonsIconColor,
       colorDisabled: buttonsIconColor,
@@ -222,14 +222,14 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === "8 weeks" ? true : false,
+      disabled: periodState === '8 weeks',
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "13 weeks",
-      checked: periodState === "13 weeks" ? true : false,
+      checked: periodState === '13 weeks',
       colorChecked: buttonsIconColor,
       colorUnchecked: buttonsIconColor,
       colorDisabled: buttonsIconColor,
@@ -237,29 +237,31 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === "13 weeks" ? true : false,
+      disabled: periodState === '13 weeks',
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }));
   };
   var displayColumns = function displayColumns() {
-    if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
-      id: "AllColumnsContainer"
-    }, KpiDataState.map(function (item, i) {
-      return /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnAndLineContainer, {
-        id: "ColumnAndLineContainer"
-      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
-        id: "ColumnContainer"
-      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
-        id: "ColumnTitleContainer"
-      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
-        id: "ColumnTitle"
-      }, item.columnTitle)), dispalyColumnButtons(item.buttonsArray, height = "160px", "0px"), i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? /*#__PURE__*/_react.default.createElement(_KpiFilter.PeriodColumnTitle, null, periodTitle) : "", i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? displayPeriod() : ""), item.rightBorder ? /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnRightLineSeporator, null) : "");
-    }));
+    if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) {
+      return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
+        id: "AllColumnsContainer"
+      }, KpiDataState.map(function (item, i) {
+        return /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnAndLineContainer, {
+          id: "ColumnAndLineContainer"
+        }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
+          id: "ColumnContainer"
+        }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
+          id: "ColumnTitleContainer"
+        }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
+          id: "ColumnTitle"
+        }, item.columnTitle)), dispalyColumnButtons(item.buttonsArray, height = '160px', '0px'), i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? /*#__PURE__*/_react.default.createElement(_KpiFilter.PeriodColumnTitle, null, periodTitle) : '', i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? displayPeriod() : ''), item.rightBorder ? /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnRightLineSeporator, null) : '');
+      }));
+    }
   };
 
-  //========================================= MAIN RETURN ====================================
+  //= ======================================== MAIN RETURN ====================================
   return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainContainer, {
     id: "MainContainer",
     height: height,
@@ -267,21 +269,21 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
   }, /*#__PURE__*/_react.default.createElement(_KpiFilter.PanelContainer, {
     id: "PanelContainer"
   }, displayMainTitle(), displayColumns()));
-  //========================================= MAIN RETURN END====================================
+  //= ======================================== MAIN RETURN END====================================
 };
 var _default = exports.default = KpiFilter;
 KpiFilter.defaultProps = {
-  mainTitle: "Select Table Columns",
-  periodTitle: "Pre and Post Event Period",
+  mainTitle: 'Select Table Columns',
+  periodTitle: 'Pre and Post Event Period',
   kpiData: [],
-  width: "100%",
-  height: "100%",
-  buttonsIconColor: "#1B30AA",
-  buttonsBorderColor: "#1B30AA",
-  buttonsTextColorChecked: "#212121",
-  buttonsTextColorUnchecked: "#212121",
-  buttonsBackgroundColorChecked: "#E9F1FF",
-  buttonsBackgroundColorUnchecked: "#F2F2F2",
+  width: '100%',
+  height: '100%',
+  buttonsIconColor: '#1B30AA',
+  buttonsBorderColor: '#1B30AA',
+  buttonsTextColorChecked: '#212121',
+  buttonsTextColorUnchecked: '#212121',
+  buttonsBackgroundColorChecked: '#E9F1FF',
+  buttonsBackgroundColorUnchecked: '#F2F2F2',
   onClick: function onClick() {},
   onClickIncludeBenchmark: function onClickIncludeBenchmark() {},
   onClickPeriod: function onClickPeriod() {}

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

@@ -12,6 +12,6 @@ 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 = exports.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);
-var ModalContent = exports.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);
+var ModalContent = exports.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: 80%;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.5s ease-in-out;\n"])), fadeIn);
 var CloseButton = exports.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"])));
 var SubmitButton = exports.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"])));

package/dist/stories/components/ModalTotalBenchmark.js

@@ -32,6 +32,7 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
     code = _useState4[0],
     setCode = _useState4[1];
   function getTypeName(type) {
+    console.log('types', typeof type, typeof _propTypes.default.string);
     if (type === _propTypes.default.string) {
       return 'string';
     }
@@ -44,7 +45,7 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
     if (type === _propTypes.default.array) {
       return 'array';
     }
-    if (type === _propTypes.default.object) {
+    if (type === _propTypes.default.object || type === _propTypes.default.arrayOf) {
       return 'object';
     }
     if (type === _propTypes.default.func) {
@@ -77,12 +78,10 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
   (0, _react.useEffect)(function () {
     var newParams = withPropTypeChecks((0, _ComponentFactory.default)(componentName));
     setParams(newParams);
-    console.log('newParams', newParams);
+    console.log('newParams', newParams, componentName);
   }, []);
   var _useForm = (0, _reactHookForm.useForm)(),
-    register = _useForm.register,
     handleSubmit = _useForm.handleSubmit,
-    watch = _useForm.watch,
     control = _useForm.control,
     errors = _useForm.formState.errors;
   var onSubmit = function onSubmit(data) {
@@ -157,14 +156,53 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
       });
     }
     if (item.type === 'other') {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+      console.log('item', item);
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        key: item.id,
+        control: control,
+        name: "".concat(item.id, "Key"),
+        render: function render(_ref4) {
+          var field = _ref4.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            label: "".concat(item.label, "Key"),
+            text: "".concat(item.label, "Key"),
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            width: "300px",
+            height: "100%",
+            multiline: true,
+            placeHolder: "The Key",
+            shape: "round",
+            size: "small"
+          }));
+        }
+      }), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        key: item.id,
+        control: control,
+        name: "".concat(item.id, "Args"),
+        render: function render(_ref5) {
+          var field = _ref5.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            label: "".concat(item.label, "Args"),
+            text: "".concat(item.label, "Args"),
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            width: "300px",
+            height: "100%",
+            multiline: true,
+            placeHolder: "The args",
+            shape: "round",
+            size: "small"
+          }));
+        }
+      }));
     }
     return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
       key: item.id,
       control: control,
       name: item.id,
-      render: function render(_ref4) {
-        var field = _ref4.field;
+      render: function render(_ref6) {
+        var field = _ref6.field;
         return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
           allowedInput: "all",
           labelColor: "#1B30AA",

package/dist/stories/components/TextField.js

@@ -32,7 +32,7 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
     shape = _ref.shape,
     size = _ref.size,
     _ref$placeHolder = _ref.placeHolder,
-    placeHolder = _ref$placeHolder === void 0 ? 'Type...' : _ref$placeHolder,
+    placeHolder = _ref$placeHolder === void 0 ? 'Enter your email address' : _ref$placeHolder,
     _ref$passwordField = _ref.passwordField,
     passwordField = _ref$passwordField === void 0 ? false : _ref$passwordField,
     defaultValue = _ref.defaultValue,
@@ -124,6 +124,12 @@ var TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef(funct
           paddingRight: 0,
           background: 'white',
           paddingTop: 0
+        },
+        '& .MuiInputLabel-root': {
+          fontFamily: 'Poppins'
+        },
+        '& .MuiInputBase-inputSizeSmall': {
+          fontFamily: 'Poppins'
         }
       };
     }

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

@@ -15,4 +15,4 @@ var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(
 var TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n"])));
 
 /* Absolute positioning */
-var TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 8px 12px;\n  color: var(--tooltip-text-color);\n  background: var(--tooltip-background-color);\n  font-size: 12px;\n  font-family: sans-serif;\n  line-height: 1;\n  z-index: 100;\n  white-space: nowrap;\n \n  /* CSS border triangles */\n  &.controls::before {\n    content: \" \";\n    left: 50%;\n    border: solid transparent;\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-width: var(--tooltip-arrow-size);\n    margin-left: calc(var(--tooltip-arrow-size) * -1);\n  }\n\n  /* Absolute positioning */\n  &.controls.top {\n    top: calc(var(--tooltip-margin) * -1);\n  }\n\n  /* CSS border triangles */\n  &.controls.top::before {\n    top: 100%;\n    border-top-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.right {\n    left: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n\n  /* CSS border triangles */\n  &.controls.right::before {\n    left: calc(var(--tooltip-arrow-size) * -1);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-right-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.bottom {\n    bottom: calc(var(--tooltip-margin) * -1);\n  }\n  /* CSS border triangles */\n  &.controls.bottom::before {\n    bottom: 100%;\n    border-bottom-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.left {\n    left: auto;\n    right: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n  /* CSS border triangles */\n  &.controls.left::before {\n    left: auto;\n    right: calc(var(--tooltip-arrow-size) * -2);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-left-color: var(--tooltip-background-color);\n  }\n"])));
+var TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 4px 6px;\n  color: var(--tooltip-text-color);\n  background: var(--tooltip-background-color);\n  font-size: 12px;\n  font-family: sans-serif;\n  line-height: 1;\n  z-index: 100;\n  white-space: nowrap;\n \n  /* CSS border triangles */\n  &.controls::before {\n    content: \" \";\n    left: 50%;\n    border: solid transparent;\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-width: var(--tooltip-arrow-size);\n    margin-left: calc(var(--tooltip-arrow-size) * -1);\n  }\n\n  /* Absolute positioning */\n  &.controls.top {\n    top: calc(var(--tooltip-margin) * -1);\n  }\n\n  /* CSS border triangles */\n  &.controls.top::before {\n    top: 100%;\n    border-top-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.right {\n    left: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n\n  /* CSS border triangles */\n  &.controls.right::before {\n    left: calc(var(--tooltip-arrow-size) * -1);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-right-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.bottom {\n    bottom: calc(var(--tooltip-margin) * -1);\n  }\n  /* CSS border triangles */\n  &.controls.bottom::before {\n    bottom: 100%;\n    border-bottom-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.left {\n    left: auto;\n    right: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n  /* CSS border triangles */\n  &.controls.left::before {\n    left: auto;\n    right: calc(var(--tooltip-arrow-size) * -2);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-left-color: var(--tooltip-background-color);\n  }\n"])));

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

@@ -18,14 +18,14 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
 var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
 var TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n"])));
 var TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n"])));
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  background: #ffffff;\n  justify-content: center;\n  flex-direction: column;\n  flex-basis: 100%;\n\n  justify-content: space-between;\n  width: 100%;\n\n"])));
+var Controls = exports.Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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"])));
 var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 1rem;\n"])));
-var Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n\n"])));
-var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: baseline;\n\n"])));
+var Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n"])));
+var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: baseline;\n"])));
 var DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 1.2rem;\n  align-items: flex-end;\n"])));
 var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
 var FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;  \n"])));
 var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1.5rem;\n"])));
-var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\n  width: 100%;\n  height: 50%;\n"])));
+var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  /* height: 50%; */\n"])));
 var BottomDetailsRowContainer = exports.BottomDetailsRowContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;\n"])));
 var BottomDetailsRowTitle = exports.BottomDetailsRowTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.77778rem;\n"])));