sag_components 2.0.0-beta186 → 2.0.0-beta188

package/dist/index.esm.js

@@ -564,6 +564,17 @@ var VIcon = function (_a) {
   }));
 };
 
+const PackageSendIcon = () => /*#__PURE__*/React$1.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M18.9896 6.00654C19.0415 5.67562 18.8966 5.34197 18.6204 5.15326C18.3442 4.96455 17.9832 4.94814 17.6906 5.11497L5.43943 12.1163C5.14956 12.2804 4.98001 12.5949 5.00189 12.9285C5.02377 13.2622 5.2316 13.5548 5.53788 13.6834L9.37457 15.2806V17.824C9.37457 18.4749 9.90236 19 10.5505 19C10.9087 19 11.2451 18.8386 11.4693 18.5597L12.9132 16.7547H12.9159L16.0389 18.0565C16.2877 18.1604 16.5694 18.144 16.8046 18.0127C17.0398 17.8814 17.2011 17.649 17.2421 17.3837L18.9923 6.00654H18.9896ZM12.0709 16.4046L10.7856 18.0127C10.7282 18.0838 10.6407 18.1248 10.5505 18.1248C10.3837 18.1248 10.2497 17.9908 10.2497 17.824V15.6443L12.0709 16.4046ZM13.2496 15.9479L10.6079 14.8457L17.9641 6.92547L16.3752 17.2497L13.2523 15.9479H13.2496ZM17.3187 6.332L9.74649 14.4874L5.87424 12.8738L17.3187 6.332Z",
+  fill: "#B1B1B1"
+}));
+
 const ChervronRightIcon = _ref => {
   let {
     width = "8",
@@ -11987,7 +11998,7 @@ const scrollableStyles$b = `
     border-radius: 5px;
   }
 `;
-const rotation$1 = keyframes`
+const rotation$2 = keyframes`
   0%, 100% {
       box-shadow: 
           0px -8.32px 0px 0px #1F7677, 
@@ -12167,7 +12178,7 @@ const PaginationWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
 `;
-const LoaderWrapper$1 = styled.div`
+const LoaderWrapper$2 = styled.div`
   position: absolute;
   top: 40%;
   left: 50%;
@@ -12187,14 +12198,14 @@ const LoaderWrapper$1 = styled.div`
     font-size: 12px;
   }
 `;
-const Loader$1 = styled.span`
+const Loader$2 = styled.span`
   font-size: 10px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
-  animation: ${rotation$1} 1.5s infinite ease;
+  animation: ${rotation$2} 1.5s infinite ease;
   transform: translateZ(0);
 `;
 const TableWrapper$3 = styled.div`
@@ -12618,9 +12629,9 @@ const ReportTable = props => {
     onClick: () => currentPage < totalPages && handlePageChange(currentPage + 1)
   }, /*#__PURE__*/React$1.createElement(ChevronRightIcon, {
     disabled: currentPage === totalPages
-  }))))), isLoading && enablePagination && /*#__PURE__*/React$1.createElement(LoaderWrapper$1, {
+  }))))), isLoading && enablePagination && /*#__PURE__*/React$1.createElement(LoaderWrapper$2, {
     id: "LoaderWrapper"
-  }, /*#__PURE__*/React$1.createElement(Loader$1, null)), !disableInfo ? /*#__PURE__*/React$1.createElement(InfoBlock, null, /*#__PURE__*/React$1.createElement(InfoIcon, {
+  }, /*#__PURE__*/React$1.createElement(Loader$2, null)), !disableInfo ? /*#__PURE__*/React$1.createElement(InfoBlock, null, /*#__PURE__*/React$1.createElement(InfoIcon, {
     color: "#1B30AA"
   }), /*#__PURE__*/React$1.createElement(InfoText, null, "Download table to get the full data")) : "");
 };
@@ -12898,7 +12909,7 @@ const CollapseMenuItemContainer = styled.div`
   display: flex;
   justify-content: space-between;
 `;
-const rotation = keyframes`
+const rotation$1 = keyframes`
   0%, 100% {
       box-shadow: 
           0px -8.32px 0px 0px #ffffff, 
@@ -12995,7 +13006,7 @@ const rotation = keyframes`
           -5.76px -5.76px 0 0px #ffffff;
   }
 `;
-const LoaderWrapper = styled.div`
+const LoaderWrapper$1 = styled.div`
   font-size: 16px;
   display: flex;
   gap: 20px;
@@ -13008,14 +13019,14 @@ const LoaderWrapper = styled.div`
     font-size: 12px;
   }
 `;
-const Loader = styled.span`
+const Loader$1 = styled.span`
   font-size: 10px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
-  animation: ${rotation} 1.1s infinite ease;
+  animation: ${rotation$1} 1.1s infinite ease;
   transform: translateZ(0);
 `;
 const BannerIcon = styled.div`
@@ -13247,9 +13258,9 @@ const BannerEventBoxList = props => {
     className: className
   }, /*#__PURE__*/React$1.createElement(CollapseMenuItemContainer, {
     onClick: () => handleToggle()
-  }, showLoader ? /*#__PURE__*/React$1.createElement(LoaderWrapper, {
+  }, showLoader ? /*#__PURE__*/React$1.createElement(LoaderWrapper$1, {
     id: "LoaderWrapper"
-  }, /*#__PURE__*/React$1.createElement("span", null, "Processing Data"), /*#__PURE__*/React$1.createElement(Loader, null)) : /*#__PURE__*/React$1.createElement(MainDetails, null, !cardsContent && /*#__PURE__*/React$1.createElement(BannerIcon, null, bannersIcon()), showEventDetails ? /*#__PURE__*/React$1.createElement(SubDetails, null, eventName, ' ', eventName !== '' && eventType !== '' && /*#__PURE__*/React$1.createElement(ProductName, null, "|"), ' ', eventType, count && /*#__PURE__*/React$1.createElement(ProductName, null, ': ', count, ' ', count > 1 ? 'Products' : 'Product')) : ' '), /*#__PURE__*/React$1.createElement(ToggleContainer, null, IsItemOpen ? /*#__PURE__*/React$1.createElement(LinkButton, {
+  }, /*#__PURE__*/React$1.createElement("span", null, "Processing Data"), /*#__PURE__*/React$1.createElement(Loader$1, null)) : /*#__PURE__*/React$1.createElement(MainDetails, null, !cardsContent && /*#__PURE__*/React$1.createElement(BannerIcon, null, bannersIcon()), showEventDetails ? /*#__PURE__*/React$1.createElement(SubDetails, null, eventName, ' ', eventName !== '' && eventType !== '' && /*#__PURE__*/React$1.createElement(ProductName, null, "|"), ' ', eventType, count && /*#__PURE__*/React$1.createElement(ProductName, null, ': ', count, ' ', count > 1 ? 'Products' : 'Product')) : ' '), /*#__PURE__*/React$1.createElement(ToggleContainer, null, IsItemOpen ? /*#__PURE__*/React$1.createElement(LinkButton, {
     disabled: disableToggle,
     text: linkText,
     leftIcon: "info",
@@ -26356,7 +26367,7 @@ const TotalDoughnutChart = props => {
     key: `cell-${row.name}`,
     fill: row.color
   }))), /*#__PURE__*/React$1.createElement(Tooltip$3, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip$2, {
       value: value,
       isPercent: isPercent
     })
@@ -26425,7 +26436,7 @@ TotalDoughnutChart.defaultProps = {
   noDataText: 'No Data',
   textAfterValue: ''
 };
-function CustomTooltip$1(_ref) {
+function CustomTooltip$2(_ref) {
   let {
     active,
     payload,
@@ -26438,7 +26449,7 @@ function CustomTooltip$1(_ref) {
     return /*#__PURE__*/React$1.createElement(TooltipDiv$6, null, /*#__PURE__*/React$1.createElement(TooltipLabel$6, null, `${payload[0].name} ${percent}%`));
   }
 }
-CustomTooltip$1.propTypes = {
+CustomTooltip$2.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   active: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
@@ -26448,7 +26459,7 @@ CustomTooltip$1.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   isPercent: PropTypes.any
 };
-CustomTooltip$1.defaultProps = {
+CustomTooltip$2.defaultProps = {
   active: '',
   payload: '',
   value: '',
@@ -34606,6 +34617,14 @@ const ModalBody = styled.div`
   width: 100%;
   height: 100%;
 `;
+const TooltipContent = styled.span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 styled.div`
   display: flex;
   justify-content: flex-end;
@@ -34639,7 +34658,7 @@ const ModalWithOverlay = props => {
     // Added this prop
     showOkButton = true,
     // Added this prop
-    tooltipContent = ''
+    tooltipContent = 'Please fill in all required details<br /> and activate at least one<br /> banner to create the event.'
   } = props;
   const overlayStyle = {
     backgroundColor: overlayTransparent ? "transparent" : `rgba(0, 0, 0, ${overlayOpacity || 0.797})`
@@ -34671,7 +34690,7 @@ const ModalWithOverlay = props => {
   }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
     direction: "top",
     topFactor: -0.85,
-    content: /*#__PURE__*/React$1.createElement("span", {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -35648,6 +35667,11 @@ const Input$2 = _ref => {
       newValue: e.target.value || ""
     });
   };
+  const handleContainerClick = e => {
+    if (onClick && typeof onClick === "function") {
+      onClick(e);
+    }
+  };
   const handleFocus = () => {
     setIsFocused(true);
     if (inputRef?.current) {
@@ -35713,7 +35737,7 @@ const Input$2 = _ref => {
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
     multiline: multiline,
-    onClick: onClick
+    onClick: handleContainerClick
   }, /*#__PURE__*/React$1.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
@@ -35901,9 +35925,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -36742,6 +36766,133 @@ const LoadingText = styled.span`
     font-size: 14px;
     font-weight: 400;
 `;
+const rotation = keyframes`
+  0%, 100% {
+      box-shadow: 
+          0px -8.32px 0px 0px #1F7677, 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.5), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.7);
+  }
+
+  12.5% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.7), 
+          5.76px -5.76px 0 0px #1F7677, 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.5);
+  }
+
+  25% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.5), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.7), 
+          8px 0px 0 0px #1F7677, 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  37.5% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.5), 
+          8px 0px 0 0px rgba(31, 118, 119,0.7), 
+          5.6px 5.6px 0 0px #1F7677, 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  50% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.5), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.7), 
+          0px 8px 0 0px #1F7677, 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  62.5% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.5), 
+          0px 8px 0 0px rgba(31, 118, 119,0.7), 
+          -5.76px 5.76px 0 0px #1F7677, 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  75% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.5), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.7), 
+          -8.32px 0px 0 0px #1F7677, 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  87.5% {
+      box-shadow:     
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.5), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.7), 
+          -5.76px -5.76px 0 0px #1F7677;
+  }
+`;
+const Loader = styled.span`
+  font-size: 10px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: ${rotation} 1.5s infinite ease;
+  transform: translateZ(0);
+`;
+const LoaderWrapper = styled.div`
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  color: #1f7677;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;
 
 const NoEvents = ({
   width = '251',
@@ -38457,7 +38608,7 @@ const tooltipStyles$1 = css`
 `;
 
 // Simple new row highlight animation
-const shimmerAnimation = css`
+css`
   @keyframes newRowHighlight {
     0% {
       background-color: #ffffff;
@@ -38502,14 +38653,6 @@ const TableRow = styled.tr`
     border-bottom: none;
   }
 
-  /* Simple new row highlight */
-  &.shimmer-row {
-    border-left: 3px solid transparent;
-    animation: newRowHighlight 3s ease-out;
-    animation-fill-mode: both;
-  }
-
-  ${shimmerAnimation}
 `;
 styled.div`
   position: absolute;
@@ -39544,6 +39687,100 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string
 };
 
+// combinedShimmerHooks.js - Chrome shimmer effect integrated with your hooks
+
+// Hook that specifically watches for indexToShimmer changes (like your original)
+const useShimmerChromeEffect = (text, currentRowIndex, indexToShimmer) => {
+  // Handle null/undefined text safely
+  const safeText = text !== null && text !== undefined ? text.toString() : '';
+  const [isShimmering, setIsShimmering] = useState(false);
+  const [lastShimmerIndex, setLastShimmerIndex] = useState(null);
+
+  // Check if this row should animate
+  const shouldAnimate = currentRowIndex === indexToShimmer;
+
+  // Reset animation when indexToShimmer changes and this row is targeted
+  useEffect(() => {
+    if (shouldAnimate && indexToShimmer !== lastShimmerIndex) {
+      setIsShimmering(true);
+      setLastShimmerIndex(indexToShimmer);
+
+      // Stop shimmering after 5 seconds
+      const timeout = setTimeout(() => {
+        setIsShimmering(false);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    } else if (!shouldAnimate) {
+      setIsShimmering(false);
+    }
+  }, [indexToShimmer, shouldAnimate, lastShimmerIndex]);
+  return {
+    text: safeText,
+    isShimmering: shouldAnimate && isShimmering
+  };
+};
+
+// Chrome Shimmer Component
+const ChromeShimmerText = ({
+  text,
+  isShimmering
+}) => {
+  const shimmerStyle = {
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    color: isShimmering ? 'transparent' : 'inherit',
+    background: isShimmering ? '#222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat' : 'none',
+    backgroundImage: isShimmering ? '-webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%)' : 'none',
+    WebkitBackgroundSize: isShimmering ? '200px' : 'auto',
+    WebkitBackgroundClip: isShimmering ? 'text' : 'initial',
+    backgroundClip: isShimmering ? 'text' : 'initial',
+    WebkitTextFillColor: isShimmering ? 'transparent' : 'inherit',
+    WebkitAnimation: isShimmering ? 'chromeShine 5s ease-in-out' : 'none',
+    animation: isShimmering ? 'chromeShine 5s ease-in-out' : 'none',
+    textShadow: isShimmering ? '0 0px 0px rgba(255, 255, 255, 0.5)' : 'none',
+    display: 'inline',
+    transition: 'all 0.3s ease'
+  };
+  if (!isShimmering) {
+    return /*#__PURE__*/React.createElement("span", null, text);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    style: shimmerStyle
+  }, text), /*#__PURE__*/React.createElement("style", {
+    jsx: true
+  }, `
+        @-webkit-keyframes chromeShine {
+          0%, 10% {
+            background-position: -1000px;
+          }
+          20% {
+            background-position: top left;
+          }
+          90% {
+            background-position: top right;
+          }
+          100% {
+            background-position: 1000px;
+          }
+        }
+        
+        @keyframes chromeShine {
+          0%, 10% {
+            background-position: -1000px;
+          }
+          20% {
+            background-position: top left;
+          }
+          90% {
+            background-position: top right;
+          }
+          100% {
+            background-position: 1000px;
+          }
+        }
+      `));
+};
+
 // TableBody.jsx
 const TableBody = ({
   columns,
@@ -39559,17 +39796,17 @@ const TableBody = ({
   onFocusChange,
   indexToShimmer = 0,
   statuses = [{
-    status: 'Pending',
-    palette: ['#F5C9A7', '#8B4513']
+    status: "Pending",
+    palette: ["#F5C9A7", "#8B4513"]
   }, {
-    status: 'Received',
-    palette: ['#B9D5D5', '#2F4F4F']
+    status: "Received",
+    palette: ["#B9D5D5", "#2F4F4F"]
   }, {
-    status: 'Approved',
-    palette: ['#BEDDC3', '#2D5016']
+    status: "Approved",
+    palette: ["#BEDDC3", "#2D5016"]
   }, {
-    status: 'Cancelled',
-    palette: ['#EBA6AF', '#8B1538']
+    status: "Cancelled",
+    palette: ["#EBA6AF", "#8B1538"]
   }],
   onCommentSave = () => {},
   commentTextLimit = 150,
@@ -39577,7 +39814,7 @@ const TableBody = ({
   expandedRows = {},
   expandedContent = {},
   onExpandRow = () => {},
-  expandedBackgroundColor = '#E6F0F0',
+  expandedBackgroundColor = "#E6F0F0",
   // New prop with default
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
@@ -39591,13 +39828,13 @@ const TableBody = ({
   const [openDropdowns, setOpenDropdowns] = useState({});
 
   // TextArea logic states
-  const [commentText, setCommentText] = useState('');
+  const [commentText, setCommentText] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const [hasUserInteracted, setHasUserInteracted] = useState(false);
   const [hasInitialValue, setHasInitialValue] = useState(false);
   useEffect(() => {
     if (isCommentModalOpen && currentCommentRow !== null) {
-      const initialText = data[currentCommentRow]?.Comments || '';
+      const initialText = data[currentCommentRow]?.Comments || "";
       setCommentText(initialText);
       setHasInitialValue(Boolean(initialText.trim()));
       setHasUserInteracted(false);
@@ -39649,7 +39886,7 @@ const TableBody = ({
 
   // Handle comment modal close
   const handleCommentModalClose = () => {
-    setCommentText('');
+    setCommentText("");
     setHasUserInteracted(false);
     setHasInitialValue(false);
     setCurrentCommentRow(null);
@@ -39661,12 +39898,12 @@ const TableBody = ({
 
   // Helper function to format tag text
   const formatTagText = tag => {
-    if (typeof tag !== 'string') return tag;
-    return tag.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+    if (typeof tag !== "string") return tag;
+    return tag.replace(/-/g, " ").replace(/\b\w/g, l => l.toUpperCase());
   };
   const formatValue = (value, column, row, rowIndex) => {
-    if ((value === null || value === undefined) && column.fieldType?.toLowerCase() !== 'comments') {
-      return '';
+    if ((value === null || value === undefined) && column.fieldType?.toLowerCase() !== "comments") {
+      return "";
     }
 
     // Find the tooltip text for the current value - can be used for different fieldTypes
@@ -39678,41 +39915,41 @@ const TableBody = ({
       return null;
     };
     switch (column.fieldType?.toLowerCase()) {
-      case 'currency':
-        if (column.format === '$0.00') {
+      case "currency":
+        if (column.format === "$0.00") {
           return `$${parseFloat(value).toFixed(2)}`;
         }
         return value;
-      case 'text':
-        return value.toString();
-      case 'number':
-        if (column.format && column.format.includes(',')) {
+      case "text":
+        return value?.toString() || "";
+      case "number":
+        if (column.format && column.format.includes(",")) {
           return value.toLocaleString();
         }
         return value;
-      case 'percentage':
+      case "percentage":
         return `${value}%`;
-      case 'date':
-        if (column.format === 'MM/DD/YYYY') {
+      case "date":
+        if (column.format === "MM/DD/YYYY") {
           const date = new Date(value);
-          return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()}`;
+          return `${(date.getMonth() + 1)?.toString().padStart(2, "0")}/${date.getDate()?.toString().padStart(2, "0")}/${date.getFullYear()}`;
         }
         return value;
-      case 'boolean':
-        return value ? 'Yes' : 'No';
-      case 'array':
+      case "boolean":
+        return value ? "Yes" : "No";
+      case "array":
         if (Array.isArray(value)) {
-          return value.join(', ');
+          return value.join(", ");
         }
         return value;
-      case 'tag':
-        if (!value) return '';
+      case "tag":
+        if (!value) return "";
         const tagConfig = column.tagConfig || {};
         const colors = tagConfig.colors || {};
         const defaultColor = tagConfig.defaultColor || {
-          bg: '#F3F4F6',
-          text: '#374151',
-          border: '#9CA3AF'
+          bg: "#F3F4F6",
+          text: "#374151",
+          border: "#9CA3AF"
         };
         const maxDisplay = tagConfig.maxDisplay || 3;
         const isMultiple = tagConfig.multiple !== false; // Default to true
@@ -39732,7 +39969,7 @@ const TableBody = ({
         };
 
         // Handle single tag
-        if (typeof value === 'string') {
+        if (typeof value === "string") {
           return /*#__PURE__*/React$1.createElement(TagContainer, null, createTagChip(value));
         }
 
@@ -39741,7 +39978,7 @@ const TableBody = ({
           const visibleTags = value.slice(0, maxDisplay);
           const remainingCount = value.length - maxDisplay;
           return /*#__PURE__*/React$1.createElement(TagContainer, null, /*#__PURE__*/React$1.createElement(MultiTagWrapper, null, visibleTags.map((tag, index) => createTagChip(tag, index)), remainingCount > 0 && /*#__PURE__*/React$1.createElement(TagOverflow, {
-            title: `${remainingCount} more: ${value.slice(maxDisplay).map(tag => formatTagText(tag)).join(', ')}`
+            title: `${remainingCount} more: ${value.slice(maxDisplay).map(tag => formatTagText(tag)).join(", ")}`
           }, "+", remainingCount)));
         }
 
@@ -39750,26 +39987,26 @@ const TableBody = ({
           return formatValue(value[0], column, row, rowIndex);
         }
         return value;
-      case 'packagestatus':
+      case "packagestatus":
         // Helper function to apply tooltip logic
         const applyTooltipLogic = (element, tooltipText) => {
-          if (element && tooltipText && tooltipText.trim() !== '') {
+          if (element && tooltipText && tooltipText.trim() !== "") {
             const rect = element.getBoundingClientRect();
             const {
               offset,
               height
             } = calculateTooltipOffset(tooltipText);
-            element.style.setProperty('--tooltip-top', `${rect.top}px`);
-            element.style.setProperty('--tooltip-left', `${rect.left}px`);
-            element.style.setProperty('--tooltip-width', `${rect.width}px`);
-            element.style.setProperty('--tooltip-offset', `${offset}px`);
-            element.style.setProperty('--tooltip-height', `${height}px`);
-            element.setAttribute('data-tooltip', tooltipText);
+            element.style.setProperty("--tooltip-top", `${rect.top}px`);
+            element.style.setProperty("--tooltip-left", `${rect.left}px`);
+            element.style.setProperty("--tooltip-width", `${rect.width}px`);
+            element.style.setProperty("--tooltip-offset", `${offset}px`);
+            element.style.setProperty("--tooltip-height", `${height}px`);
+            element.setAttribute("data-tooltip", tooltipText);
           }
         };
         const tooltipText = getTooltipText(value);
         const lowerValue = value?.toLowerCase();
-        if (lowerValue === 'empty') {
+        if (lowerValue === "empty") {
           return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
             ref: el => applyTooltipLogic(el, tooltipText)
           }, /*#__PURE__*/React$1.createElement(Button$1, {
@@ -39789,7 +40026,7 @@ const TableBody = ({
             height: "32px",
             disabled: true
           }));
-        } else if (lowerValue === 'draft') {
+        } else if (lowerValue === "draft") {
           return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
             ref: el => applyTooltipLogic(el, tooltipText)
           }, /*#__PURE__*/React$1.createElement(Button$1, {
@@ -39810,7 +40047,7 @@ const TableBody = ({
               onSendClick && onSendClick(row);
             }
           }));
-        } else if (lowerValue === 'sent') {
+        } else if (lowerValue === "sent") {
           return /*#__PURE__*/React$1.createElement(SentStatus, {
             ref: el => applyTooltipLogic(el, tooltipText)
           }, /*#__PURE__*/React$1.createElement(OkIcon, {
@@ -39820,7 +40057,7 @@ const TableBody = ({
           }), /*#__PURE__*/React$1.createElement("span", null, "All Sent"));
         }
         return value;
-      case 'status':
+      case "status":
         const statusObj = statuses.find(status => status.status === value) || {};
         const [palette0, palette1] = statusObj.palette;
         return /*#__PURE__*/React$1.createElement(StatusCell$1, {
@@ -39828,12 +40065,12 @@ const TableBody = ({
         }, /*#__PURE__*/React$1.createElement(StatusCellCircle, {
           backgroundColor: palette0
         }), /*#__PURE__*/React$1.createElement("span", null, value));
-      case 'comments':
-        const commentTextValue = value || '';
+      case "comments":
+        const commentTextValue = value || "";
         const hasComments = commentTextValue.trim().length > 0;
 
         // Truncate tooltip text if longer than 150 characters
-        const commentTooltipText = commentTextValue.length > 150 ? commentTextValue.substring(0, 147) + '...' : commentTextValue;
+        const commentTooltipText = commentTextValue.length > 150 ? commentTextValue.substring(0, 147) + "..." : commentTextValue;
         return /*#__PURE__*/React$1.createElement(CommentIconWrapper, {
           $buttonColor: buttonColor,
           ref: el => {
@@ -39845,20 +40082,20 @@ const TableBody = ({
                   offset,
                   height
                 } = calculateTooltipOffset(commentTooltipText);
-                el.style.setProperty('--tooltip-top', `${rect.top}px`);
-                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.setAttribute('data-tooltip', commentTooltipText);
+                el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                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.setAttribute("data-tooltip", commentTooltipText);
               } else {
                 // Remove tooltip if there are no comments
-                el.removeAttribute('data-tooltip');
-                el.style.removeProperty('--tooltip-top');
-                el.style.removeProperty('--tooltip-left');
-                el.style.removeProperty('--tooltip-width');
-                el.style.removeProperty('--tooltip-offset');
-                el.style.removeProperty('--tooltip-height');
+                el.removeAttribute("data-tooltip");
+                el.style.removeProperty("--tooltip-top");
+                el.style.removeProperty("--tooltip-left");
+                el.style.removeProperty("--tooltip-width");
+                el.style.removeProperty("--tooltip-offset");
+                el.style.removeProperty("--tooltip-height");
               }
             }
           },
@@ -39871,13 +40108,13 @@ const TableBody = ({
           showCircle: hasComments,
           circleColor: buttonColor
         }));
-      case 'trash':
+      case "trash":
         // Only show trash icon when row is hovered
         if (hoveredRowIndex !== rowIndex) {
           return null;
         }
         const trashTooltipText = getTooltipText(value);
-        if (value === 'ENABLED') {
+        if (value === "ENABLED") {
           return /*#__PURE__*/React$1.createElement(TrashIconWrapper$1, {
             $buttonColor: buttonColor,
             ref: el => {
@@ -39887,12 +40124,12 @@ const TableBody = ({
                   offset,
                   height
                 } = calculateTooltipOffset(trashTooltipText);
-                el.style.setProperty('--tooltip-top', `${rect.top}px`);
-                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.setAttribute('data-tooltip', trashTooltipText);
+                el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                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.setAttribute("data-tooltip", trashTooltipText);
               }
             },
             onClick: e => {
@@ -39903,7 +40140,7 @@ const TableBody = ({
             width: "14",
             height: "18"
           }));
-        } else if (value === 'DISABLED') {
+        } else if (value === "DISABLED") {
           return /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper$1, {
             ref: el => {
               if (el && trashTooltipText) {
@@ -39912,12 +40149,12 @@ const TableBody = ({
                   offset,
                   height
                 } = calculateTooltipOffset(trashTooltipText);
-                el.style.setProperty('--tooltip-top', `${rect.top}px`);
-                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.setAttribute('data-tooltip', trashTooltipText);
+                el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                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.setAttribute("data-tooltip", trashTooltipText);
               }
             }
           }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {
@@ -39926,14 +40163,14 @@ const TableBody = ({
           }));
         }
         return null;
-      case 'dropdown':
+      case "dropdown":
         const dropdownKey = `${rowIndex}-${column.key}`;
         const isOpen = openDropdowns[dropdownKey] || false;
         const dropdownOptions = column.dropdownOptions || [];
-        const maxDropdownHeight = column.maxDropdownHeight || '200px';
+        const maxDropdownHeight = column.maxDropdownHeight || "200px";
         const dropdownOptionsWidth = column.dropdownOptionsWidth; // Get from column config
-        const dropdownOptionsAlignment = column.dropdownOptionsAlignment || 'right'; // Get from column config, default to 'right'
-        const placeholder = column.placeholder || 'Select...'; // Get from column config, default to 'Select...'
+        const dropdownOptionsAlignment = column.dropdownOptionsAlignment || "right"; // Get from column config, default to 'right'
+        const placeholder = column.placeholder || "Select..."; // Get from column config, default to 'Select...'
 
         // Find the current selected option to display its label
         const currentOption = dropdownOptions.find(option => option.value === value);
@@ -39953,16 +40190,16 @@ const TableBody = ({
           isRowHovered: hoveredRowIndex === rowIndex,
           selectedColor: selectedColor
         });
-      case 'checkbox':
+      case "checkbox":
         const isChecked = Boolean(value); // Convert to boolean
 
         return /*#__PURE__*/React$1.createElement("div", {
           style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '100%',
-            height: '100%'
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%"
           }
         }, /*#__PURE__*/React$1.createElement("input", {
           type: "checkbox",
@@ -39971,15 +40208,15 @@ const TableBody = ({
           onClick: e => e.stopPropagation() // Prevent row click on checkbox click
           ,
           style: {
-            width: '18px',
-            height: '18px',
-            cursor: 'pointer',
+            width: "18px",
+            height: "18px",
+            cursor: "pointer",
             accentColor: buttonColor // Use the theme color for checkbox
           }
         }));
       default:
         // Treat default as text
-        return value.toString();
+        return value?.toString() ?? "";
     }
   };
   const shouldShowTooltip = (element, content) => {
@@ -39991,7 +40228,7 @@ const TableBody = ({
     event.stopPropagation();
     if (onExpandRow) {
       // Determine the expand status based on current state
-      const expandStatus = expandedRows[rowIndex] ? 'isClosed' : 'isOpen';
+      const expandStatus = expandedRows[rowIndex] ? "isClosed" : "isOpen";
       onExpandRow(row, rowIndex, expandStatus);
     }
   };
@@ -40050,16 +40287,16 @@ const TableBody = ({
     const handleClickOutside = () => {
       setOpenDropdowns({});
     };
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener("click", handleClickOutside);
     return () => {
-      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener("click", handleClickOutside);
     };
   }, []);
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
     key: rowIndex
   }, /*#__PURE__*/React$1.createElement(TableRow, {
     "data-row-index": rowIndex,
-    className: indexToShimmer === rowIndex ? 'shimmer-row' : '',
+    className: indexToShimmer === rowIndex ? "shimmer-row" : "",
     isFocused: focusedRowIndex === rowIndex,
     selectedColor: selectedColor,
     onMouseEnter: () => setHoveredRowIndex(rowIndex),
@@ -40080,9 +40317,15 @@ const TableBody = ({
     width: "12",
     height: "12",
     fill: "#666"
-  }))) : expandable === true ? /*#__PURE__*/React$1.createElement("div", null) : null, columns.map(column => {
+  }))) : expandable === true ? /*#__PURE__*/React$1.createElement("div", null) : null, columns.map((column, columnIndex) => {
     const value = row[column.key];
     const formattedValue = formatValue(value, column, row, rowIndex);
+
+    // Use the chrome shimmer hook that only animates when this row matches indexToShimmer
+    const {
+      text: shimmerText,
+      isShimmering
+    } = useShimmerChromeEffect(formattedValue, rowIndex, indexToShimmer, columnIndex, columns.length);
     return /*#__PURE__*/React$1.createElement(TableCell, {
       key: column.key,
       ref: el => {
@@ -40091,20 +40334,23 @@ const TableBody = ({
           const {
             offset,
             height
-          } = calculateTooltipOffset(formattedValue.toString(), true); // true for regular cell
-          el.style.setProperty('--cell-top', `${rect.top}px`);
-          el.style.setProperty('--cell-left', `${rect.left}px`);
-          el.style.setProperty('--cell-width', `${rect.width}px`);
-          el.style.setProperty('--cell-offset', `${offset}px`);
-          el.style.setProperty('--cell-height', `${height}px`);
-          el.setAttribute('data-tooltip', formattedValue);
+          } = calculateTooltipOffset(formattedValue.toString(), true);
+          el.style.setProperty("--cell-top", `${rect.top}px`);
+          el.style.setProperty("--cell-left", `${rect.left}px`);
+          el.style.setProperty("--cell-width", `${rect.width}px`);
+          el.style.setProperty("--cell-offset", `${offset}px`);
+          el.style.setProperty("--cell-height", `${height}px`);
+          el.setAttribute("data-tooltip", formattedValue);
         }
       },
       $fieldType: column.fieldType?.toLowerCase(),
       $color: column.color,
       $minWidth: column.minWidth,
       $maxWidth: column.maxWidth
-    }, formattedValue);
+    }, column.fieldType?.toLowerCase() === "text" || column.fieldType?.toLowerCase() === "currency" || column.fieldType?.toLowerCase() === "number" || column.fieldType?.toLowerCase() === "percentage" || column.fieldType?.toLowerCase() === "date" || !column.fieldType ? /*#__PURE__*/React$1.createElement(ChromeShimmerText, {
+      text: shimmerText,
+      isShimmering: isShimmering
+    }) : formattedValue);
   })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
     $expandedBackgroundColor: expandedBackgroundColor
   }, /*#__PURE__*/React$1.createElement(TableCell, {
@@ -40158,7 +40404,7 @@ TableBody.propTypes = {
   onHeaderCheckboxClick: PropTypes.func,
   ref: PropTypes.object
 };
-TableBody.displayName = 'TableBody';
+TableBody.displayName = "TableBody";
 
 var nm$1 = "calendar_lottie";
 var ddd$1 = 0;
@@ -43481,6 +43727,7 @@ const Table = props => {
     children = null,
     tableBodyHeight = '728px',
     isLoading = false,
+    isLoadingSpinner = false,
     isLoadingText = 'Loading Events...',
     onLastRowsReached = () => {},
     lastRowsThreshold = 3,
@@ -43687,7 +43934,9 @@ const Table = props => {
     },
     animationData: LoadingAnimation,
     loop: true
-  }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText)))));
+  }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText)), isLoadingSpinner && /*#__PURE__*/React$1.createElement(LoaderWrapper, {
+    id: "LoaderWrapper"
+  }, /*#__PURE__*/React$1.createElement(Loader, null)))));
 };
 
 // Add displayName for better debugging
@@ -43773,11 +44022,12 @@ const VendorListWrapper$2 = styled$1.div`
 const VendorList$2 = styled$1.div`
 `;
 const VendorItem$1 = styled$1.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: 15% 70% 15%;  
   align-items: center;
-  justify-content: space-between;
   padding: 16px 8px;
   border-bottom: 1px solid #f2f2f2;
+  width: ${props => `${Number(props.width.replace('px', '')) - 16}px` || "100%"};
   cursor: pointer;
   
   &:hover {
@@ -43794,6 +44044,10 @@ const VendorName$2 = styled$1.div`
   color: #212121;
   font-size: 16px;
   font-weight: 500;
+  overflow: hidden;
+  max-width: 90%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 styled$1.div`
   color: #b0b0b0;
@@ -43803,18 +44057,24 @@ styled$1.div`
 const VendorChevron$1 = styled$1.div`
   align-items: center;
   display: flex;
+  width: 15%;
+
 `;
 const VendorNameAndPackagesContainer$1 = styled$1.div`
   display: flex;
   margin-left: 12px;
   flex-direction: column;
   align-items: flex-start;
+  width: 85%;
+  min-width: 85%;
 `;
 const DotContainer = styled$1.div`
   text-align: center;
   margin-top: 10px;
   width: 40px;
-  height: 100%;
+  height: 40px;
+  min-height: 40px;
+  min-width: 40px;
 `;
 const LineContainer = styled$1.div`
   display: flex;
@@ -43829,7 +44089,7 @@ const ButtonContainer = styled$1.div`
     }
   }
 `;
-const CustomTooltip = styled$1(Tooltip$2)`
+const CustomTooltip$1 = styled$1(Tooltip$2)`
   .controls {
     padding: 12px 16px;
     font-size: 14px;
@@ -43910,6 +44170,8 @@ const baseIconWrapperStyles = css`
   justify-content: center;
   width: 24px;
   height: 24px;
+  min-height: 24px;
+  min-width: 24px;
   padding: 0 12px;
   cursor: pointer;
   svg {
@@ -44146,7 +44408,7 @@ const NewSubitemContainer$1 = styled(Card)`
   padding: 0;
   width: 100%;
   height: 100%;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   overflow: hidden;
 `;
 const SelectionTitle$1 = styled.span`
@@ -44247,7 +44509,8 @@ const Container = styled.div`
   width: 100%;
 `;
 const Item$1 = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: 15% 70% 15%;
   align-items: center;
   justify-content: space-between;
   padding: 8px 16px;
@@ -44255,23 +44518,29 @@ const Item$1 = styled.div`
   cursor: pointer;
   &:hover {
     background: #f7f7fa;
-      .trash-icon svg path {
-      fill: #B1B1B1;
+    .trash-icon svg path {
+      fill: #b1b1b1;
     }
   }
 `;
 const Title$2 = styled.div`
-overflow: hidden;
-color: #000;
-text-overflow: ellipsis;
-margin-right: auto;
-/* Content/P2 Regular */
-font-size: 14px;
-font-weight: 400;
+  font-size: 14px;
+  overflow: hidden;
+  color: #000;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+  width: 95%;
+  max-width: 70%;
+  text-align: start;
+  margin-right: auto;
+  font-size: 14px;
+  font-weight: 400;
+  font-weight: 400;
 `;
 const ComponentContainer = styled.div`
   border-radius: 48px;
-  background:  #F7D7BD;
+  background: #f7d7bd;
   display: flex;
   width: 24px;
   height: 24px;
@@ -44304,17 +44573,133 @@ styled.div`
   svg {
     pointer-events: none;
   }
-  
+
   svg path {
     fill: white;
   }
-  
+
   &:hover {
     svg path {
       fill: #066768 !important;
     }
   }
 `;
+const CustomTooltip = styled(Tooltip$2)`
+  .controls {
+    padding: 12px 16px;
+    font-size: 14px;
+    left: 0;
+    &::before {
+      left: 90%;
+    }
+  }
+`;
+
+/* Custom properties */
+styled.div`
+  --tooltip-text-color: white;
+  --tooltip-background-color: rgba(0, 0, 0, 0.9);
+  --tooltip-margin: 30px;
+  --tooltip-arrow-size: 6px;
+`;
+
+/* Text wrapper with ellipsis */
+styled.div`
+  display: inline-block;
+  position: relative;
+  cursor: ${props => props.isOverflowing ? 'help' : 'default'};
+`;
+styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: ${props => props.maxWidth}px;
+`;
+
+/* Absolute positioning */
+styled.div`
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  position: absolute;
+  border-radius: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 12px;
+  color: var(--tooltip-text-color);
+  background: var(--tooltip-background-color);
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.4;
+  z-index: 99999;
+  max-width: 300px;
+  white-space: normal;
+  word-wrap: break-word;
+  opacity: ${props => props.show ? 1 : 0};
+  visibility: ${props => props.show ? 'visible' : 'hidden'};
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
+  
+  /* CSS border triangles */
+  &.controls::before {
+    content: " ";
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: var(--tooltip-arrow-size);
+    margin-left: calc(var(--tooltip-arrow-size) * -1);
+  }
+
+  &.controls.top {
+    bottom: calc(100% + var(--tooltip-margin));
+    transform: translateX(-50%) ${props => props.show ? 'translateY(0)' : 'translateY(-4px)'};
+  }
+
+  /* CSS border triangles */
+  &.controls.top::before {
+    top: 100%;
+    border-top-color: var(--tooltip-background-color);
+  }
+
+  &.controls.right {
+    left: calc(100% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateY(-50%) ${props => props.show ? 'translateX(0)' : 'translateX(-4px)'};
+  }
+
+  /* CSS border triangles */
+  &.controls.right::before {
+    left: calc(var(--tooltip-arrow-size) * -1);
+    top: 50%;
+    transform: translateY(-50%);
+    border-right-color: var(--tooltip-background-color);
+  }
+
+  &.controls.bottom {
+    top: calc(100% + var(--tooltip-margin));
+    transform: translateX(-50%) ${props => props.show ? 'translateY(0)' : 'translateY(4px)'};
+  }
+
+  /* CSS border triangles */
+  &.controls.bottom::before {
+    bottom: 100%;
+    border-bottom-color: var(--tooltip-background-color);
+  }
+
+  &.controls.left {
+    right: calc(100% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateY(-50%) ${props => props.show ? 'translateX(0)' : 'translateX(4px)'};
+  }
+
+  /* CSS border triangles */
+  &.controls.left::before {
+    right: calc(var(--tooltip-arrow-size) * -1);
+    top: 50%;
+    transform: translateY(-50%);
+    border-left-color: var(--tooltip-background-color);
+  }
+`;
 
 const NewSubitemList = props => {
   const {
@@ -44326,6 +44711,7 @@ const NewSubitemList = props => {
     setItemAndPackage,
     linkColor
   } = props;
+  const [isHovered, setIsHovered] = useState(false);
   const vendorItems = itemAndPackage.find(i => i.name === vendor.name).packages || [];
   const onDeletePackage = item => {
     const updatedPackages = vendorItems.filter(pkg => pkg.brands !== item.brands);
@@ -44343,6 +44729,28 @@ const NewSubitemList = props => {
     setSelectedPackage(item);
     handleSubitemDetail(item); // Pass the package object for editing
   };
+
+  // useEffect(() => {
+  //   console.log("Vendor items updated:", vendorItems);
+  //   console.log("Props:", props);
+  // }, [vendorItems]);
+  const setupTooltip = (el, tooltipText) => {
+    if (el && tooltipText) {
+      const rect = el.getBoundingClientRect();
+      const {
+        offset,
+        height
+      } = calculateTooltipOffset(tooltipText);
+      el.style.setProperty("--tooltip-top", `${rect.top}px`);
+      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.setAttribute("data-tooltip", tooltipText);
+    }
+  };
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
   return /*#__PURE__*/React$1.createElement(NewSubitemContainer$1, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(BackButton$1, {
     onClick: onBack
   }, /*#__PURE__*/React$1.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React$1.createElement(BackTitle$1, null, "All Vendors")), /*#__PURE__*/React$1.createElement(SelectionTitle$1, null, vendor.name), /*#__PURE__*/React$1.createElement(AddButtonContainer, null, /*#__PURE__*/React$1.createElement(LinkButton, {
@@ -44355,11 +44763,23 @@ const NewSubitemList = props => {
     type: "primary"
   })), /*#__PURE__*/React$1.createElement(List, null, vendorItems.map((item, idx) => /*#__PURE__*/React$1.createElement(Item$1, {
     key: `item-${idx}-${item.brands}`
-  }, /*#__PURE__*/React$1.createElement(PaperPlane, null), /*#__PURE__*/React$1.createElement(Container, {
+  }, /*#__PURE__*/React$1.createElement(PaperPlane, {
+    ref: el => setupTooltip(el, "Package was Sent")
+  }, /*#__PURE__*/React$1.createElement(CustomTooltip, {
+    hideTooltip: isHovered,
+    content: "Package was Sent",
+    topFactor: 0,
+    direction: "right"
+  }, item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(PackageSendIcon, {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }) : /*#__PURE__*/React$1.createElement("div", null), " ")), /*#__PURE__*/React$1.createElement(Container, {
     onClick: e => {
       handleEditExistingPackage(item);
     }
-  }, item.brands && /*#__PURE__*/React$1.createElement(Title$2, null, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+  }, item.brands && /*#__PURE__*/React$1.createElement(Title$2, {
+    title: item.brands
+  }, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
     className: "trash-icon-disabled"
 
     // ref={(el) => setupTooltip(el, trashTooltipText)}
@@ -44623,6 +45043,7 @@ const Overlay$1 = styled.div`
 const HeaderContainer = styled.div`
   color: #212121;
   padding: 40px 16px;
+  height: 25%;
   border-bottom: 1px solid #e2e2e2;
 `;
 const Title$1 = styled.h5`
@@ -44637,6 +45058,8 @@ const Subtitle = styled.p`
 `;
 const Dialog = styled.div`
   background: #fff;
+  height: 75%;
+  overflow: auto;
 `;
 const VendorSection = styled.div`
   padding: 16px;
@@ -44665,13 +45088,15 @@ const VendorName = styled.span`
   font-weight: 500;
 `;
 const NewBadge = styled.span`
-  background: #ffe2b6;
-  color: #9c6b00;
+  background: #F7D7BD;
   border-radius: 16px;
   padding: 2px 10px;
   margin-left: 4px;
   font-size: 14px;
   font-weight: 500;
+  color: #000;
+  font-family: Poppins;
+  font-style: normal;
 `;
 const PackageList = styled.ul`
   margin: 0 0 0 16px;
@@ -44813,10 +45238,11 @@ const DividerLine = styled.div`
 `;
 const Tooltip = styled.div`
   visibility: hidden;
-  background: #222;
-  color: #fff;
+  background: #ffffff;
+  color: #212121;
   text-align: center;
   border-radius: 6px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
   padding: 6px 12px;
   position: absolute;
   bottom: 120%;
@@ -44839,7 +45265,7 @@ const Tooltip = styled.div`
     transform: translateX(-50%);
     border-width: 6px;
     border-style: solid;
-    border-color: #222 transparent transparent transparent;
+    border-color: #ffffffff transparent transparent transparent;
   }
 `;
 const ExpandButtonWrapper = styled.div`
@@ -53254,7 +53680,7 @@ const ItemManagerPanel = _ref => {
     linkColor = "#212121",
     backgroundColor = 'white',
     buttonTooltipText = "Please fill out all forms before sending.",
-    trashTooltipText = 'Package cannot be deleted since it has been sent to the vendor as a form.',
+    trashTooltipText = 'Package cannot be deleted since it<br/> has been sent to the vendor as a form.',
     maxVisibleVendors = 12,
     componentText = "Scale"
   } = _ref;
@@ -53262,6 +53688,7 @@ const ItemManagerPanel = _ref => {
   const [selectedVendor, setSelectedVendor] = useState(null);
   const [selectedPackage, setSelectedPackage] = useState(null);
   const [isEditingExisting, setIsEditingExisting] = useState(false);
+  const [trashIsHovered, setTrashIsHovered] = useState(false);
   const [headerHeight, setHeaderHeight] = useState(0);
   const headerRef = useRef(null);
   useEffect(() => {
@@ -53284,21 +53711,6 @@ const ItemManagerPanel = _ref => {
     setSelectedVendor(modifiedVendor);
     setScreen("subitem");
   };
-  const setupTooltip = (el, tooltipText) => {
-    if (el && tooltipText) {
-      const rect = el.getBoundingClientRect();
-      const {
-        offset,
-        height
-      } = calculateTooltipOffset(tooltipText);
-      el.style.setProperty('--tooltip-top', `${rect.top}px`);
-      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.setAttribute('data-tooltip', tooltipText);
-    }
-  };
   const addNewPackage = (vendorName, packageName, component) => {
     setItemAndPackage(prev => {
       const vendorIndex = prev.findIndex(item => item.name === vendorName);
@@ -53467,6 +53879,8 @@ const ItemManagerPanel = _ref => {
       onVendorClick: handleVendorClick
     }));
   }
+  const handleMouseEnter = () => setTrashIsHovered(true);
+  const handleMouseLeave = () => setTrashIsHovered(false);
   if (screen === "initial") {
     return /*#__PURE__*/React$1.createElement(Card, {
       width: width,
@@ -53474,7 +53888,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, 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$1, {
       hideTooltip: !disabledSendForms,
       content: buttonTooltipText,
       topFactor: 2,
@@ -53511,25 +53925,32 @@ const ItemManagerPanel = _ref => {
       const packagesLength = item.packages.length;
       const sentPackagesLength = item.packages.filter(pkg => hasValidStatus(pkg) && !draftPackages(pkg)).length;
       return /*#__PURE__*/React$1.createElement(VendorItem$1, {
-        key: idx
+        key: idx,
+        width: width
       }, /*#__PURE__*/React$1.createElement(DotContainer, null, packagesLength === 0 && /*#__PURE__*/React$1.createElement(RedDot, null)), /*#__PURE__*/React$1.createElement(LineContainer, {
         onClick: e => {
           handleVendorClick(item);
         }
-      }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
+      }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, {
+        title: item.name
+      }, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
         const noPackagesSent = sentPackagesLength === 0;
         if (noPackagesSent) {
           return `0/${packagesLength} Packages Sent`;
         } else {
           return `${sentPackagesLength}/${packagesLength} Packages Sent`;
         }
-      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
-        className: "trash-icon-disabled",
-        ref: el => setupTooltip(el, trashTooltipText)
+      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, null, /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
+        hideTooltip: trashIsHovered,
+        content: trashTooltipText,
+        topFactor: 0,
+        direction: "left"
       }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         width: "22",
         height: "22"
-      })) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
+      }))) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
         className: "trash-icon",
         onClick: e => {
           e.stopPropagation();