sag_components 2.0.0-beta111 → 2.0.0-beta113

package/dist/index.esm.js

@@ -2216,7 +2216,11 @@ const Tooltip$2 = props => {
   }, children, active && !hideTooltip && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
     className: `controls ${direction || 'top'}`,
     topFactor: topFactor
-  }, content)));
+  }, typeof content === 'string' ? /*#__PURE__*/React$1.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  }) : content)));
 };
 
 /* Benchmark */
@@ -3058,7 +3062,7 @@ const LinkButton = _ref => {
     height = '',
     width = '',
     disabled = false,
-    textColor = '',
+    textColor = '#229E38',
     onClick,
     leftIcon = 'none',
     rightIcon = 'none'
@@ -3088,7 +3092,7 @@ const LinkButton = _ref => {
   const getIcon = icon => {
     const iconHeight = size === 'small' ? '12px' : '13px';
     const iconWidth = size === 'small' ? '12px' : '13px';
-    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#229E38');
+    const newTextColor = type === 'secondary' ? '#212121' : textColor;
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
@@ -26095,7 +26099,7 @@ const TotalDoughnutChart = props => {
     key: `cell-${row.name}`,
     fill: row.color
   }))), /*#__PURE__*/React$1.createElement(Tooltip$3, {
-    content: /*#__PURE__*/React$1.createElement(CustomTooltip, {
+    content: /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
       value: value,
       isPercent: isPercent
     })
@@ -26164,7 +26168,7 @@ TotalDoughnutChart.defaultProps = {
   noDataText: 'No Data',
   textAfterValue: ''
 };
-function CustomTooltip(_ref) {
+function CustomTooltip$1(_ref) {
   let {
     active,
     payload,
@@ -26177,7 +26181,7 @@ function CustomTooltip(_ref) {
     return /*#__PURE__*/React$1.createElement(TooltipDiv$6, null, /*#__PURE__*/React$1.createElement(TooltipLabel$6, null, `${payload[0].name} ${percent}%`));
   }
 }
-CustomTooltip.propTypes = {
+CustomTooltip$1.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   active: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
@@ -26187,7 +26191,7 @@ CustomTooltip.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   isPercent: PropTypes.any
 };
-CustomTooltip.defaultProps = {
+CustomTooltip$1.defaultProps = {
   active: '',
   payload: '',
   value: '',
@@ -35866,9 +35870,12 @@ const TableContainer = styled.div`
     ${scrollableStyles$1}
 `;
 const TableBodyScrollWrapper = styled.div`
+    height: ${props => props.tableBodyHeight || '728px'};
+    min-height: ${props => props.tableBodyHeight || '728px'};
     max-height: ${props => props.tableBodyHeight || '728px'};
     overflow-y: auto;
     overflow-x: ${props => props.showHorizontalScroll ? 'auto' : 'hidden'};
+    position: relative;
     
     &::-webkit-scrollbar {
         height: 8px;
@@ -36347,6 +36354,7 @@ const FieldPop = props => {
   }, "\xD7")));
 };
 
+// FilterPop.style.js 
 const FilterPopContainer = styled.div`
     font-family: 'Poppins', sans-serif;
     width: ${props => props.width || '300px'};
@@ -36356,6 +36364,13 @@ const FilterPopContainer = styled.div`
     background-color: #fff;
     border-radius: 4px;
     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
+    
+    /* Add this CSS for checkbox styling */
+    input[type="checkbox"] {
+        accent-color: ${props => props.accentColor || '#066768'};
+        width: 16px;
+        height: 16px;
+    }
 `;
 const Title$5 = styled.h6`
     font-size: 16px;
@@ -36378,6 +36393,12 @@ const CheckboxLabel = styled.label`
   font-size: 14px;
   font-weight: 400;
   color: #212121;
+  cursor: pointer;
+  
+  &:hover {
+    background-color: #E6F0F0;   
+  }
+  
   > span {
     width: ${props => props.width};
     white-space: nowrap;
@@ -36397,9 +36418,11 @@ const ResetButton$1 = styled.button`
     cursor: pointer;
 
   &:hover {
+    // color: #066768;
   }
 
   &:active {
+    // color: #066768;
   }
 `;
 
@@ -36432,22 +36455,8 @@ const FilterPop = props => {
     return initialState;
   };
 
-  // Use the passed selectedAttributes from parent, fallback to initial state if empty
-  const [selectedAttributes, setSelectedAttributes] = useState(() => {
-    // If propSelectedAttributes has values, use it; otherwise use initial state
-    const hasValues = Object.keys(propSelectedAttributes).length > 0;
-    return hasValues ? propSelectedAttributes : createInitialState();
-  });
-
-  // Use ref to track if we're programmatically updating to avoid loops
-  const isProgrammaticUpdate = useRef(false);
-
-  // Sync with parent's selectedAttributes when they change
-  useEffect(() => {
-    if (Object.keys(propSelectedAttributes).length > 0) {
-      setSelectedAttributes(propSelectedAttributes);
-    }
-  }, [propSelectedAttributes]);
+  // Use props directly, fallback to initial state only if props are empty
+  const selectedAttributes = Object.keys(propSelectedAttributes).length > 0 ? propSelectedAttributes : createInitialState();
 
   // Helper function to get non-"All" items
   const getNonAllItems = () => {
@@ -36505,19 +36514,16 @@ const FilterPop = props => {
     }
   };
   const handleCheckboxChange = attribute => {
-    // console.log(`Checkbox changed: ${attribute}`);
-
     if (attribute === 'All') {
-      // If "Select All" is clicked
-      const newState = !selectedAttributes.All;
+      // If "Select All" is clicked - determine new state based on current "Select All" state
+      const currentSelectAllState = selectedAttributes.All || false;
+      const newState = !currentSelectAllState;
       const updatedAttributes = {};
 
       // Set all items to the same state as "Select All"
       fullList.forEach(item => {
         updatedAttributes[item.value] = newState;
       });
-      isProgrammaticUpdate.current = true;
-      setSelectedAttributes(updatedAttributes);
 
       // Call onCheck callback with new efficient structure
       const filterData = createFilterData(updatedAttributes);
@@ -36533,14 +36539,8 @@ const FilterPop = props => {
         [attribute]: !selectedAttributes[attribute]
       };
 
-      // Don't automatically update "Select All" here - let useEffect handle it
-      setSelectedAttributes(updatedAttributes);
-
       // Call onCheck callback with new efficient structure
       const filterData = createFilterData(updatedAttributes);
-      // console.log('Just checked/unchecked:', attribute);
-      // console.log('Filter data:', filterData);
-
       onCheck({
         changedItem: attribute,
         filterData: filterData,
@@ -36548,40 +36548,9 @@ const FilterPop = props => {
       });
     }
   };
-
-  // Update "Select All" state based on other selections
-  useEffect(() => {
-    // Skip if this was a programmatic update
-    if (isProgrammaticUpdate.current) {
-      isProgrammaticUpdate.current = false;
-      return;
-    }
-    const selectAllItem = fullList.find(item => item.value === 'All');
-    if (!selectAllItem) return;
-    const allSelected = areAllNonAllItemsSelected();
-    const currentSelectAllState = selectedAttributes.All;
-
-    // Only update "Select All" if its state should actually change
-    if (allSelected !== currentSelectAllState) {
-      const updatedAttributes = {
-        ...selectedAttributes,
-        [selectAllItem.value]: allSelected
-      };
-      setSelectedAttributes(updatedAttributes);
-
-      // Also notify parent of the change with new efficient structure
-      const filterData = createFilterData(updatedAttributes);
-      onCheck({
-        changedItem: 'selectAll',
-        filterData: filterData,
-        allItems: updatedAttributes
-      });
-    }
-  }, [Object.keys(selectedAttributes).filter(key => key !== 'All').map(key => selectedAttributes[key]).join(',')]);
   const handleReset = () => {
     // Reset to the original default state (all selected)
     const resetState = createInitialState();
-    setSelectedAttributes(resetState);
 
     // Call the onReset callback
     onReset();
@@ -36624,7 +36593,8 @@ const FilterPop = props => {
   })];
   return /*#__PURE__*/React$1.createElement(FilterPopContainer, {
     width: width,
-    height: height
+    height: height,
+    accentColor: color // Pass color as prop to styled component
   }, /*#__PURE__*/React$1.createElement(Title$5, null, menuName), /*#__PURE__*/React$1.createElement(CheckboxGroup, {
     style: {
       display: doubleColumn ? 'grid' : 'flex',
@@ -36634,19 +36604,29 @@ const FilterPop = props => {
   }, sortedList.map(item => {
     const isSelectAll = item.value === 'All';
     const checkboxProps = isSelectAll ? getSelectAllCheckboxProps() : {};
+    const isChecked = isSelectAll ? checkboxProps.checked : selectedAttributes[item.value] || false;
     return /*#__PURE__*/React$1.createElement(CheckboxLabel, {
       width: !doubleColumn ?? width,
-      key: item.value
+      key: `${item.value}-${JSON.stringify(selectedAttributes)}`
     }, /*#__PURE__*/React$1.createElement("input", {
       type: "checkbox",
-      checked: isSelectAll ? checkboxProps.checked : selectedAttributes[item.value] || false,
-      style: {
-        accentColor: color
+      checked: isChecked,
+      ref: el => {
+        if (el) {
+          // Handle indeterminate for Select All FIRST
+          if (isSelectAll) {
+            el.indeterminate = checkboxProps.indeterminate;
+          }
+
+          // FORCE DOM SYNC - manually set DOM state to match React state
+          if (el.checked !== isChecked) {
+            el.checked = isChecked;
+          }
+        }
       },
-      ref: isSelectAll ? el => {
-        if (el) el.indeterminate = checkboxProps.indeterminate;
-      } : null,
-      onChange: () => handleCheckboxChange(item.value)
+      onChange: e => {
+        handleCheckboxChange(item.value);
+      }
     }), /*#__PURE__*/React$1.createElement("span", null, item.label));
   })), /*#__PURE__*/React$1.createElement(ButtonWrapper$2, null, /*#__PURE__*/React$1.createElement(ResetButton$1, {
     onClick: handleReset,
@@ -37240,7 +37220,9 @@ const TableHeader = ({
     // Remove onSort call - we only want to call it when selection is made
   };
   useEffect(() => {
-    onFilter(filterState);
+    if (Object.keys(filterState).length > 0) {
+      onFilter(filterState);
+    }
   }, [filterState]);
   const handleFilter = key => {
     const iconElement = iconRefs.current[`filter-${key}`];
@@ -37281,25 +37263,25 @@ const TableHeader = ({
     }
   };
 
-  // Handle filter selection changes - Updated to work with new FilterPop data structure
+  // Handle filter selection changes - Updated to work with stateless FilterPop
   const handleFilterSelectionChange = (columnKey, selectionData) => {
-    // Store the filter selections (keeping existing structure for UI state)
-    setFilterSelections(prev => ({
-      ...prev,
-      [columnKey]: selectionData.allItems
-    }));
+    // Force immediate synchronous update using callback form
+    setFilterSelections(prev => {
+      const updated = {
+        ...prev,
+        [columnKey]: selectionData.allItems
+      };
+      return updated;
+    });
 
-    // Update the filter state with the new efficient structure
-    const {
-      filterData
-    } = selectionData;
+    // Also update filter state
     setFilterState(prev => ({
       ...prev,
-      [columnKey]: filterData
+      [columnKey]: selectionData.filterData
     }));
   };
 
-  // Handle filter reset - Updated to work with new FilterPop data structure
+  // Handle filter reset - Updated to work with stateless FilterPop
   const handleFilterReset = columnKey => {
     const column = columns.find(col => col.key === columnKey);
     if (column && column.filterOptions) {
@@ -37311,6 +37293,8 @@ const TableHeader = ({
       fullList.forEach(item => {
         resetState[item.value] = true;
       });
+
+      // Update filter selections immediately
       setFilterSelections(prev => ({
         ...prev,
         [columnKey]: resetState
@@ -37410,7 +37394,7 @@ const TableHeader = ({
     return isFocused || isActive || hasSelection;
   };
 
-  // Update showColumnFilter to use persistent selections
+  // Update showColumnFilter to pass current filterSelections to stateless FilterPop
   const showColumnFilter = column => {
     const {
       key,
@@ -41366,7 +41350,7 @@ const Table = props => {
   return /*#__PURE__*/React$1.createElement(TableWrapper, {
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
+  }, /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, data.length === 0 ? 'No Events' : `${counter} Events`)), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -41374,15 +41358,7 @@ const Table = props => {
     backgroundColor: sideButtonColor,
     hoverBackgroundColor: sideButtonHoverColor,
     onClick: onSideButtonClick
-  })), children, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React$1.createElement(Button$1, {
-    height: "45px",
-    leftIcon: "Plus",
-    text: "New Event",
-    borderRadius: "12px",
-    backgroundColor: buttonColor,
-    hoverBackgroundColor: buttonHoverColor,
-    onClick: onButtonClick
-  })) : /*#__PURE__*/React$1.createElement(TableContainer, {
+  })), children, /*#__PURE__*/React$1.createElement(TableContainer, {
     showHorizontalScroll: showHorizontalScroll
   }, /*#__PURE__*/React$1.createElement(TableBodyScrollWrapper, {
     tableBodyHeight: tableBodyHeight,
@@ -41400,6 +41376,14 @@ const Table = props => {
     onSendClick: onSendClick,
     onDeleteClick: onDeleteClick,
     buttonColor: buttonColor
+  })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React$1.createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: buttonColor,
+    hoverBackgroundColor: buttonHoverColor,
+    onClick: onButtonClick
   }))), isLoading && /*#__PURE__*/React$1.createElement(LoadingWrapper, null, /*#__PURE__*/React$1.createElement(Lottie, {
     style: {
       width: "24px",
@@ -41415,7 +41399,7 @@ const Card = styled.div`
   border-radius: 8px;
   /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
   text-align: center;
-  overflow: hidden;
+  /* overflow: hidden; */ // If hidden the tooltip will not be visible
   width: ${props => props.width || "auto"};
   height: ${props => props.height || "auto"};
   margin: 0 auto;
@@ -41434,8 +41418,9 @@ const SectionTitle$1 = styled.div`
 `;
 const SubtitleContainer = styled.div`
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
+  color: #8B8989;
 `;
 const Subtitle$1 = styled.span`
   color: ${props => props.color};
@@ -41534,10 +41519,6 @@ const LineContainer = styled.div`
   width: 100%;
 `;
 const ButtonContainer$1 = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: column;
-  gap: 5px;
   margin-top: 16px;
   .ButtonContainer {
     label {
@@ -41545,6 +41526,16 @@ const ButtonContainer$1 = styled.div`
     }
   }
 `;
+const CustomTooltip = styled(Tooltip$2)`
+  .controls {
+    padding: 12px 16px;
+    font-size: 14px;
+    left: 0;
+    &::before {
+      left: 90%;
+    }
+  }
+`;
 const Container$1 = styled.div`
   display: flex;
   align-items: center;
@@ -42096,7 +42087,7 @@ styled.div`
   margin-top: 24px;
   margin-left: 8px;
 `;
-const Divider$1 = styled.div`
+const Divider = styled.div`
   height: 1px;
   background-color: #e2e2e2;
   margin: 16px 0;
@@ -42169,7 +42160,7 @@ const NewSubitem = ({
     type: "primary",
     backgroundColor: linkColor,
     hoverTextColor: "#212121"
-  })), /*#__PURE__*/React$1.createElement(Divider$1, null), /*#__PURE__*/React$1.createElement("form", null, /*#__PURE__*/React$1.createElement(NegotiatedContainer, null, /*#__PURE__*/React$1.createElement(AddNegotiatedBrand, null, "Add Negotiated Brand/s ", /*#__PURE__*/React$1.createElement("span", {
+  })), /*#__PURE__*/React$1.createElement(Divider, null), /*#__PURE__*/React$1.createElement("form", null, /*#__PURE__*/React$1.createElement(NegotiatedContainer, null, /*#__PURE__*/React$1.createElement(AddNegotiatedBrand, null, "Add Negotiated Brand/s ", /*#__PURE__*/React$1.createElement("span", {
     style: {
       color: "red"
     }
@@ -42203,47 +42194,34 @@ const NewSubitem = ({
 };
 
 const Overlay$1 = styled.div`
-  display: flex;
-  flex-direction: column;
+  font-family: Poppins;
   background: #f7f8fa;
   width: ${props => props.width || "100%"};
   height: ${props => props.height || "100%"};
   overflow: hidden;
+  text-align: left;
 `;
-const Dialog = styled.div`
-  background: #fff;
-  border-radius: 12px;
-  height: 100%;
-  padding: 32px 24px;
+const HeaderContainer = styled.div`
+  color: #212121;
+  padding: 40px 16px;
+  border-bottom: 1px solid #e2e2e2;
 `;
-const Title$1 = styled.h2`
-  color: var(--Text-Primary, #212121);
-  font-feature-settings: "liga" off;
-  /* Headings/H3 Medium */
-  font-family: Poppins;
+const Title$1 = styled.h5`
   font-size: 32px;
-  font-style: normal;
   font-weight: 700;
-  line-height: normal;
+  margin: 0 0 20px;
 `;
 const Subtitle = styled.p`
-  color: var(--Text-Primary, #212121);
-  font-feature-settings: "liga" off;
-  /* Headings/H6 Regular */
-  font-family: Poppins;
   font-size: 18px;
-  font-style: normal;
   font-weight: 400;
-  line-height: normal;
+  margin: 0 0 20px;
 `;
-const VendorSection = styled.div`
-  margin-bottom: 20px;
+const Dialog = styled.div`
+  background: #fff;
 `;
-const Divider = styled.div`
-  height: 1px;
-  background-color: #e2e2e2;
-  margin: 16px 0;
-  width: 100%;
+const VendorSection = styled.div`
+  padding: 16px;
+  border-bottom: 1px solid #e2e2e2;
 `;
 const Item = styled.li`
   color: black; /* text color */
@@ -42264,12 +42242,8 @@ const VendorName = styled.span`
   margin-right: 10px;
   overflow: hidden;
   color: #000;
-
-  font-family: Poppins;
   font-size: 16px;
-  font-style: normal;
   font-weight: 500;
-  line-height: normal;
 `;
 const NewBadge = styled.span`
   background: #ffe2b6;
@@ -42277,40 +42251,23 @@ const NewBadge = styled.span`
   border-radius: 16px;
   padding: 2px 10px;
   margin-left: 4px;
-  color: #000;
-  font-feature-settings: "liga" off;
-  font-family: Poppins;
   font-size: 14px;
-  font-style: normal;
   font-weight: 500;
-  line-height: normal;
 `;
 const PackageList = styled.ul`
   margin: 0 0 0 16px;
   padding: 0;
   gap: 30px;
   list-style: disc;
-  color: #888;
-  color: var(--General-Black, #212121);
-  font-feature-settings: "liga" off;
-  font-family: Poppins;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
-  line-height: normal;
 `;
 const ButtonRow = styled.div`
   display: flex;
-  justify-content: flex-start;
   gap: 12px;
-  flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
 `;
-const HeaderContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-`;
 
 const ConfirmationDialog = ({
   width,
@@ -42321,39 +42278,43 @@ const ConfirmationDialog = ({
   linkColor
 }) => {
   const totalNew = vendors.reduce((sum, v) => sum + (v.newPackages?.length || 0), 0);
+  const confirmationText = `You are about to send the following 
+    ${totalNew} new ${totalNew === 1 ? 'package' : 'packages'} to 
+    ${vendors.length} ${vendors.length === 1 ? 'vendor' : 'vendors'}:`;
   return /*#__PURE__*/React$1.createElement(Overlay$1, {
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(HeaderContainer, null, /*#__PURE__*/React$1.createElement(Title$1, null, "Confirmation"), /*#__PURE__*/React$1.createElement(Subtitle, null, "You are about to send the following ", totalNew, " new packages to these ", vendors.length, " vendors:"), /*#__PURE__*/React$1.createElement(ButtonRow, null, /*#__PURE__*/React$1.createElement(Button$1, {
+  }, /*#__PURE__*/React$1.createElement(HeaderContainer, null, /*#__PURE__*/React$1.createElement(Title$1, null, "Confirmation"), /*#__PURE__*/React$1.createElement(Subtitle, null, confirmationText), /*#__PURE__*/React$1.createElement(ButtonRow, null, /*#__PURE__*/React$1.createElement(Button$1, {
     leftIcon: "none",
     onClick: onCancel,
     rightIcon: "none",
-    size: "small",
+    size: "",
     text: "Cancel",
     type: "secondary"
   }), /*#__PURE__*/React$1.createElement(Button$1, {
     leftIcon: "none",
     onClick: onConfirm,
     rightIcon: "none",
-    size: "small",
+    size: "",
     text: "Confirm & Send",
     type: "primary",
+    borderColor: linkColor,
     backgroundColor: linkColor,
     hoverTextColor: "#212121"
   }))), /*#__PURE__*/React$1.createElement(Dialog, null, vendors.map((vendor, idx) => /*#__PURE__*/React$1.createElement(VendorSection, {
     key: vendor.name
   }, /*#__PURE__*/React$1.createElement(VendorHeader, null, /*#__PURE__*/React$1.createElement(VendorName, null, vendor.name), /*#__PURE__*/React$1.createElement(NewBadge, null, vendor.newPackages.length, " New")), /*#__PURE__*/React$1.createElement(PackageList, null, vendor.newPackages.map((pkg, i) => /*#__PURE__*/React$1.createElement(Item, {
     key: i
-  }, pkg))), /*#__PURE__*/React$1.createElement(Divider, null)))));
+  }, pkg)))))));
 };
 
 const SuccessScreenContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+  font-family: Poppins;
   background:rgb(255, 255, 255);
   width: ${props => props.width || "100%"};
   height: ${props => props.height || "100%"};
   overflow: hidden;
+  text-align: left;
 `;
 const SuccessHeader = styled.div`
   display: flex;
@@ -42361,29 +42322,19 @@ const SuccessHeader = styled.div`
   align-items: center;
   justify-content: center;
 `;
-const SuccessTitle = styled.h2`
-  color: var(--Text-Primary, #212121);
-text-align: center;
-font-feature-settings: 'liga' off;
-
-/* Headings/H3 Medium */
-font-family: Poppins;
-font-size: 32px;
-font-style: normal;
-font-weight: 700;
-line-height: normal;
+const SuccessTitle = styled.h5`
+  color: #212121;
+  text-align: center;
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0 0 20px;
 `;
 const SuccessSubtitle = styled.p`
   margin-bottom: 24px;
 text-align: center;
-color: var(--Text-Primary, #212121);
-font-feature-settings: 'liga' off;
-/* Content/P1 Regular */
-font-family: Poppins;
+  color: #212121;
 font-size: 16px;
-font-style: normal;
 font-weight: 400;
-line-height: normal;
 `;
 styled.div`
   display: flex;
@@ -50857,8 +50808,6 @@ const SuccessScreen = ({
   }, vendor, /*#__PURE__*/React$1.createElement("br", null)))))));
 };
 
-// Removed TypeScript interface and type annotations
-
 const ItemManagerPanel = _ref => {
   let {
     width = "100%",
@@ -50871,7 +50820,7 @@ const ItemManagerPanel = _ref => {
     setItemAndPackage,
     linkColor = "#212121",
     backgroundColor = 'white',
-    onDelete = () => {}
+    buttonTooltipText = "Please fill out all forms before sending."
   } = _ref;
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -50904,9 +50853,6 @@ const ItemManagerPanel = _ref => {
     });
     setScreen("subitem");
   };
-  const handleBackToDefault = () => {
-    setScreen("");
-  };
   const onDeleteVendor = vendor => {
     const updatedItemAndPackage = itemAndPackage.filter(item => item.name !== vendor.name);
     setItemAndPackage([...updatedItemAndPackage, {
@@ -50914,6 +50860,21 @@ const ItemManagerPanel = _ref => {
       packages: null
     }]);
   };
+  const hasUnisentPackages = useMemo(() => {
+    return itemAndPackage.some(vendor => {
+      if (vendor.packages === null || !Array.isArray(vendor.packages)) {
+        return false;
+      }
+      return vendor.packages.some(pkg => !pkg.hasOwnProperty('status') || pkg.status == null || pkg.status === undefined || pkg.status === '');
+    });
+  }, [itemAndPackage]);
+  const actuallyAllFormsSent = AllFormsSent && !hasUnisentPackages;
+  useEffect(() => {
+    if (screen === "success" && onSendForms) {
+      onSendForms();
+    }
+  }, [screen]); // Only run when screen changes
+
   if (screen === "subitem") {
     return /*#__PURE__*/React$1.createElement(Card, {
       width: width,
@@ -50934,8 +50895,9 @@ const ItemManagerPanel = _ref => {
     return /*#__PURE__*/React$1.createElement(ConfirmationDialog, {
       width: width,
       height: height,
-      onCancel: () => setScreen(undefined),
+      onCancel: () => setScreen("initial"),
       onConfirm: () => setScreen("success"),
+      linkColor: linkColor,
       vendors: itemAndPackage.filter(item => item.packages !== null).map(item => {
         return {
           name: item.name,
@@ -50945,9 +50907,6 @@ const ItemManagerPanel = _ref => {
     });
   }
   if (screen === "success") {
-    if (onSendForms) {
-      onSendForms();
-    }
     return /*#__PURE__*/React$1.createElement(SuccessScreen, {
       width: width,
       height: height,
@@ -50976,7 +50935,7 @@ const ItemManagerPanel = _ref => {
       height: height,
       backgroundColor: backgroundColor
     }, /*#__PURE__*/React$1.createElement(NewItemList, {
-      onBack: handleBackToDefault,
+      onBack: () => setScreen("initial"),
       itemAndPackage: itemAndPackage,
       onVendorClick: handleVendorClick
     }));
@@ -50986,7 +50945,12 @@ const ItemManagerPanel = _ref => {
       width: width,
       height: height,
       backgroundColor: backgroundColor
-    }, /*#__PURE__*/React$1.createElement(Container$1, null, /*#__PURE__*/React$1.createElement(TitleContainer, null, /*#__PURE__*/React$1.createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React$1.createElement(SubtitleContainer, null, /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React$1.createElement("span", null, "\xB7"), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0), " ", "Packages"))), editMode && /*#__PURE__*/React$1.createElement(ButtonContainer$1, null, /*#__PURE__*/React$1.createElement(Button$1, {
+    }, /*#__PURE__*/React$1.createElement(Container$1, null, /*#__PURE__*/React$1.createElement(TitleContainer, null, /*#__PURE__*/React$1.createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React$1.createElement(SubtitleContainer, null, /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React$1.createElement("span", null, "\xB7"), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0), " ", "Packages"))), editMode && /*#__PURE__*/React$1.createElement(ButtonContainer$1, null, /*#__PURE__*/React$1.createElement(CustomTooltip, {
+      hideTooltip: !disabledSendForms,
+      content: buttonTooltipText,
+      topFactor: 2,
+      direction: "bottom"
+    }, /*#__PURE__*/React$1.createElement(Button$1, {
       leftIcon: "Fly",
       onClick: () => setScreen("confirmation"),
       rightIcon: "none",
@@ -50994,10 +50958,12 @@ const ItemManagerPanel = _ref => {
       size: "small",
       text: "Send Forms",
       type: "secondary",
-      borderRadius: "8px"
-    }), /*#__PURE__*/React$1.createElement(Subtitle$1, {
-      color: AllFormsSent ? "#90CE9C" : "#8b8989"
-    }, AllFormsSent ? '✔ All Forms Sent' : `${itemAndPackage.filter(item => item.packages !== null).length.toString()} Vendors `))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
+      borderRadius: "8px",
+      borderColor: linkColor,
+      textColor: linkColor
+    })), /*#__PURE__*/React$1.createElement(Subtitle$1, {
+      color: actuallyAllFormsSent ? "#90CE9C" : "#8b8989"
+    }, actuallyAllFormsSent ? '✔ All Forms Sent' : itemAndPackage.filter(item => item.packages !== null).length > 0 ? `${itemAndPackage.filter(item => item.packages !== null).length.toString()} New Forms` : ''))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
       leftIcon: "Plus",
       onClick: () => setScreen("list"),
       rightIcon: "none",
@@ -51129,7 +51095,7 @@ const DropdownButton = styled.button`
   justify-content: space-between;
   ${props => props.disabled && css`
       color:#8B8989;
-      background-color: #D0D0D0;
+      /* background-color: #D0D0D0; */
       cursor: not-allowed;
     `}
 `;