sag_components 1.0.396 → 1.0.398

package/dist/index.js

@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 require("./index.css");
 var _App = _interopRequireDefault(require("./App"));
-var root = _client.default.createRoot(document.getElementById('root'));
+const root = _client.default.createRoot(document.getElementById('root'));
 root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
 
 // If you want to start measuring performance in your app, pass a function

package/dist/stories/components/Benchmark.js

@@ -10,28 +10,30 @@ var _Benchmark = require("./Benchmark.style");
 var _CommonFunctions = require("./CommonFunctions");
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 /* Benchmark */
-var Benchmark = exports.Benchmark = function Benchmark(props) {
-  var totalValue = props.totalValue,
-    currentValue = props.currentValue,
-    benchmarkValue = props.benchmarkValue,
-    width = props.width,
-    height = props.height,
-    color = props.color,
-    linearGradientColor = props.linearGradientColor,
-    underAvarageColor = props.underAvarageColor,
-    linearGradientUnderAvarageColor = props.linearGradientUnderAvarageColor,
-    backgroundColor = props.backgroundColor,
-    tooltipLabel = props.tooltipLabel,
-    tooltipDirection = props.tooltipDirection;
-  var getCurrentValueRectangleWidth = function getCurrentValueRectangleWidth() {
+const Benchmark = props => {
+  const {
+    totalValue,
+    currentValue,
+    benchmarkValue,
+    width,
+    height,
+    color,
+    linearGradientColor,
+    underAvarageColor,
+    linearGradientUnderAvarageColor,
+    backgroundColor,
+    tooltipLabel,
+    tooltipDirection
+  } = props;
+  const getCurrentValueRectangleWidth = () => {
     if (!totalValue) return 0;
     if (currentValue > totalValue) return width;
     return currentValue / totalValue * width;
   };
-  var getUnderAvarageColor = function getUnderAvarageColor() {
+  const getUnderAvarageColor = () => {
     if (!totalValue) return backgroundColor;
     if (currentValue > totalValue) return color;
-    var benchmarkCurrentValue;
+    let benchmarkCurrentValue;
     if (!benchmarkValue) {
       benchmarkCurrentValue = 0.5;
     } else if (benchmarkValue > totalValue) {
@@ -47,10 +49,10 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     }
     return color;
   };
-  var getUnderAvaragelinearGradientColor = function getUnderAvaragelinearGradientColor() {
+  const getUnderAvaragelinearGradientColor = () => {
     if (!totalValue) return backgroundColor;
     if (currentValue > totalValue) return linearGradientColor;
-    var benchmarkCurrentValue;
+    let benchmarkCurrentValue;
     if (!benchmarkValue) {
       benchmarkCurrentValue = 0.5;
     } else if (benchmarkValue > totalValue) {
@@ -66,7 +68,7 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     }
     return linearGradientColor;
   };
-  var getBenchmarkLeft = function getBenchmarkLeft() {
+  const getBenchmarkLeft = () => {
     if (!benchmarkValue) {
       return width / 2;
     }
@@ -75,7 +77,7 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     }
     return width * (benchmarkValue / totalValue);
   };
-  var getTooltipText = function getTooltipText() {
+  const getTooltipText = () => {
     var _getFormattedValue, _getFormattedUnits;
     return /*#__PURE__*/_react.default.createElement("h4", null, tooltipLabel, tooltipLabel ? ': ' : '', (_getFormattedValue = (0, _CommonFunctions.getFormattedValue)(benchmarkValue)) === null || _getFormattedValue === void 0 ? void 0 : _getFormattedValue.toString(), (_getFormattedUnits = (0, _CommonFunctions.getFormattedUnits)(benchmarkValue)) === null || _getFormattedUnits === void 0 ? void 0 : _getFormattedUnits.toString());
   };
@@ -110,6 +112,7 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     left: getBenchmarkLeft()
   }))));
 };
+exports.Benchmark = Benchmark;
 var _default = exports.default = Benchmark;
 Benchmark.defaultProps = {
   totalValue: 100,

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

@@ -8,38 +8,8 @@ exports.CurrentValueRectangle = exports.ControlsContainer = exports.Controls = e
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 100px;\n  //border: 1px solid red;\n  align-items: center;\n"])), function (props) {
-  return props.width.toString().concat('', 'px');
-}, function (props) {
-  return props.height.toString().concat('', 'px');
-});
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n  //background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
-  return props.width.toString().concat('', 'px');
-}, function (props) {
-  return props.height.toString().concat('', 'px');
-});
-var BackgroundValueRectangle = exports.BackgroundValueRectangle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: ", ";\n  //border: 1px solid orange;\n"])), function (props) {
-  return props.width.toString().concat('', 'px');
-}, function (props) {
-  return props.height.toString().concat('', 'px');
-}, function (props) {
-  return props.color;
-});
-var CurrentValueRectangle = exports.CurrentValueRectangle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  //border: 1px solid green;\n"])), function (props) {
-  return props.width.toString().concat('', 'px');
-}, function (props) {
-  return props.height.toString().concat('', 'px');
-}, function (props) {
-  return props.lineargradientcolor;
-}, function (props) {
-  return props.color;
-});
-var AvarageDelimiter = exports.AvarageDelimiter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  top: ", ";\n  left: ", ";\n  border: 1px solid #212121;\n"])), function (props) {
-  return props.height.toString().concat('', 'px');
-}, function (props) {
-  return props.width.toString().concat('', 'px');
-}, function (props) {
-  return props.top.toString().concat('', 'px');
-}, function (props) {
-  return props.left.toString().concat('', 'px');
-});
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 100px;\n  //border: 1px solid red;\n  align-items: center;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'));
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n  //background: #ffffff;\n  //border: 1px solid blue;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'));
+const BackgroundValueRectangle = exports.BackgroundValueRectangle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: ", ";\n  //border: 1px solid orange;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'), props => props.color);
+const CurrentValueRectangle = exports.CurrentValueRectangle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  //border: 1px solid green;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'), props => props.lineargradientcolor, props => props.color);
+const AvarageDelimiter = exports.AvarageDelimiter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  top: ", ";\n  left: ", ";\n  border: 1px solid #212121;\n"])), props => props.height.toString().concat('', 'px'), props => props.width.toString().concat('', 'px'), props => props.top.toString().concat('', 'px'), props => props.left.toString().concat('', 'px'));

package/dist/stories/components/Button.js

@@ -10,25 +10,27 @@ var React = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _styles = require("@mui/material/styles");
 var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
-var Button = exports.Button = function Button(props) {
-  var text = props.text,
-    type = props.type,
-    fontFamily = props.fontFamily,
-    fontSize = props.fontSize,
-    shape = props.shape,
-    size = props.size,
-    height = props.height,
-    width = props.width,
-    disabled = props.disabled,
-    radius = props.radius,
-    textColor = props.textColor,
-    backgroundColor = props.backgroundColor,
-    borderColor = props.borderColor,
-    hoverTextColor = props.hoverTextColor,
-    hoverBackgroundColor = props.hoverBackgroundColor,
-    hoverBorderColor = props.hoverBorderColor,
-    _onClick = props.onClick;
-  var getTextColor = function getTextColor() {
+const Button = props => {
+  const {
+    text,
+    type,
+    fontFamily,
+    fontSize,
+    shape,
+    size,
+    height,
+    width,
+    disabled,
+    radius,
+    textColor,
+    backgroundColor,
+    borderColor,
+    hoverTextColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
+    onClick
+  } = props;
+  const getTextColor = () => {
     if (!textColor || textColor === '' || textColor === 'none') {
       // default when parameter was not set
       if (shape === 'contained') {
@@ -38,16 +40,18 @@ var Button = exports.Button = function Button(props) {
     }
     return textColor;
   };
-  var theme = (0, _styles.createTheme)({
+  const theme = (0, _styles.createTheme)({
     typography: {
-      fontFamily: fontFamily,
-      fontSize: fontSize
+      fontFamily,
+      fontSize
     },
     components: {
       MuiButton: {
         styleOverrides: {
-          root: function root(_ref) {
-            var ownerState = _ref.ownerState;
+          root: _ref => {
+            let {
+              ownerState
+            } = _ref;
             return {
               '&:hover': {
                 backgroundColor: hoverBackgroundColor,
@@ -77,19 +81,20 @@ var Button = exports.Button = function Button(props) {
       color: getTextColor(),
       //  shape === "contained" ? "white" : "black",
       backgroundColor: {
-        backgroundColor: backgroundColor
+        backgroundColor
       },
-      borderColor: borderColor,
-      fontFamily: fontFamily
+      borderColor,
+      fontFamily
     },
     variant: shape,
     size: size,
     disabled: !!disabled,
-    onClick: function onClick(event) {
-      _onClick(event);
+    onClick: event => {
+      onClick(event);
     }
   }, text)));
 };
+exports.Button = Button;
 var _default = exports.default = Button;
 Button.defaultProps = {
   text: '',
@@ -108,5 +113,5 @@ Button.defaultProps = {
   hoverTextColor: '',
   hoverBackgroundColor: '',
   hoverBorderColor: '#212121',
-  onClick: function onClick() {}
+  onClick: () => {}
 };

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

@@ -8,6 +8,4 @@ exports.DropdownContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
-var DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), function (props) {
-  return props.width;
-});
+const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), props => props.width);

package/dist/stories/components/CheckBox.js

@@ -1,46 +1,32 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CheckBox = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
 var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
 var _CheckBoxStyle = require("./CheckBox.style.js");
-var _excluded = ["label", "checked", "disabled", "width", "height", "iconSize", "fontSize", "colorChecked", "colorUnchecked", "colorDisabled", "onClick"];
 /*CheckBox*/
-var CheckBox = exports.CheckBox = function CheckBox(_ref) {
-  var label = _ref.label,
-    _ref$checked = _ref.checked,
-    checked = _ref$checked === void 0 ? false : _ref$checked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "100px" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "14px" : _ref$height,
-    _ref$iconSize = _ref.iconSize,
-    iconSize = _ref$iconSize === void 0 ? "14px" : _ref$iconSize,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? "14px" : _ref$fontSize,
-    _ref$colorChecked = _ref.colorChecked,
-    colorChecked = _ref$colorChecked === void 0 ? "#1B30AA" : _ref$colorChecked,
-    _ref$colorUnchecked = _ref.colorUnchecked,
-    colorUnchecked = _ref$colorUnchecked === void 0 ? "#212121" : _ref$colorUnchecked,
-    _ref$colorDisabled = _ref.colorDisabled,
-    colorDisabled = _ref$colorDisabled === void 0 ? "#D0D0D0" : _ref$colorDisabled,
-    _onClick = _ref.onClick,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(checked),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    checkedState = _useState2[0],
-    setCheckedState = _useState2[1];
-  (0, _react.useEffect)(function () {
+const CheckBox = _ref => {
+  let {
+    label,
+    checked = false,
+    disabled = false,
+    width = "100px",
+    height = "14px",
+    iconSize = "14px",
+    fontSize = "14px",
+    colorChecked = "#1B30AA",
+    colorUnchecked = "#212121",
+    colorDisabled = "#D0D0D0",
+    onClick,
+    ...props
+  } = _ref;
+  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
+  (0, _react.useEffect)(() => {
     setCheckedState(checked);
   }, [checked]);
   return /*#__PURE__*/_react.default.createElement(_CheckBoxStyle.ControlsContainer, {
@@ -53,10 +39,10 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
   }, checkedState ? /*#__PURE__*/_react.default.createElement(_CheckBoxStyle.CheckBoxIconContainer, {
     id: "CheckBoxIconContainer",
     disabled: disabled,
-    onClick: function onClick() {
+    onClick: () => {
       if (!disabled) {
         setCheckedState(false);
-        _onClick({
+        onClick({
           label: label,
           checked: false
         });
@@ -69,9 +55,9 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
   })) : /*#__PURE__*/_react.default.createElement(_CheckBoxStyle.CheckBoxIconContainer, {
     id: "CheckBoxIconContainer",
     disabled: disabled,
-    onClick: function onClick() {
+    onClick: () => {
       if (!disabled) {
-        _onClick({
+        onClick({
           label: label,
           checked: true
         });
@@ -86,4 +72,5 @@ var CheckBox = exports.CheckBox = function CheckBox(_ref) {
     id: "Label"
   }, label)));
 };
+exports.CheckBox = CheckBox;
 var _default = exports.default = CheckBox;

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

@@ -8,15 +8,7 @@ exports.Label = exports.ControlsContainer = exports.Controls = exports.CheckBoxI
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", ";\n  width: ", ";\n  font-size: ", ";\n  font-family: Poppins;\n  margin: 0;\n"])), function (props) {
-  return props.height;
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.fontSize;
-});
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  align-items: center;\n"])));
-var Label = exports.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 0 10px 0 10px;\n  white-space: nowrap;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var CheckBoxIconContainer = exports.CheckBoxIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0;\n  cursor: ", ";\n"])), function (props) {
-  return props.disabled ? 'default' : 'pointer';
-});
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", ";\n  width: ", ";\n  font-size: ", ";\n  font-family: Poppins;\n  margin: 0;\n"])), props => props.height, props => props.width, props => props.fontSize);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  align-items: center;\n"])));
+const Label = exports.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 0 10px 0 10px;\n  white-space: nowrap;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const CheckBoxIconContainer = exports.CheckBoxIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0;\n  cursor: ", ";\n"])), props => props.disabled ? 'default' : 'pointer');

package/dist/stories/components/CheckBoxButton.js

@@ -1,56 +1,37 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CheckBoxButton = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckBoxButtonCheckedIcon = require("./icons/CheckBoxButtonCheckedIcon");
 var _CheckBoxButton = require("./CheckBoxButton.style");
-var _excluded = ["label", "displayLabel", "checked", "disabled", "showIconInCheckBoxButtons", "width", "height", "iconSize", "fontSize", "iconColor", "borderColor", "borderRadius", "textColorChecked", "textColorUnchecked", "backgroundColorChecked", "backgroundColorUnchecked", "onClick"];
 /* CheckBoxButton */
-var CheckBoxButton = exports.CheckBoxButton = function CheckBoxButton(_ref) {
-  var label = _ref.label,
-    displayLabel = _ref.displayLabel,
-    _ref$checked = _ref.checked,
-    checked = _ref$checked === void 0 ? false : _ref$checked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$showIconInCheckB = _ref.showIconInCheckBoxButtons,
-    showIconInCheckBoxButtons = _ref$showIconInCheckB === void 0 ? true : _ref$showIconInCheckB,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100px' : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '14px' : _ref$height,
-    _ref$iconSize = _ref.iconSize,
-    iconSize = _ref$iconSize === void 0 ? '12px' : _ref$iconSize,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? '14px' : _ref$fontSize,
-    _ref$iconColor = _ref.iconColor,
-    iconColor = _ref$iconColor === void 0 ? '#1B30AA' : _ref$iconColor,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? '#1B30AA' : _ref$borderColor,
-    _ref$borderRadius = _ref.borderRadius,
-    borderRadius = _ref$borderRadius === void 0 ? '12px' : _ref$borderRadius,
-    _ref$textColorChecked = _ref.textColorChecked,
-    textColorChecked = _ref$textColorChecked === void 0 ? '#212121' : _ref$textColorChecked,
-    _ref$textColorUncheck = _ref.textColorUnchecked,
-    textColorUnchecked = _ref$textColorUncheck === void 0 ? '#212121' : _ref$textColorUncheck,
-    _ref$backgroundColorC = _ref.backgroundColorChecked,
-    backgroundColorChecked = _ref$backgroundColorC === void 0 ? '#E9F1FF' : _ref$backgroundColorC,
-    _ref$backgroundColorU = _ref.backgroundColorUnchecked,
-    backgroundColorUnchecked = _ref$backgroundColorU === void 0 ? '#F2F2F2' : _ref$backgroundColorU,
-    _onClick = _ref.onClick,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(checked),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    checkedState = _useState2[0],
-    setCheckedState = _useState2[1];
-  (0, _react.useEffect)(function () {
+const CheckBoxButton = _ref => {
+  let {
+    label,
+    displayLabel,
+    checked = false,
+    disabled = false,
+    showIconInCheckBoxButtons = true,
+    width = '100px',
+    height = '14px',
+    iconSize = '12px',
+    fontSize = '14px',
+    iconColor = '#1B30AA',
+    borderColor = '#1B30AA',
+    borderRadius = '12px',
+    textColorChecked = '#212121',
+    textColorUnchecked = '#212121',
+    backgroundColorChecked = '#E9F1FF',
+    backgroundColorUnchecked = '#F2F2F2',
+    onClick,
+    ...props
+  } = _ref;
+  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
+  (0, _react.useEffect)(() => {
     setCheckedState(checked);
   }, [checked]);
   return /*#__PURE__*/_react.default.createElement(_CheckBoxButton.ControlsContainer, {
@@ -64,11 +45,11 @@ var CheckBoxButton = exports.CheckBoxButton = function CheckBoxButton(_ref) {
     borderRadius: borderRadius,
     backgroundColor: checkedState ? backgroundColorChecked : backgroundColorUnchecked,
     borderColor: disabled ? backgroundColorChecked : checkedState ? borderColor : backgroundColorUnchecked,
-    onClick: function onClick() {
+    onClick: () => {
       if (!disabled) {
         setCheckedState(!checkedState);
-        _onClick({
-          label: label,
+        onClick({
+          label,
           checked: !checkedState
         });
       }
@@ -84,4 +65,5 @@ var CheckBoxButton = exports.CheckBoxButton = function CheckBoxButton(_ref) {
     textColor: disabled ? '#B1B1B1' : checkedState ? textColorChecked : textColorUnchecked
   }, displayLabel ? displayLabel : label)));
 };
+exports.CheckBoxButton = CheckBoxButton;
 var _default = exports.default = CheckBoxButton;

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

@@ -8,23 +8,7 @@ exports.Label = exports.ControlsContainer = exports.Controls = exports.CheckBoxB
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", ";\n  width: ", ";\n  font-size: ", ";\n  font-family: Poppins;\n  margin: 0;\n"])), function (props) {
-  return props.height;
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.fontSize;
-});
-var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  border-radius: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  cursor: ", ";\n"])), function (props) {
-  return props.borderRadius;
-}, function (props) {
-  return props.backgroundColor;
-}, function (props) {
-  return props.borderColor;
-}, function (props) {
-  return props.disabled ? "default" : "pointer";
-});
-var Label = exports.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 0 10px 0 10px;\n  color: ", ";\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])), function (props) {
-  return props.textColor;
-});
-var CheckBoxButtonIconContainer = exports.CheckBoxButtonIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0 0 0 10px;\n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", ";\n  width: ", ";\n  font-size: ", ";\n  font-family: Poppins;\n  margin: 0;\n"])), props => props.height, props => props.width, props => props.fontSize);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  border-radius: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  cursor: ", ";\n"])), props => props.borderRadius, props => props.backgroundColor, props => props.borderColor, props => props.disabled ? "default" : "pointer");
+const Label = exports.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 0 10px 0 10px;\n  color: ", ";\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])), props => props.textColor);
+const CheckBoxButtonIconContainer = exports.CheckBoxButtonIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0 0 0 10px;\n"])));

package/dist/stories/components/CodeEditor.js

@@ -13,9 +13,11 @@ require("ace-builds/src-noconflict/ext-language_tools");
 require("ace-builds/src-noconflict/snippets/mysql");
 // CodeEditor.js
 
-var CodeEditor = function CodeEditor(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange;
+const CodeEditor = _ref => {
+  let {
+    value,
+    onChange
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
     style: {
       height: '300px',

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

@@ -9,4 +9,4 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactAce = _interopRequireDefault(require("react-ace"));
 var _templateObject;
-var AceEditorContent = exports.AceEditorContent = (0, _styledComponents.default)(_reactAce.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n"])));
+const AceEditorContent = exports.AceEditorContent = (0, _styledComponents.default)(_reactAce.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n"])));