sag_components 2.0.0-beta333 → 2.0.0-beta335

package/dist/index.esm.js

@@ -634,6 +634,26 @@ const ChervronLeftIcon = _ref => {
   }));
 };
 
+const CalendarIcon = _ref => {
+  let {
+    clicked,
+    width = "14",
+    height = "14",
+    fill = "#212121",
+    color
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H7.3125V6.1875H9.75V4.5ZM9.75 6.9375H7.3125V8.8125H9.75V6.9375ZM9.75 9.5625H7.3125V11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V9.5625ZM6.5625 8.8125V6.9375H3.9375V8.8125H6.5625ZM3.9375 9.5625V11.25H6.5625V9.5625H3.9375ZM3.1875 8.8125V6.9375H0.75V8.8125H3.1875ZM0.75 9.5625V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H3.1875V9.5625H0.75ZM0.75 6.1875H3.1875V4.5H0.75V6.1875ZM3.9375 6.1875H6.5625V4.5H3.9375V6.1875ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
+    fill: color || fill
+  }));
+};
+
 const Button$1 = props => {
   const {
     text = "",
@@ -680,14 +700,15 @@ const Button$1 = props => {
     plus: Plus,
     left: ChervronLeftIcon,
     right: ChervronRightIcon,
-    vicon: VIcon
+    vicon: VIcon,
+    calendar: CalendarIcon
   };
   const getIcon = icon => {
     if (!icon || icon === "none") return null;
     const IconComponent = iconMap[icon.toLowerCase()];
     const iconProps = {
-      height: "16px",
-      width: "16px",
+      height: icon.toLowerCase() === "calendar" ? "14" : "16px",
+      width: icon.toLowerCase() === "calendar" ? "14" : "16px",
       color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff"),
       fill: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
     };
@@ -10182,7 +10203,8 @@ const DatePicker = ({
   selectedColor,
   hoverColor,
   inRangeColor,
-  clearButtonColor
+  clearButtonColor,
+  showClearButton
 }) => {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
@@ -10293,7 +10315,7 @@ const DatePicker = ({
       return /*#__PURE__*/React$1.createElement(DateCell$2, {
         key: date.toISOString()
       });
-    })), /*#__PURE__*/React$1.createElement(DatePickerFooter, null, /*#__PURE__*/React$1.createElement(ClearButton$1, {
+    })), /*#__PURE__*/React$1.createElement(DatePickerFooter, null, showClearButton && /*#__PURE__*/React$1.createElement(ClearButton$1, {
       clearButtonColor: clearButtonColor,
       onClick: clearSelection
     }, "Clear")));
@@ -10322,7 +10344,9 @@ const RangePicker = _ref => {
     hoverColor,
     inRangeColor,
     clearButtonColor,
-    calendarIconColor
+    calendarIconColor,
+    showClearButton,
+    showOpenIcon
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -10437,7 +10461,7 @@ const RangePicker = _ref => {
   }), /*#__PURE__*/React$1.createElement(CalendarDiv$3, {
     className: "CalendarDiv",
     onClick: toggleDatePicker
-  }, isOpen === true ? /*#__PURE__*/React$1.createElement(CalendarInOpen, {
+  }, isOpen && showOpenIcon ? /*#__PURE__*/React$1.createElement(CalendarInOpen, {
     className: "CalendarInOpen",
     fill: calendarIconColor
   }) : /*#__PURE__*/React$1.createElement(Calendar, {
@@ -10458,7 +10482,8 @@ const RangePicker = _ref => {
     selectedColor: selectedColor,
     hoverColor: hoverColor,
     inRangeColor: inRangeColor,
-    clearButtonColor: clearButtonColor
+    clearButtonColor: clearButtonColor,
+    showClearButton: showClearButton
   })));
 };
 RangePicker.propTypes = {
@@ -10480,7 +10505,9 @@ RangePicker.propTypes = {
   hoverColor: PropTypes.string,
   inRangeColor: PropTypes.string,
   clearButtonColor: PropTypes.string,
-  calendarIconColor: PropTypes.string
+  calendarIconColor: PropTypes.string,
+  showClearButton: PropTypes.bool,
+  showOpenIcon: PropTypes.bool
 };
 
 // Adding defaultProps
@@ -10500,7 +10527,9 @@ RangePicker.defaultProps = {
   hoverColor: '#f4faf5',
   inRangeColor: '#effef2',
   clearButtonColor: '#568202',
-  calendarIconColor: '#568202'
+  calendarIconColor: '#568202',
+  showClearButton: true,
+  showOpenIcon: true
 };
 
 /* eslint-disable no-nested-ternary */
@@ -10763,23 +10792,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11221,22 +11251,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24355,23 +24386,24 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  optionHoverColor = '#edf6ff',
-  selectedOptionColor = "#C7E4FF",
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    optionHoverColor = '#edf6ff',
+    selectedOptionColor = "#C7E4FF",
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24829,26 +24861,27 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  optionHoverColor = '#edf6ff',
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    optionHoverColor = '#edf6ff',
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36399,9 +36432,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -37347,6 +37380,16 @@ const Loader = styled.span`
   animation: ${rotation} 1.5s infinite ease;
   transform: translateZ(0);
 `;
+const DirtyFieldsCounter = styled.div`
+  font-family: 'Poppins', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${({
+  $dirty
+}) => $dirty ? '#EF4444' : '#1f7677'};
+  padding: 6px 16px;
+  text-align: left;
+`;
 const LoaderWrapper = styled.div`
   position: absolute;
   top: 50%;
@@ -41677,7 +41720,12 @@ const TableHeader = ({
     style: {
       accentColor: '#066768'
     }
-  }), column.title && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
+  }), column.title && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title, column.required && /*#__PURE__*/React$1.createElement("span", {
+    style: {
+      color: '#EF4444',
+      marginLeft: '5px'
+    }
+  }, "*")), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
     onClick: () => handleSort(column.key),
     onMouseEnter: () => setFocusedSort(column.key),
@@ -41892,6 +41940,10 @@ const TableCell = styled.td`
     position: relative;
   `}
 
+  ${props => props.$editable && `
+    overflow: visible;
+  `}
+
   /* CSS-only tooltip */
   &[data-tooltip]:hover::before {
     content: attr(data-tooltip);
@@ -41945,6 +41997,31 @@ const TableCell = styled.td`
     }
   }
 
+  input {
+    display: block;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  input:hover:not(:focus) {
+    border: 1px solid rgba(0, 0, 0, 0.6) !important;
+    border-radius: 4px;
+  }
+
+  input:focus {
+    border: 2px solid #212121 !important;
+    border-radius: 4px;
+    outline: none !important;
+  }
+
   ${props => {
   switch (props.$fieldType) {
     case "currency":
@@ -42515,6 +42592,137 @@ const PencilButton = styled.button`
     pointer-events: none;
   }
 `;
+const NotAvailableIconButton = styled.button`
+  position: absolute;
+  right: 4px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  height: fit-content;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8B8989;
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    color: #EF4444;
+  }
+
+  &::before {
+    content: 'Mark as N/A';
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    color: #212121;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1000;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 7px);
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background: white;
+    transform: translateX(-50%) rotate(45deg);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1001;
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+  }
+`;
+const NotAvailableCellWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &:hover ${NotAvailableIconButton} {
+    opacity: 1;
+  }
+`;
+const NotAvailableText = styled.div`
+  position: relative;
+  width: 100%;
+  color: #8B8989;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: normal;
+  cursor: pointer;
+  padding: 1px 2px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+
+  &:hover {
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+
+  &::before {
+    content: 'Click to make required again';
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    color: #212121;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1000;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 7px);
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background: white;
+    transform: translateX(-50%) rotate(45deg);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 1001;
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+  }
+`;
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
@@ -43255,7 +43463,8 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
-  editRowIndex = -1
+  editRowIndex = -1,
+  markAllNotValidFields = false
 }, ref) => {
   if (!Array.isArray(data) || !Array.isArray(columns)) {
     console.warn("TableBody: Invalid data or columns prop");
@@ -43272,6 +43481,20 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const [hasInitialValue, setHasInitialValue] = useState(false);
   const [shimmerRowIndex, setShimmerRowIndex] = useState(-1);
   const [shimmerStartTime, setShimmerStartTime] = useState(null);
+  const [notAvailableFields, setNotAvailableFields] = useState(() => {
+    const initial = {};
+    data.forEach(row => {
+      columns.forEach(col => {
+        if (col.allowNotAvailable && col.notAvailableValue !== undefined && row[col.key] === col.notAvailableValue) {
+          initial[row.id] = {
+            ...(initial[row.id] ?? {}),
+            [col.key]: true
+          };
+        }
+      });
+    });
+    return initial;
+  });
   const getNestedValue = (obj, path) => {
     if (!path || typeof path !== 'string') return undefined;
     return path.split('.').reduce((current, key) => {
@@ -44091,6 +44314,14 @@ const TableBody = /*#__PURE__*/forwardRef(({
           key: `invalid-${columnIndex}`
         }, "Invalid Column");
       }
+      if (column.groupBreak && rowIndex > 0 && data[rowIndex - 1][column.key] === row[column.key]) {
+        return /*#__PURE__*/React$1.createElement(TableCell, {
+          key: `${column.key}-${rowIndex}`,
+          $fieldType: column.fieldType?.toLowerCase(),
+          $minWidth: column.minWidth,
+          $maxWidth: column.maxWidth
+        });
+      }
       let value, formattedValue, fieldTooltip;
       try {
         value = column.key.includes('.') ? getNestedValue(row, column.key) : row[column.key];
@@ -44109,7 +44340,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
       return /*#__PURE__*/React$1.createElement(TableCell, {
         key: `${column.key}-${rowIndex}`,
         ref: el => {
-          if (isTextBasedField && el && formattedValue) {
+          if (isTextBasedField && el && formattedValue && !column.editable) {
             const hasOverflow = shouldShowTooltip(el);
             const tooltipTextToShow = hasOverflow ? String(formattedValue) : fieldTooltip;
             if (tooltipTextToShow) {
@@ -44137,12 +44368,61 @@ const TableBody = /*#__PURE__*/forwardRef(({
           }
         },
         $fieldType: fieldType,
+        $editable: !!column.editable,
         $color: column.color,
         $minWidth: column.minWidth,
         $maxWidth: column.maxWidth
       }, fieldTooltip && !isTextBasedField ? /*#__PURE__*/React$1.createElement(CellContentWrapper, {
         ref: el => applyTooltip(el, fieldTooltip)
-      }, renderCellContent(formattedValue, isTextBasedField, shouldShimmer)) : renderCellContent(formattedValue, isTextBasedField, shouldShimmer));
+      }, renderCellContent(formattedValue, isTextBasedField, shouldShimmer)) : column.groupBreak ? /*#__PURE__*/React$1.createElement("strong", null, renderCellContent(formattedValue, isTextBasedField, shouldShimmer)) : column.editable && column.allowNotAvailable ? /*#__PURE__*/React$1.createElement(NotAvailableCellWrapper, null, notAvailableFields[row.id]?.[column.key] ? /*#__PURE__*/React$1.createElement(NotAvailableText, {
+        onClick: () => {
+          setNotAvailableFields(prev => ({
+            ...prev,
+            [row.id]: {
+              ...(prev[row.id] ?? {}),
+              [column.key]: false
+            }
+          }));
+          column.onNotAvailableChange?.(row, false);
+        }
+      }, "N/A") : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, column.renderEditableCell?.(rowIndex, row, {
+        markAllNotValidFields
+      }), /*#__PURE__*/React$1.createElement(NotAvailableIconButton, {
+        type: "button",
+        onClick: e => {
+          e.stopPropagation();
+          setNotAvailableFields(prev => ({
+            ...prev,
+            [row.id]: {
+              ...(prev[row.id] ?? {}),
+              [column.key]: true
+            }
+          }));
+          column.onNotAvailableChange?.(row, true);
+        }
+      }, /*#__PURE__*/React$1.createElement("svg", {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React$1.createElement("circle", {
+        cx: "7",
+        cy: "7",
+        r: "6",
+        stroke: "currentColor",
+        strokeWidth: "1.5"
+      }), /*#__PURE__*/React$1.createElement("line", {
+        x1: "2.5",
+        y1: "11.5",
+        x2: "11.5",
+        y2: "2.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }))))) : column.editable && column.renderEditableCell ? column.renderEditableCell(rowIndex, row, {
+        markAllNotValidFields
+      }) : renderCellContent(formattedValue, isTextBasedField, shouldShimmer));
     })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
       $expandedBackgroundColor: expandedBackgroundColor
     }, /*#__PURE__*/React$1.createElement(TableCell, {
@@ -47797,7 +48077,10 @@ const Table = props => {
     showFooter = false,
     total,
     rowLabel = "",
-    footerRight = null
+    footerRight = null,
+    showDirtyFieldsCounter = false,
+    dirtyFieldsCount = 0,
+    markAllNotValidFields = false
   } = props;
   const scrollWrapperRef = useRef(null);
   const tableBodyRef = useRef(null);
@@ -47954,7 +48237,8 @@ const Table = props => {
     onHeroClick: onHeroClick,
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
-    editRowIndex: editRowIndex
+    editRowIndex: editRowIndex,
+    markAllNotValidFields: markAllNotValidFields
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__PURE__*/React$1.createElement(NoEventsMessage, {
     titleSize: titleSize,
     subTitleSize: subTitleSize
@@ -47984,9 +48268,10 @@ const Table = props => {
     total: total,
     rowLabel: rowLabel,
     isLoading: isLoading,
-    isLoadingText: isLoadingText,
-    footerRight: footerRight
-  }))));
+    isLoadingText: isLoadingText
+  }), showDirtyFieldsCounter && (dirtyFieldsCount > 0 ? /*#__PURE__*/React$1.createElement(DirtyFieldsCounter, {
+    $dirty: true
+  }, dirtyFieldsCount, " field", dirtyFieldsCount !== 1 ? 's' : '', " modified") : /*#__PURE__*/React$1.createElement(DirtyFieldsCounter, null, "\u2713 All values complete")))));
 };
 Table.displayName = "Table";
 
@@ -59513,25 +59798,28 @@ const LinkText = styled.span`
 `;
 
 // OkCircleIcon.jsx
-const OkCircleIcon = ({
-  width = '40',
-  height = '40',
-  color = '#519595'
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 40 40",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("rect", {
-  width: "40",
-  height: "40",
-  rx: "20",
-  fill: color
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M20.0176 12.6875C17.3809 12.6875 14.9902 14.0938 13.6543 16.3438C12.3535 18.6289 12.3535 21.4062 13.6543 23.6562C14.9902 25.9414 17.3809 27.3125 20.0176 27.3125C22.6191 27.3125 25.0098 25.9414 26.3457 23.6562C27.6465 21.4062 27.6465 18.6289 26.3457 16.3438C25.0098 14.0938 22.6191 12.6875 20.0176 12.6875ZM20.0176 29C16.7832 29 13.8301 27.3125 12.2129 24.5C10.5957 21.7227 10.5957 18.3125 12.2129 15.5C13.8301 12.7227 16.7832 11 20.0176 11C23.2168 11 26.1699 12.7227 27.7871 15.5C29.4043 18.3125 29.4043 21.7227 27.7871 24.5C26.1699 27.3125 23.2168 29 20.0176 29ZM23.9902 18.3477L19.4902 22.8477C19.1387 23.1992 18.6113 23.1992 18.2949 22.8477L16.0449 20.5977C15.6934 20.2812 15.6934 19.7539 16.0449 19.4375C16.3613 19.0859 16.8887 19.0859 17.2402 19.4375L18.8926 21.0898L22.7949 17.1875C23.1113 16.8359 23.6387 16.8359 23.9902 17.1875C24.3066 17.5039 24.3066 18.0312 23.9902 18.3477Z",
-  fill: "white"
-}));
+const OkCircleIcon = _ref => {
+  let {
+    width = '40',
+    height = '40',
+    color = '#519595'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("rect", {
+    width: "40",
+    height: "40",
+    rx: "20",
+    fill: color
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M20.0176 12.6875C17.3809 12.6875 14.9902 14.0938 13.6543 16.3438C12.3535 18.6289 12.3535 21.4062 13.6543 23.6562C14.9902 25.9414 17.3809 27.3125 20.0176 27.3125C22.6191 27.3125 25.0098 25.9414 26.3457 23.6562C27.6465 21.4062 27.6465 18.6289 26.3457 16.3438C25.0098 14.0938 22.6191 12.6875 20.0176 12.6875ZM20.0176 29C16.7832 29 13.8301 27.3125 12.2129 24.5C10.5957 21.7227 10.5957 18.3125 12.2129 15.5C13.8301 12.7227 16.7832 11 20.0176 11C23.2168 11 26.1699 12.7227 27.7871 15.5C29.4043 18.3125 29.4043 21.7227 27.7871 24.5C26.1699 27.3125 23.2168 29 20.0176 29ZM23.9902 18.3477L19.4902 22.8477C19.1387 23.1992 18.6113 23.1992 18.2949 22.8477L16.0449 20.5977C15.6934 20.2812 15.6934 19.7539 16.0449 19.4375C16.3613 19.0859 16.8887 19.0859 17.2402 19.4375L18.8926 21.0898L22.7949 17.1875C23.1113 16.8359 23.6387 16.8359 23.9902 17.1875C24.3066 17.5039 24.3066 18.0312 23.9902 18.3477Z",
+    fill: "white"
+  }));
+};
 
 // ToasterMessageBox.jsx
 const ToasterMessageBox = _ref => {