sag_components 1.0.397 → 1.0.398

package/dist/stories/components/KpiFilter.js

@@ -1,58 +1,53 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.KpiFilter = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBox = require("./CheckBox");
 var _CheckBoxButton = require("./CheckBoxButton");
 var _KpiFilter = require("./KpiFilter.style");
 /* KpiFilter */
-var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
-  var width = props.width,
-    height = props.height;
-  var mainTitle = props.mainTitle,
-    periodTitle = props.periodTitle,
-    kpiData = props.kpiData,
-    buttonsIconColor = props.buttonsIconColor,
-    buttonsBorderColor = props.buttonsBorderColor,
-    buttonsTextColorChecked = props.buttonsTextColorChecked,
-    buttonsTextColorUnchecked = props.buttonsTextColorUnchecked,
-    buttonsBackgroundColorChecked = props.buttonsBackgroundColorChecked,
-    buttonsBackgroundColorUnchecked = props.buttonsBackgroundColorUnchecked,
-    onClick = props.onClick,
-    onClickIncludeBenchmark = props.onClickIncludeBenchmark,
-    onClickPeriod = props.onClickPeriod;
-  var DEFAULT_PERIOD = {
+const KpiFilter = props => {
+  let {
+    width,
+    height
+  } = props;
+  const {
+    mainTitle,
+    periodTitle,
+    kpiData,
+    //  width,
+    //   height,
+    buttonsIconColor,
+    buttonsBorderColor,
+    buttonsTextColorChecked,
+    buttonsTextColorUnchecked,
+    buttonsBackgroundColorChecked,
+    buttonsBackgroundColorUnchecked,
+    onClick,
+    onClickIncludeBenchmark,
+    onClickPeriod
+  } = props;
+  const DEFAULT_PERIOD = {
     weeks4: true,
     weeks8: false,
     weeks13: false
   };
-  var _useState = (0, _react.useState)(kpiData),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    KpiDataState = _useState2[0],
-    setKpiDataState = _useState2[1];
-  var _useState3 = (0, _react.useState)(DEFAULT_PERIOD),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    periodState = _useState4[0],
-    setPeriodState = _useState4[1];
+  const [KpiDataState, setKpiDataState] = (0, _react.useState)(kpiData);
+  const [periodState, setPeriodState] = (0, _react.useState)(DEFAULT_PERIOD);
 
   // ------------------------- CheckBox Buttons OnClick Handler - Begin ------------------
-  (0, _react.useEffect)(function () {
-    var kpiSelectedData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
+  (0, _react.useEffect)(() => {
+    const kpiSelectedData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
       var _itemColumn$buttonsAr;
-      return (_itemColumn$buttonsAr = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr === void 0 ? void 0 : _itemColumn$buttonsAr.filter(function (itemButton) {
-        return itemButton.checked === true || itemButton.secondButtonChecked === true;
-      });
+      return (_itemColumn$buttonsAr = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr === void 0 ? void 0 : _itemColumn$buttonsAr.filter(itemButton => itemButton.checked === true || itemButton.secondButtonChecked === true);
     });
-    var kpiSelectedButtonsLabels = [];
-    for (var i = 0; i < (kpiSelectedData === null || kpiSelectedData === void 0 ? void 0 : kpiSelectedData.length); i++) {
-      for (var j = 0; j < ((_kpiSelectedData$i = kpiSelectedData[i]) === null || _kpiSelectedData$i === void 0 ? void 0 : _kpiSelectedData$i.length); j++) {
+    const kpiSelectedButtonsLabels = [];
+    for (let i = 0; i < (kpiSelectedData === null || kpiSelectedData === void 0 ? void 0 : kpiSelectedData.length); i++) {
+      for (let j = 0; j < ((_kpiSelectedData$i = kpiSelectedData[i]) === null || _kpiSelectedData$i === void 0 ? void 0 : _kpiSelectedData$i.length); j++) {
         var _kpiSelectedData$i;
         if (kpiSelectedData[i][j].label && kpiSelectedData[i][j].checked === true) {
           kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
@@ -63,20 +58,20 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       }
     }
     onClick({
-      kpiSelectedButtonsLabels: kpiSelectedButtonsLabels,
+      kpiSelectedButtonsLabels,
       kpiData: KpiDataState
     });
   }, [KpiDataState]);
   // ------------------------- Buttons OnClick Handler - End ------------------
 
-  var dispalyColumnButtons = function dispalyColumnButtons(data, height) {
-    var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
+  const dispalyColumnButtons = function (data, height) {
+    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
     if (data && data.length > 0) {
       return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonsContainer, {
         id: "ButtonsContainer",
         height: height,
         paddingBottom: paddingBottom
-      }, data === null || data === void 0 ? void 0 : data.map(function (item) {
+      }, data === null || data === void 0 ? void 0 : data.map(item => {
         var _item$marginBottom;
         return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
           id: "ButtonContainer",
@@ -94,16 +89,18 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           iconColor: buttonsIconColor,
           iconSize: "12px",
           label: item.label,
-          onClick: function onClick(props) {
-            var newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
+          onClick: props => {
+            const newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
               var _itemColumn$buttonsAr2;
-              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
-                buttonsArray: (_itemColumn$buttonsAr2 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr2 === void 0 ? void 0 : _itemColumn$buttonsAr2.map(function (itemButton) {
-                  return itemButton.label === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
-                    checked: props.checked
-                  }) : (0, _objectSpread2.default)({}, itemButton);
+              return {
+                ...itemColumn,
+                buttonsArray: (_itemColumn$buttonsAr2 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr2 === void 0 ? void 0 : _itemColumn$buttonsAr2.map(itemButton => itemButton.label === props.label ? {
+                  ...itemButton,
+                  checked: props.checked
+                } : {
+                  ...itemButton
                 })
-              });
+              };
             });
             console.log("newDataKpi", newDataKpi);
             setKpiDataState(newDataKpi);
@@ -124,16 +121,18 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           iconSize: "12px",
           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) {
+          onClick: props => {
+            const newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(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), {}, {
-                    secondButtonChecked: props.checked
-                  }) : (0, _objectSpread2.default)({}, itemButton);
+              return {
+                ...itemColumn,
+                buttonsArray: (_itemColumn$buttonsAr3 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr3 === void 0 ? void 0 : _itemColumn$buttonsAr3.map(itemButton => "".concat("", itemButton.label, ":", itemButton.secondButtonLabel) === props.label ? {
+                  ...itemButton,
+                  secondButtonChecked: props.checked
+                } : {
+                  ...itemButton
                 })
-              });
+              };
             });
             setKpiDataState(newDataKpi);
             console.log("newDataKpi", newDataKpi, props);
@@ -145,72 +144,75 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       }));
     }
   };
-  var displayMainTitle = function displayMainTitle() {
-    return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitleContainer, {
-      id: "MainTitleContainer"
-    }, /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitle, {
-      id: "MainTitle"
-    }, mainTitle), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
-      id: "CheckBoxContainer"
-    }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-      checked: false,
-      colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor,
-      fontSize: "14px",
-      height: "20px",
-      width: "100%",
-      iconSize: "14px",
-      label: "Select All",
-      onClick: function onClick(props) {
-        var newData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
-          var _itemColumn$buttonsAr4;
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
-            buttonsArray: (_itemColumn$buttonsAr4 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr4 === void 0 ? void 0 : _itemColumn$buttonsAr4.map(function (itemButton) {
-              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
-                checked: props.checked
-              });
-            })
-          });
-        });
-        setKpiDataState(newData);
-      }
-    }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-      checked: false,
-      colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor,
-      fontSize: "14px",
-      height: "20px",
-      width: "100%",
-      iconSize: "14px",
-      label: "Include Benchmarks",
-      onClick: function onClick(props) {
-        onClickIncludeBenchmark({
-          label: props.label,
-          checked: props.checked
-        });
-      }
-    })));
-  };
-  var onClickPeriodHandler = function onClickPeriodHandler(props) {
-    var label = props.label,
-      checked = props.checked;
-    var newPeriod;
-    var periodCheckedArray = [];
+  const displayMainTitle = () => /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitleContainer, {
+    id: "MainTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitle, {
+    id: "MainTitle"
+  }, mainTitle), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
+    id: "CheckBoxContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    checked: false,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor,
+    fontSize: "14px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    label: "Select All",
+    onClick: props => {
+      const newData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
+        var _itemColumn$buttonsAr4;
+        return {
+          ...itemColumn,
+          buttonsArray: (_itemColumn$buttonsAr4 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr4 === void 0 ? void 0 : _itemColumn$buttonsAr4.map(itemButton => ({
+            ...itemButton,
+            checked: props.checked
+          }))
+        };
+      });
+      setKpiDataState(newData);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    checked: false,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor,
+    fontSize: "14px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    label: "Include Benchmarks",
+    onClick: props => {
+      onClickIncludeBenchmark({
+        label: props.label,
+        checked: props.checked
+      });
+    }
+  })));
+  const onClickPeriodHandler = props => {
+    const {
+      label,
+      checked
+    } = props;
+    let newPeriod;
+    let periodCheckedArray = [];
     switch (label) {
       case "4 weeks":
-        newPeriod = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, periodState), {}, {
+        newPeriod = {
+          ...periodState,
           weeks4: checked
-        });
+        };
         break;
       case "8 weeks":
-        newPeriod = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, periodState), {}, {
+        newPeriod = {
+          ...periodState,
           weeks8: checked
-        });
+        };
         break;
       case "13 weeks":
-        newPeriod = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, periodState), {}, {
+        newPeriod = {
+          ...periodState,
           weeks13: checked
-        });
+        };
         break;
     }
     console.log("onClickPeriodHandler", newPeriod);
@@ -222,80 +224,76 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       periodChecked: periodCheckedArray
     });
   };
-  var displayPeriod = function displayPeriod() {
-    return /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxPeriodContainer, {
-      id: "CheckBoxPeriodContainer"
-    }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-      id: "CheckBox",
-      label: "4 weeks",
-      checked: periodState.weeks4,
-      colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor
-      //colorDisabled={buttonsIconColor}
-      ,
-      fontSize: "14px",
-      height: "20px",
-      width: "100%",
-      iconSize: "14px",
-      disabled: false
-      //disabled={periodState === "4 weeks"}
-      ,
-      onClick: function onClick(props) {
-        onClickPeriodHandler(props);
-      }
-    }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-      id: "CheckBox",
-      label: "8 weeks",
-      checked: periodState.weeks8,
-      colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor
-      //colorDisabled={buttonsIconColor}
-      ,
-      fontSize: "12px",
-      height: "20px",
-      width: "100%",
-      iconSize: "14px",
-      disabled: false
-      //disabled={periodState === "8 weeks"}
-      ,
-      onClick: function onClick(props) {
-        onClickPeriodHandler(props);
-      }
-    }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
-      id: "CheckBox",
-      label: "13 weeks",
-      checked: periodState.weeks13,
-      colorChecked: buttonsIconColor,
-      colorUnchecked: buttonsIconColor
-      //colorDisabled={buttonsIconColor}
-      ,
-      fontSize: "12px",
-      height: "20px",
-      width: "100%",
-      iconSize: "14px",
-      disabled: false
-      //disabled={periodState === "13 weeks"}
-      ,
-      onClick: function onClick(props) {
-        onClickPeriodHandler(props);
-      }
-    }));
-  };
-  var displayColumns = function displayColumns() {
+  const displayPeriod = () => /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxPeriodContainer, {
+    id: "CheckBoxPeriodContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    id: "CheckBox",
+    label: "4 weeks",
+    checked: periodState.weeks4,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor
+    //colorDisabled={buttonsIconColor}
+    ,
+    fontSize: "14px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    disabled: false
+    //disabled={periodState === "4 weeks"}
+    ,
+    onClick: props => {
+      onClickPeriodHandler(props);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    id: "CheckBox",
+    label: "8 weeks",
+    checked: periodState.weeks8,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor
+    //colorDisabled={buttonsIconColor}
+    ,
+    fontSize: "12px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    disabled: false
+    //disabled={periodState === "8 weeks"}
+    ,
+    onClick: props => {
+      onClickPeriodHandler(props);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    id: "CheckBox",
+    label: "13 weeks",
+    checked: periodState.weeks13,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor
+    //colorDisabled={buttonsIconColor}
+    ,
+    fontSize: "12px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    disabled: false
+    //disabled={periodState === "13 weeks"}
+    ,
+    onClick: props => {
+      onClickPeriodHandler(props);
+    }
+  }));
+  const 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) : "");
-      }));
+      }, KpiDataState.map((item, i) => /*#__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) : "")));
     }
   };
 
@@ -309,6 +307,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
   }, displayMainTitle(), displayColumns()));
   //= ======================================== MAIN RETURN END====================================
 };
+exports.KpiFilter = KpiFilter;
 var _default = exports.default = KpiFilter;
 KpiFilter.defaultProps = {
   mainTitle: "Select Table Columns",
@@ -322,7 +321,7 @@ KpiFilter.defaultProps = {
   buttonsTextColorUnchecked: "#212121",
   buttonsBackgroundColorChecked: "#E9F1FF",
   buttonsBackgroundColorUnchecked: "#F2F2F2",
-  onClick: function onClick() {},
-  onClickIncludeBenchmark: function onClickIncludeBenchmark() {},
-  onClickPeriod: function onClickPeriod() {}
+  onClick: () => {},
+  onClickIncludeBenchmark: () => {},
+  onClickPeriod: () => {}
 };

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

@@ -8,26 +8,26 @@ exports.PeriodColumnTitle = exports.PanelContainer = exports.MainTitleContainer
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-var MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n"])), props => {
   return props.width;
-}, function (props) {
+}, props => {
   return props.height;
 });
-var PanelContainer = exports.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 1rem;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
-var MainTitleContainer = exports.MainTitleContainer = _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"])));
-var MainTitle = exports.MainTitle = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
-var ColumnTitle = exports.ColumnTitle = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var PeriodColumnTitle = exports.PeriodColumnTitle = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 50px 5px 5px 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var CheckBoxContainer = exports.CheckBoxContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n"])));
-var AllColumnsContainer = exports.AllColumnsContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
-var ColumnAndLineContainer = exports.ColumnAndLineContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 20px 0 0 0; \n  height: 100%;\n"])));
-var ColumnContainer = exports.ColumnContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
-var ColumnRightLineSeporator = exports.ColumnRightLineSeporator = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #b1b1b1;\n  width: 0.5px;\n  height: 95%;  \n  margin-left: 40px;\n  @media (max-width: 1536px) {\n    margin-left: 25px;\n  }\n  @media (max-width: 1366px) {\n    margin-left: 15px;\n  }\n"])));
-var ColumnTitleContainer = exports.ColumnTitleContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n"])));
-var ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column; \n  white-space: nowrap;\n  padding-bottom: ", ";\n"])), function (props) {
+const PanelContainer = exports.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 1rem;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
+const MainTitleContainer = exports.MainTitleContainer = _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"])));
+const MainTitle = exports.MainTitle = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ColumnTitle = exports.ColumnTitle = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const PeriodColumnTitle = exports.PeriodColumnTitle = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 50px 5px 5px 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const CheckBoxContainer = exports.CheckBoxContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n"])));
+const AllColumnsContainer = exports.AllColumnsContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
+const ColumnAndLineContainer = exports.ColumnAndLineContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 20px 0 0 0; \n  height: 100%;\n"])));
+const ColumnContainer = exports.ColumnContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+const ColumnRightLineSeporator = exports.ColumnRightLineSeporator = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #b1b1b1;\n  width: 0.5px;\n  height: 95%;  \n  margin-left: 40px;\n  @media (max-width: 1536px) {\n    margin-left: 25px;\n  }\n  @media (max-width: 1366px) {\n    margin-left: 15px;\n  }\n"])));
+const ColumnTitleContainer = exports.ColumnTitleContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n"])));
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column; \n  white-space: nowrap;\n  padding-bottom: ", ";\n"])), props => {
   return props.paddingBottom;
 });
-var ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  padding: 6px;\n  gap: 10px;\n  &.marginBottom {\n    margin-bottom: ", ";\n  }\n"])), function (props) {
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  padding: 6px;\n  gap: 10px;\n  &.marginBottom {\n    margin-bottom: ", ";\n  }\n"])), props => {
   return props.marginBottom;
 });
-var CheckBoxPeriodContainer = exports.CheckBoxPeriodContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  //gap: 20px;\n  margin: 5px;\n"])));
+const CheckBoxPeriodContainer = exports.CheckBoxPeriodContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  //gap: 20px;\n  margin: 5px;\n"])));