sag_components 1.0.397 → 1.0.398

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"])));

package/dist/stories/components/CollapseData.js

@@ -1,12 +1,10 @@
 "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.CollapseData = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _CollapseData = require("./CollapseData.style");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
@@ -14,17 +12,16 @@ var _ShoppingCartIcon = require("./icons/ShoppingCartIcon");
 var _ClockIcon = require("./icons/ClockIcon");
 var _ArrowUpIcon = require("./icons/ArrowUpIcon");
 var _ArrowDownIcon = require("./icons/ArrowDownIcon");
-var CollapseData = exports.CollapseData = function CollapseData(props) {
-  var title = props.title,
-    tableData = props.tableData,
-    noDataText = props.noDataText,
-    width = props.width,
-    height = props.height;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeIndex = _useState2[0],
-    setActiveIndex = _useState2[1];
-  var handleClick = function handleClick(index) {
+const CollapseData = props => {
+  const {
+    title,
+    tableData,
+    noDataText,
+    width,
+    height
+  } = props;
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(null);
+  const handleClick = index => {
     setActiveIndex(activeIndex === index ? null : index);
   };
   return /*#__PURE__*/_react.default.createElement(_CollapseData.AccordionWrapper, {
@@ -32,38 +29,33 @@ var CollapseData = exports.CollapseData = function CollapseData(props) {
     height: height
   }, tableData.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseData.ComponentHeader, null, title), tableData.map(function (section) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: section.key,
-      className: "accordion-section",
-      id: section.key
-    }, /*#__PURE__*/_react.default.createElement(_CollapseData.TitleAccordion, {
-      isopen: activeIndex === section.key,
-      onClick: function onClick() {
-        return handleClick(section.key);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_CollapseData.IconAndTitle, null, section.icon === 'Basket' ? /*#__PURE__*/_react.default.createElement(_ShoppingCartIcon.ShoppingCartIcon, null) : /*#__PURE__*/_react.default.createElement(_ClockIcon.ClockIcon, null), /*#__PURE__*/_react.default.createElement("u", null, section.title)), /*#__PURE__*/_react.default.createElement(_CollapseData.ArrowAndNumber, null, /*#__PURE__*/_react.default.createElement(_CollapseData.IconDiv, null, section.value >= 0 ? /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
-      width: "11px",
-      height: "12px"
-    }) : /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
-      width: "11px",
-      height: "12px"
-    })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, "".concat(parseFloat(section.value.toFixed(1))).concat(section.valueType)))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (headline, i) {
-      return /*#__PURE__*/_react.default.createElement(_CollapseData.Th, {
-        key: "".concat(i + headline)
-      }, headline.title);
-    }))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map(function (data, i) {
-      if (data.value !== null) {
-        return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
-          key: "".concat(i + data)
-        }, "".concat(data.value >= 0 ? '+' : '').concat(data.value.toFixed(1)).concat(section.valueType));
-      }
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseData.ComponentHeader, null, title), tableData.map(section => /*#__PURE__*/_react.default.createElement("div", {
+    key: section.key,
+    className: "accordion-section",
+    id: section.key
+  }, /*#__PURE__*/_react.default.createElement(_CollapseData.TitleAccordion, {
+    isopen: activeIndex === section.key,
+    onClick: () => handleClick(section.key)
+  }, /*#__PURE__*/_react.default.createElement(_CollapseData.IconAndTitle, null, section.icon === 'Basket' ? /*#__PURE__*/_react.default.createElement(_ShoppingCartIcon.ShoppingCartIcon, null) : /*#__PURE__*/_react.default.createElement(_ClockIcon.ClockIcon, null), /*#__PURE__*/_react.default.createElement("u", null, section.title)), /*#__PURE__*/_react.default.createElement(_CollapseData.ArrowAndNumber, null, /*#__PURE__*/_react.default.createElement(_CollapseData.IconDiv, null, section.value >= 0 ? /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
+    width: "11px",
+    height: "12px"
+  }) : /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
+    width: "11px",
+    height: "12px"
+  })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, "".concat(parseFloat(section.value.toFixed(1))).concat(section.valueType)))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/_react.default.createElement(_CollapseData.Th, {
+    key: "".concat(i + headline)
+  }, headline.title)))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map((data, i) => {
+    if (data.value !== null) {
       return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
         key: "".concat(i + data)
-      }, "No Data");
-    }))))));
-  })));
+      }, "".concat(data.value >= 0 ? '+' : '').concat(data.value.toFixed(1)).concat(section.valueType));
+    }
+    return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
+      key: "".concat(i + data)
+    }, "No Data");
+  })))))))));
 };
+exports.CollapseData = CollapseData;
 var _default = exports.default = CollapseData;
 CollapseData.defaultProps = {
   title: '',

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

@@ -8,20 +8,14 @@ exports.TitleDiv = exports.TitleAccordion = exports.Th = exports.Td = exports.Ta
 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;
-var AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding: 0 20px;\n  background-color: white;\n"])), function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-var TitleAccordion = exports.TitleAccordion = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: inline-block;\n  align-items: center;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (props) {
-  return props.isopen ? '#D0D0D0' : '#FFFFFF';
-});
-var IconAndTitle = exports.IconAndTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  font-family: \"poppins\";\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  float: left;\n  align-items: center;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  & > svg {\n    margin-right: 15px;\n  }\n"])));
-var ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  font-family: \"poppins\";\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 23%;\n  margin-right: 20px;\n"])));
-var IconDiv = exports.IconDiv = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  width: 25%;\n"])));
-var TitleDiv = exports.TitleDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 70%;\n  text-align: left;\n  padding-left: 3px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-var TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: auto;\n  margin-bottom: 22px;\n"])));
-var Table = exports.Table = _styledComponents.default.table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  table-layout: fixed;\n"])));
-var Th = exports.Th = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: white;\n  font-family: \"poppins\";\n  font-weight: 600;\n  font-size: 12px;\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 18px;\n  border-top: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
-var Td = exports.Td = _styledComponents.default.td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  font-family: \"poppins\";\n  font-weight: 400;\n  border-bottom: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
-var ComponentHeader = exports.ComponentHeader = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"poppins\";\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 27px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  padding: 0 20px;\n  background-color: white;\n"])), props => props.width, props => props.height);
+const TitleAccordion = exports.TitleAccordion = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: inline-block;\n  align-items: center;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), props => props.isopen ? '#D0D0D0' : '#FFFFFF');
+const IconAndTitle = exports.IconAndTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  font-family: \"poppins\";\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  float: left;\n  align-items: center;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  & > svg {\n    margin-right: 15px;\n  }\n"])));
+const ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  float: right;\n  font-family: \"poppins\";\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 23%;\n  margin-right: 20px;\n"])));
+const IconDiv = exports.IconDiv = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  width: 25%;\n"])));
+const TitleDiv = exports.TitleDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 70%;\n  text-align: left;\n  padding-left: 3px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: auto;\n  margin-bottom: 22px;\n"])));
+const Table = exports.Table = _styledComponents.default.table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  table-layout: fixed;\n"])));
+const Th = exports.Th = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: white;\n  font-family: \"poppins\";\n  font-weight: 600;\n  font-size: 12px;\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 18px;\n  border-top: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
+const Td = exports.Td = _styledComponents.default.td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #ccc;\n  padding: 10px;\n  text-align: center;\n  line-height: 21px;\n  font-size: 14px;\n  font-family: \"poppins\";\n  font-weight: 400;\n  border-bottom: none;\n  border-left: none;\n  &:last-of-type {\n    border-right: none;\n  }\n"])));
+const ComponentHeader = exports.ComponentHeader = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"poppins\";\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 27px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));

package/dist/stories/components/CommonFunctions.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
-var getCurrencySign = exports.getCurrencySign = function getCurrencySign(currencyTypeToConvert, value) {
+const getCurrencySign = (currencyTypeToConvert, value) => {
   if (value === undefined || value === null) {
     return '';
   }
@@ -12,15 +12,16 @@ var getCurrencySign = exports.getCurrencySign = function getCurrencySign(currenc
     return '';
   }
   if (!currencyTypeToConvert) return '';
-  var currencySign = '';
-  var currencyFormatter = new Intl.NumberFormat('en-US', {
+  let currencySign = '';
+  const currencyFormatter = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: currencyTypeToConvert
   });
   currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
   return currencySign;
 };
-var getFormattedUnits = exports.getFormattedUnits = function getFormattedUnits(num) {
+exports.getCurrencySign = getCurrencySign;
+const getFormattedUnits = num => {
   if (num === undefined || num === null) {
     return '';
   }
@@ -38,7 +39,8 @@ var getFormattedUnits = exports.getFormattedUnits = function getFormattedUnits(n
   }
   return '';
 };
-var getFormattedValue = exports.getFormattedValue = function getFormattedValue(num) {
+exports.getFormattedUnits = getFormattedUnits;
+const getFormattedValue = num => {
   if (num === undefined || num === null) {
     return null;
   }
@@ -59,10 +61,11 @@ var getFormattedValue = exports.getFormattedValue = function getFormattedValue(n
   return num;
   // }
 };
-
-var getNumberWithCommas = exports.getNumberWithCommas = function getNumberWithCommas(x) {
-  var param = x.toString();
-  var pattern = /(-?\d+)(\d{3})/;
+exports.getFormattedValue = getFormattedValue;
+const getNumberWithCommas = x => {
+  let param = x.toString();
+  const pattern = /(-?\d+)(\d{3})/;
   while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
   return param;
-};
+};
+exports.getNumberWithCommas = getNumberWithCommas;

package/dist/stories/components/Datepicker.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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.Datepicker = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
@@ -18,37 +17,32 @@ var _CalendarIcon = require("./icons/CalendarIcon");
 /**
  *  SAG Datepicker
  */
-var Datepicker = exports.Datepicker = function Datepicker(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    text = _ref.text,
-    _ref$format = _ref.format,
-    format = _ref$format === void 0 ? 'MMM DD, YYYY' : _ref$format,
-    shape = _ref.shape,
-    _onChange = _ref.onChange,
-    value = _ref.value,
-    disableClearable = _ref.disableClearable,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? '#1B30AA' : _ref$labelColor;
+const Datepicker = _ref => {
+  let {
+    width = '100%',
+    text,
+    format = 'MMM DD, YYYY',
+    shape,
+    onChange,
+    value,
+    disableClearable,
+    disabled = false,
+    labelColor = '#1B30AA'
+  } = _ref;
   /**
    *  SAG Datepicker
    */
 
-  var _React$useState = _react.default.useState(null),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    valueState = _React$useState2[0],
-    setvalueState = _React$useState2[1];
-  (0, _react.useEffect)(function () {
+  const [valueState, setvalueState] = _react.default.useState(null);
+  (0, _react.useEffect)(() => {
     if (value) {
       setvalueState((0, _dayjs.default)(value));
     } else {
       setvalueState(null);
     }
   }, [value]);
-  (0, _react.useEffect)(function () {}, [valueState]);
-  var getTextFieldStyle = function getTextFieldStyle() {
+  (0, _react.useEffect)(() => {}, [valueState]);
+  const getTextFieldStyle = () => {
     if (shape === 'round') {
       // round
       return {
@@ -58,7 +52,7 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
           fontWidth: 400,
           paddingLeft: '10px !important',
           borderRadius: '12px',
-          width: width
+          width
           // color: labelColor,
         },
 
@@ -67,7 +61,7 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
           fontFamily: 'Poppins',
           fontSize: '14px',
           fontWidth: 400,
-          width: width,
+          width,
           // color: labelColor,
           legend: {
             marginLeft: '10px'
@@ -132,9 +126,9 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
     value: valueState,
     clearable: true,
     disabled: disabled,
-    onChange: function onChange(newValue) {
+    onChange: newValue => {
       setvalueState(newValue);
-      _onChange({
+      onChange({
         newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
       });
     },
@@ -154,4 +148,5 @@ var Datepicker = exports.Datepicker = function Datepicker(_ref) {
     format: format
   }))));
 };
+exports.Datepicker = Datepicker;
 var _default = exports.default = Datepicker;

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

@@ -10,6 +10,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 // import './font.css';
 
-var DatepickerContainer = exports.DatepickerContainer = _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  font-family: Poppins;  \n  font-size: \"14px\";\n"])), function (props) {
-  return props.width;
-});
+const DatepickerContainer = exports.DatepickerContainer = _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  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);