sag_components 2.0.0-beta144 → 2.0.0-beta146

package/dist/index.js

@@ -33,6 +33,7 @@ const ButtonContainer$3 = styled__default["default"].div`
   align-content: center;
   width: ${props => props.width};
   height: ${props => props.height};
+  min-width: ${props => props.minWidth};
 `;
 const ButtonItem = styled__default["default"].div`
   display: flex;
@@ -72,7 +73,7 @@ const Label$b = styled__default["default"].label`
   pointer-events: none;
   user-select: none;
 `;
-const IconWrapper$6 = styled__default["default"].div`
+const IconWrapper$5 = styled__default["default"].div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -498,6 +499,7 @@ const Button$1 = props => {
     size = "small",
     height = "",
     width = "",
+    minWidth = "unset",
     disabled = false,
     textColor = "",
     backgroundColor = "",
@@ -546,7 +548,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__default["default"].createElement(IconWrapper$6, null, /*#__PURE__*/React__default["default"].createElement(IconComponent, iconProps));
+    return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, null, /*#__PURE__*/React__default["default"].createElement(IconComponent, iconProps));
   };
   const commonProps = {
     width: width || null,
@@ -567,7 +569,8 @@ const Button$1 = props => {
   return /*#__PURE__*/React__default["default"].createElement(ButtonContainer$3, {
     className: "ButtonContainer",
     width: commonProps.width,
-    height: commonProps.height
+    height: commonProps.height,
+    minWidth: minWidth
   }, isSubmitButton ? /*#__PURE__*/React__default["default"].createElement(InputCommit, _extends$1({
     className: clicked ? "InputCommit-clicked" : "InputCommit",
     value: text,
@@ -3024,7 +3027,7 @@ const Label$a = styled__default["default"].label`
   user-select: none;   
   pointer-events: none;
 `;
-const IconWrapper$5 = styled__default["default"].div`
+const IconWrapper$4 = styled__default["default"].div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3148,7 +3151,7 @@ const LinkButton = _ref => {
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "FilterIcon"
         }, /*#__PURE__*/React__default["default"].createElement(FilterIcon$1, {
           height: iconHeight,
@@ -3156,7 +3159,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'plus':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "PlusIcon"
         }, /*#__PURE__*/React__default["default"].createElement(PlusIcon, {
           height: "16",
@@ -3164,7 +3167,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'options':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "OptionsIcon"
         }, /*#__PURE__*/React__default["default"].createElement(OptionsIcon, {
           height: iconHeight,
@@ -3172,7 +3175,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "DownloadIcon"
         }, /*#__PURE__*/React__default["default"].createElement(DownloadIcon, {
           height: iconHeight,
@@ -3180,7 +3183,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "DocumentIcon"
         }, /*#__PURE__*/React__default["default"].createElement(DocumentIcon, {
           height: iconHeight,
@@ -3188,7 +3191,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "FlyIcon"
         }, /*#__PURE__*/React__default["default"].createElement(FlyIcon, {
           height: iconHeight,
@@ -3196,7 +3199,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "BellIcon"
         }, /*#__PURE__*/React__default["default"].createElement(BellIcon, {
           height: iconHeight,
@@ -3204,7 +3207,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "MaintenanceIcon"
         }, /*#__PURE__*/React__default["default"].createElement(MaintenanceIcon, {
           height: iconHeight,
@@ -3212,7 +3215,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "ExitIcon"
         }, /*#__PURE__*/React__default["default"].createElement(ExitIcon, {
           height: iconHeight,
@@ -3220,7 +3223,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "EyeIcon"
         }, /*#__PURE__*/React__default["default"].createElement(EyeIcon, {
           height: iconHeight,
@@ -3228,7 +3231,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowdown':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "ArrowDownIcon"
         }, /*#__PURE__*/React__default["default"].createElement(MenuItemOpenIcon, {
           height: iconHeight,
@@ -3236,7 +3239,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowright':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "ArrowRightIcon"
         }, /*#__PURE__*/React__default["default"].createElement(MenuItemRightIcon, {
           height: iconHeight,
@@ -3244,7 +3247,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'select':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "SelectRightIcon"
         }, /*#__PURE__*/React__default["default"].createElement(ArrowSelectIcon, {
           height: "16px",
@@ -3252,7 +3255,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'info':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$5, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
           className: "InfoIcon"
         }, /*#__PURE__*/React__default["default"].createElement(InfoIcon, {
           height: iconHeight,
@@ -3542,7 +3545,7 @@ const TextFieldContainer = styled__default["default"].div`
     position: relative;
     width: ${props => props.width};
 `;
-const IconWrapper$4 = styled__default["default"].div`
+const IconWrapper$3 = styled__default["default"].div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -3586,7 +3589,7 @@ const SearchInput = props => {
   return /*#__PURE__*/React__default["default"].createElement(TextFieldContainer, {
     className: className,
     width: width
-  }, /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
+  }, /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
     position: position
   }, /*#__PURE__*/React__default["default"].createElement(SearchIcon, {
     color: iconColor
@@ -10327,23 +10330,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -10785,22 +10789,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [isOpen, setIsOpen] = React$1.useState(false);
   const [value, setValue] = React$1.useState('');
@@ -13084,11 +13089,11 @@ const ModalHeader$2 = styled__default["default"].div`
     justify-content: space-between;
     margin-bottom: 32px;
 `;
-const ModalBody$2 = styled__default["default"].div`
+const ModalBody$1 = styled__default["default"].div`
     ${scrollableStyles$a}
     max-height: 80vh;
 `;
-const ModalTitle$3 = styled__default["default"].h5`
+const ModalTitle$2 = styled__default["default"].h5`
     font-family: 'Poppins', sans-serif;
     font-size: 32px;
     font-weight: 500;
@@ -13120,12 +13125,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)));
 };
@@ -23911,21 +23916,22 @@ const DeleteIcon = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -24322,23 +24328,24 @@ const IconContainer$2 = styled__default["default"].div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -27215,7 +27222,7 @@ const scrollableStyles$6 = `
   }
 `;
 const MainContainer$1 = styled__default["default"].div``;
-const ModalOverlay$2 = styled__default["default"].div`
+const ModalOverlay$1 = styled__default["default"].div`
   position: fixed;
   z-index: 100;
   top: 0;
@@ -27457,7 +27464,7 @@ const PopupCharts = props => {
   }, displayChart(item)));
   return /*#__PURE__*/React__default["default"].createElement(MainContainer$1, {
     id: "MainContainer"
-  }, IsPopupChartsOpen && /*#__PURE__*/React__default["default"].createElement(ModalOverlay$2, {
+  }, IsPopupChartsOpen && /*#__PURE__*/React__default["default"].createElement(ModalOverlay$1, {
     id: "ModalOverlay",
     className: "modal-overlay"
   }, /*#__PURE__*/React__default["default"].createElement(ModalContent$2, {
@@ -33839,7 +33846,7 @@ const Header$3 = styled__default["default"].div`
     align-items: flex-start;
   }
 `;
-const CloseButton$2 = styled__default["default"].button`
+const CloseButton$1 = styled__default["default"].button`
   position: absolute;
   top: -10px;
   right: 0px;
@@ -34040,7 +34047,7 @@ const InsightsCarousel = _ref => {
     $titleColor: titleColor
   }, /*#__PURE__*/React__default["default"].cloneElement(icon, {
     fill: iconColor
-  }), title), /*#__PURE__*/React__default["default"].createElement(CloseButton$2, {
+  }), title), /*#__PURE__*/React__default["default"].createElement(CloseButton$1, {
     onClick: () => onClose?.({
       label: "closeCarousel"
     }),
@@ -34365,12 +34372,12 @@ const ModalButtons = styled__default["default"].div`
   display: flex;
   gap: 10px;
 `;
-const ModalTitle$2 = styled__default["default"].h3`
+const ModalTitle$1 = styled__default["default"].h3`
   margin: 0;
   font-size: 24px;
   font-weight: 500;
 `;
-const ModalBody$1 = styled__default["default"].div`
+const ModalBody = styled__default["default"].div`
   width: 100%;
   height: 100%;
 `;
@@ -34423,7 +34430,7 @@ const ModalWithOverlay = props => {
     }
   }, /*#__PURE__*/React__default["default"].createElement(ModalHeader$1, {
     className: "modal-header"
-  }, /*#__PURE__*/React__default["default"].createElement(ModalTitle$2, null, title), /*#__PURE__*/React__default["default"].createElement(ModalButtons, {
+  }, /*#__PURE__*/React__default["default"].createElement(ModalTitle$1, null, title), /*#__PURE__*/React__default["default"].createElement(ModalButtons, {
     className: "modal-buttons"
   }, showCancelButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
     size: "medium",
@@ -34470,7 +34477,7 @@ const ModalWithOverlay = props => {
     backgroundColor: okButtonColor,
     hoverBorderColor: okButtonHoverBackgroundColor,
     hoverBackgroundColor: okButtonHoverBackgroundColor
-  })))), /*#__PURE__*/React__default["default"].createElement(ModalBody$1, {
+  })))), /*#__PURE__*/React__default["default"].createElement(ModalBody, {
     className: "modal-body"
   }, children)));
 };
@@ -35045,7 +35052,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__default["default"].div`
+const IconWrapper$2 = styled__default["default"].div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -35061,7 +35068,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
   const newColor = disabled ? '#D0D0D0' : color || '#212121';
   switch (icon.toLowerCase()) {
     case 'filter':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "FilterIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35073,7 +35080,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'options':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "OptionsIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35085,7 +35092,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'download':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "DownloadIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35097,7 +35104,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'document':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "DocumentIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35109,7 +35116,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'fly':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "FlyIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35121,7 +35128,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'bell':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "BellIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35133,7 +35140,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'maintenance':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "MaintenanceIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35145,7 +35152,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'exit':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "ExitIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35157,7 +35164,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'eye':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "EyeIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35169,7 +35176,7 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         onClick: callBackOnClick
       }));
     case 'search':
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
         className: "SearchIcon",
         pointer: pointer,
         disabled: disabled,
@@ -35294,7 +35301,7 @@ const ErrorMessage = styled__default["default"].div`
   margin-top: 5px;
   max-width: ${props => props.width || '300px'};
 `;
-const IconWrapper$2 = styled__default["default"].div`
+const IconWrapper$1 = styled__default["default"].div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -35389,7 +35396,7 @@ const Input$2 = _ref => {
   const getPasswordIcon = () => {
     if (!password) return '';
     if (showPassword) {
-      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+      return /*#__PURE__*/React__default["default"].createElement(IconWrapper$1, {
         className: "passwordEyeSlash",
         disabled: disabled,
         onClick: toggleShowPassword
@@ -35570,9 +35577,9 @@ const ToggleSlider = styled__default["default"].span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -35606,7 +35613,7 @@ ToggleSwitch.propTypes = {
 const TableWrapper$1 = styled__default["default"].div`
     width: ${props => props.width};
     height: ${props => props.height};
-    padding: 20px;
+    padding: ${props => props.padding};
     background-color: #fff;
     box-sizing: border-box;
     position: relative;
@@ -35641,6 +35648,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 = React$1.useRef(null);
@@ -35673,7 +35681,8 @@ const ContainerTable = props => {
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper$1, {
     ref: TableWrapperRef,
     width: width,
-    height: height
+    height: height,
+    padding: padding
   }, isLoading ? /*#__PURE__*/React__default["default"].createElement(Skeleton.SkeletonTheme, {
     baseColor: "#EAEAEA",
     highlightColor: "#F5F5F5"
@@ -36288,7 +36297,7 @@ const scrollableStyles$1 = `
 const TableWrapper = styled__default["default"].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;
 `;
@@ -38313,84 +38322,20 @@ const DisabledTrashIconWrapper = styled__default["default"].div`
     color: #d9d9d9;
   }
 `;
-
-// CommentModal.styles.js
-const ModalOverlay$1 = styled__default["default"].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__default["default"].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__default["default"].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__default["default"].h5`
-  font-family: "Poppins", sans-serif;
-  font-size: 18px;
-  font-weight: 600;
-  color: #212121;
-  margin: 0;
-`;
-const CloseButton$1 = styled__default["default"].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 StatusCell = styled__default["default"].div`
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: ${props => props.color || "#000"};
 `;
-const ModalBody = styled__default["default"].div`
-  padding: 20px 24px 24px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+const StatusCellCircle = styled__default["default"].div`
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: 1px solid white;
+    background-color: ${props => props.backgroundColor};
 `;
 const TextareaWrapper = styled__default["default"].div`
   position: relative;
@@ -38475,121 +38420,141 @@ const CharacterCount = styled__default["default"].div`
   text-align: right;
   transition: color 0.2s ease;
 `;
-const ModalBottom = styled__default["default"].div`
-  padding: 16px 24px;
-  border-top: 1px solid #D9D9D9;
+
+// MessageBox.styles.js
+const ModalOverlay = styled__default["default"].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__default["default"].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__default["default"].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] = React$1.useState('');
-  const [isFocused, setIsFocused] = React$1.useState(false);
-  const [hasUserInteracted, setHasUserInteracted] = React$1.useState(false); // Track if user has started typing
-  const [hasInitialValue, setHasInitialValue] = React$1.useState(false); // Track if there was initial text
+  &:hover {
+    background-color: #f3f4f6;
+    color: #374151;
+  }
 
-  // Update comment text when modal opens with initial value
-  React$1.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__default["default"].div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  flex-shrink: 0;
+`;
+const ModalTitle = styled__default["default"].h5`
+  font-family: "Poppins", sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: #212121;
+  margin: 0;
+`;
+const ModalContent = styled__default["default"].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__default["default"].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__default["default"].createElement(ModalOverlay$1, {
+  return /*#__PURE__*/React__default["default"].createElement(ModalOverlay, {
     onClick: handleOverlayClick
-  }, /*#__PURE__*/React__default["default"].createElement(ModalContent, null, /*#__PURE__*/React__default["default"].createElement(ModalHeader, null, /*#__PURE__*/React__default["default"].createElement(ModalTitle$1, null, "Add Comment"), /*#__PURE__*/React__default["default"].createElement(CloseButton$1, {
-    onClick: handleClose
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M18 6L6 18M6 6l12 12",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })))), /*#__PURE__*/React__default["default"].createElement(ModalBody, null, /*#__PURE__*/React__default["default"].createElement(TextareaWrapper, null, (commentText.length > 0 || isFocused) && /*#__PURE__*/React__default["default"].createElement(TextareaLabel, {
-    color: color
-  }, "Comment"), /*#__PURE__*/React__default["default"].createElement(CommentTextarea, {
-    value: commentText,
-    onChange: handleTextChange,
-    placeholder: "Type a Comment...",
-    maxLength: maxLength,
-    color: color,
-    $hasValue: commentText.length > 0,
-    onBlur: handleBlur,
-    onFocus: handleFocus
-  }), /*#__PURE__*/React__default["default"].createElement(CharacterCount, null, commentText.length, "/", maxLength))), /*#__PURE__*/React__default["default"].createElement(ModalBottom, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
-    text: "Cancel",
-    type: "secondary",
+  }, /*#__PURE__*/React__default["default"].createElement(ModalContainer, {
+    $width: width,
+    $height: height
+  }, /*#__PURE__*/React__default["default"].createElement(ModalHeader, null, /*#__PURE__*/React__default["default"].createElement(ModalTitle, null, title), /*#__PURE__*/React__default["default"].createElement(CloseButton, {
+    onClick: onClose
+  }, /*#__PURE__*/React__default["default"].createElement(CloseXIcon, null))), /*#__PURE__*/React__default["default"].createElement(ModalContent, {
+    showBorders: seperateSectionBorder
+  }, children), /*#__PURE__*/React__default["default"].createElement(ButtonContainer$1, null, /*#__PURE__*/React__default["default"].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__default["default"].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
   }))));
 };
 
@@ -38681,20 +38646,48 @@ const TableBody = ({
   onRowClick,
   onSendClick,
   buttonColor,
-  onDeleteClick,
+  buttonHoverColor,
   selectedColor,
+  onDeleteClick,
   resetFocusIndex,
   changeFocusIndex,
   onFocusChange,
   indexToShimmer = 0,
+  statuses = [{
+    status: 'Pending',
+    palette: ['#F5C9A7', '#8B4513']
+  }, {
+    status: 'Received',
+    palette: ['#B9D5D5', '#2F4F4F']
+  }, {
+    status: 'Approved',
+    palette: ['#BEDDC3', '#2D5016']
+  }, {
+    status: 'Cancelled',
+    palette: ['#EBA6AF', '#8B1538']
+  }],
   onCommentSave = () => {},
+  commentTextLimit = 150,
   ref = null
 }) => {
   const [hoveredRowIndex, setHoveredRowIndex] = React$1.useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = React$1.useState(null);
   const [isCommentModalOpen, setIsCommentModalOpen] = React$1.useState(false);
-  const [currentCommentRow, setCurrentCommentRow] = React$1.useState(null); // Track which row is being edited
+  const [currentCommentRow, setCurrentCommentRow] = React$1.useState(null);
 
+  // TextArea logic states
+  const [commentText, setCommentText] = React$1.useState('');
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const [hasUserInteracted, setHasUserInteracted] = React$1.useState(false);
+  const [hasInitialValue, setHasInitialValue] = React$1.useState(false);
+  React$1.useEffect(() => {
+    if (isCommentModalOpen && currentCommentRow !== null) {
+      const initialText = data[currentCommentRow]?.Comments || '';
+      setCommentText(initialText);
+      setHasInitialValue(Boolean(initialText.trim()));
+      setHasUserInteracted(false);
+    }
+  }, [isCommentModalOpen, currentCommentRow, data]);
   React$1.useEffect(() => {
     if (resetFocusIndex) {
       setFocusedRowIndex(null);
@@ -38714,21 +38707,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 {
@@ -38864,12 +38879,20 @@ const TableBody = ({
           }), /*#__PURE__*/React__default["default"].createElement("span", null, "All Sent"));
         }
         return value;
+      case 'status':
+        const statusObj = statuses.find(status => status.status === value) || {};
+        const [palette0, palette1] = statusObj.palette;
+        return /*#__PURE__*/React__default["default"].createElement(StatusCell, {
+          color: palette1
+        }, /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
+          backgroundColor: palette0
+        }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(CommentIconWrapper, {
           $buttonColor: buttonColor,
           ref: el => {
@@ -38905,7 +38928,7 @@ const TableBody = ({
           }
         }, /*#__PURE__*/React__default["default"].createElement(CommentIcon, {
           showCircle: hasComments,
-          circleColor: "#066768"
+          circleColor: buttonColor
         }));
       case 'trash':
         // Only show trash icon when row is hovered
@@ -38952,7 +38975,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);
               }
             }
@@ -39004,12 +39027,31 @@ const TableBody = ({
       $minWidth: column.minWidth,
       $maxWidth: column.maxWidth
     }, formattedValue);
-  })))), /*#__PURE__*/React__default["default"].createElement(CommentModal, {
+  })))), /*#__PURE__*/React__default["default"].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__default["default"].createElement(TextareaWrapper, null, (commentText.length > 0 || isFocused) && /*#__PURE__*/React__default["default"].createElement(TextareaLabel, {
+    color: buttonColor
+  }, "Comment"), /*#__PURE__*/React__default["default"].createElement(CommentTextarea, {
+    value: commentText,
+    onChange: handleTextChange,
+    placeholder: "Type a Comment...",
+    maxLength: commentTextLimit,
+    color: buttonColor,
+    $hasValue: commentText.length > 0,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  }), /*#__PURE__*/React__default["default"].createElement(CharacterCount, null, commentText.length, "/", commentTextLimit))));
 };
 TableBody.propTypes = {
   columns: PropTypes.array.isRequired,
@@ -39022,6 +39064,7 @@ TableBody.propTypes = {
   onFocusChange: PropTypes.func,
   indexToShimmer: PropTypes.number,
   onCommentSave: PropTypes.func,
+  commentTextLimit: PropTypes.number,
   ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
@@ -42198,6 +42241,7 @@ const Table = props => {
     width = '100%',
     height = 'auto',
     tableTitle = 'All Events',
+    tableBackground = '#FFFFFF',
     data = [],
     counter = 0,
     hideRowsCounter = false,
@@ -42314,7 +42358,8 @@ const Table = props => {
 
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper, {
     width: width,
-    height: height
+    height: height,
+    backgroundColor: tableBackground
   }, /*#__PURE__*/React__default["default"].createElement(NoInfoFound, null, /*#__PURE__*/React__default["default"].createElement(TableTop, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Title$7, null, tableTitle), !hideRowsCounter && /*#__PURE__*/React__default["default"].createElement(SubTitle, null, data.length === 0 ? 'No Events' : `${counter} Events`)), showSideButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
@@ -42348,6 +42393,7 @@ const Table = props => {
     onDeleteClick: onDeleteClick,
     onCommentSave: handleCommentSave,
     buttonColor: buttonColor,
+    buttonHoverColor: buttonHoverColor,
     resetFocusIndex: resetFocusIndex,
     changeFocusIndex: changeFocusIndex,
     onFocusChange: handleTableFocusChange
@@ -42500,7 +42546,7 @@ const LineContainer = styled__default["default"].div`
   align-items: center;
   width: 100%;
 `;
-const ButtonContainer$1 = styled__default["default"].div`
+const ButtonContainer = styled__default["default"].div`
   .ButtonContainer {
     label {
       white-space: nowrap;
@@ -43416,6 +43462,7 @@ const Tooltip = styled__default["default"].div`
   z-index: 10;
   white-space: nowrap;
   transition: opacity 0.2s;
+  max-height: 600px;
 
   &::after {
     content: '';
@@ -43433,7 +43480,6 @@ const ExpandButtonWrapper = styled__default["default"].div`
   display: flex;
   justify-content: center;
   align-items: center;
-
   &:hover ${Tooltip},
   &:focus-within ${Tooltip} {
     visibility: visible;
@@ -51794,14 +51840,20 @@ var successAnimation = {
 };
 
 const SAMPLE_VENDORS = ["Colgate-Palmolive", "Unilever", "P&G", "Kellog’s", "Coca-Cola Company", "Pepsico", "Colgate-Palmolive", "Unilever", "P&G", "Kellog’s", "Coca-Cola Company", "Pepsico", "Colgate-Palmolive", "Unilever", "P&G", "Kellog’s", "Coca-Cola Company", "Pepsico"];
-const COLLAPSED_COUNT = 7;
 const SuccessScreen = ({
   width = "100%",
   height = "100%",
   packagesCount = 7,
   vendorsCount = 3,
-  vendors = SAMPLE_VENDORS
+  vendors = SAMPLE_VENDORS,
+  maxVisibleVendors = 12
 }) => {
+  const [visibleCount, setVisibleCount] = React$1.useState(() => Math.min(vendors.length, maxVisibleVendors));
+  React$1.useEffect(() => {
+    const count = Math.min(maxVisibleVendors, vendors.length);
+    setVisibleCount(count);
+  }, [vendors, maxVisibleVendors]);
+  const hiddenVendors = vendors.slice(visibleCount);
   return /*#__PURE__*/React__default["default"].createElement(SuccessScreenContainer, {
     width: width,
     height: height
@@ -51812,9 +51864,9 @@ const SuccessScreen = ({
     },
     animationData: successAnimation,
     loop: false
-  })), /*#__PURE__*/React__default["default"].createElement(SuccessHeader, null, /*#__PURE__*/React__default["default"].createElement(SuccessTitle, null, "Packages", /*#__PURE__*/React__default["default"].createElement("br", null), " Successfully Sent"), /*#__PURE__*/React__default["default"].createElement(SuccessSubtitle, null, /*#__PURE__*/React__default["default"].createElement("b", null, packagesCount), " packages have been sent to", " ", /*#__PURE__*/React__default["default"].createElement("b", null, vendorsCount), " vendors")), /*#__PURE__*/React__default["default"].createElement(DividerLine, null), /*#__PURE__*/React__default["default"].createElement(VendorListWrapper, null, /*#__PURE__*/React__default["default"].createElement(VendorList, null, vendors.slice(0, COLLAPSED_COUNT).map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(VendorListItem, {
+  })), /*#__PURE__*/React__default["default"].createElement(SuccessHeader, null, /*#__PURE__*/React__default["default"].createElement(SuccessTitle, null, "Packages", /*#__PURE__*/React__default["default"].createElement("br", null), " Successfully Sent"), /*#__PURE__*/React__default["default"].createElement(SuccessSubtitle, null, /*#__PURE__*/React__default["default"].createElement("b", null, packagesCount), " packages have been sent to", " ", /*#__PURE__*/React__default["default"].createElement("b", null, vendorsCount), " vendors")), /*#__PURE__*/React__default["default"].createElement(DividerLine, null), /*#__PURE__*/React__default["default"].createElement(VendorListWrapper, null, /*#__PURE__*/React__default["default"].createElement(VendorList, null, vendors.slice(0, visibleCount).map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(VendorListItem, {
     key: idx
-  }, vendor))), /*#__PURE__*/React__default["default"].createElement(ExpandButtonWrapper, null, /*#__PURE__*/React__default["default"].createElement(ExpandButton, {
+  }, vendor))), hiddenVendors.length > 0 && /*#__PURE__*/React__default["default"].createElement(ExpandButtonWrapper, null, /*#__PURE__*/React__default["default"].createElement(ExpandButton, {
     tabIndex: 0
   }, "\u2022\u2022\u2022"), /*#__PURE__*/React__default["default"].createElement(Tooltip, null, vendors.map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
     key: idx
@@ -51834,7 +51886,8 @@ const ItemManagerPanel = _ref => {
     setItemAndPackage,
     linkColor = "#212121",
     backgroundColor = 'white',
-    buttonTooltipText = "Please fill out all forms before sending."
+    buttonTooltipText = "Please fill out all forms before sending.",
+    maxVisibleVendors = 12
   } = _ref;
   const [screen, setScreen] = React$1.useState("initial");
   const [selectedVendor, setSelectedVendor] = React$1.useState(null);
@@ -51989,7 +52042,8 @@ const ItemManagerPanel = _ref => {
       height: height,
       packagesCount: itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0),
       vendorsCount: itemAndPackage.filter(item => item.packages !== null).length.toString(),
-      vendors: itemAndPackage.filter(item => item.packages !== null).map(item => item.name)
+      vendors: itemAndPackage.filter(item => item.packages !== null).map(item => item.name),
+      maxVisibleVendors: maxVisibleVendors
     });
   }
   if (screen === "subitemdetail") {
@@ -52026,7 +52080,7 @@ const ItemManagerPanel = _ref => {
       backgroundColor: backgroundColor
     }, /*#__PURE__*/React__default["default"].createElement(VendorHeader$2, {
       ref: headerRef
-    }, /*#__PURE__*/React__default["default"].createElement(Container$1, null, /*#__PURE__*/React__default["default"].createElement(TitleContainer, null, /*#__PURE__*/React__default["default"].createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React__default["default"].createElement(SubtitleContainer, null, /*#__PURE__*/React__default["default"].createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React__default["default"].createElement("span", null, "\xB7"), /*#__PURE__*/React__default["default"].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__default["default"].createElement(ButtonContainer$1, null, /*#__PURE__*/React__default["default"].createElement(CustomTooltip, {
+    }, /*#__PURE__*/React__default["default"].createElement(Container$1, null, /*#__PURE__*/React__default["default"].createElement(TitleContainer, null, /*#__PURE__*/React__default["default"].createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React__default["default"].createElement(SubtitleContainer, null, /*#__PURE__*/React__default["default"].createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React__default["default"].createElement("span", null, "\xB7"), /*#__PURE__*/React__default["default"].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__default["default"].createElement(ButtonContainer, null, /*#__PURE__*/React__default["default"].createElement(CustomTooltip, {
       hideTooltip: !disabledSendForms,
       content: buttonTooltipText,
       topFactor: 2,
@@ -52823,184 +52877,6 @@ const OverlayDropdown = _ref => {
   }));
 };
 
-// MessageBox.styles.js
-const ModalOverlay = styled__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].div`
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    //margin-bottom: 5px;
-`;
-const IconWrapper$1 = styled__default["default"].div`    
-    margin-top: 1px;
-`;
-const MessageTitle = styled__default["default"].h3`
-    font-family: 'Poppins', sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    color: #212121;
-    margin: 0 0 8px 0;
-`;
-const MessageMessage = styled__default["default"].p`
-    font-family: 'Poppins', sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    color: #212121;
-    margin: 0;
-    line-height: 1.5;
-`;
-const ButtonContainer = styled__default["default"].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__default["default"].createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(ModalOverlay, {
-    onClick: handleOverlayClick
-  }, /*#__PURE__*/React__default["default"].createElement(ModalContainer, {
-    $width: width,
-    $height: height
-  }, /*#__PURE__*/React__default["default"].createElement(CloseButton, {
-    onClick: onClose
-  }, /*#__PURE__*/React__default["default"].createElement(CloseXIcon, {
-    width: "22",
-    height: "22"
-  })), /*#__PURE__*/React__default["default"].createElement(ModalTitle, null, title), /*#__PURE__*/React__default["default"].createElement(MessageContainer, null, /*#__PURE__*/React__default["default"].createElement(IconWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(ExclamationMarkIcon, {
-    color: "#F00021",
-    width: "16",
-    height: "16"
-  })), /*#__PURE__*/React__default["default"].createElement(MessageTitle, null, messageTitle)), /*#__PURE__*/React__default["default"].createElement(MessageContainer, null, /*#__PURE__*/React__default["default"].createElement(MessageMessage, null, messageText)), /*#__PURE__*/React__default["default"].createElement(ButtonContainer, null, /*#__PURE__*/React__default["default"].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__default["default"].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