sag_components 2.0.0-beta104 → 2.0.0-beta106

package/dist/index.esm.js

@@ -44,7 +44,7 @@ const ButtonItem = styled.div`
     background-color: ${props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color};
     border-color: ${props => props.disabled ? props.disabled_border_color : props.hover_border_color};
     color: ${props => props.disabled ? props.disabled_text_color : props.hover_text_color};
-    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
+    box-shadow: ${props => props.disabled || props.background_color === 'transparent' ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
     cursor: ${props => !props.disabled ? 'pointer' : 'default'};
   }
   &.ButtonItem-clicked {
@@ -62,7 +62,7 @@ const Label$a = styled.label`
   pointer-events: none;
   user-select: none;
 `;
-const IconWrapper$5 = styled.div`
+const IconWrapper$6 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -494,7 +494,7 @@ const Button$1 = props => {
       width: "16px",
       color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
     };
-    return /*#__PURE__*/React$1.createElement(IconWrapper$5, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
+    return /*#__PURE__*/React$1.createElement(IconWrapper$6, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
   };
   const commonProps = {
     width: width || null,
@@ -2189,10 +2189,10 @@ const TooltipTip$1 = styled.div`
 const Tooltip$2 = props => {
   const {
     children,
-    content,
-    direction,
-    delay,
-    topFactor
+    content = 'Tooltip content',
+    direction = 'top',
+    delay = '400',
+    topFactor = -1.8
   } = props;
   let timeout;
   const [active, setActive] = useState(false);
@@ -2205,7 +2205,10 @@ const Tooltip$2 = props => {
     clearInterval(timeout);
     setActive(false);
   };
-  return /*#__PURE__*/React$1.createElement(TooltipContainer$4, null, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
+  return /*#__PURE__*/React$1.createElement(TooltipContainer$4, {
+    className: "tooltip-container"
+  }, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
+    className: "tooltip-wrapper",
     onMouseEnter: showTip,
     onMouseLeave: hideTip
   }, children, active && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
@@ -2213,20 +2216,6 @@ const Tooltip$2 = props => {
     topFactor: topFactor
   }, content)));
 };
-Tooltip$2.propTypes = {
-  children: PropTypes.node,
-  content: PropTypes.node,
-  direction: PropTypes.string,
-  delay: PropTypes.string,
-  topFactor: PropTypes.number
-};
-Tooltip$2.defaultProps = {
-  children: null,
-  content: 'Tooltip content',
-  direction: 'top',
-  delay: '400',
-  topFactor: -1.8
-};
 
 /* Benchmark */
 const Benchmark = props => {
@@ -2977,7 +2966,7 @@ const Label$9 = styled.label`
   user-select: none;   
   pointer-events: none;
 `;
-const IconWrapper$4 = styled.div`
+const IconWrapper$5 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3101,7 +3090,7 @@ const LinkButton = _ref => {
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "FilterIcon"
         }, /*#__PURE__*/React$1.createElement(FilterIcon$1, {
           height: iconHeight,
@@ -3109,7 +3098,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'plus':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "PlusIcon"
         }, /*#__PURE__*/React$1.createElement(PlusIcon, {
           height: iconHeight,
@@ -3117,7 +3106,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'options':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "OptionsIcon"
         }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
           height: iconHeight,
@@ -3125,7 +3114,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "DownloadIcon"
         }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
           height: iconHeight,
@@ -3133,7 +3122,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "DocumentIcon"
         }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
           height: iconHeight,
@@ -3141,7 +3130,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "FlyIcon"
         }, /*#__PURE__*/React$1.createElement(FlyIcon, {
           height: iconHeight,
@@ -3149,7 +3138,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "BellIcon"
         }, /*#__PURE__*/React$1.createElement(BellIcon, {
           height: iconHeight,
@@ -3157,7 +3146,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "MaintenanceIcon"
         }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
           height: iconHeight,
@@ -3165,7 +3154,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "ExitIcon"
         }, /*#__PURE__*/React$1.createElement(ExitIcon, {
           height: iconHeight,
@@ -3173,7 +3162,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "EyeIcon"
         }, /*#__PURE__*/React$1.createElement(EyeIcon, {
           height: iconHeight,
@@ -3181,7 +3170,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowdown':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "ArrowDownIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
           height: iconHeight,
@@ -3189,7 +3178,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowright':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "ArrowRightIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemRightIcon, {
           height: iconHeight,
@@ -3197,7 +3186,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'select':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "SelectRightIcon"
         }, /*#__PURE__*/React$1.createElement(ArrowSelectIcon, {
           height: "16px",
@@ -3205,7 +3194,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'info':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
           className: "InfoIcon"
         }, /*#__PURE__*/React$1.createElement(InfoIcon, {
           height: iconHeight,
@@ -3495,7 +3484,7 @@ const TextFieldContainer = styled.div`
     position: relative;
     width: ${props => props.width};
 `;
-const IconWrapper$3 = styled.div`
+const IconWrapper$4 = styled.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -3538,7 +3527,7 @@ const SearchInput = props => {
   return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
     className: className,
     width: width
-  }, /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+  }, /*#__PURE__*/React$1.createElement(IconWrapper$4, {
     position: position
   }, /*#__PURE__*/React$1.createElement(SearchIcon, {
     color: iconColor
@@ -8531,7 +8520,6 @@ const Label$7 = styled.label`
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : '28px'};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
-  font-family: Poppins;  
   transform: translateY(-50%);  
   transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
   display: flex;
@@ -8565,14 +8553,13 @@ const InputContainer$8 = styled.div`
     border-radius: 12px;
     outline: none;
     color: ${props => props.disabled ? '#888' : '#212121'};
-  &:hover {
-    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  }
-  &:focus {  
-    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
-  }
-  
+    &:hover {
+      border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
+      cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+    }
+    &:focus {  
+      border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
+    }
 `;
 const InputSubContainer$4 = styled.div`
     display: flex;       
@@ -8595,7 +8582,6 @@ const InputSubContainer$4 = styled.div`
 const StyledInput$8 = styled.input`
   width: calc(100% - 10px);
   height: 20px;
-  font-family: Poppins;
   font-weight: 400;
   font-size: 14px;
   outline: none;  
@@ -8623,7 +8609,6 @@ const OptionsSubContainer$3 = styled.ul`
   left: 0;
   z-index: 101;
   width: calc(100% - 23px);
-  font-family: Poppins; 
   border-radius: 4px; 
   background-color: white;
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
@@ -8640,7 +8625,6 @@ const OptionItem$3 = styled.li`
   padding: 10px;
   cursor: pointer;
   color: #212121;
-  font-family: Poppins;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -23919,21 +23903,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("");
@@ -34360,7 +34345,7 @@ const Modal = styled.div`
   display: flex;
   gap: 20px;
   padding: 20px;
-  margin-top: 50px;
+  margin-top: 40px;
   flex-direction: column;
   background-color: white;
   border-radius: 12px;
@@ -34401,6 +34386,7 @@ const ModalWithOverlay = props => {
     cancelButtonLeftIcon = '',
     cancelButtonRightIcon = '',
     cancelButtonType = 'secondary',
+    disableOkButton = false,
     okButtonColor = '',
     okButtonHoverBackgroundColor = '',
     okButtonText = 'OK',
@@ -34413,7 +34399,9 @@ const ModalWithOverlay = props => {
     overlayOpacity = 0.797,
     showCancelButton = true,
     // Added this prop
-    showOkButton = true // Added this prop
+    showOkButton = true,
+    // Added this prop
+    tooltipContent = ''
   } = props;
   const overlayStyle = {
     backgroundColor: overlayTransparent ? "transparent" : `rgba(0, 0, 0, ${overlayOpacity || 0.797})`
@@ -34438,18 +34426,41 @@ const ModalWithOverlay = props => {
     rightIcon: cancelButtonRightIcon,
     text: cancelButtonText,
     onClick: onCancel
-  }), showOkButton && /*#__PURE__*/React$1.createElement(Button$1, {
+  }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    direction: "top",
+    topFactor: -0.85,
+    content: /*#__PURE__*/React$1.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: tooltipContent
+      }
+    })
+  }, /*#__PURE__*/React$1.createElement(Button$1, {
+    size: "medium",
+    type: okButtonType,
+    leftIcon: okButtonLeftIcon,
+    rightIcon: okButtonRightIcon,
+    disabled: disableOkButton,
+    text: okButtonText,
+    onClick: onOk,
+    borderColor: okButtonColor,
+    backgroundColor: okButtonColor,
+    hoverBorderColor: okButtonHoverBackgroundColor,
+    hoverBackgroundColor: okButtonHoverBackgroundColor,
+    hoverTextColor: "#212121"
+  })) : /*#__PURE__*/React$1.createElement(Button$1, {
     size: "medium",
     type: okButtonType,
     leftIcon: okButtonLeftIcon,
     rightIcon: okButtonRightIcon,
+    disabled: disableOkButton,
     text: okButtonText,
     onClick: onOk,
     borderColor: okButtonColor,
     backgroundColor: okButtonColor,
+    hoverBorderColor: okButtonHoverBackgroundColor,
     hoverBackgroundColor: okButtonHoverBackgroundColor,
     hoverTextColor: "#212121"
-  }))), /*#__PURE__*/React$1.createElement(ModalBody, {
+  })))), /*#__PURE__*/React$1.createElement(ModalBody, {
     className: "modal-body"
   }, children)));
 };
@@ -34588,6 +34599,12 @@ const WeeksCalendar = ({
   const [startWeek, setStartWeek] = useState(defaultStartWeek);
   const [endWeek, setEndWeek] = useState(defaultEndWeek);
 
+  // Update state when props change (handles cases where component persists)
+  useEffect(() => {
+    setStartWeek(defaultStartWeek);
+    setEndWeek(defaultEndWeek);
+  }, [defaultStartWeek, defaultEndWeek]);
+
   // derived helpers --------------------------------------
   const hasSelection = startWeek !== null;
   const isRange = hasSelection && endWeek !== null && endWeek !== startWeek;
@@ -34789,6 +34806,45 @@ const WeeksPicker = _ref => {
   const [isOpen, setIsOpen] = useState(false);
   const [showAbove, setShowAbove] = useState(false);
 
+  // Function to parse the value string and extract week numbers
+  const parseValueToWeeks = valueString => {
+    if (!valueString) return {
+      startWeek: null,
+      endWeek: null
+    };
+
+    // Handle single week: "Week 5"
+    const singleWeekMatch = valueString.match(/^Week (\d+)$/);
+    if (singleWeekMatch) {
+      const week = parseInt(singleWeekMatch[1]);
+      return {
+        startWeek: week,
+        endWeek: week
+      };
+    }
+
+    // Handle week range: "Weeks 5 - 10"
+    const rangeMatch = valueString.match(/^Weeks (\d+) - (\d+)$/);
+    if (rangeMatch) {
+      const startWeek = parseInt(rangeMatch[1]);
+      const endWeek = parseInt(rangeMatch[2]);
+      return {
+        startWeek,
+        endWeek
+      };
+    }
+    return {
+      startWeek: null,
+      endWeek: null
+    };
+  };
+
+  // Get current parsed weeks from value
+  const {
+    startWeek: currentStartWeek,
+    endWeek: currentEndWeek
+  } = parseValueToWeeks(value);
+
   // Handle click outside to close calendar
   useEffect(() => {
     const handleClickOutside = event => {
@@ -34903,6 +34959,8 @@ const WeeksPicker = _ref => {
     showAbove: showAbove
   }, /*#__PURE__*/React$1.createElement(WeeksCalendar, {
     year: year,
+    defaultStartWeek: currentStartWeek,
+    defaultEndWeek: currentEndWeek,
     backgroundColor: borderColorFocus,
     hoverBackgroundColor: hoverColor,
     onApply: (start, end) => {
@@ -34977,7 +35035,7 @@ function FaEyeSlash (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 640 512"},"child":[{"tag":"path","attr":{"d":"M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"},"child":[]}]})(props);
 }
 
-const IconWrapper$2 = styled.div`
+const IconWrapper$3 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34993,7 +35051,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
   const newColor = disabled ? '#D0D0D0' : color || '#212121';
   switch (icon.toLowerCase()) {
     case 'filter':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "FilterIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35005,7 +35063,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'options':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "OptionsIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35017,7 +35075,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'download':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "DownloadIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35029,7 +35087,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'document':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "DocumentIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35041,7 +35099,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'fly':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "FlyIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35053,7 +35111,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'bell':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "BellIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35065,7 +35123,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'maintenance':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "MaintenanceIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35077,7 +35135,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'exit':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "ExitIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35089,7 +35147,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'eye':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "EyeIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35101,7 +35159,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'search':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
         className: "SearchIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35229,7 +35287,7 @@ const ErrorMessage = styled.div`
   margin-top: 5px;
   max-width: ${props => props.width || '300px'};
 `;
-const IconWrapper$1 = styled.div`
+const IconWrapper$2 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -35323,7 +35381,7 @@ const Input$2 = _ref => {
   const getPasswordIcon = () => {
     if (!password) return '';
     if (showPassword) {
-      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "passwordEyeSlash",
         disabled: disabled,
         onClick: toggleShowPassword
@@ -35993,6 +36051,114 @@ const NoEvents = ({
   fill: "#519595"
 }));
 
+const NoDataInSearchIcon = ({
+  width = '251',
+  height = '250'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 251 251",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("rect", {
+  width: "251",
+  height: "251",
+  rx: "125.5",
+  fill: "#F3F7F7"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M174.566 62.1208L171.585 64.3271L193.42 94.0203L196.4 91.814L174.566 62.1208Z",
+  fill: "#00093F"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M176.974 54.0357C176.987 51.8018 176.307 49.5445 174.884 47.6084C171.375 42.8375 164.676 41.8236 159.921 45.3436C157.992 46.7721 156.679 48.7275 156.034 50.8656L176.974 54.0357ZM155.573 53.93C155.56 56.1639 156.24 58.4212 157.663 60.3573C161.172 65.1282 167.871 66.1421 172.626 62.6222C174.555 61.1936 175.868 59.2383 176.513 57.1001L155.573 53.93Z",
+  fill: "#EAEAEA"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M140.879 97.9184C149.565 97.9184 156.607 91.2187 156.607 82.9543C156.607 74.6899 149.565 67.9902 140.879 67.9902C132.193 67.9902 125.151 74.6899 125.151 82.9543C125.151 91.2187 132.193 97.9184 140.879 97.9184Z",
+  fill: "white"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M156.603 82.9549C156.603 91.1348 149.705 97.7805 141.141 97.916C136.049 95.3556 132.928 90.1321 131.969 83.272C131.287 78.3889 132.21 73.0258 133.533 69.7184C135.725 68.6157 138.223 67.9902 140.875 67.9902C149.562 67.9902 156.603 74.6902 156.603 82.9543V82.9549Z",
+  fill: "#066768"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M135.452 83.931C135.17 82.7138 134.341 81.7683 133.286 81.2929L133.156 80.7305C133.156 80.7305 131.072 81.0032 130.848 81.0558C128.785 81.537 127.502 83.6051 127.982 85.6749C128.462 87.7447 130.504 88.939 132.586 88.5507C133.158 88.4438 134.893 88.2254 134.893 88.2254L134.669 87.2576C135.406 86.364 135.734 85.1481 135.452 83.931Z",
+  fill: "#ACACAF"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M134.035 88.3183C136.153 88.3183 137.869 86.5956 137.869 84.4707C137.869 82.3457 136.153 80.623 134.035 80.623C131.917 80.623 130.2 82.3457 130.2 84.4707C130.2 86.5956 131.917 88.3183 134.035 88.3183Z",
+  fill: "#CCCCCC"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M80.9598 142.779C80.9598 142.779 87.5291 143.582 92.4966 140.689C97.4635 137.795 101.629 130.4 104.674 127.827C107.719 125.255 111.884 122.2 113.327 119.95C114.769 117.699 115.249 114.484 115.249 114.484C115.249 114.484 123.902 110.143 130.792 110.464C137.682 110.786 145.212 115.93 145.212 115.93C145.212 115.93 142.488 126.862 141.687 132.007C140.886 137.152 139.772 145.081 134.164 156.335C128.556 167.588 107.504 177.746 107.504 177.746L103.274 167.625C103.274 167.625 113.257 161.416 115.568 156.14C118.392 149.692 117.807 142.561 117.807 142.561C117.807 142.561 113.807 150.013 107.238 152.907C100.668 155.801 80.9604 157.21 80.9604 157.21V142.779H80.9598Z",
+  fill: "#EAEAEA"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M80.9598 142.779C80.9598 142.779 87.5291 143.582 92.4966 140.689C97.4635 137.795 101.629 130.4 104.674 127.827C107.719 125.255 111.884 122.2 113.327 119.95C114.769 117.699 115.249 114.484 115.249 114.484C115.249 114.484 123.902 110.143 130.792 110.464C137.682 110.786 145.212 115.93 145.212 115.93C145.212 115.93 142.488 126.862 141.687 132.007C140.886 137.152 139.772 145.081 134.164 156.335C128.556 167.588 107.504 177.746 107.504 177.746L103.274 167.625C103.274 167.625 113.257 161.416 115.568 156.14C118.392 149.692 117.807 142.561 117.807 142.561C117.807 142.561 113.807 150.013 107.238 152.907C100.668 155.801 80.9604 157.21 80.9604 157.21V142.779H80.9598Z",
+  fill: "#EAEAEA"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M145.203 115.93C145.203 115.93 137.672 110.785 130.783 110.464C123.893 110.143 115.241 114.484 115.241 114.484C115.241 114.484 114.76 117.699 113.318 119.95C112.724 120.877 111.667 121.942 110.416 123.052C112.659 123.746 116.808 124.72 120.823 124.033C126.728 123.022 130.857 118.2 132.969 118.082C135.081 117.964 140.877 122.461 140.877 122.461C140.877 122.461 133.498 149.725 128.602 155.493C123.706 161.26 118.921 164.288 113.078 164.672C111.334 164.786 109.289 164.832 107.278 164.841C105.047 166.517 103.267 167.625 103.267 167.625L104.736 171.14L110.163 176.368C116.008 173.225 129.782 165.113 134.156 156.335C139.764 145.081 140.878 137.151 141.679 132.007C142.48 126.863 145.204 115.93 145.204 115.93H145.203Z",
+  fill: "#CCCCCC"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M105.23 147.957C101.136 150.446 89.9791 151.153 80.9598 151.292V157.206C80.9598 157.206 100.668 155.797 107.237 152.903C113.806 150.009 117.807 142.557 117.807 142.557C119.535 139.372 123.706 128.637 123.706 128.637C123.706 128.637 123.247 129.328 120.241 133.644C117.235 137.959 112.535 143.515 105.23 147.957H105.23Z",
+  fill: "#CCCCCC"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M113.95 116.13C113.95 116.13 120.305 112.824 127.75 112.438C137.367 111.939 144.953 118.345 145.873 118.068C146.793 117.791 147.805 111.883 147.805 111.883C147.805 111.883 161.881 109.391 165.009 106.991C168.137 104.591 179.637 87.6985 179.637 87.6985L174.393 81.791C174.393 81.791 167.309 88.7141 163.629 90.9294C159.949 93.1446 149.829 95.083 147.621 94.6216C145.413 94.1602 137.041 93.1446 131.061 93.4214C125.081 93.6983 121.953 94.9907 121.033 95.7289C120.113 96.4672 118.015 100.915 116.452 105.53C114.888 110.145 113.949 116.129 113.949 116.129L113.95 116.13Z",
+  fill: "#EAEAEA"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M177.247 87.1764C177.247 87.1764 167.008 101.656 162.267 104.345C157.525 107.033 147.836 107.723 147.836 107.723C147.836 107.723 147.218 105.931 147.149 103.724C147.08 101.518 147.149 99.9398 147.149 99.9398C147.149 99.9398 146.118 106.482 144.606 110.895C143.699 113.542 142.541 115.147 141.76 116.008C144.029 117.193 145.508 118.187 145.882 118.074C146.802 117.797 147.814 111.889 147.814 111.889C147.814 111.889 161.89 109.397 165.018 106.997C167.738 104.91 176.788 91.8644 179.102 88.4969L177.247 87.1758V87.1764Z",
+  fill: "#CCCCCC"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M112.088 121.365C113.698 122.915 122.645 122.745 125.095 121.356C127.545 119.966 132.977 99.0729 132.977 98.0316C132.977 96.9903 121.686 96.9891 118.49 97.3097C115.295 97.6304 113.164 101.585 110.928 108.531C108.691 115.478 111.159 120.471 112.088 121.366V121.365Z",
+  fill: "#B4D1D2"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M132.978 98.0275C130.844 97.0112 129.222 97.9241 127.365 99.9378C125.509 101.951 121.876 113.497 121.796 116.818C121.715 120.138 123.413 121.492 125.096 121.352C127.659 121.139 129.486 113.37 131.1 108.835C132.714 104.3 133.951 98.4912 132.978 98.028L132.978 98.0275Z",
+  fill: "#9BC2C3"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M171.474 83.4681C171.474 83.4681 173.589 85.3107 174.868 86.8181C176.147 88.3255 178.373 90.8935 178.373 90.8935C178.373 90.8935 180.877 88.6602 181.434 88.381C181.99 88.1018 183.993 87.3204 186.108 85.7569C188.223 84.1935 190.281 80.3973 190.281 79.3922C190.281 78.387 189.057 76.7681 188.056 74.8139C187.054 72.8598 184.256 69.998 183.755 69.6628C183.255 69.3275 179.335 74.6113 179.335 74.6113L177.171 71.9241C177.171 71.9241 175.035 74.5908 174.423 76.2098C173.811 77.8287 173.572 80.2524 173.517 80.5953C173.461 80.9381 171.474 83.4675 171.474 83.4675L171.474 83.4681ZM108.514 161.912C108.514 161.912 103.854 165.727 102.996 166.157C102.137 166.588 100.662 167.033 98.7781 167.837C97.2524 168.489 96.6069 169.312 96.6069 169.312C96.6069 169.312 96.2396 181.511 96.1395 185.131C96.0394 188.751 94.2163 199.964 94.2163 200.165C94.2163 200.367 97.8607 200.648 99.4259 199.97C102.411 198.677 104.82 194.24 105.467 192.28C106.311 189.725 108.196 183.791 108.514 181.914C108.833 180.037 111.505 178.093 112.741 177.356C113.977 176.619 115.58 175.982 115.914 175.781C116.249 175.58 116.583 171.692 115.48 168.743C114.378 165.793 111.102 161.484 108.514 161.912ZM87.8804 140.895C87.8804 140.895 89.3076 143.355 89.9107 146.942C90.5137 150.528 89.2646 157.485 88.6615 157.874C88.0585 158.263 79.531 158.912 79.0572 159.128C78.5834 159.344 76.5595 162.109 74.3628 165.782C72.1666 169.455 69.4529 171.097 67.8167 171.357C66.1799 171.616 62.3038 170.622 62.3038 170.622L69.6374 140.388C69.6374 140.388 71.9297 139.595 74.3628 139.812C76.187 139.974 80.3058 140.849 82.158 141.109C84.0101 141.368 87.8798 140.895 87.8798 140.895L87.8804 140.895Z",
+  fill: "#066768"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M62.3063 170.621C64.0199 170.992 66.9944 167 69.0375 161.176C70.9473 155.73 72.3996 146.133 71.9682 143.784C71.5369 141.436 71.1923 140.7 69.6399 140.388C68.0875 140.076 66.7941 141.189 65.6853 143.537C64.5764 145.886 61.3529 154.271 60.6439 160.125C60.1264 164.397 60.1456 170.154 62.3063 170.622V170.621ZM94.2182 200.165C96.635 200.46 98.7753 196.878 99.9552 192.188C101.135 187.499 101.226 179.258 100.5 175.069C99.7741 170.88 97.7101 169.381 96.6094 169.311C95.5087 169.241 93.2397 171.399 92.4679 175.889C91.9172 179.092 90.8794 188.091 91.1518 192.735C91.4242 197.379 92.3381 199.935 94.2182 200.165ZM183.031 75.41C182.975 75.41 182.919 75.3943 182.871 75.3616C182.737 75.2728 182.7 75.0912 182.789 74.9568L185.254 71.2196C185.342 71.0853 185.523 71.0485 185.657 71.1373C185.791 71.226 185.828 71.4077 185.739 71.542L183.274 75.2792C183.218 75.3639 183.126 75.41 183.031 75.41H183.031ZM184.829 77.6013C184.774 77.6013 184.718 77.5856 184.669 77.5528C184.535 77.4641 184.499 77.2824 184.587 77.1481L187.052 73.4109C187.141 73.2766 187.322 73.2398 187.456 73.3285C187.589 73.4173 187.626 73.599 187.538 73.7333L185.073 77.4705C185.017 77.5552 184.924 77.6013 184.83 77.6013H184.829ZM187.052 79.7932C186.996 79.7932 186.94 79.7774 186.89 79.7441C186.757 79.6548 186.72 79.4731 186.81 79.3394L188.852 76.2686C188.941 76.1342 189.122 76.098 189.255 76.188C189.389 76.2773 189.425 76.459 189.336 76.5927L187.294 79.6635C187.238 79.7482 187.145 79.7938 187.052 79.7938V79.7932Z",
+  fill: "white"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M160.745 103.378C158.095 105.628 157.794 109.487 157.794 109.487C157.794 109.487 157.915 109.539 158.134 109.615C161.09 108.821 163.833 107.902 165.014 106.996C166.002 106.238 167.824 104.036 169.854 101.377C169.854 101.377 165.54 99.3069 160.744 103.378H160.745Z",
+  fill: "#066768"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M166.27 37.7959C173.997 37.7959 180.206 43.7717 180.207 51.0771C180.207 58.3827 173.997 64.3594 166.27 64.3594C158.543 64.3593 152.334 58.3827 152.334 51.0771C152.334 43.7717 158.543 37.7959 166.27 37.7959Z",
+  fill: "#E6F0F0",
+  stroke: "#066768",
+  "stroke-width": "1.38674"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M198.122 146.272V146.246C198.12 146.251 198.119 146.255 198.118 146.259C198.117 146.255 198.115 146.251 198.115 146.246V146.272C197.779 147.489 197.003 148.359 195.787 148.882C197.003 149.405 197.779 150.275 198.115 151.492V151.517C198.116 151.513 198.117 151.509 198.118 151.505C198.12 151.509 198.121 151.513 198.122 151.517V151.492C198.457 150.275 199.233 149.405 200.449 148.882C199.233 148.359 198.457 147.489 198.122 146.272ZM62.7168 82.9096V82.884C62.7154 82.8883 62.7139 82.8925 62.7132 82.8968C62.7118 82.8925 62.7104 82.8883 62.7097 82.884V82.9096C62.3741 84.1263 61.5982 84.9962 60.3821 85.5194C61.5982 86.0427 62.3741 86.9126 62.7097 88.1292V88.1548C62.7111 88.1506 62.7125 88.1463 62.7132 88.142C62.7146 88.1463 62.7161 88.1506 62.7168 88.1548V88.1292C63.0523 86.9126 63.8282 86.0427 65.0444 85.5194C63.8282 84.9962 63.0523 84.1263 62.7168 82.9096ZM210.596 189.08V189.055C210.595 189.059 210.593 189.063 210.592 189.067C210.591 189.063 210.59 189.059 210.589 189.055V189.08C210.253 190.297 209.477 191.167 208.261 191.69C209.477 192.213 210.253 193.083 210.589 194.3V194.325C210.59 194.321 210.592 194.317 210.592 194.313C210.594 194.317 210.595 194.321 210.596 194.325V194.3C210.932 193.083 211.707 192.213 212.924 191.69C211.707 191.167 210.932 190.297 210.596 189.08ZM182.971 172.925V172.873C182.969 172.883 182.966 172.89 182.964 172.9C182.961 172.89 182.959 172.883 182.956 172.873V172.925C182.285 175.358 180.734 177.098 178.301 178.145C180.734 179.191 182.285 180.932 182.956 183.364V183.416C182.959 183.407 182.961 183.399 182.964 183.39C182.966 183.399 182.969 183.407 182.971 183.416V183.364C183.642 180.932 185.194 179.191 187.626 178.145C185.194 177.098 183.643 175.358 182.971 172.925ZM79.1659 114.505V114.453C79.1637 114.462 79.1609 114.47 79.1587 114.479C79.1566 114.47 79.1537 114.462 79.1516 114.453V114.505C78.4805 116.937 76.9288 118.678 74.4964 119.724C76.9288 120.771 78.4798 122.511 79.1516 124.944V124.996C79.1537 124.987 79.1566 124.979 79.1587 124.97C79.1609 124.979 79.1637 124.987 79.1659 124.996V124.944C79.837 122.511 81.3887 120.771 83.821 119.724C81.3887 118.678 79.8377 116.937 79.1659 114.505ZM101.233 55.7033V55.6514C101.23 55.6606 101.228 55.6685 101.225 55.6777C101.223 55.6685 101.22 55.6606 101.218 55.6514V55.7033C100.547 58.1359 98.9955 59.8764 96.5632 60.9229C98.9955 61.9694 100.547 63.71 101.218 66.1425V66.1945C101.22 66.1852 101.223 66.1774 101.225 66.1681C101.228 66.1774 101.23 66.1852 101.233 66.1945V66.1425C101.904 63.71 103.455 61.9694 105.888 60.9229C103.455 59.8764 101.904 58.1359 101.233 55.7033Z",
+  fill: "#F2BB91"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M61.015 56.8555C61.1381 56.7383 61.3352 56.7385 61.4584 56.8555C61.5854 56.9764 61.5854 57.1759 61.4584 57.2969L57.6556 60.918C57.5326 61.0351 57.3355 61.0349 57.2123 60.918C57.0852 60.797 57.0852 60.5975 57.2123 60.4766L61.015 56.8555ZM60.0013 59.5107C60.3566 59.1728 60.9293 59.1727 61.2845 59.5107C61.6437 59.8526 61.6437 60.4101 61.2845 60.752C60.9293 61.09 60.3566 61.0899 60.0013 60.752C59.6422 60.4101 59.6422 59.8526 60.0013 59.5107ZM60.8412 59.9521C60.7323 59.8484 60.5536 59.8484 60.4447 59.9521C60.3396 60.0522 60.3396 60.2105 60.4447 60.3105C60.5536 60.4142 60.7323 60.4142 60.8412 60.3105C60.9461 60.2106 60.9461 60.0521 60.8412 59.9521ZM57.3861 57.0215C57.7414 56.6833 58.315 56.6833 58.6703 57.0215C59.029 57.3634 59.0292 57.9209 58.6703 58.2627C58.3151 58.6008 57.7414 58.6007 57.3861 58.2627C57.027 57.9208 57.027 57.3634 57.3861 57.0215ZM58.226 57.4619C58.1171 57.3586 57.9383 57.3585 57.8295 57.4619C57.7244 57.5619 57.7244 57.7213 57.8295 57.8213C57.9383 57.9249 58.117 57.9248 58.226 57.8213C58.331 57.7213 58.331 57.5619 58.226 57.4619Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.277348"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M127.578 56.8555C127.702 56.7383 127.899 56.7385 128.022 56.8555C128.149 56.9764 128.149 57.1759 128.022 57.2969L124.219 60.918C124.096 61.0351 123.899 61.0349 123.776 60.918C123.649 60.797 123.649 60.5975 123.776 60.4766L127.578 56.8555ZM126.565 59.5107C126.92 59.1728 127.493 59.1727 127.848 59.5107C128.207 59.8526 128.207 60.4101 127.848 60.752C127.493 61.09 126.92 61.0899 126.565 60.752C126.206 60.4101 126.206 59.8526 126.565 59.5107ZM127.405 59.9521C127.296 59.8484 127.117 59.8484 127.008 59.9521C126.903 60.0522 126.903 60.2105 127.008 60.3105C127.117 60.4142 127.296 60.4142 127.405 60.3105C127.51 60.2106 127.51 60.0521 127.405 59.9521ZM123.95 57.0215C124.305 56.6833 124.878 56.6833 125.234 57.0215C125.592 57.3634 125.593 57.9209 125.234 58.2627C124.879 58.6008 124.305 58.6007 123.95 58.2627C123.59 57.9208 123.59 57.3634 123.95 57.0215ZM124.789 57.4619C124.681 57.3586 124.502 57.3585 124.393 57.4619C124.288 57.5619 124.288 57.7213 124.393 57.8213C124.502 57.9249 124.681 57.9248 124.789 57.8213C124.894 57.7213 124.894 57.5619 124.789 57.4619Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.277348"
+}), /*#__PURE__*/React$1.createElement("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M51.7697 123.778C52.0018 124.01 52.0018 124.386 51.7697 124.618L39.091 137.297C38.8589 137.529 38.4826 137.529 38.2505 137.297C38.0184 137.065 38.0184 136.688 38.2505 136.456L50.9293 123.778C51.1614 123.545 51.5376 123.545 51.7697 123.778ZM41.6324 125.198C41.0908 124.657 40.2128 124.657 39.6712 125.198C39.1297 125.74 39.1297 126.618 39.6712 127.159C40.2128 127.701 41.0908 127.701 41.6324 127.159C42.1739 126.618 42.1739 125.74 41.6324 125.198ZM38.8307 124.358C39.8365 123.352 41.4671 123.352 42.4729 124.358C43.4786 125.364 43.4786 126.994 42.4729 128C41.4671 129.006 39.8365 129.006 38.8307 128C37.825 126.994 37.825 125.364 38.8307 124.358ZM50.349 133.915C49.8074 133.373 48.9294 133.373 48.3879 133.915C47.8463 134.457 47.8463 135.335 48.3879 135.876C48.9294 136.418 49.8074 136.418 50.349 135.876C50.8906 135.335 50.8906 134.457 50.349 133.915ZM47.5474 133.074C48.5531 132.069 50.1838 132.069 51.1895 133.074C52.1953 134.08 52.1953 135.711 51.1895 136.717C50.1838 137.722 48.5531 137.722 47.5474 136.717C46.5416 135.711 46.5416 134.08 47.5474 133.074Z",
+  fill: "#B4D1D2"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M188.393 107.062C188.562 106.9 188.835 106.9 189.004 107.062C189.177 107.227 189.177 107.497 189.004 107.662L182.664 113.698L182.663 113.697C182.494 113.858 182.222 113.859 182.053 113.697C181.88 113.532 181.88 113.262 182.053 113.097L188.393 107.062ZM186.701 111.487C187.258 110.958 188.158 110.958 188.714 111.487C189.274 112.021 189.274 112.889 188.714 113.422C188.158 113.952 187.258 113.952 186.701 113.422C186.141 112.889 186.141 112.021 186.701 111.487ZM188.103 112.088C187.886 111.881 187.53 111.881 187.313 112.088C187.1 112.291 187.1 112.617 187.313 112.82C187.53 113.027 187.886 113.027 188.103 112.82C188.316 112.617 188.316 112.291 188.103 112.088ZM182.343 107.338C182.899 106.808 183.799 106.808 184.356 107.338C184.916 107.871 184.916 108.739 184.356 109.272C183.799 109.802 182.899 109.802 182.343 109.272C181.783 108.739 181.783 107.871 182.343 107.338ZM183.744 107.938C183.527 107.732 183.172 107.732 182.954 107.938C182.741 108.141 182.741 108.468 182.954 108.671C183.172 108.878 183.527 108.878 183.744 108.671C183.957 108.468 183.958 108.141 183.744 107.938Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.277348"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M171.954 162.476C172.077 162.358 172.274 162.359 172.398 162.476C172.525 162.597 172.525 162.796 172.398 162.917L168.595 166.538C168.472 166.655 168.275 166.655 168.151 166.538C168.024 166.417 168.024 166.218 168.151 166.097L171.954 162.476ZM170.94 165.131C171.296 164.793 171.868 164.793 172.224 165.131C172.583 165.473 172.583 166.03 172.224 166.372C171.868 166.71 171.296 166.71 170.94 166.372C170.581 166.03 170.581 165.473 170.94 165.131ZM171.78 165.572C171.671 165.469 171.493 165.469 171.384 165.572C171.279 165.672 171.279 165.831 171.384 165.931C171.493 166.034 171.671 166.034 171.78 165.931C171.885 165.831 171.885 165.672 171.78 165.572ZM168.325 162.642C168.681 162.303 169.254 162.303 169.609 162.642C169.968 162.984 169.968 163.541 169.609 163.883C169.254 164.221 168.681 164.221 168.325 163.883C167.966 163.541 167.966 162.984 168.325 162.642ZM169.165 163.082C169.056 162.979 168.877 162.979 168.769 163.082C168.664 163.182 168.664 163.341 168.769 163.441C168.877 163.545 169.056 163.545 169.165 163.441C169.27 163.341 169.27 163.182 169.165 163.082Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.277348"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M87.4525 81.9893C87.6226 81.8191 87.8985 81.8191 88.0687 81.9893C88.2389 82.1595 88.2389 82.4353 88.0687 82.6055L81.7298 88.9443C81.5596 89.1145 81.2838 89.1145 81.1136 88.9443C80.9434 88.7741 80.9434 88.4983 81.1136 88.3281L87.4525 81.9893ZM85.762 86.6377C86.319 86.0807 87.2216 86.0807 87.7786 86.6377C88.3357 87.1947 88.3357 88.0973 87.7786 88.6543C87.2216 89.2113 86.3191 89.2113 85.762 88.6543C85.205 88.0973 85.205 87.1947 85.762 86.6377ZM87.1624 87.2539C86.9458 87.0373 86.5948 87.0373 86.3782 87.2539C86.1616 87.4705 86.1616 87.8215 86.3782 88.0381C86.5948 88.2547 86.9458 88.2547 87.1624 88.0381C87.3791 87.8215 87.3791 87.4705 87.1624 87.2539ZM81.4036 82.2793C81.9606 81.7223 82.8632 81.7224 83.4202 82.2793C83.9773 82.8363 83.9773 83.7389 83.4202 84.2959C82.8632 84.8529 81.9607 84.8529 81.4036 84.2959C80.8467 83.7389 80.8466 82.8363 81.4036 82.2793ZM82.804 82.8955C82.5874 82.679 82.2364 82.6789 82.0198 82.8955C81.8032 83.1121 81.8033 83.4631 82.0198 83.6797C82.2365 83.8963 82.5874 83.8963 82.804 83.6797C83.0206 83.4631 83.0206 83.1121 82.804 82.8955Z",
+  fill: "#9BC2C3",
+  stroke: "#9BC2C3",
+  "stroke-width": "0.277348"
+}), /*#__PURE__*/React$1.createElement("path", {
+  d: "M142.84 206.964V206.998C143.339 208.598 144.492 209.743 146.301 210.431C144.492 211.119 143.339 212.264 142.84 213.863V213.898C142.838 213.891 142.836 213.886 142.834 213.88C142.833 213.886 142.831 213.891 142.829 213.898V213.863C142.329 212.264 141.176 211.119 139.367 210.431C141.176 209.743 142.33 208.598 142.829 206.998V206.964C142.831 206.97 142.833 206.975 142.834 206.981C142.836 206.975 142.838 206.97 142.84 206.964Z",
+  fill: "#F2BB91"
+}));
+
 // TableHeader.styles.js
 const StyledTableHeader = styled.thead`
     background-color: white;
@@ -41159,7 +41325,8 @@ const Table = props => {
     lastRowsThreshold = 3,
     onSendClick = () => {},
     showHorizontalScroll = false,
-    onDeleteClick = () => {}
+    onDeleteClick = () => {},
+    showNoDataInSearch = false
   } = props;
   const scrollWrapperRef = useRef(null);
   const [hasTriggered, setHasTriggered] = useState(false);
@@ -41194,7 +41361,7 @@ const Table = props => {
   return /*#__PURE__*/React$1.createElement(TableWrapper, {
     width: width,
     height: height
-  }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
+  }, /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -41202,7 +41369,7 @@ const Table = props => {
     backgroundColor: sideButtonColor,
     hoverBackgroundColor: sideButtonHoverColor,
     onClick: onSideButtonClick
-  })), children, /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!"), /*#__PURE__*/React$1.createElement(Button$1, {
+  })), children, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, "No Events Found"), /*#__PURE__*/React$1.createElement("br", null), "Try to refine your query and search again") : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -41210,15 +41377,7 @@ const Table = props => {
     backgroundColor: buttonColor,
     hoverBackgroundColor: buttonHoverColor,
     onClick: onButtonClick
-  }))) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, counter === 0 ? 'No' : counter, " Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
-    height: "45px",
-    leftIcon: "Plus",
-    text: "New Event",
-    borderRadius: "12px",
-    backgroundColor: sideButtonColor,
-    hoverBackgroundColor: sideButtonHoverColor,
-    onClick: onSideButtonClick
-  })), children, /*#__PURE__*/React$1.createElement(TableContainer, {
+  })) : /*#__PURE__*/React$1.createElement(TableContainer, {
     showHorizontalScroll: showHorizontalScroll
   }, /*#__PURE__*/React$1.createElement(TableBodyScrollWrapper, {
     tableBodyHeight: tableBodyHeight,
@@ -41260,7 +41419,7 @@ const Card = styled.div`
 const TitleContainer = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: 52px;
+  margin-top: 50px;
   align-items: flex-start;
 `;
 const SectionTitle$1 = styled.div`
@@ -51918,7 +52077,6 @@ function ModalDrawer(_ref) {
   }, "\xD7"), children));
 }
 
-//OverlayDropdown.style.js
 const scrollableStyles = `
   &::-webkit-scrollbar {
     height: 8px;
@@ -51940,7 +52098,7 @@ const DropdownContainer = styled.div`
   width: ${props => props.width || '100%'};
   min-width: 320px;
   max-width: 600px;
-  font-family: "Poppins", sans-serif;  
+  font-family: "Poppins", sans-serif;
 `;
 const DropdownButton = styled.button`
   width: 100%;
@@ -51956,8 +52114,8 @@ const DropdownButton = styled.button`
   align-items: center;
   justify-content: space-between;
   ${props => props.disabled && css`
-      background: #F4F4F4;
-      color: #bdbdbd;
+      color:#8B8989;
+      background-color: #D0D0D0;
       cursor: not-allowed;
     `}
 `;
@@ -51974,10 +52132,15 @@ const DropdownList = styled.ul`
   max-width: 600px;
   max-height: ${props => props.dropdownMaxHeight || '400px'}; 
   overflow-y: auto;
-  top: 110%;
   left: 0;
 
   ${scrollableStyles}
+
+  ${props => props.position === 'above' ? css`
+        bottom: 110%;
+      ` : css`
+        top: 110%;
+      `}
 `;
 const SectionTitle = styled.li`
   font-size: 14px;
@@ -52060,6 +52223,7 @@ const Title = styled.div`
   gap: 8px;
   padding: 8px 16px;
   border-bottom: 1px solid #D9D9D9;
+  cursor: pointer;
 `;
 const FieldRow = styled.div`
   display: flex;
@@ -52149,9 +52313,15 @@ const OverlayTemplateDialog = ({
   return /*#__PURE__*/React$1.createElement(DialogOverlay, null, /*#__PURE__*/React$1.createElement(DialogContainer, null, /*#__PURE__*/React$1.createElement(Title, {
     onClick: onClose,
     title: "Back"
-  }, /*#__PURE__*/React$1.createElement(ChervronLeftIcon, {
+  }, /*#__PURE__*/React$1.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M1.21875 8.54703C1.0625 8.39078 1 8.20328 1 7.98453C1 7.79703 1.0625 7.60953 1.21875 7.45328L6.71875 2.20328C7.03125 1.92203 7.5 1.92203 7.78125 2.23453C8.0625 2.51578 8.0625 3.01578 7.75 3.29703L3.59375 7.23453H14.25C14.6562 7.23453 15 7.57828 15 7.98453C15 8.42203 14.6562 8.73453 14.25 8.73453H3.59375L7.75 12.7033C8.0625 12.9845 8.0625 13.4533 7.78125 13.7658C7.5 14.0783 7.03125 14.0783 6.71875 13.797L1.21875 8.54703Z",
     fill: "#212121"
-  }), /*#__PURE__*/React$1.createElement("span", null, "Define overlay parameters")), /*#__PURE__*/React$1.createElement("form", {
+  })), /*#__PURE__*/React$1.createElement("span", null, "Define overlay parameters")), /*#__PURE__*/React$1.createElement("form", {
     onSubmit: e => {
       e.preventDefault();
       if (isValid) onApply(fields);
@@ -52213,7 +52383,7 @@ OverlayTemplateDialog.propTypes = {
   buttonHoverColor: PropTypes.string
 };
 
-//OverlayDropdown.jsx
+// OverlayDropdown.jsx
 
 // Main Component
 const OverlayDropdown = _ref => {
@@ -52232,7 +52402,48 @@ const OverlayDropdown = _ref => {
   const [open, setOpen] = useState(false);
   const [hoveredText, setHoveredText] = useState(null);
   const [templateDialog, setTemplateDialog] = useState(null);
+  const [dropdownPosition, setDropdownPosition] = useState('below');
   const buttonRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const containerRef = useRef(null);
+
+  // Click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('touchstart', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [open]);
+
+  // Calculate dropdown position when opening
+  useEffect(() => {
+    if (open && buttonRef.current) {
+      const buttonRect = buttonRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const dropdownHeight = parseInt(dropdownMaxHeight, 10);
+
+      // Space available below the button
+      const spaceBelow = viewportHeight - buttonRect.bottom;
+      // Space available above the button
+      const spaceAbove = buttonRect.top;
+
+      // If there's not enough space below, but more space above, position above
+      if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+        setDropdownPosition('above');
+      } else {
+        setDropdownPosition('below');
+      }
+    }
+  }, [open, dropdownMaxHeight]);
 
   // Find selected item across all groups
   const findSelectedItem = () => {
@@ -52276,17 +52487,21 @@ const OverlayDropdown = _ref => {
       onSelectClick(result);
     }
   };
+  const toggleDropdown = () => {
+    setOpen(prev => !prev);
+  };
   return /*#__PURE__*/React$1.createElement(DropdownContainer, {
-    width: width
+    width: width,
+    ref: containerRef
   }, /*#__PURE__*/React$1.createElement(DropdownButton, {
     ref: buttonRef,
-    onClick: () => setOpen(prev => !prev),
+    onClick: toggleDropdown,
     disabled: disabled,
     type: "button"
   }, /*#__PURE__*/React$1.createElement(TruncatedText, {
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null)
-  }, selected ? getDisplayText(selected.label) : 'Select Overlay', required && /*#__PURE__*/React$1.createElement("span", {
+  }, selected ? getDisplayText(selected.label) : 'Choose Overlay', required && /*#__PURE__*/React$1.createElement("span", {
     style: {
       color: 'red',
       marginLeft: '2px'
@@ -52300,9 +52515,11 @@ const OverlayDropdown = _ref => {
     height: "12px",
     color: "#B1B1B1"
   })), open && /*#__PURE__*/React$1.createElement(DropdownList, {
+    ref: dropdownRef,
     role: "listbox",
     dropdownMaxHeight: dropdownMaxHeight,
-    width: width
+    width: width,
+    position: dropdownPosition
   }, data.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement("div", {
     key: group.overlayCode
   }, /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
@@ -52348,28 +52565,11 @@ const OverlayDropdown = _ref => {
     onClose: () => setTemplateDialog(null),
     onApply: handleTemplateApply,
     template: templateDialog.item,
-    params: templateDialog.params
+    params: templateDialog.params,
+    buttonColor: selectedColor,
+    buttonHoverColor: hoverColor
   }));
 };
-OverlayDropdown.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.shape({
-    overlayCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    overlayName: PropTypes.string,
-    templateType: PropTypes.number,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired
-    }))
-  })),
-  value: PropTypes.string,
-  onSelectClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  required: PropTypes.bool,
-  selectedColor: PropTypes.string,
-  hoverColor: PropTypes.string,
-  dropdownMaxHeight: PropTypes.string,
-  width: PropTypes.string
-};
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
@@ -52430,7 +52630,7 @@ const MessageContainer = styled.div`
     gap: 12px;
     //margin-bottom: 5px;
 `;
-const IconWrapper = styled.div`    
+const IconWrapper$1 = styled.div`    
     margin-top: 1px;
 `;
 const MessageTitle = styled.h3`
@@ -52515,7 +52715,7 @@ const MessageBox = _ref => {
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
     width: "22",
     height: "22"
-  })), /*#__PURE__*/React$1.createElement(ModalTitle, null, title), /*#__PURE__*/React$1.createElement(MessageContainer, null, /*#__PURE__*/React$1.createElement(IconWrapper, null, /*#__PURE__*/React$1.createElement(ExclamationMarkIcon, {
+  })), /*#__PURE__*/React$1.createElement(ModalTitle, null, title), /*#__PURE__*/React$1.createElement(MessageContainer, null, /*#__PURE__*/React$1.createElement(IconWrapper$1, null, /*#__PURE__*/React$1.createElement(ExclamationMarkIcon, {
     color: "#F00021",
     width: "16",
     height: "16"
@@ -52549,5 +52749,189 @@ const MessageBox = _ref => {
   }))));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, RangePop, ReportTable, SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
+// ToasterMessageBox.styles.js
+
+// Helper function to convert hex to rgba
+const hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+// Helper function to darken a color
+const darkenColor = (hex, amount) => {
+  const r = Math.max(0, parseInt(hex.slice(1, 3), 16) - amount);
+  const g = Math.max(0, parseInt(hex.slice(3, 5), 16) - amount);
+  const b = Math.max(0, parseInt(hex.slice(5, 7), 16) - amount);
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+};
+
+// Slide in animation - from bottom to top
+const slideIn = keyframes`
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+`;
+
+// Slide out animation - just fade out with opacity
+const slideOut = keyframes`
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+`;
+const ToasterContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 9px 12px;
+    background-color: white;
+    border: 1px solid ${props => hexToRgba(props.$color || '#519595', 1)};
+    border-radius: 12px;
+    font-family: 'Poppins', sans-serif;
+    min-height: 60px;
+    box-sizing: border-box;
+    width: ${props => props.$width || '500px'};
+    max-width: ${props => props.$width || '500px'};
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    
+    /* Animation states */
+    ${props => {
+  if (props.$isClosing) {
+    return css`animation: ${slideOut} 3s ease-out;`;
+  }
+  if (props.$isVisible) {
+    return css`animation: ${slideIn} 0.6s ease-in-out;`;
+  }
+  return css`animation: none;`;
+}}
+    
+    /* Initial state - hidden below screen */
+    transform: ${props => props.$isVisible ? 'translateY(0)' : 'translateY(100%)'};
+    opacity: ${props => props.$isVisible ? 1 : 0};
+    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
+`;
+const IconWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: ${props => props.$color || '#519595'};
+    flex-shrink: 0;
+`;
+const MessageText = styled.span`
+    font-family: 'Poppins', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    color: #262626;
+    flex: 1;
+    line-height: 21px;
+`;
+const LinkText = styled.span`
+    font-family: 'Poppins', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    color: ${props => darkenColor(props.$color || '#519595', 30)};
+    cursor: pointer;
+    text-decoration: underline;
+    flex-shrink: 0;
+    
+    &:hover {
+        opacity: 0.8;
+    }
+`;
+
+// OkCircleIcon.jsx
+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 => {
+  let {
+    color = '#519595',
+    messageText = 'In progress...',
+    linkText = '',
+    duration = 5,
+    width = '500px',
+    onLinkClick = () => {},
+    onClose = () => {}
+  } = _ref;
+  const [isVisible, setIsVisible] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+
+  // Convert seconds to milliseconds
+  const durationMs = duration * 1000;
+  useEffect(() => {
+    // Show animation
+    const showTimer = setTimeout(() => setIsVisible(true), 100);
+
+    // Auto close after duration
+    const autoCloseTimer = setTimeout(() => {
+      handleClose();
+    }, durationMs);
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(autoCloseTimer);
+    };
+  }, [durationMs]);
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+    }, 800); // Wait for fade out animation (0.8s)
+  };
+  const handleLinkClick = () => {
+    onLinkClick();
+    handleClose();
+  };
+  return /*#__PURE__*/React$1.createElement(ToasterContainer, {
+    $color: color,
+    $width: width,
+    $isVisible: isVisible,
+    $isClosing: isClosing
+  }, /*#__PURE__*/React$1.createElement(IconWrapper, {
+    $color: color
+  }, /*#__PURE__*/React$1.createElement(OkCircleIcon, {
+    color: color,
+    width: "40",
+    height: "40"
+  })), /*#__PURE__*/React$1.createElement(MessageText, null, messageText), /*#__PURE__*/React$1.createElement(LinkText, {
+    $color: color,
+    onClick: handleLinkClick
+  }, linkText));
+};
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, FilterPop, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, RangePop, ReportTable, SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map