sag_components 1.0.642 → 1.0.644

package/dist/stories/components/FilterButton.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FilterButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FilterButton = require("./FilterButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+const FilterButton = props => {
+  const {
+    color,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick
+  } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(!activeState);
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
+    height: height,
+    color: activeState ? activeColor : color,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+    width: iconWidth,
+    height: iconHeight,
+    color: activeState ? activeColor : color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
+};
+exports.FilterButton = FilterButton;
+var _default = exports.default = FilterButton;
+FilterButton.defaultProps = {
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpanText = exports.FilterButtonWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/MonthPopupPicker.js

@@ -123,6 +123,7 @@ const MonthPopupPicker = _ref => {
       // return null;
     })));
   };
+
   return /*#__PURE__*/_react.default.createElement(DatePickerContainer, null, isOpen && renderDatePicker());
 };
 var _default = exports.default = MonthPopupPicker;

package/dist/stories/components/PopupCharts.js

@@ -96,6 +96,7 @@ const PopupCharts = props => {
     width: "100%",
     xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor // "#C7E7CD"
   });
+
   const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
     currencySign: true,
     dotCut: true,

package/dist/stories/components/QuarterPopupPicker.js

@@ -15,7 +15,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /* eslint-disable react/prop-types */
 // import ChervronRightIcon from './icons/ChervronRightIcon';
 // import ChervronLeftIcon from './icons/ChervronLeftIcon';
-
 // Styled components for the date picker
 const DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 const DatePickerPopup = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: auto;\n  margin: 5px;\n  height: 120px;\n  top: calc(100% + 5px);\n  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);\n  left: 0;\n  background-color: #fff;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 10px;\n  z-index: 1000;\n"])));

package/dist/stories/components/ReportTable.js

@@ -9,6 +9,8 @@ exports.default = exports.ReportTable = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
 var _Duplicate = _interopRequireDefault(require("./icons/Duplicate"));
+var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
+var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
 var _ReportTable = require("./ReportTable.style");
 var _InfoIcon = require("./icons/InfoIcon");
 /* eslint-disable import/no-unresolved */
@@ -23,95 +25,183 @@ const ReportTable = props => {
     disableInfo,
     selectTextColor,
     onSelectRowClick,
+    onCheckRowClick,
     buttonText,
-    buttonIconName
+    buttonIconName,
+    useCheckBoxes
   } = props;
   const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
   (0, _react.useEffect)(() => {
+    var _newTableData$columns, _tableData$columnsHea, _newTableData$columns2, _tableData$rowsValues;
     if (!tableData || !tableData.columnsHeadings || !tableData.rowsValues) {
       return;
     }
-    if (!useSelectButtons) {
-      var _tableData$columnsHea;
-      // do not use select Buttons - remove the "button" from table data
-      const newTableData = {
-        columnsHeadings: [],
-        rowsValues: []
-      };
-      tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea = tableData.columnsHeadings) === null || _tableData$columnsHea === void 0 ? void 0 : _tableData$columnsHea.forEach(item => {
-        newTableData.columnsHeadings.push(item);
-      });
-      tableData.rowsValues.forEach(item => {
-        newTableData.rowsValues.push(item);
+    const newTableData = {
+      columnsHeadings: [],
+      rowsValues: []
+    };
+
+    // column heading - checkbox
+    if (useCheckBoxes && !((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'checkbox' && item.key === 'checkbox'))) {
+      newTableData.columnsHeadings.push({
+        label: 'checkbox',
+        key: 'checkbox'
       });
-      setFormattedTableData(newTableData);
-      return;
     }
-    if (useSelectButtons) {
-      var _tableData$columnsHea2, _newTableData$columns, _tableData$rowsValues;
-      // use select Buttons - add a "button" to table data
 
-      const newTableData = {
-        columnsHeadings: [],
-        rowsValues: []
-      };
+    // columnsHeadings - regular columns
+    tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea = tableData.columnsHeadings) === null || _tableData$columnsHea === void 0 ? void 0 : _tableData$columnsHea.forEach(item => {
+      newTableData.columnsHeadings.push(item);
+    });
 
-      // columnsHeadings
-      tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea2 = tableData.columnsHeadings) === null || _tableData$columnsHea2 === void 0 ? void 0 : _tableData$columnsHea2.forEach(item => {
-        newTableData.columnsHeadings.push(item);
+    // column heading - select button
+    if (useSelectButtons && !((_newTableData$columns2 = newTableData.columnsHeadings) !== null && _newTableData$columns2 !== void 0 && _newTableData$columns2.some(item => item.label === 'button' && item.key === 'button'))) {
+      newTableData.columnsHeadings.push({
+        label: 'button',
+        key: 'button'
       });
-      if (!((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'button' && item.key === 'button'))) {
-        newTableData.columnsHeadings.push({
-          label: 'button',
-          key: 'button'
-        });
-      }
-
-      // rowsValues
-      const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map((item, index) => useSelectButtons ? {
-        ...item,
-        button: 'button',
-        rowIndex: index
-      } : item);
-      newTableData.rowsValues = newRowValues;
-      setFormattedTableData(newTableData);
     }
-  }, [tableData, useSelectButtons]);
+
+    // rowsValues
+    const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map(item => useCheckBoxes ? {
+      checkbox: 'checkbox',
+      ...item
+    } : item);
+    const newRowValuesStep2 = newRowValues === null || newRowValues === void 0 ? void 0 : newRowValues.map(item => useSelectButtons ? {
+      ...item,
+      button: 'button'
+    } : item);
+    const newRowValuesStep3 = newRowValuesStep2 === null || newRowValuesStep2 === void 0 ? void 0 : newRowValuesStep2.map(item => useCheckBoxes ? {
+      ...item,
+      checkboxState: false
+    } : item);
+    const newRowValuesStep4 = newRowValuesStep3 === null || newRowValuesStep3 === void 0 ? void 0 : newRowValuesStep3.map((item, index) => ({
+      ...item,
+      index
+    }));
+    newTableData.rowsValues = newRowValuesStep4;
+    setFormattedTableData(newTableData);
+  }, [tableData, useSelectButtons, useCheckBoxes]);
   const columnsNumber = tableData.columnsHeadings.length;
   const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
-  const handleRowClick = row => {
+  const handleSelectButtonRowClick = row => {
     const {
-      button: propToRemove,
+      checkbox: propToRemove,
       ...rest
     } = row;
-    onSelectRowClick(rest);
+    const {
+      button: propToRemove2,
+      ...rest2
+    } = rest;
+    const {
+      checkboxState: propToRemove3,
+      ...rest3
+    } = rest2;
+    onSelectRowClick(rest3);
+  };
+  const handleRowCheckBoxClick = row => {
+    var _FormattedTableData$r;
+    if (!row) return;
+    const updatedRow = {
+      ...row,
+      checkboxState: !(row !== null && row !== void 0 && row.checkboxState)
+    };
+    const updatedTableRowsData = FormattedTableData === null || FormattedTableData === void 0 ? void 0 : (_FormattedTableData$r = FormattedTableData.rowsValues) === null || _FormattedTableData$r === void 0 ? void 0 : _FormattedTableData$r.map(item => item.index === row.index ? updatedRow : item);
+    setFormattedTableData({
+      ...FormattedTableData,
+      rowsValues: updatedTableRowsData
+    });
+    const {
+      checkbox: propToRemove,
+      ...rest
+    } = updatedRow;
+    const {
+      button: propToRemove2,
+      ...rest2
+    } = rest;
+    onCheckRowClick(rest2);
   };
   const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
-    id: "SelectButtonContainer"
+    className: "SelectButtonContainer"
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
-    id: "SelectButtonSubContainer",
+    className: "SelectButtonSubContainer",
     selectTextColor: selectTextColor,
-    onClick: () => handleRowClick(rowData)
+    onClick: () => handleSelectButtonRowClick(rowData)
   }, buttonText || 'Select', ' ', buttonIconName === 'duplicate' ? /*#__PURE__*/_react.default.createElement(_Duplicate.default, {
     color: selectTextColor
   }) : /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
-    id: "ArrowSelectIcon"
+    className: "ArrowSelectIcon"
+  })));
+  const displayCheckBox = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxContainer, {
+    className: "SelectCheckboxContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxSubContainer, {
+    className: "SelectCheckboxSubContainer",
+    selectTextColor: selectTextColor,
+    onClick: () => handleRowCheckBoxClick(rowData)
+  }, rowData !== null && rowData !== void 0 && rowData.checkboxState ? /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
+    className: "CheckBoxCheckedIcon",
+    width: "14px",
+    height: "14px",
+    color: selectTextColor
+  }) : /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
+    className: "CheckBoxNotCheckedIcon",
+    width: "14px",
+    height: "14px",
+    color: "#212121"
   })));
+  const getMaxColnumber = () => {
+    let colNumber = maxColumnsNumber;
+    if (useSelectButtons) {
+      colNumber = +1;
+    }
+    if (useCheckBoxes) {
+      colNumber = +1;
+    }
+    return colNumber;
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
-    maxColumnsNumber: useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber,
+    maxColumnsNumber: getMaxColnumber(),
     columnsNumber: columnsNumber
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
     tableWidthSize: tableWidthSize
-  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
+    className: "headerRow"
+  }, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === 'button' || headline.label === 'checkbox' ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Th, {
     key: index
-  }) : /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Th, {
     key: index
-  }, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
+  }, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Tr, {
+    className: "row",
     key: index,
     useColorLinearGradient: useColorLinearGradient
-  }, Object.values(rowData).map((value, dataIndex) => value === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
+  }, Object.values(rowData).map((value, dataIndex) =>
+  // eslint-disable-next-line no-nested-ternary
+  value === 'checkbox' ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Td, {
+    className: "checkbox",
+    key: index
+  }, displayCheckBox(rowData)) : value === 'button' ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Td, {
+    className: "button",
     key: index
-  }, displaySelectButton(rowData)) : /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
+  }, displaySelectButton(rowData)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Td, {
+    className: "cell",
     key: dataIndex
   }, value))))))), !disableInfo ? /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     color: "#1B30AA"
@@ -163,5 +253,7 @@ ReportTable.defaultProps = {
   useSelectButtons: false,
   disableInfo: false,
   selectTextColor: '#229E38',
-  onSelectRowClick: () => {}
+  onSelectRowClick: () => {},
+  onCheckRowClick: () => {},
+  useCheckBoxes: false
 };

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

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.SelectButtonSubContainer = exports.SelectButtonContainer = exports.InfoText = exports.InfoBlock = void 0;
+exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.SelectCheckboxSubContainer = exports.SelectCheckboxContainer = exports.SelectButtonSubContainer = exports.SelectButtonContainer = exports.InfoText = exports.InfoBlock = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    height: 10px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
 const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n  border: 1px solid #dddddd;\n  border-radius: ", ";\n  overflow-x: ", ";\n  ", "\n"])), props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px', props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden', scrollableStyles);
 const Table = exports.Table = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  table-layout: fixed;\n  position: relative;\n  background-color: white;\n  border-collapse: collapse;\n  th,\n  td {\n    width: 100%;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), props => "".concat(props.tableWidthSize, "%"));
@@ -17,4 +17,6 @@ const Tr = exports.Tr = _styledComponents.default.tr(_templateObject5 || (_templ
 const InfoText = exports.InfoText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  color: #212121;\n  padding-top: 20px;\n  padding-bottom: 20px;\n"])));
 const InfoBlock = exports.InfoBlock = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  background-color: white;\n"])));
 const SelectButtonContainer = exports.SelectButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
-const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  padding: 2px 10px;\n  justify-content: flex-end;\n  gap: 8px;\n  color: ", ";\n  border-radius: 10px;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.selectTextColor);
+const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  padding: 2px 10px;\n  justify-content: flex-start;\n  gap: 8px;\n  color: ", ";\n  border-radius: 10px;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.selectTextColor);
+const SelectCheckboxContainer = exports.SelectCheckboxContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
+const SelectCheckboxSubContainer = exports.SelectCheckboxSubContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  padding: 2px;\n  justify-content: flex-start;\n  gap: 8px;\n  color: ", ";\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.selectTextColor);

package/dist/stories/components/SagButton.js

@@ -31,6 +31,7 @@ const SagButton = props => {
       // Add any logic you want to execute after the transition is complete
     }, 300); // Adjust the transition duration (in milliseconds) as needed
   };
+
   return /*#__PURE__*/_react.default.createElement(_SagButton.ButtonContainer, {
     id: "ButtonContainer"
   }, /*#__PURE__*/_react.default.createElement(_SagButton.Button, {

package/dist/stories/components/Select.js

@@ -45,6 +45,7 @@ const Select = _ref => {
     setIsFocused(false);
     setTimeout(() => setShowOptions(false), 200); // Delay hiding options to allow clicking on them
   };
+
   const handleOptionClick = option => {
     onChange({
       target: {

package/dist/stories/components/icons/ShoutIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ShoutIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ShoutIcon = _ref => {
+  let {
+    width = '16',
+    height = '17',
+    fill = '#1B30AA'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15 2V6.625C15.5625 6.90625 16 7.65625 16 8.5C16 9.375 15.5625 10.125 15 10.4062V15C15 15.4062 14.75 15.7812 14.375 15.9375C14 16.0938 13.5625 16 13.2812 15.7188L11.9062 14.3438C10.4062 12.8438 8.375 12 6.25 12H6V16C6 16.5625 5.53125 17 5 17H3C2.4375 17 2 16.5625 2 16V12C0.875 12 0 11.125 0 10V7C0 5.90625 0.875 5 2 5H5H6H6.25C8.375 5 10.4062 4.15625 11.9062 2.65625L13.2812 1.3125C13.5625 1.03125 14 0.9375 14.375 1.09375C14.75 1.25 15 1.625 15 2ZM13 4.40625C11.1562 6.09375 8.75 7 6.25 7H6V10H6.25C8.75 10 11.1562 10.9375 13 12.625V8.5V4.40625Z",
+    fill: fill
+  }));
+};
+exports.ShoutIcon = ShoutIcon;
+var _default = exports.default = ShoutIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.642",
+  "version": "1.0.644",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/dist/stories/components/TotalCostModal.js

@@ -1,143 +0,0 @@
-"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 = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Modal = _interopRequireDefault(require("./Modal"));
-var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
-var _TextField = _interopRequireDefault(require("./TextField"));
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-var _reactHookForm = require("react-hook-form");
-var _Modal2 = require("./Modal.style");
-var TotalCostModal = function TotalCostModal(_ref) {
-  var title = _ref.title,
-    isModalOpen = _ref.isModalOpen,
-    setModalOpen = _ref.setModalOpen,
-    setResult = _ref.setResult;
-  var _useState = (0, _react.useState)([{
-      id: "title",
-      label: "Title",
-      type: "text"
-    }, {
-      id: "dotCut",
-      label: "Do Cut",
-      type: "select",
-      options: ["true", "false"]
-    }, {
-      id: "currency",
-      label: "Currency",
-      type: "select",
-      options: ["true", "false"]
-    }, {
-      id: "currencyType",
-      label: "Currency Type",
-      type: "select",
-      options: ["USD", "EUR", "ILS", "GBP", "JPY"]
-    }, {
-      id: "width",
-      label: "Width",
-      type: "text"
-    }, {
-      id: "height",
-      label: "Height",
-      type: "text"
-    }, {
-      id: "textColor",
-      label: "Text Color",
-      type: "text"
-    }, {
-      id: "noDataText",
-      label: "No Data Text",
-      type: "text"
-    }]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    params = _useState2[0],
-    setParams = _useState2[1];
-  var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    code = _useState4[0],
-    setCode = _useState4[1];
-  var _useForm = (0, _reactHookForm.useForm)(),
-    register = _useForm.register,
-    handleSubmit = _useForm.handleSubmit,
-    watch = _useForm.watch,
-    control = _useForm.control,
-    errors = _useForm.formState.errors;
-  var onSubmit = function onSubmit(data) {
-    return setResult(data);
-  };
-  return /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/_react.default.createElement(_Modal.default, {
-    isOpen: isModalOpen,
-    onClose: function onClose() {
-      return setModalOpen(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gap: "10px",
-      display: "grid"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
-    value: code,
-    onChange: setCode
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gap: "10px",
-      display: "grid",
-      gridTemplateColumns: "auto auto auto"
-    }
-  }, params.map(function (item) {
-    if (item.type === "text") {
-      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
-        control: control,
-        name: item.id,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
-            allowedInput: "all",
-            height: "100%",
-            label: item.label,
-            multiline: true,
-            placeHolder: "Type...",
-            shape: "round",
-            size: "small",
-            width: "300px"
-          }));
-        }
-      });
-    } else {
-      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
-        control: control,
-        name: item.id,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
-            allowedInput: "all",
-            labelColor: "#1B30AA",
-            limitTagsOnMultiSelect: 0,
-            onInputChange: function onInputChange(e) {
-              var _e$inputValue;
-              console.log("e", e);
-              field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
-            },
-            options: item.options,
-            placeHolder: "Type...",
-            shape: "round",
-            size: "small",
-            text: item.label,
-            width: "300px"
-          }));
-        }
-      });
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
-    type: "submit"
-  })));
-};
-var _default = exports.default = TotalCostModal;