sag_components 2.0.0-beta112 → 2.0.0-beta114

package/dist/index.js

@@ -2226,7 +2226,11 @@ const Tooltip$2 = props => {
   }, children, active && !hideTooltip && /*#__PURE__*/React__default["default"].createElement(TooltipTip$1, {
     className: `controls ${direction || 'top'}`,
     topFactor: topFactor
-  }, content)));
+  }, typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  }) : content)));
 };
 
 /* Benchmark */
@@ -3068,7 +3072,7 @@ const LinkButton = _ref => {
     height = '',
     width = '',
     disabled = false,
-    textColor = '',
+    textColor = '#229E38',
     onClick,
     leftIcon = 'none',
     rightIcon = 'none'
@@ -3098,7 +3102,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':
@@ -26105,7 +26109,7 @@ const TotalDoughnutChart = props => {
     key: `cell-${row.name}`,
     fill: row.color
   }))), /*#__PURE__*/React__default["default"].createElement(recharts.Tooltip, {
-    content: /*#__PURE__*/React__default["default"].createElement(CustomTooltip, {
+    content: /*#__PURE__*/React__default["default"].createElement(CustomTooltip$1, {
       value: value,
       isPercent: isPercent
     })
@@ -26174,7 +26178,7 @@ TotalDoughnutChart.defaultProps = {
   noDataText: 'No Data',
   textAfterValue: ''
 };
-function CustomTooltip(_ref) {
+function CustomTooltip$1(_ref) {
   let {
     active,
     payload,
@@ -26187,7 +26191,7 @@ function CustomTooltip(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(TooltipDiv$6, null, /*#__PURE__*/React__default["default"].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
@@ -26197,7 +26201,7 @@ CustomTooltip.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   isPercent: PropTypes.any
 };
-CustomTooltip.defaultProps = {
+CustomTooltip$1.defaultProps = {
   active: '',
   payload: '',
   value: '',
@@ -35200,7 +35204,7 @@ const Label$2 = styled__default["default"].label`
   margin-right: 10px; 
   z-index: 2;
   color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
-  background-color: white;
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
   left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
@@ -35217,28 +35221,26 @@ const Label$2 = styled__default["default"].label`
   }
 `;
 const InputContainer = styled__default["default"].div`
-
-    display: flex;       
-    flex-direction: row;
-    flex-wrap: nowrap; 
-    justify-content: flex-start;
-    align-content: center;     
-    white-space: pre-wrap;
-    align-items: center;
-    overflow: hidden;
-    padding: 0 16px;
-    gap: 14px;
-    width: 100%;
-    height: 100%;    
-    box-sizing: border-box;
-    background-color: #fff;
-    border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
-    font-family: "Poppins", sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
-    outline: none;
-    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
+  display: flex;       
+  flex-wrap: nowrap; 
+  justify-content: flex-start;
+  align-content: center;     
+  white-space: pre-wrap;
+  align-items: center;
+  overflow: hidden;
+  padding: 0 16px;
+  gap: 14px;
+  width: 100%;
+  height: 100%;    
+  box-sizing: border-box;
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
+  border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+  outline: none;
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
    
   &:hover {
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
@@ -35250,25 +35252,24 @@ const InputContainer = styled__default["default"].div`
   
 `;
 const InputSubContainer = styled__default["default"].div`
-
-    display: flex;       
-    flex-direction: column;
-    flex-wrap: nowrap;     
-    align-content: center; 
-    align-items: flex-start;
-    justify-content: center;
-    white-space: pre-wrap;
-    overflow: hidden;
-    padding: 5px 0;
-    width: 100%;
-    height: 100%;
-    min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
-    box-sizing: border-box;
-    background-color: #fff;    
-    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
-    outline: none;
-    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};     
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  display: flex;       
+  flex-direction: column;
+  flex-wrap: nowrap;     
+  align-content: center; 
+  align-items: flex-start;
+  justify-content: center;
+  white-space: pre-wrap;
+  overflow: hidden;
+  padding: 5px 0;
+  width: 100%;
+  height: 100%;
+  min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
+  box-sizing: border-box;
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
+  border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+  outline: none;
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};     
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
 `;
 const StyledInput = styled__default["default"].input`
   width: calc(100% - 10px);
@@ -35277,7 +35278,7 @@ const StyledInput = styled__default["default"].input`
   font-size: 14px;
   outline: none;  
   color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
-  background-color: #fff;  
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border: none;
   cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
 `;
@@ -35310,6 +35311,7 @@ const Input$2 = _ref => {
     onBlur,
     required,
     disabled,
+    isDarkerBackground = false,
     width,
     error,
     errorMessage,
@@ -35396,11 +35398,13 @@ const Input$2 = _ref => {
     className: "MainContainer",
     width: width,
     size: size,
-    disabled: disabled
+    disabled: disabled,
+    isDarkerBackground: isDarkerBackground
   }, /*#__PURE__*/React__default["default"].createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     error: error,
     isFocused: isFocused,
     size: size
@@ -35409,6 +35413,7 @@ const Input$2 = _ref => {
     ref: containerRef,
     labelColor: labelColor,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     error: error,
     onClick: handleLabelClick,
     size: size
@@ -35419,6 +35424,7 @@ const Input$2 = _ref => {
     hasValue: inputValue,
     leftIcon: leftIcon,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
@@ -35438,6 +35444,7 @@ const Input$2 = _ref => {
     onFocus: handleFocus,
     onBlur: handleBlur,
     disabled: disabled,
+    isDarkerBackground: isDarkerBackground,
     placeholder: isFocused ? placeHolder : '',
     error: error,
     isFocused: isFocused
@@ -41405,7 +41412,7 @@ const Card = styled__default["default"].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;
@@ -41424,8 +41431,9 @@ const SectionTitle$1 = styled__default["default"].div`
 `;
 const SubtitleContainer = styled__default["default"].div`
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
+  color: #8B8989;
 `;
 const Subtitle$1 = styled__default["default"].span`
   color: ${props => props.color};
@@ -41524,10 +41532,6 @@ const LineContainer = styled__default["default"].div`
   width: 100%;
 `;
 const ButtonContainer$1 = styled__default["default"].div`
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: column;
-  gap: 5px;
   margin-top: 16px;
   .ButtonContainer {
     label {
@@ -41535,6 +41539,16 @@ const ButtonContainer$1 = styled__default["default"].div`
     }
   }
 `;
+const CustomTooltip = styled__default["default"](Tooltip$2)`
+  .controls {
+    padding: 12px 16px;
+    font-size: 14px;
+    left: 0;
+    &::before {
+      left: 90%;
+    }
+  }
+`;
 const Container$1 = styled__default["default"].div`
   display: flex;
   align-items: center;
@@ -41929,6 +41943,15 @@ const NewSubitemList = props => {
     } : v);
     setItemAndPackage(updatedItemAndPackage);
   };
+  const handleAddNewPackage = () => {
+    setSelectedPackage(null);
+    handleSubitemDetail(null); // Pass null for new package
+  };
+  const handleEditExistingPackage = item => {
+    setSelectedPackage(item);
+    handleSubitemDetail(item); // Pass the package object for editing
+  };
+
   // useEffect(() => {
   //   console.log("Vendor items updated:", vendorItems);
   //   console.log("Props:", props);
@@ -41940,16 +41963,15 @@ const NewSubitemList = props => {
     textColor: linkColor,
     leftIcon: "Plus",
     rightIcon: "none",
-    onClick: handleSubitemDetail,
+    onClick: handleAddNewPackage,
     size: "small",
     text: "Add Package",
     type: "primary"
   })), /*#__PURE__*/React__default["default"].createElement(List, null, vendorItems.map((item, idx) => /*#__PURE__*/React__default["default"].createElement(Item$1, {
-    key: idx
+    key: `item-${idx}-${item.brands}`
   }, /*#__PURE__*/React__default["default"].createElement(PaperPlane, null), /*#__PURE__*/React__default["default"].createElement(Container, {
     onClick: e => {
-      setSelectedPackage(item);
-      handleSubitemDetail(item);
+      handleEditExistingPackage(item);
     }
   }, item.brands && /*#__PURE__*/React__default["default"].createElement(Title$2, null, item.brands), item.component && /*#__PURE__*/React__default["default"].createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React__default["default"].createElement(Chevron, null, /*#__PURE__*/React__default["default"].createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React__default["default"].createElement(Trash, {
     className: "trash-icon",
@@ -42086,7 +42108,7 @@ styled__default["default"].div`
   margin-top: 24px;
   margin-left: 8px;
 `;
-const Divider$1 = styled__default["default"].div`
+const Divider = styled__default["default"].div`
   height: 1px;
   background-color: #e2e2e2;
   margin: 16px 0;
@@ -42159,7 +42181,7 @@ const NewSubitem = ({
     type: "primary",
     backgroundColor: linkColor,
     hoverTextColor: "#212121"
-  })), /*#__PURE__*/React__default["default"].createElement(Divider$1, null), /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement(NegotiatedContainer, null, /*#__PURE__*/React__default["default"].createElement(AddNegotiatedBrand, null, "Add Negotiated Brand/s ", /*#__PURE__*/React__default["default"].createElement("span", {
+  })), /*#__PURE__*/React__default["default"].createElement(Divider, null), /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement(NegotiatedContainer, null, /*#__PURE__*/React__default["default"].createElement(AddNegotiatedBrand, null, "Add Negotiated Brand/s ", /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: "red"
     }
@@ -42193,47 +42215,34 @@ const NewSubitem = ({
 };
 
 const Overlay$1 = styled__default["default"].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__default["default"].div`
-  background: #fff;
-  border-radius: 12px;
-  height: 100%;
-  padding: 32px 24px;
+const HeaderContainer = styled__default["default"].div`
+  color: #212121;
+  padding: 40px 16px;
+  border-bottom: 1px solid #e2e2e2;
 `;
-const Title$1 = styled__default["default"].h2`
-  color: var(--Text-Primary, #212121);
-  font-feature-settings: "liga" off;
-  /* Headings/H3 Medium */
-  font-family: Poppins;
+const Title$1 = styled__default["default"].h5`
   font-size: 32px;
-  font-style: normal;
   font-weight: 700;
-  line-height: normal;
+  margin: 0 0 20px;
 `;
 const Subtitle = styled__default["default"].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__default["default"].div`
-  margin-bottom: 20px;
+const Dialog = styled__default["default"].div`
+  background: #fff;
 `;
-const Divider = styled__default["default"].div`
-  height: 1px;
-  background-color: #e2e2e2;
-  margin: 16px 0;
-  width: 100%;
+const VendorSection = styled__default["default"].div`
+  padding: 16px;
+  border-bottom: 1px solid #e2e2e2;
 `;
 const Item = styled__default["default"].li`
   color: black; /* text color */
@@ -42254,12 +42263,8 @@ const VendorName = styled__default["default"].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__default["default"].span`
   background: #ffe2b6;
@@ -42267,40 +42272,23 @@ const NewBadge = styled__default["default"].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__default["default"].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__default["default"].div`
   display: flex;
-  justify-content: flex-start;
   gap: 12px;
-  flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
 `;
-const HeaderContainer = styled__default["default"].div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-`;
 
 const ConfirmationDialog = ({
   width,
@@ -42311,39 +42299,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__default["default"].createElement(Overlay$1, {
     width: width,
     height: height
-  }, /*#__PURE__*/React__default["default"].createElement(HeaderContainer, null, /*#__PURE__*/React__default["default"].createElement(Title$1, null, "Confirmation"), /*#__PURE__*/React__default["default"].createElement(Subtitle, null, "You are about to send the following ", totalNew, " new packages to these ", vendors.length, " vendors:"), /*#__PURE__*/React__default["default"].createElement(ButtonRow, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(HeaderContainer, null, /*#__PURE__*/React__default["default"].createElement(Title$1, null, "Confirmation"), /*#__PURE__*/React__default["default"].createElement(Subtitle, null, confirmationText), /*#__PURE__*/React__default["default"].createElement(ButtonRow, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
     leftIcon: "none",
     onClick: onCancel,
     rightIcon: "none",
-    size: "small",
+    size: "",
     text: "Cancel",
     type: "secondary"
   }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(Dialog, null, vendors.map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(VendorSection, {
     key: vendor.name
   }, /*#__PURE__*/React__default["default"].createElement(VendorHeader, null, /*#__PURE__*/React__default["default"].createElement(VendorName, null, vendor.name), /*#__PURE__*/React__default["default"].createElement(NewBadge, null, vendor.newPackages.length, " New")), /*#__PURE__*/React__default["default"].createElement(PackageList, null, vendor.newPackages.map((pkg, i) => /*#__PURE__*/React__default["default"].createElement(Item, {
     key: i
-  }, pkg))), /*#__PURE__*/React__default["default"].createElement(Divider, null)))));
+  }, pkg)))))));
 };
 
 const SuccessScreenContainer = styled__default["default"].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__default["default"].div`
   display: flex;
@@ -42351,29 +42343,19 @@ const SuccessHeader = styled__default["default"].div`
   align-items: center;
   justify-content: center;
 `;
-const SuccessTitle = styled__default["default"].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__default["default"].h5`
+  color: #212121;
+  text-align: center;
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0 0 20px;
 `;
 const SuccessSubtitle = styled__default["default"].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__default["default"].div`
   display: flex;
@@ -50847,8 +50829,6 @@ const SuccessScreen = ({
   }, vendor, /*#__PURE__*/React__default["default"].createElement("br", null)))))));
 };
 
-// Removed TypeScript interface and type annotations
-
 const ItemManagerPanel = _ref => {
   let {
     width = "100%",
@@ -50861,11 +50841,12 @@ const ItemManagerPanel = _ref => {
     setItemAndPackage,
     linkColor = "#212121",
     backgroundColor = 'white',
-    onDelete = () => {}
+    buttonTooltipText = "Please fill out all forms before sending."
   } = _ref;
   const [screen, setScreen] = React$1.useState("initial");
   const [selectedVendor, setSelectedVendor] = React$1.useState(null);
   const [selectedPackage, setSelectedPackage] = React$1.useState(null);
+  const [isEditingExisting, setIsEditingExisting] = React$1.useState(false);
   const handleVendorClick = vendor => {
     // console.log("Vendor clicked:", vendor);
     setSelectedVendor(vendor);
@@ -50894,8 +50875,29 @@ const ItemManagerPanel = _ref => {
     });
     setScreen("subitem");
   };
-  const handleBackToDefault = () => {
-    setScreen("");
+  const updateExistingPackage = (vendorName, originalPackage, updatedPackageName, updatedComponent) => {
+    setItemAndPackage(prev => {
+      return prev.map(vendor => {
+        if (vendor.name !== vendorName) {
+          return vendor;
+        }
+        return {
+          ...vendor,
+          packages: vendor.packages.map(pkg => {
+            // Find the package to update by comparing with the original package
+            if (pkg.brands === originalPackage.brands && JSON.stringify(pkg.component) === JSON.stringify(originalPackage.component)) {
+              return {
+                ...pkg,
+                brands: updatedPackageName,
+                component: updatedComponent
+              };
+            }
+            return pkg;
+          })
+        };
+      });
+    });
+    setScreen("subitem");
   };
   const onDeleteVendor = vendor => {
     const updatedItemAndPackage = itemAndPackage.filter(item => item.name !== vendor.name);
@@ -50904,6 +50906,21 @@ const ItemManagerPanel = _ref => {
       packages: null
     }]);
   };
+  const hasUnisentPackages = React$1.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;
+  React$1.useEffect(() => {
+    if (screen === "success" && onSendForms) {
+      onSendForms();
+    }
+  }, [screen]); // Only run when screen changes
+
   if (screen === "subitem") {
     return /*#__PURE__*/React__default["default"].createElement(Card, {
       width: width,
@@ -50917,15 +50934,28 @@ const ItemManagerPanel = _ref => {
       itemAndPackage: itemAndPackage,
       onBack: () => setScreen("initial"),
       onTrashClick: () => onDeleteInner(selectedVendor),
-      handleSubitemDetail: () => setScreen("subitemdetail")
+      handleSubitemDetail: function () {
+        let pkg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        if (pkg) {
+          // Editing existing package
+          setSelectedPackage(pkg);
+          setIsEditingExisting(true);
+        } else {
+          // Adding new package
+          setSelectedPackage(null);
+          setIsEditingExisting(false);
+        }
+        setScreen("subitemdetail");
+      }
     }));
   }
   if (screen === "confirmation") {
     return /*#__PURE__*/React__default["default"].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,
@@ -50935,9 +50965,6 @@ const ItemManagerPanel = _ref => {
     });
   }
   if (screen === "success") {
-    if (onSendForms) {
-      onSendForms();
-    }
     return /*#__PURE__*/React__default["default"].createElement(SuccessScreen, {
       width: width,
       height: height,
@@ -50957,6 +50984,8 @@ const ItemManagerPanel = _ref => {
       vendor: selectedVendor,
       itemAndPackage: itemAndPackage,
       addNewPackage: addNewPackage,
+      updateExistingPackage: updateExistingPackage,
+      isEditingExisting: isEditingExisting,
       onBack: () => setScreen("subitem")
     }));
   }
@@ -50966,7 +50995,7 @@ const ItemManagerPanel = _ref => {
       height: height,
       backgroundColor: backgroundColor
     }, /*#__PURE__*/React__default["default"].createElement(NewItemList, {
-      onBack: handleBackToDefault,
+      onBack: () => setScreen("initial"),
       itemAndPackage: itemAndPackage,
       onVendorClick: handleVendorClick
     }));
@@ -50976,7 +51005,12 @@ const ItemManagerPanel = _ref => {
       width: width,
       height: height,
       backgroundColor: backgroundColor
-    }, /*#__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(Button$1, {
+    }, /*#__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, {
+      hideTooltip: !disabledSendForms,
+      content: buttonTooltipText,
+      topFactor: 2,
+      direction: "bottom"
+    }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
       leftIcon: "Fly",
       onClick: () => setScreen("confirmation"),
       rightIcon: "none",
@@ -50984,10 +51018,12 @@ const ItemManagerPanel = _ref => {
       size: "small",
       text: "Send Forms",
       type: "secondary",
-      borderRadius: "8px"
-    }), /*#__PURE__*/React__default["default"].createElement(Subtitle$1, {
-      color: AllFormsSent ? "#90CE9C" : "#8b8989"
-    }, AllFormsSent ? '✔ All Forms Sent' : `${itemAndPackage.filter(item => item.packages !== null).length.toString()} Vendors `))), /*#__PURE__*/React__default["default"].createElement(AddButtonContainer$1, null, /*#__PURE__*/React__default["default"].createElement(LinkButton, {
+      borderRadius: "8px",
+      borderColor: linkColor,
+      textColor: linkColor
+    })), /*#__PURE__*/React__default["default"].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__default["default"].createElement(AddButtonContainer$1, null, /*#__PURE__*/React__default["default"].createElement(LinkButton, {
       leftIcon: "Plus",
       onClick: () => setScreen("list"),
       rightIcon: "none",
@@ -51100,14 +51136,11 @@ const scrollableStyles = `
 const DropdownContainer = styled__default["default"].div`
   position: relative;
   width: ${props => props.width || '100%'};
-  /* min-width: 320px; */
-  max-width: 600px;
+  max-width: 400px;
   font-family: "Poppins", sans-serif;
 `;
 const DropdownButton = styled__default["default"].button`
   width: 100%;
-  /* min-width: 320px; */
-  max-width: 600px;
   background: #fff;
   border: 1px solid #8B8989;
   border-radius: 12px;
@@ -51118,9 +51151,9 @@ const DropdownButton = styled__default["default"].button`
   align-items: center;
   justify-content: space-between;
   ${props => props.disabled && styled.css`
-      color:#8B8989;
-      background-color: #D0D0D0;
+      color: #D0D0D0;
       cursor: not-allowed;
+      border: 1px solid #D0D0D0;
     `}
 `;
 const DropdownList = styled__default["default"].ul`
@@ -51163,7 +51196,7 @@ const DropdownItem = styled__default["default"].li`
   margin: 0 12px;
   background: ${props => props.selected ? props.selectedColor || '#066768' : 'transparent'};
   font-weight: ${props => props.selected ? '500' : '400'};
-  color: ${props => props.disabled ? '#bdbdbd' : props.selected ? '#fff' : '#212121'};
+  color: ${props => props.disabled ? '#D0D0D0' : props.selected ? '#fff' : '#212121'};
   border-left: ${props => props.selected ? `3px solid ${props.selectedColor || '#066768'}` : 'none'};
   ${props => props.disabled && styled.css`
       cursor: not-allowed;