sag_components 1.0.921 → 1.0.923

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

@@ -0,0 +1,380 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectAllIgnoreList = exports.SagTheme = exports.AdusaTheme = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _KpiFilter = require("./KpiFilter");
+const kpiDataColumn1 = [{
+  label: 'Event Name',
+  checked: true,
+  disabled: true
+}, {
+  label: 'Event Description',
+  checked: false,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Event Start Date',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Event End Date',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Event ID',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Event Type',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn2 = [{
+  label: 'Retailer',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Category',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Supplier',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Brand',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Item',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn3 = [{
+  label: 'Total Cost',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Package Cost',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Redemption Cost',
+  checked: false,
+  disabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'Actual Sales ROI',
+  checked: false,
+  disabled: false
+}, {
+  label: 'INC Baseline ROI',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Inc. STLY ROI',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn4 = [{
+  label: 'Actual Sales',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Baseline Sales',
+  checked: false,
+  disabled: false
+}, {
+  label: 'STLY Sales',
+  checked: false,
+  disabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'Actual Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Baseline Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'STLY Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Participating Units',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn5 = [{
+  label: 'INC Sales Baseline',
+  checked: true,
+  disabled: false
+}, {
+  label: 'INC Sales STLY',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Basket Lift',
+  checked: false,
+  disabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'INC Baseline Units',
+  checked: false,
+  disabled: false
+}, {
+  label: 'INC STLY Units',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn6 = [{
+  label: 'Total Shoppers',
+  checked: true,
+  disabled: false
+}, {
+  label: 'New Shoppers',
+  checked: true,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Existing Shoppers',
+  checked: true,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false,
+  marginBottom: '20px'
+}, {
+  label: 'Redeemers',
+  checked: false,
+  disabled: false
+}, {
+  label: 'New Redeemers',
+  checked: false,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Existing Redeemers',
+  checked: false,
+  disabled: false,
+  secondButtonLabel: '%',
+  secondButtonChecked: false,
+  secondButtonDisabled: false
+}, {
+  label: 'Redemptions',
+  checked: false,
+  disabled: false
+}];
+const kpiDataColumn7 = [{
+  label: 'New Repeaters',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Existing Repeaters',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Basket $ Chg - Existing Repeaters',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Basket Units Chg - Existing Repeaters',
+  checked: false,
+  disabled: false
+}, {
+  label: 'Visits Chg - Existing Repeaters',
+  checked: false,
+  disabled: false
+}];
+const kpiData1 = [{
+  columnTitle: 'Event Attributes',
+  buttonsArray: kpiDataColumn1
+}, {
+  columnTitle: 'Data Resolution',
+  buttonsArray: kpiDataColumn2,
+  rightBorder: true
+}, {
+  columnTitle: 'Cost and ROI',
+  buttonsArray: kpiDataColumn3
+}, {
+  columnTitle: 'Sales and Units',
+  buttonsArray: kpiDataColumn4
+}, {
+  columnTitle: 'Incrementality',
+  buttonsArray: kpiDataColumn5,
+  rightBorder: true
+}, {
+  columnTitle: 'Shoppers and Redeemers',
+  buttonsArray: kpiDataColumn6
+}, {
+  columnTitle: 'Post Event',
+  buttonsArray: kpiDataColumn7
+}];
+var _default = exports.default = {
+  title: 'SAG BI/KpiFilter',
+  component: _KpiFilter.KpiFilter,
+  tags: ['autodocs'],
+  argTypes: {
+    mainTitle: {
+      name: 'mainTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'main title'
+    },
+    periodTitle: {
+      name: 'periodTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'period Title '
+    },
+    kpiData: {
+      name: 'kpiData',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill kpi columns and buttons '
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the control (in px / %)'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the control (in px / % )'
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'onClick event - returns an object of check box {true/false} '
+    },
+    // onClickIncludeBenchmark: {
+    //   action: "onClickIncludeBenchmark",
+    //   description:
+    //     "onClick Include Benchmark event - returns an object of check box {true/false} ",
+    // },
+
+    onClickPeriod: {
+      action: 'onClickPeriod',
+      description: ' onClickPeriod event  '
+    },
+    buttonsIconColor: {
+      name: 'buttonsIconColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets icons Color '
+      }
+    },
+    buttonsBorderColor: {
+      name: 'buttonsBorderColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets buttons border Color '
+      }
+    },
+    buttonsTextColorChecked: {
+      name: 'buttonsTextColorChecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text Checked Color '
+      }
+    },
+    buttonsTextColorUnchecked: {
+      name: 'buttonsTextColorUnchecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text Unchecked Color '
+      }
+    },
+    buttonsBackgroundColorChecked: {
+      name: 'buttonsBackgroundColorChecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text background Checked Color '
+      }
+    },
+    buttonsBackgroundColorUnchecked: {
+      name: 'buttonsBackgroundColorUnchecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text background Unchecked Color '
+      }
+    },
+    selectAllIgnoreList: {
+      name: 'selectAllIgnoreList',
+      control: {
+        type: 'object'
+      },
+      description: ' array of strings: selectAll Ignore List '
+    }
+  }
+};
+const SagTheme = exports.SagTheme = {
+  args: {
+    mainTitle: 'Select Table Columns',
+    periodTitle: 'Pre and Post Event Period',
+    kpiData: kpiData1,
+    width: '100%',
+    height: '100%',
+    buttonsIconColor: '#1B30AA',
+    buttonsBorderColor: '#1B30AA',
+    buttonsTextColorChecked: '#212121',
+    buttonsTextColorUnchecked: '#212121',
+    buttonsBackgroundColorChecked: '#E9F1FF',
+    buttonsBackgroundColorUnchecked: '#F2F2F2'
+  }
+};
+const AdusaTheme = exports.AdusaTheme = {
+  args: {
+    mainTitle: 'Select Table Columns',
+    periodTitle: 'Pre and Post Event Period',
+    kpiData: kpiData1,
+    width: '100%',
+    height: '100%',
+    buttonsIconColor: '#90CE9C',
+    buttonsBorderColor: '#90CE9C',
+    buttonsTextColorChecked: '#212121',
+    buttonsTextColorUnchecked: '#212121',
+    buttonsBackgroundColorChecked: '#E9F5EB',
+    buttonsBackgroundColorUnchecked: '#F2F2F2'
+  }
+};
+const SelectAllIgnoreList = exports.SelectAllIgnoreList = {
+  args: {
+    mainTitle: 'Select Table Columns',
+    periodTitle: 'Pre and Post Event Period',
+    kpiData: kpiData1,
+    width: '100%',
+    height: '100%',
+    buttonsIconColor: '#90CE9C',
+    buttonsBorderColor: '#90CE9C',
+    buttonsTextColorChecked: '#212121',
+    buttonsTextColorUnchecked: '#212121',
+    buttonsBackgroundColorChecked: '#E9F5EB',
+    buttonsBackgroundColorUnchecked: '#F2F2F2',
+    selectAllIgnoreList: ['Event Name', 'Event Description', 'Event Start Date']
+  }
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PeriodColumnTitle = exports.PanelContainer = exports.MainTitleContainer = exports.MainTitle = exports.MainContainer = exports.ColumnTitleContainer = exports.ColumnTitleAndButtonsContainer = exports.ColumnTitle = exports.ColumnLineSeporatorContainer = exports.ColumnLineSeporator = exports.ColumnContainer = exports.CheckBoxPeriodContainer = exports.CheckBoxContainer = exports.ButtonsContainer = exports.ButtonContainer = exports.AllColumnsContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+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 => props.width, props => props.height);
+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 0.3rem 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 ColumnTitleAndButtonsContainer = exports.ColumnTitleAndButtonsContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 10px 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 ColumnLineSeporatorContainer = exports.ColumnLineSeporatorContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background-color: #b1b1b1;\n  align-items: center;\n  height: 90%;\n  margin: 15px 0;\n"])));
+const ColumnLineSeporator = exports.ColumnLineSeporator = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.5px;\n"])));
+const ColumnTitleContainer = exports.ColumnTitleContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (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(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: nowrap;\n  padding-bottom: ", ";\n"])), props => props.paddingBottom);
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px;\n  gap: 10px;\n  &.marginBottom {\n    margin-bottom: ", ";\n  }\n"])), props => props.marginBottom);
+const CheckBoxPeriodContainer = exports.CheckBoxPeriodContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  //gap: 20px;\n  margin: 5px;\n"])));

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

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