sag_components 2.0.0-beta201 → 2.0.0-beta203

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import React$1, { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
 import styled, { keyframes, css, styled as styled$1 } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
+import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$4, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
 import { createPortal } from 'react-dom';
@@ -2387,19 +2387,19 @@ const TooltipTip$1 = styled.div`
   }
 `;
 
-const Tooltip$2 = props => {
+const Tooltip$3 = props => {
   const {
     children,
-    content = 'Tooltip content',
-    showToolTip = true,
-    direction = 'top',
-    delay = '400',
+    content = "Tooltip content",
+    showTooltip = true,
+    direction = "top",
+    delay = "400",
     topFactor = -1.8,
     hideTooltip = false,
     className
   } = props;
   let timeout;
-  const [active, setActive] = useState(showToolTip);
+  const [active, setActive] = useState(showTooltip);
   const showTip = () => {
     timeout = setTimeout(() => {
       setActive(true);
@@ -2413,12 +2413,12 @@ const Tooltip$2 = props => {
     className: className
   }, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
     className: "tooltip-wrapper",
-    onMouseEnter: showToolTip && showTip,
-    onMouseLeave: showToolTip && hideTip
+    onMouseEnter: showTooltip && showTip,
+    onMouseLeave: showTooltip && hideTip
   }, children, active && !hideTooltip && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
-    className: `controls ${direction || 'top'}`,
+    className: `controls ${direction || "top"}`,
     topFactor: topFactor
-  }, typeof content === 'string' ? /*#__PURE__*/React$1.createElement("span", {
+  }, typeof content === "string" ? /*#__PURE__*/React$1.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: content
     }
@@ -2498,7 +2498,7 @@ const Benchmark = props => {
     id: "ControlsContainer",
     height: height,
     width: width
-  }, /*#__PURE__*/React$1.createElement(Tooltip$2, {
+  }, /*#__PURE__*/React$1.createElement(Tooltip$3, {
     id: "Tooltip",
     content: getTooltipText(),
     direction: tooltipDirection
@@ -2656,7 +2656,7 @@ const PieChart = props => {
   }, legendData.map(row => /*#__PURE__*/React$1.createElement(Cell, {
     key: `cell-${row.name}`,
     fill: row.color
-  }))), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }))), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   })))), /*#__PURE__*/React$1.createElement(LegendContainer$5, null, legendData.map(row => /*#__PURE__*/React$1.createElement(LegendControlsContainer$1, {
     key: row.name
@@ -10580,23 +10580,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('');
@@ -11038,22 +11039,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('');
@@ -11652,7 +11654,7 @@ const FilterPanel = props => {
         });
         break;
       default:
-        content = /*#__PURE__*/React$1.createElement(Tooltip$2, {
+        content = /*#__PURE__*/React$1.createElement(Tooltip$3, {
           className: "Tooltip",
           content: getTooltipTextDates(),
           direction: "top",
@@ -11796,7 +11798,7 @@ const FilterPanel = props => {
   const displayGoButton = () => {
     let content;
     if (tooltipTextGoButton) {
-      content = /*#__PURE__*/React$1.createElement(Tooltip$2, {
+      content = /*#__PURE__*/React$1.createElement(Tooltip$3, {
         className: "Tooltip",
         content: getTooltipTextGoButton(),
         direction: "top",
@@ -12253,13 +12255,16 @@ const Td$1 = styled.td`
 `;
 const Tr = styled.tr`
   border-bottom: 1px solid #f3f4f6;
-  ${({
-  enableHover,
-  selectHoverColor
-}) => enableHover && `&:hover {
+  ${_ref => {
+  let {
+    enableHover,
+    selectHoverColor
+  } = _ref;
+  return enableHover && `&:hover {
       background-color: ${selectHoverColor};
       cursor: pointer;
-    }`}
+    }`;
+}}
 `;
 const InfoText = styled.div`
   font-weight: 400;
@@ -12557,7 +12562,7 @@ const ReportTable = props => {
   }, displaySelectButton(rowData)) : /*#__PURE__*/React$1.createElement(Td$1, {
     className: "cell",
     key: dataIndex
-  }, value && value.length > 30 ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
+  }, value && value.length > 30 ? /*#__PURE__*/React$1.createElement(Tooltip$3, {
     content: getTooltipText(value),
     direction: "top",
     topFactor: value !== null ? -getTopFactor(Math.ceil(value.length / 50)) : -getTopFactor(1)
@@ -24161,21 +24166,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24572,23 +24578,24 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -25934,9 +25941,9 @@ const BarChartsByWeeks = props => {
     fontSize: "12px",
     tickLine: false,
     tickFormatter: value => `${displayFormattedValue(value)}`
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, null), !showTwoBars ? /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, null), !showTwoBars ? /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "value",
     name: "title",
     maxBarSize: 30,
@@ -26360,12 +26367,12 @@ const TotalDoughnutChart = props => {
   }, legendData.map(row => /*#__PURE__*/React$1.createElement(Cell, {
     key: `cell-${row.name}`,
     fill: row.color
-  }))), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }))), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip$2, {
       value: value,
       isPercent: isPercent
     })
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, null)))), /*#__PURE__*/React$1.createElement(LegendContainer$4, null, legendData.map(row => /*#__PURE__*/React$1.createElement(LegendControlsContainer, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, null)))), /*#__PURE__*/React$1.createElement(LegendContainer$4, null, legendData.map(row => /*#__PURE__*/React$1.createElement(LegendControlsContainer, {
     key: row.name
   }, /*#__PURE__*/React$1.createElement(LegendColorRectangle, {
     color: row.color
@@ -26558,7 +26565,7 @@ const TooltipTip = styled.div`
   }
 `;
 
-const Tooltip$1 = props => {
+const Tooltip$2 = props => {
   const {
     className,
     top,
@@ -26574,14 +26581,14 @@ const Tooltip$1 = props => {
     className: `controls ${direction || 'top'}`
   }, content)));
 };
-Tooltip$1.propTypes = {
+Tooltip$2.propTypes = {
   className: PropTypes.string,
   top: PropTypes.number,
   left: PropTypes.number,
   direction: PropTypes.string,
   content: PropTypes.string
 };
-Tooltip$1.defaultProps = {
+Tooltip$2.defaultProps = {
   className: '',
   top: 0,
   left: 0,
@@ -26855,7 +26862,7 @@ const TotalHorizontalCharts = props => {
   React$1.createElement(Cell, {
     key: `cell-${index}`,
     fill: barBackgrounds[index % 20]
-  }))), showLegendTooltip && /*#__PURE__*/React$1.createElement(Tooltip$1, {
+  }))), showLegendTooltip && /*#__PURE__*/React$1.createElement(Tooltip$2, {
     direction: "top",
     content: tooltipText.content,
     top: tooltipText.clientY,
@@ -28808,9 +28815,9 @@ const BarChart = props => {
     stroke: "#D0D0D0",
     domain: [0, 'auto'],
     interval: 0
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, null), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, null), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "value",
     fill: barChartColor,
     minPointSize: 5,
@@ -29258,7 +29265,7 @@ const DoubleBarSingleLine = props => {
       ...syncCharts.margin,
       bottom: 120
     }
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), showBackgroundGrid && /*#__PURE__*/React$1.createElement(CartesianGrid, {
     vertical: false,
@@ -29709,7 +29716,7 @@ const AreaChart = props => {
     strokeDasharray: "4 3",
     vertical: false,
     horizontal: true
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), /*#__PURE__*/React$1.createElement(Legend, {
     layout: "horizontal",
@@ -31156,7 +31163,7 @@ const BubbleChart = _ref => {
         direction: "right"
       });
     }
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null),
     cursor: false,
     wrapperStyle: {
@@ -31952,7 +31959,7 @@ const BarLine = props => {
     type: "number",
     domain: [0, dataMax => dataMax * 1.3],
     hide: true
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null),
     cursor: brushAreaBarData.length > 80
   }), /*#__PURE__*/React$1.createElement(Bar, {
@@ -32116,7 +32123,7 @@ const SingleChart = props => {
     type: "number",
     domain: [0, dataMax => dataMax * 1.3],
     hide: true
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     cursor: barData.length > 80,
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), /*#__PURE__*/React$1.createElement(Bar, {
@@ -32312,7 +32319,7 @@ const InnerBar = props => {
     type: "number",
     domain: [0, dataMax => dataMax * 1.3],
     hide: true
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     cursor: brushInnerBarData.length > 80,
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), /*#__PURE__*/React$1.createElement(Bar, {
@@ -32720,7 +32727,7 @@ const SingleBarLineCharts = _ref => {
     stroke: legendData.find(item => item.iconType === 'LegendUnionIcon')?.iconColor
   }, /*#__PURE__*/React$1.createElement(LabelList, {
     content: /*#__PURE__*/React$1.createElement(CustomizedLabelROI, null)
-  })), setLineChartTooltip && /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  })), setLineChartTooltip && /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: CustomTooltipLineChart
   }))), /*#__PURE__*/React$1.createElement(BarsGapper, {
     margin: !showLineChart ? lineChartHeight : 'inherit'
@@ -32759,9 +32766,9 @@ const SingleBarLineCharts = _ref => {
   }), /*#__PURE__*/React$1.createElement(ReferenceLine, {
     y: 0,
     stroke: "#D0D0D0"
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: CustomTooltipBarChart
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, null), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, null), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "barValue",
     barSize: barSize ?? 60,
     fill: legendData.filter(item => item.iconType === 'Square')[0]?.iconColor,
@@ -33182,9 +33189,9 @@ const BarChartWithAreaChart = props => {
     allowDataOverflow: true,
     width: 700,
     interval: 0
-  }), isAreaChartDisplayed && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), isAreaChartDisplayed && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, null)), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, null)), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "value",
     fill: barChartColor,
     minPointSize: 0,
@@ -33409,9 +33416,9 @@ const BarChartTwoRows = props => {
     height: 80,
     interval: 0,
     stroke: "#D0D0D0"
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/React$1.createElement(Tooltip$3, null), /*#__PURE__*/React$1.createElement(Bar, {
+  }), /*#__PURE__*/React$1.createElement(Tooltip$4, null), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "lowerValue",
     fill: barChartColorFirst,
     minPointSize: 5,
@@ -33611,7 +33618,7 @@ const TwoBarCharts = props => {
     interval: 0,
     height: 120,
     stroke: "#D0D0D0"
-  }), showTooltip && /*#__PURE__*/React$1.createElement(Tooltip$3, {
+  }), showTooltip && /*#__PURE__*/React$1.createElement(Tooltip$4, {
     content: /*#__PURE__*/React$1.createElement(CustomTooltip, null)
   }), /*#__PURE__*/React$1.createElement(Bar, {
     dataKey: "valueOne",
@@ -34611,7 +34618,7 @@ const ModalBody = styled.div`
   width: 100%;
   height: 100%;
 `;
-const TooltipContent = styled.span`
+const TooltipContent$1 = styled.span`
   color: #212121;
   font-family: Poppins;
   font-size: 14px;
@@ -34681,10 +34688,10 @@ const ModalWithOverlay = props => {
     hoverTextColor: "#212121",
     hoverBackgroundColor: "#E6F0F0",
     hoverBorderColor: "#D3D3D3"
-  }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
+  }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$3, {
     direction: "top",
     topFactor: -0.85,
-    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -36030,9 +36037,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 {
@@ -39500,26 +39507,26 @@ styled.div`
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    font-family: 'Poppins', sans-serif;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, ${props => props.opacity || 0.5});
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  font-family: "Poppins", sans-serif;
 `;
 const ModalContainer = styled.div`
-    background-color: white;
-    border-radius: 12px;
-    width: ${props => props.$width || '400px'};
-    height: ${props => props.$height || 'auto'};
-    position: relative;
-    font-family: 'Poppins', sans-serif;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  background-color: white;
+  border-radius: 12px;
+  width: ${props => props.$width || "400px"};
+  height: ${props => props.$height || "auto"};
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 `;
 const CloseButton = styled.button`
   background: none;
@@ -39542,6 +39549,14 @@ const CloseButton = styled.button`
     transform: scale(0.95);
   }
 `;
+const TooltipContent = styled.span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const ModalHeader = styled.div`
   display: flex;
   justify-content: space-between;
@@ -39557,15 +39572,15 @@ const ModalTitle = styled.h5`
   margin: 0;
 `;
 const ModalContent = styled.div`
-    padding: 24px;
-    border-top: ${props => props.showBorders ? '1px solid #D9D9D9' : 'none'};
-    border-bottom: ${props => props.showBorders ? '1px solid #D9D9D9' : 'none'};
+  padding: 24px;
+  border-top: ${props => props.showBorders ? "1px solid #D9D9D9" : "none"};
+  border-bottom: ${props => props.showBorders ? "1px solid #D9D9D9" : "none"};
 `;
 const ButtonContainer$1 = styled.div`
-    display: flex;
-    gap: 16px;
-    justify-content: flex-end;
-    padding: 16px 24px;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  padding: 16px 24px;
 `;
 
 // MessageBox.jsx
@@ -39582,9 +39597,11 @@ const MessageBox = _ref => {
     height = "auto",
     color = "#F00021",
     hoverColor = "#ff7875",
+    opacity = 0.5,
     secondaryColor = "#ffffff",
     seperateSectionBorder = false,
-    children
+    children,
+    tooltipContent = "Please fill in all required details"
   } = _ref;
   if (!isOpen) return null;
   const handleOverlayClick = e => {
@@ -39593,7 +39610,8 @@ const MessageBox = _ref => {
     }
   };
   return /*#__PURE__*/React$1.createElement(ModalOverlay, {
-    onClick: handleOverlayClick
+    onClick: handleOverlayClick,
+    opacity: opacity
   }, /*#__PURE__*/React$1.createElement(ModalContainer, {
     $width: width,
     $height: height
@@ -39616,7 +39634,16 @@ const MessageBox = _ref => {
     width: "auto",
     minWidth: "60px",
     onClick: onClose
-  }), /*#__PURE__*/React$1.createElement(Button$1, {
+  }), tooltipContent !== "" && /*#__PURE__*/React$1.createElement(Tooltip, {
+    direction: "top",
+    showTooltip: isDisabled,
+    topFactor: -0.85,
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+      dangerouslySetInnerHTML: {
+        __html: tooltipContent
+      }
+    })
+  }, /*#__PURE__*/React$1.createElement(Button$1, {
     text: primaryText,
     size: "medium",
     backgroundColor: color,
@@ -39632,7 +39659,7 @@ const MessageBox = _ref => {
     width: "auto",
     minWidth: "60px",
     onClick: onConfirm
-  }))));
+  })))));
 };
 
 // OkIcon.jsx
@@ -44494,7 +44521,7 @@ const ButtonContainer = styled$1.div`
     }
   }
 `;
-const CustomTooltip$1 = styled$1(Tooltip$2)`
+const CustomTooltip$1 = styled$1(Tooltip$3)`
   .controls {
     padding: 12px 16px;
     font-size: 14px;
@@ -44989,7 +45016,7 @@ styled.div`
     }
   }
 `;
-const CustomTooltip = styled(Tooltip$2)`
+const CustomTooltip = styled(Tooltip$3)`
   .controls {
     padding: 12px 16px;
     font-size: 14px;
@@ -45661,7 +45688,7 @@ const DividerLine = styled.div`
   background: #BEE3C7;
   margin: 0 auto;
 `;
-const Tooltip = styled.div`
+const Tooltip$1 = styled.div`
   visibility: hidden;
   background: #ffffff;
   color: #212121;
@@ -45698,8 +45725,8 @@ const ExpandButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  &:hover ${Tooltip},
-  &:focus-within ${Tooltip} {
+  &:hover ${Tooltip$1},
+  &:focus-within ${Tooltip$1} {
     visibility: visible;
     opacity: 1;
   }
@@ -54086,7 +54113,7 @@ const SuccessScreen = ({
     key: idx
   }, vendor))), hiddenVendors.length > 0 && /*#__PURE__*/React$1.createElement(ExpandButtonWrapper, null, /*#__PURE__*/React$1.createElement(ExpandButton, {
     tabIndex: 0
-  }, "\u2022\u2022\u2022"), /*#__PURE__*/React$1.createElement(Tooltip, null, vendors.map((vendor, idx) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
+  }, "\u2022\u2022\u2022"), /*#__PURE__*/React$1.createElement(Tooltip$1, null, vendors.map((vendor, idx) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
     key: idx
   }, vendor, /*#__PURE__*/React$1.createElement("br", null)))))));
 };
@@ -55534,5 +55561,5 @@ const Tag = props => {
   }, /*#__PURE__*/React$1.createElement("span", null, text || template?.text));
 };
 
-export { AdvancedThresholds, Analytics, AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Budgets, Build, Button$1 as Button, Campaigns, CheckBox, CollapseData, CollapseHeader, ContainerTable, Coupons, CustomerSegments, Dashboard, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, GroupBuilder, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, ItemsStores, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, PreTestWhatIf, QuickFilter, QuickFilterCards, RangePicker, RangePop, ReportTable, RulesEngine, SampleRunEngine, SearchInput$1 as SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, Tag, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
+export { AdvancedThresholds, Analytics, AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Budgets, Build, Button$1 as Button, Campaigns, CheckBox, CollapseData, CollapseHeader, ContainerTable, Coupons, CustomerSegments, Dashboard, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, GroupBuilder, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, ItemsStores, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, PreTestWhatIf, QuickFilter, QuickFilterCards, RangePicker, RangePop, ReportTable, RulesEngine, SampleRunEngine, SearchInput$1 as SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, Tag, ToasterMessageBox, ToggleSwitch, Tooltip$3 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map