sag_components 2.0.0-beta143 → 2.0.0-beta145

package/dist/index.esm.js

@@ -23,6 +23,7 @@ const ButtonContainer$3 = styled.div`
   align-content: center;
   width: ${props => props.width};
   height: ${props => props.height};
+  min-width: ${props => props.minWidth};
 `;
 const ButtonItem = styled.div`
   display: flex;
@@ -62,7 +63,7 @@ const Label$b = styled.label`
   pointer-events: none;
   user-select: none;
 `;
-const IconWrapper$6 = styled.div`
+const IconWrapper$5 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -488,6 +489,7 @@ const Button$1 = props => {
     size = "small",
     height = "",
     width = "",
+    minWidth = "unset",
     disabled = false,
     textColor = "",
     backgroundColor = "",
@@ -536,7 +538,7 @@ const Button$1 = props => {
       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")
     };
-    return /*#__PURE__*/React$1.createElement(IconWrapper$6, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
+    return /*#__PURE__*/React$1.createElement(IconWrapper$5, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
   };
   const commonProps = {
     width: width || null,
@@ -557,7 +559,8 @@ const Button$1 = props => {
   return /*#__PURE__*/React$1.createElement(ButtonContainer$3, {
     className: "ButtonContainer",
     width: commonProps.width,
-    height: commonProps.height
+    height: commonProps.height,
+    minWidth: minWidth
   }, isSubmitButton ? /*#__PURE__*/React$1.createElement(InputCommit, _extends$1({
     className: clicked ? "InputCommit-clicked" : "InputCommit",
     value: text,
@@ -3014,7 +3017,7 @@ const Label$a = styled.label`
   user-select: none;   
   pointer-events: none;
 `;
-const IconWrapper$5 = styled.div`
+const IconWrapper$4 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3138,7 +3141,7 @@ const LinkButton = _ref => {
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "FilterIcon"
         }, /*#__PURE__*/React$1.createElement(FilterIcon$1, {
           height: iconHeight,
@@ -3146,7 +3149,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'plus':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "PlusIcon"
         }, /*#__PURE__*/React$1.createElement(PlusIcon, {
           height: "16",
@@ -3154,7 +3157,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'options':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "OptionsIcon"
         }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
           height: iconHeight,
@@ -3162,7 +3165,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "DownloadIcon"
         }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
           height: iconHeight,
@@ -3170,7 +3173,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "DocumentIcon"
         }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
           height: iconHeight,
@@ -3178,7 +3181,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "FlyIcon"
         }, /*#__PURE__*/React$1.createElement(FlyIcon, {
           height: iconHeight,
@@ -3186,7 +3189,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "BellIcon"
         }, /*#__PURE__*/React$1.createElement(BellIcon, {
           height: iconHeight,
@@ -3194,7 +3197,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "MaintenanceIcon"
         }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
           height: iconHeight,
@@ -3202,7 +3205,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "ExitIcon"
         }, /*#__PURE__*/React$1.createElement(ExitIcon, {
           height: iconHeight,
@@ -3210,7 +3213,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "EyeIcon"
         }, /*#__PURE__*/React$1.createElement(EyeIcon, {
           height: iconHeight,
@@ -3218,7 +3221,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowdown':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "ArrowDownIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
           height: iconHeight,
@@ -3226,7 +3229,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowright':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "ArrowRightIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemRightIcon, {
           height: iconHeight,
@@ -3234,7 +3237,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'select':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "SelectRightIcon"
         }, /*#__PURE__*/React$1.createElement(ArrowSelectIcon, {
           height: "16px",
@@ -3242,7 +3245,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'info':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$5, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
           className: "InfoIcon"
         }, /*#__PURE__*/React$1.createElement(InfoIcon, {
           height: iconHeight,
@@ -3532,7 +3535,7 @@ const TextFieldContainer = styled.div`
     position: relative;
     width: ${props => props.width};
 `;
-const IconWrapper$4 = styled.div`
+const IconWrapper$3 = styled.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -3576,7 +3579,7 @@ const SearchInput = props => {
   return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
     className: className,
     width: width
-  }, /*#__PURE__*/React$1.createElement(IconWrapper$4, {
+  }, /*#__PURE__*/React$1.createElement(IconWrapper$3, {
     position: position
   }, /*#__PURE__*/React$1.createElement(SearchIcon, {
     color: iconColor
@@ -13076,11 +13079,11 @@ const ModalHeader$2 = styled.div`
     justify-content: space-between;
     margin-bottom: 32px;
 `;
-const ModalBody$2 = styled.div`
+const ModalBody$1 = styled.div`
     ${scrollableStyles$a}
     max-height: 80vh;
 `;
-const ModalTitle$3 = styled.h5`
+const ModalTitle$2 = styled.h5`
     font-family: 'Poppins', sans-serif;
     font-size: 32px;
     font-weight: 500;
@@ -13112,12 +13115,12 @@ const DialogOverlay$1 = props => {
   };
   return /*#__PURE__*/React.createElement(ModalWrapper$1, {
     className: className
-  }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$2, null, /*#__PURE__*/React.createElement(ModalTitle$3, null, title), /*#__PURE__*/React.createElement(ModalClose, {
+  }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$2, null, /*#__PURE__*/React.createElement(ModalTitle$2, null, title), /*#__PURE__*/React.createElement(ModalClose, {
     type: "button",
     onClick: closeModal
   }, /*#__PURE__*/React.createElement(CloseXIcon, {
     fill: "white"
-  }))), /*#__PURE__*/React.createElement(ModalBody$2, {
+  }))), /*#__PURE__*/React.createElement(ModalBody$1, {
     id: "modalBody"
   }, children)));
 };
@@ -27209,7 +27212,7 @@ const scrollableStyles$6 = `
   }
 `;
 const MainContainer$1 = styled.div``;
-const ModalOverlay$2 = styled.div`
+const ModalOverlay$1 = styled.div`
   position: fixed;
   z-index: 100;
   top: 0;
@@ -27451,7 +27454,7 @@ const PopupCharts = props => {
   }, displayChart(item)));
   return /*#__PURE__*/React$1.createElement(MainContainer$1, {
     id: "MainContainer"
-  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay$2, {
+  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay$1, {
     id: "ModalOverlay",
     className: "modal-overlay"
   }, /*#__PURE__*/React$1.createElement(ModalContent$2, {
@@ -33833,7 +33836,7 @@ const Header$3 = styled.div`
     align-items: flex-start;
   }
 `;
-const CloseButton$2 = styled.button`
+const CloseButton$1 = styled.button`
   position: absolute;
   top: -10px;
   right: 0px;
@@ -34034,7 +34037,7 @@ const InsightsCarousel = _ref => {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor
-  }), title), /*#__PURE__*/React$1.createElement(CloseButton$2, {
+  }), title), /*#__PURE__*/React$1.createElement(CloseButton$1, {
     onClick: () => onClose?.({
       label: "closeCarousel"
     }),
@@ -34359,12 +34362,12 @@ const ModalButtons = styled.div`
   display: flex;
   gap: 10px;
 `;
-const ModalTitle$2 = styled.h3`
+const ModalTitle$1 = styled.h3`
   margin: 0;
   font-size: 24px;
   font-weight: 500;
 `;
-const ModalBody$1 = styled.div`
+const ModalBody = styled.div`
   width: 100%;
   height: 100%;
 `;
@@ -34417,7 +34420,7 @@ const ModalWithOverlay = props => {
     }
   }, /*#__PURE__*/React$1.createElement(ModalHeader$1, {
     className: "modal-header"
-  }, /*#__PURE__*/React$1.createElement(ModalTitle$2, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
+  }, /*#__PURE__*/React$1.createElement(ModalTitle$1, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
     className: "modal-buttons"
   }, showCancelButton && /*#__PURE__*/React$1.createElement(Button$1, {
     size: "medium",
@@ -34464,7 +34467,7 @@ const ModalWithOverlay = props => {
     backgroundColor: okButtonColor,
     hoverBorderColor: okButtonHoverBackgroundColor,
     hoverBackgroundColor: okButtonHoverBackgroundColor
-  })))), /*#__PURE__*/React$1.createElement(ModalBody$1, {
+  })))), /*#__PURE__*/React$1.createElement(ModalBody, {
     className: "modal-body"
   }, children)));
 };
@@ -35039,7 +35042,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$3 = styled.div`
+const IconWrapper$2 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -35055,7 +35058,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$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "FilterIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35067,7 +35070,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'options':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "OptionsIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35079,7 +35082,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'download':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "DownloadIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35091,7 +35094,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'document':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "DocumentIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35103,7 +35106,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'fly':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "FlyIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35115,7 +35118,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'bell':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "BellIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35127,7 +35130,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'maintenance':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "MaintenanceIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35139,7 +35142,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'exit':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "ExitIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35151,7 +35154,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'eye':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "EyeIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35163,7 +35166,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'search':
-      return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
         className: "SearchIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35288,7 +35291,7 @@ const ErrorMessage = styled.div`
   margin-top: 5px;
   max-width: ${props => props.width || '300px'};
 `;
-const IconWrapper$2 = styled.div`
+const IconWrapper$1 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -35383,7 +35386,7 @@ const Input$2 = _ref => {
   const getPasswordIcon = () => {
     if (!password) return '';
     if (showPassword) {
-      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+      return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
         className: "passwordEyeSlash",
         disabled: disabled,
         onClick: toggleShowPassword
@@ -35600,7 +35603,7 @@ ToggleSwitch.propTypes = {
 const TableWrapper$1 = styled.div`
     width: ${props => props.width};
     height: ${props => props.height};
-    padding: 20px;
+    padding: ${props => props.padding};
     background-color: #fff;
     box-sizing: border-box;
     position: relative;
@@ -35635,6 +35638,7 @@ const ContainerTable = props => {
     columnsWidths = [430, 105, 210, 175, 148, 185, 104, 104, 140, 50, 50],
     standardCellSkeletonHeight = 22,
     isLoading = true,
+    padding = '20px',
     children
   } = props;
   const TableWrapperRef = useRef(null);
@@ -35667,7 +35671,8 @@ const ContainerTable = props => {
   return /*#__PURE__*/React$1.createElement(TableWrapper$1, {
     ref: TableWrapperRef,
     width: width,
-    height: height
+    height: height,
+    padding: padding
   }, isLoading ? /*#__PURE__*/React$1.createElement(SkeletonTheme, {
     baseColor: "#EAEAEA",
     highlightColor: "#F5F5F5"
@@ -36282,7 +36287,7 @@ const scrollableStyles$1 = `
 const TableWrapper = styled.div`
     width: ${props => props.width};
     height: ${props => props.height};
-    background-color: #fff;
+    background-color: ${props => props.backgroundColor};
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 `;
@@ -38322,85 +38327,6 @@ const StatusCellCircle = styled.div`
     border: 1px solid white;
     background-color: ${props => props.backgroundColor};
 `;
-
-// CommentModal.styles.js
-const ModalOverlay$1 = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-`;
-const ModalContent = styled.div`
-  background: white;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 500px;
-  max-height: 400px;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  animation: slideUp 0.3s ease-out;
-
-  @keyframes slideUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px) scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-`;
-const ModalHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 24px;
-  border-bottom: 1px solid #D9D9D9;
-  flex-shrink: 0;
-`;
-const ModalTitle$1 = styled.h5`
-  font-family: "Poppins", sans-serif;
-  font-size: 18px;
-  font-weight: 600;
-  color: #212121;
-  margin: 0;
-`;
-const CloseButton$1 = styled.button`
-  background: none;
-  border: none;
-  padding: 8px;
-  cursor: pointer;
-  color: #6b7280;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    background-color: #f3f4f6;
-    color: #374151;
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-`;
-const ModalBody = styled.div`
-  padding: 20px 24px 24px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`;
 const TextareaWrapper = styled.div`
   position: relative;
   display: flex;
@@ -38484,121 +38410,141 @@ const CharacterCount = styled.div`
   text-align: right;
   transition: color 0.2s ease;
 `;
-const ModalBottom = styled.div`
-  padding: 16px 24px;
-  border-top: 1px solid #D9D9D9;
+
+// 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;
+`;
+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);
+`;
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  color: #6b7280;
+  border-radius: 6px;
+  transition: all 0.2s ease;
   display: flex;
-  gap: 16px;
-  justify-content: flex-end;
   align-items: center;
-`;
+  justify-content: center;
 
-const CommentModal = props => {
-  const {
-    isOpen,
-    onClose,
-    onSave,
-    maxLength = 150,
-    color = "#066768",
-    saveButtonHoverColor = "#388586",
-    initialValue = ''
-  } = props;
-  const [commentText, setCommentText] = useState('');
-  const [isFocused, setIsFocused] = useState(false);
-  const [hasUserInteracted, setHasUserInteracted] = useState(false); // Track if user has started typing
-  const [hasInitialValue, setHasInitialValue] = useState(false); // Track if there was initial text
+  &:hover {
+    background-color: #f3f4f6;
+    color: #374151;
+  }
 
-  // Update comment text when modal opens with initial value
-  useEffect(() => {
-    if (isOpen) {
-      const initialText = initialValue || '';
-      setCommentText(initialText);
-      setHasInitialValue(Boolean(initialText.trim())); // Check if there's actual content
-      setHasUserInteracted(false); // Reset interaction state
-    }
-  }, [isOpen, initialValue]);
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  flex-shrink: 0;
+`;
+const ModalTitle = styled.h5`
+  font-family: "Poppins", sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: #212121;
+  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'};
+`;
+const ButtonContainer$1 = styled.div`
+    display: flex;
+    gap: 16px;
+    justify-content: flex-end;
+    padding: 16px 24px;
+`;
+
+// MessageBox.jsx
+const MessageBox = _ref => {
+  let {
+    isOpen = true,
+    isDisabled = false,
+    onClose = () => {},
+    onConfirm = () => {},
+    title = "Title",
+    primaryText = "Confirm",
+    secondaryText = "Cancel",
+    width = "400px",
+    height = "auto",
+    color = "#F00021",
+    hoverColor = "#ff7875",
+    secondaryColor = "#ffffff",
+    seperateSectionBorder = false,
+    children
+  } = _ref;
   if (!isOpen) return null;
-  const handleTextChange = e => {
-    const text = e.target.value;
-    if (text.length <= maxLength) {
-      setCommentText(text);
-      if (!hasUserInteracted) {
-        setHasUserInteracted(true); // Mark that user has started interacting
-      }
-    }
-  };
   const handleOverlayClick = e => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
-  const handleSave = () => {
-    if (onSave) {
-      onSave(commentText);
-    }
-    // Don't clear the text here - let the parent handle closing
-  };
-  const handleClose = () => {
-    setCommentText('');
-    setHasUserInteracted(false);
-    setHasInitialValue(false);
-    onClose();
-  };
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-
-  // Determine if save button should be enabled
-  const isSaveEnabled = hasUserInteracted && (commentText.length > 0 || hasInitialValue);
-  return /*#__PURE__*/React$1.createElement(ModalOverlay$1, {
+  return /*#__PURE__*/React$1.createElement(ModalOverlay, {
     onClick: handleOverlayClick
-  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(ModalHeader, null, /*#__PURE__*/React$1.createElement(ModalTitle$1, null, "Add Comment"), /*#__PURE__*/React$1.createElement(CloseButton$1, {
-    onClick: handleClose
-  }, /*#__PURE__*/React$1.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M18 6L6 18M6 6l12 12",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })))), /*#__PURE__*/React$1.createElement(ModalBody, null, /*#__PURE__*/React$1.createElement(TextareaWrapper, null, (commentText.length > 0 || isFocused) && /*#__PURE__*/React$1.createElement(TextareaLabel, {
-    color: color
-  }, "Comment"), /*#__PURE__*/React$1.createElement(CommentTextarea, {
-    value: commentText,
-    onChange: handleTextChange,
-    placeholder: "Type a Comment...",
-    maxLength: maxLength,
-    color: color,
-    $hasValue: commentText.length > 0,
-    onBlur: handleBlur,
-    onFocus: handleFocus
-  }), /*#__PURE__*/React$1.createElement(CharacterCount, null, commentText.length, "/", maxLength))), /*#__PURE__*/React$1.createElement(ModalBottom, null, /*#__PURE__*/React$1.createElement(Button$1, {
-    text: "Cancel",
-    type: "secondary",
+  }, /*#__PURE__*/React$1.createElement(ModalContainer, {
+    $width: width,
+    $height: height
+  }, /*#__PURE__*/React$1.createElement(ModalHeader, null, /*#__PURE__*/React$1.createElement(ModalTitle, null, title), /*#__PURE__*/React$1.createElement(CloseButton, {
+    onClick: onClose
+  }, /*#__PURE__*/React$1.createElement(CloseXIcon, null))), /*#__PURE__*/React$1.createElement(ModalContent, {
+    showBorders: seperateSectionBorder
+  }, children), /*#__PURE__*/React$1.createElement(ButtonContainer$1, null, /*#__PURE__*/React$1.createElement(Button$1, {
+    text: secondaryText,
     size: "medium",
-    borderColor: "#D3D3D3",
-    hoverTextColor: "#212121",
-    hoverBackgroundColor: "#E6F0F0",
-    hoverBorderColor: "#D3D3D3",
-    onClick: handleClose
+    borderColor: "#B1B1B1",
+    hoverTextColor: color,
+    hoverBackgroundColor: secondaryColor,
+    hoverBorderColor: color,
+    textColor: "#212121",
+    backgroundColor: "white",
+    disabledTextColor: "",
+    disabledBackgroundColor: "",
+    disabledBorderColor: "",
+    width: "auto",
+    minWidth: "60px",
+    onClick: onClose
   }), /*#__PURE__*/React$1.createElement(Button$1, {
-    text: "Save",
+    text: primaryText,
     size: "medium",
-    disabled: !isSaveEnabled,
-    hoverTextColor: "#ffffff",
-    disabledTextColor: "#ffffff",
-    borderColor: color,
     backgroundColor: color,
-    hoverBorderColor: saveButtonHoverColor,
-    hoverBackgroundColor: saveButtonHoverColor,
-    onClick: handleSave
+    textColor: "white",
+    borderColor: color,
+    hoverTextColor: "white",
+    hoverBackgroundColor: hoverColor,
+    hoverBorderColor: hoverColor,
+    disabled: isDisabled,
+    disabledTextColor: "white",
+    disabledBackgroundColor: "#E9E9E9",
+    disabledBorderColor: "#E9E9E9",
+    width: "auto",
+    minWidth: "60px",
+    onClick: onConfirm
   }))));
 };
 
@@ -38690,9 +38636,11 @@ const TableBody = ({
   onRowClick,
   onSendClick,
   buttonColor,
-  onDeleteClick,
+  buttonHoverColor,
   selectedColor,
-  resetFocus = false,
+  onDeleteClick,
+  resetFocusIndex,
+  changeFocusIndex,
   onFocusChange,
   indexToShimmer = 0,
   statuses = [{
@@ -38709,31 +38657,37 @@ const TableBody = ({
     palette: ['#EBA6AF', '#8B1538']
   }],
   onCommentSave = () => {},
+  commentTextLimit = 150,
   ref = null
 }) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
   const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
-  const [currentCommentRow, setCurrentCommentRow] = useState(null); // Track which row is being edited
-
-  // Expose methods to parent components via ref (if ref is provided)
-  // useImperativeHandle(ref, () => ({
-  //     clearFocus: () => setFocusedRowIndex(null),
-  //     getFocusedRowIndex: () => focusedRowIndex
-  // }), [focusedRowIndex]);
+  const [currentCommentRow, setCurrentCommentRow] = useState(null);
 
+  // TextArea logic states
+  const [commentText, setCommentText] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const [hasUserInteracted, setHasUserInteracted] = useState(false);
+  const [hasInitialValue, setHasInitialValue] = useState(false);
   useEffect(() => {
-    if (resetFocus) {
+    if (isCommentModalOpen && currentCommentRow !== null) {
+      const initialText = data[currentCommentRow]?.Comments || '';
+      setCommentText(initialText);
+      setHasInitialValue(Boolean(initialText.trim()));
+      setHasUserInteracted(false);
+    }
+  }, [isCommentModalOpen, currentCommentRow, data]);
+  useEffect(() => {
+    if (resetFocusIndex) {
       setFocusedRowIndex(null);
     }
-  }, [resetFocus]);
-
-  // Notify parent of focus changes
-  // useEffect(() => {
-  //     if (onFocusChange) {
-  //         onFocusChange(focusedRowIndex);
-  //     }
-  // }, [focusedRowIndex, onFocusChange]);
+  }, [resetFocusIndex]);
+  useEffect(() => {
+    if (changeFocusIndex) {
+      setFocusedRowIndex(changeFocusIndex);
+    }
+  }, [changeFocusIndex]);
 
   // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
@@ -38743,21 +38697,43 @@ const TableBody = ({
     }
   };
 
+  // TextArea handlers
+  const handleTextChange = e => {
+    const text = e.target.value;
+    if (text.length <= commentTextLimit) {
+      setCommentText(text);
+      if (!hasUserInteracted) {
+        setHasUserInteracted(true);
+      }
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
   // Handle comment save
-  const handleCommentSave = commentText => {
+  const handleCommentSave = () => {
     if (currentCommentRow !== null) {
       onCommentSave(currentCommentRow, commentText);
     }
-    setCurrentCommentRow(null);
-    setIsCommentModalOpen(false);
+    handleCommentModalClose();
   };
 
   // Handle comment modal close
   const handleCommentModalClose = () => {
+    setCommentText('');
+    setHasUserInteracted(false);
+    setHasInitialValue(false);
     setCurrentCommentRow(null);
     setIsCommentModalOpen(false);
   };
 
+  // Determine if save button should be enabled
+  const isSaveEnabled = hasUserInteracted && (commentText.length > 0 || hasInitialValue);
+
   // Function to calculate tooltip height based on text length
   const calculateTooltipOffset = (text, isRegularCell = false) => {
     if (!text) return {
@@ -38902,11 +38878,11 @@ const TableBody = ({
           backgroundColor: palette0
         }), /*#__PURE__*/React$1.createElement("span", null, value));
       case 'comments':
-        const commentText = value || '';
-        const hasComments = commentText.trim().length > 0;
+        const commentTextValue = value || '';
+        const hasComments = commentTextValue.trim().length > 0;
 
         // Truncate tooltip text if longer than 150 characters
-        const commentTooltipText = commentText.length > 150 ? commentText.substring(0, 147) + '...' : commentText;
+        const commentTooltipText = commentTextValue.length > 150 ? commentTextValue.substring(0, 147) + '...' : commentTextValue;
         return /*#__PURE__*/React$1.createElement(CommentIconWrapper, {
           $buttonColor: buttonColor,
           ref: el => {
@@ -38942,7 +38918,7 @@ const TableBody = ({
           }
         }, /*#__PURE__*/React$1.createElement(CommentIcon, {
           showCircle: hasComments,
-          circleColor: "#066768"
+          circleColor: buttonColor
         }));
       case 'trash':
         // Only show trash icon when row is hovered
@@ -38989,7 +38965,7 @@ const TableBody = ({
                 el.style.setProperty('--tooltip-left', `${rect.left}px`);
                 el.style.setProperty('--tooltip-width', `${rect.width}px`);
                 el.style.setProperty('--tooltip-offset', `${offset}px`);
-                el.style.setProperty('--tooltip-height', `${height}px`);
+                el.style.setProperty('--tooltip-height', `${offset}px`);
                 el.setAttribute('data-tooltip', trashTooltipText);
               }
             }
@@ -39041,12 +39017,31 @@ const TableBody = ({
       $minWidth: column.minWidth,
       $maxWidth: column.maxWidth
     }, formattedValue);
-  })))), /*#__PURE__*/React$1.createElement(CommentModal, {
+  })))), /*#__PURE__*/React$1.createElement(MessageBox, {
+    title: "Add Comment",
     isOpen: isCommentModalOpen,
     onClose: handleCommentModalClose,
-    onSave: handleCommentSave,
-    initialValue: currentCommentRow !== null ? data[currentCommentRow]?.Comments || '' : ''
-  }));
+    onConfirm: handleCommentSave,
+    isDisabled: !isSaveEnabled,
+    seperateSectionBorder: true,
+    color: buttonColor,
+    hoverColor: buttonHoverColor,
+    secondaryColor: "#E6F0F0",
+    primaryText: "Save",
+    secondaryText: "Cancel",
+    width: "550px"
+  }, /*#__PURE__*/React$1.createElement(TextareaWrapper, null, (commentText.length > 0 || isFocused) && /*#__PURE__*/React$1.createElement(TextareaLabel, {
+    color: buttonColor
+  }, "Comment"), /*#__PURE__*/React$1.createElement(CommentTextarea, {
+    value: commentText,
+    onChange: handleTextChange,
+    placeholder: "Type a Comment...",
+    maxLength: commentTextLimit,
+    color: buttonColor,
+    $hasValue: commentText.length > 0,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  }), /*#__PURE__*/React$1.createElement(CharacterCount, null, commentText.length, "/", commentTextLimit))));
 };
 TableBody.propTypes = {
   columns: PropTypes.array.isRequired,
@@ -39059,6 +39054,7 @@ TableBody.propTypes = {
   onFocusChange: PropTypes.func,
   indexToShimmer: PropTypes.number,
   onCommentSave: PropTypes.func,
+  commentTextLimit: PropTypes.number,
   ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
@@ -42235,6 +42231,7 @@ const Table = props => {
     width = '100%',
     height = 'auto',
     tableTitle = 'All Events',
+    tableBackground = '#FFFFFF',
     data = [],
     counter = 0,
     hideRowsCounter = false,
@@ -42264,8 +42261,8 @@ const Table = props => {
     noDataInSearchTitle = "No Results Found",
     noDataInSearchMessage = "Try to refine your query and search again",
     indexToShimmer = -1,
-    // New props for focus management
-    resetTableFocus = false,
+    resetFocusIndex,
+    changeFocusIndex,
     onTableFocusChange = () => {},
     clearFocusOnOutsideClick = true,
     // NEW: Props for edit mode focus management
@@ -42351,7 +42348,8 @@ const Table = props => {
 
   return /*#__PURE__*/React$1.createElement(TableWrapper, {
     width: width,
-    height: height
+    height: height,
+    backgroundColor: tableBackground
   }, /*#__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), !hideRowsCounter && /*#__PURE__*/React$1.createElement(SubTitle, null, data.length === 0 ? 'No Events' : `${counter} Events`)), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
@@ -42385,7 +42383,9 @@ const Table = props => {
     onDeleteClick: onDeleteClick,
     onCommentSave: handleCommentSave,
     buttonColor: buttonColor,
-    resetFocus: resetTableFocus,
+    buttonHoverColor: buttonHoverColor,
+    resetFocusIndex: resetFocusIndex,
+    changeFocusIndex: changeFocusIndex,
     onFocusChange: handleTableFocusChange
   })), 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, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__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",
@@ -42536,7 +42536,7 @@ const LineContainer = styled.div`
   align-items: center;
   width: 100%;
 `;
-const ButtonContainer$1 = styled.div`
+const ButtonContainer = styled.div`
   .ButtonContainer {
     label {
       white-space: nowrap;
@@ -52062,7 +52062,7 @@ const ItemManagerPanel = _ref => {
       backgroundColor: backgroundColor
     }, /*#__PURE__*/React$1.createElement(VendorHeader$2, {
       ref: headerRef
-    }, /*#__PURE__*/React$1.createElement(Container$1, null, /*#__PURE__*/React$1.createElement(TitleContainer, null, /*#__PURE__*/React$1.createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React$1.createElement(SubtitleContainer, null, /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React$1.createElement("span", null, "\xB7"), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0), " ", "Packages"))), editMode && /*#__PURE__*/React$1.createElement(ButtonContainer$1, null, /*#__PURE__*/React$1.createElement(CustomTooltip, {
+    }, /*#__PURE__*/React$1.createElement(Container$1, null, /*#__PURE__*/React$1.createElement(TitleContainer, null, /*#__PURE__*/React$1.createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React$1.createElement(SubtitleContainer, null, /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React$1.createElement("span", null, "\xB7"), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0), " ", "Packages"))), editMode && /*#__PURE__*/React$1.createElement(ButtonContainer, null, /*#__PURE__*/React$1.createElement(CustomTooltip, {
       hideTooltip: !disabledSendForms,
       content: buttonTooltipText,
       topFactor: 2,
@@ -52859,184 +52859,6 @@ const OverlayDropdown = _ref => {
   }));
 };
 
-// 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;
-`;
-const ModalContainer = styled.div`
-    background-color: white;
-    border-radius: 12px;
-    padding: 16px 24px 24px 24px;
-    width: ${props => props.$width || '400px'};
-    height: ${props => props.$height || 'auto'};
-    max-width: 90vw;
-    position: relative;
-    font-family: 'Poppins', sans-serif;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-`;
-const CloseButton = styled.button`
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #666;
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: 'Poppins', sans-serif;
-    
-    &:hover {
-        color: #333;
-    }
-`;
-const ModalTitle = styled.h2`
-    font-family: 'Poppins', sans-serif;
-    font-size: 18px;
-    font-weight: 700;
-    color: #212121;
-    margin: 0 0 16px 0;
-    padding-right: 32px;
-`;
-const MessageContainer = styled.div`
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    //margin-bottom: 5px;
-`;
-const IconWrapper$1 = styled.div`    
-    margin-top: 1px;
-`;
-const MessageTitle = styled.h3`
-    font-family: 'Poppins', sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    color: #212121;
-    margin: 0 0 8px 0;
-`;
-const MessageMessage = styled.p`
-    font-family: 'Poppins', sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    color: #212121;
-    margin: 0;
-    line-height: 1.5;
-`;
-const ButtonContainer = styled.div`
-    display: flex;
-    gap: 12px;
-    justify-content: flex-end;
-    margin-top: 24px;
-`;
-
-// eslint-disable-next-line react/prop-types
-const ExclamationMarkIcon = _ref => {
-  let {
-    color = '#FF3949',
-    width = '16',
-    height = '16'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M8.01562 1.5C5.67188 1.5 3.54688 2.75 2.35938 4.75C1.20312 6.78125 1.20312 9.25 2.35938 11.25C3.54688 13.2812 5.67188 14.5 8.01562 14.5C10.3281 14.5 12.4531 13.2812 13.6406 11.25C14.7969 9.25 14.7969 6.78125 13.6406 4.75C12.4531 2.75 10.3281 1.5 8.01562 1.5ZM8.01562 16C5.14062 16 2.51562 14.5 1.07812 12C-0.359375 9.53125 -0.359375 6.5 1.07812 4C2.51562 1.53125 5.14062 0 8.01562 0C10.8594 0 13.4844 1.53125 14.9219 4C16.3594 6.5 16.3594 9.53125 14.9219 12C13.4844 14.5 10.8594 16 8.01562 16ZM8.01562 4C8.42188 4 8.76562 4.34375 8.76562 4.75V8.25C8.76562 8.6875 8.42188 9 8.01562 9C7.57812 9 7.26562 8.6875 7.26562 8.25V4.75C7.26562 4.34375 7.57812 4 8.01562 4ZM9.01562 11C9.01562 11.5625 8.54688 12 8.01562 12C7.45312 12 7.01562 11.5625 7.01562 11C7.01562 10.4688 7.45312 10 8.01562 10C8.54688 10 9.01562 10.4688 9.01562 11Z",
-    fill: color
-  }));
-};
-
-// MessageBox.jsx
-const MessageBox = _ref => {
-  let {
-    isOpen = true,
-    onClose = () => {},
-    onConfirm = () => {},
-    title = "Title",
-    messageTitle = "",
-    messageText = "",
-    cancelText = "Cancel",
-    confirmText = "Confirm",
-    width = "400px",
-    height = "auto"
-  } = _ref;
-  if (!isOpen) return null;
-  const handleOverlayClick = e => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  // Function to calculate button width based on text length
-  const calculateButtonWidth = text => {
-    // Approximate character width for Poppins 14px font
-    const avgCharWidth = 8; // pixels per character
-    const padding = 24; // left + right padding
-    const minWidth = 60; // minimum button width
-
-    const calculatedWidth = text.length * avgCharWidth + padding;
-    return Math.max(calculatedWidth, minWidth);
-  };
-  return /*#__PURE__*/React$1.createElement(ModalOverlay, {
-    onClick: handleOverlayClick
-  }, /*#__PURE__*/React$1.createElement(ModalContainer, {
-    $width: width,
-    $height: height
-  }, /*#__PURE__*/React$1.createElement(CloseButton, {
-    onClick: onClose
-  }, /*#__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$1, null, /*#__PURE__*/React$1.createElement(ExclamationMarkIcon, {
-    color: "#F00021",
-    width: "16",
-    height: "16"
-  })), /*#__PURE__*/React$1.createElement(MessageTitle, null, messageTitle)), /*#__PURE__*/React$1.createElement(MessageContainer, null, /*#__PURE__*/React$1.createElement(MessageMessage, null, messageText)), /*#__PURE__*/React$1.createElement(ButtonContainer, null, /*#__PURE__*/React$1.createElement(Button$1, {
-    text: cancelText,
-    borderRadius: "12px",
-    textColor: "#212121",
-    borderColor: "#B1B1B1",
-    backgroundColor: "#FFF",
-    hoverTextColor: "#212121",
-    hoverBackgroundColor: "#FFF",
-    hoverBorderColor: "#F00021",
-    disabledTextColor: "",
-    disabledBackgroundColor: "",
-    disabledBorderColor: "",
-    width: calculateButtonWidth(cancelText),
-    height: "45px",
-    onClick: onClose
-  }), /*#__PURE__*/React$1.createElement(Button$1, {
-    text: confirmText,
-    borderRadius: "12px",
-    backgroundColor: "#F00021",
-    textColor: "#FFF",
-    borderColor: "#F00021",
-    hoverTextColor: "#FFF",
-    hoverBackgroundColor: "#ff7875",
-    hoverBorderColor: "#ff7875",
-    width: calculateButtonWidth(confirmText),
-    height: "45px",
-    onClick: onConfirm
-  }))));
-};
-
 // ToasterMessageBox.styles.js
 
 // Helper function to convert hex to rgba