sag_components 2.0.0-beta107 → 2.0.0-beta109

package/dist/index.esm.js

@@ -2192,7 +2192,9 @@ const Tooltip$2 = props => {
     content = 'Tooltip content',
     direction = 'top',
     delay = '400',
-    topFactor = -1.8
+    topFactor = -1.8,
+    hideTooltip = false,
+    className
   } = props;
   let timeout;
   const [active, setActive] = useState(false);
@@ -2206,12 +2208,12 @@ const Tooltip$2 = props => {
     setActive(false);
   };
   return /*#__PURE__*/React$1.createElement(TooltipContainer$4, {
-    className: "tooltip-container"
+    className: className
   }, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
     className: "tooltip-wrapper",
     onMouseEnter: showTip,
     onMouseLeave: hideTip
-  }, children, active && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
+  }, children, active && !hideTooltip && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
     className: `controls ${direction || 'top'}`,
     topFactor: topFactor
   }, content)));
@@ -8508,6 +8510,16 @@ const DropdownWrapper$2 = styled.div`
   font-weight: 400;
   font-size: 14px;
   border-radius: 10px;  
+    &::before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 2px;           // Creates invisible bridge for hover
+    z-index: 99;
+    pointer-events: none;
+  }
 `;
 const Label$7 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
@@ -8592,23 +8604,28 @@ const StyledInput$8 = styled.input`
 `;
 const OptionsContainer$7 = styled.div`  
   margin: 0;   
-  top: 100%; 
+  position: absolute;
+  ${props => props.showabove ? `
+    bottom: 100%;    
+  ` : `
+    top: 100%;      
+  `}
   left: 0;
   z-index: 100;
-  width: 100%;
+  width: 100%;  
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
 `;
 const OptionsSubContainer$3 = styled.ul`
+  position: relative;
+  z-index: 101;
+  top: 100%;
+  /* left: 0; */
   ${scrollableStyles$d}
   list-style: none;
   font-weight: 400;
   margin: 0;
   padding: 8px 12px;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 101;
   width: calc(100% - 23px);
   border-radius: 4px; 
   background-color: white;
@@ -8647,7 +8664,6 @@ const IconContainer$5 = styled.div`
   cursor:  pointer;  
 `;
 
-/* eslint-disable react/prop-types */
 const DropdownSingleNew = ({
   label,
   labelEmptyValue,
@@ -8668,6 +8684,7 @@ const DropdownSingleNew = ({
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
+  const [showAbove, setShowAbove] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [hoverInputContainer, setHoverInputContainer] = useState(false);
@@ -8691,6 +8708,22 @@ const DropdownSingleNew = ({
       }
       break;
   }
+
+  // Calculate position when showOptions changes
+  useEffect(() => {
+    if (showOptions && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const dropdownHeight = Math.min(filteredOptions.length * 40 + 20, 240); // Estimate dropdown height
+
+      // Check if dropdown would go off-screen at bottom
+      const spaceBelow = windowHeight - rect.bottom;
+      const spaceAbove = rect.top;
+
+      // Show above if there's not enough space below and there's more space above
+      setShowAbove(spaceBelow < dropdownHeight && spaceAbove > spaceBelow);
+    }
+  }, [showOptions, filteredOptions.length]);
   useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
@@ -8702,11 +8735,15 @@ const DropdownSingleNew = ({
     }
   }, [isFocused]);
   useEffect(() => {
-    if (!hoverInputContainer && !hoverOptionsContainer) {
-      setIsFocused(false);
-      setShowOptions(false);
-    }
-  }, [hoverInputContainer, hoverOptionsContainer]);
+    // Add a small delay to prevent dropdown from closing when moving between input and options
+    const timer = setTimeout(() => {
+      if (!hoverInputContainer && !hoverOptionsContainer && !isFocused) {
+        setShowOptions(false);
+      }
+    }, 100); // 100ms delay allows smooth transition
+
+    return () => clearTimeout(timer);
+  }, [hoverInputContainer, hoverOptionsContainer, isFocused]);
   const toggleOption = option => {
     if (disabled) return;
     const newDropdownedOptions = [option];
@@ -8849,11 +8886,13 @@ const DropdownSingleNew = ({
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
+    showabove: showAbove,
     disabled: disabled,
     filteredoptions: filteredOptions
   }, /*#__PURE__*/React$1.createElement(OptionsSubContainer$3, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
+    showabove: showAbove,
     disabled: disabled,
     filteredoptions: filteredOptions
   }, filteredOptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem$3, {
@@ -8863,46 +8902,6 @@ const DropdownSingleNew = ({
     selected: isDropdowned(option)
   }, option.label)))));
 };
-DropdownSingleNew.propTypes = {
-  placeHolder: PropTypes.string,
-  label: PropTypes.string,
-  labelEmptyValue: PropTypes.string,
-  labelColor: PropTypes.string,
-  required: PropTypes.bool,
-  width: PropTypes.string,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  errorMessage: "",
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })),
-  selectedValue: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })),
-  xIconShow: PropTypes.bool,
-  onChange: PropTypes.func,
-  showLabelOnTop: PropTypes.bool
-};
-DropdownSingleNew.defaultProps = {
-  placeHolder: "Type To Search",
-  label: "Label",
-  labelEmptyValue: "All Labels",
-  labelColor: "#066768",
-  required: true,
-  width: "300px",
-  disabled: false,
-  error: false,
-  errorMessage: "",
-  options: [],
-  selectedValue: [],
-  xIconShow: true,
-  onChange: () => {},
-  showLabelOnTop: true,
-  orderBy: "asc",
-  elementType: "number"
-};
 
 const CheckBoxCheckedIcon = ({
   clicked,
@@ -8970,6 +8969,16 @@ const DropdownWrapper$1 = styled.div`
   font-weight: 400;
   font-size: 14px;
   border-radius: 10px;
+    &::before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 2px;           // Creates invisible bridge for hover
+    z-index: 99;
+    pointer-events: none;
+  }
 `;
 const Label$6 = styled.label`
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
@@ -9055,7 +9064,12 @@ const StyledInput$7 = styled.input`
 `;
 const OptionsContainer$6 = styled.div`  
   margin: 0;   
-  top: 100%; 
+  position: absolute;
+  ${props => props.showabove ? `
+    bottom: 100%;     
+  ` : `
+    top: 100%;        
+  `}
   left: 0;
   z-index: 100;
   width: 100%;  
@@ -9063,17 +9077,16 @@ const OptionsContainer$6 = styled.div`
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
 `;
 const OptionsSubContainer$2 = styled.ul`
+  position: relative;
+  z-index: 101;
+  top: 100%;
+  /* left: 0; */
   ${scrollableStyles$c}
   list-style: none;
   font-weight: 400;
   margin: 0;
   padding: 8px 12px;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 101;
   width: calc(100% - 23px);
-  font-family: Poppins; 
   border-radius: 4px; 
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
@@ -9090,7 +9103,6 @@ const OptionItem$2 = styled.li`
   padding: 10px;
   cursor: pointer;
   color: #212121;
-  font-family: Poppins;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -9162,6 +9174,7 @@ const DropdownMultiNew = ({
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
+  const [showAbove, setShowAbove] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [hoverInputContainer, setHoverInputContainer] = useState(false);
@@ -9185,6 +9198,22 @@ const DropdownMultiNew = ({
       }
       break;
   }
+
+  // Calculate position when showOptions changes
+  useEffect(() => {
+    if (showOptions && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const dropdownHeight = Math.min(filteredOptions.length * 40 + 20, 240); // Estimate dropdown height
+
+      // Check if dropdown would go off-screen at bottom
+      const spaceBelow = windowHeight - rect.bottom;
+      const spaceAbove = rect.top;
+
+      // Show above if there's not enough space below and there's more space above
+      setShowAbove(spaceBelow < dropdownHeight && spaceAbove > spaceBelow);
+    }
+  }, [showOptions, filteredOptions.length]);
   useEffect(() => {
     if (selectedValue) {
       setSelectedOptions(selectedValue);
@@ -9367,11 +9396,13 @@ const DropdownMultiNew = ({
     onMouseEnter: () => setHoverOptionsContainer(true),
     onMouseLeave: () => setHoverOptionsContainer(false),
     showoptions: showOptions,
+    showabove: showAbove,
     disabled: disabled,
     filteredoptions: filteredOptions
   }, /*#__PURE__*/React$1.createElement(OptionsSubContainer$2, {
     className: "OptionsSubContainer",
     showoptions: showOptions,
+    showabove: showAbove,
     disabled: disabled,
     filteredoptions: filteredOptions
   }, filteredOptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem$2, {
@@ -9391,48 +9422,6 @@ const DropdownMultiNew = ({
     color: disabled ? "#888" : "#212121"
   })), option.label)))));
 };
-DropdownMultiNew.propTypes = {
-  placeHolder: PropTypes.string,
-  label: PropTypes.string,
-  labelEmptyValue: PropTypes.string,
-  labelColor: PropTypes.string,
-  checkBoxColor: PropTypes.string,
-  required: PropTypes.bool,
-  width: PropTypes.string,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  errorMessage: "",
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })),
-  selectedValue: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })),
-  onChange: PropTypes.func,
-  xIconShow: PropTypes.bool,
-  showLabelOnTop: PropTypes.bool
-};
-DropdownMultiNew.defaultProps = {
-  placeHolder: "Type To Search",
-  label: "Label",
-  labelEmptyValue: "All Labels",
-  labelColor: "#066768",
-  checkBoxColor: "#229E38",
-  required: true,
-  width: "300px",
-  disabled: false,
-  error: false,
-  errorMessage: "",
-  options: [],
-  selectedValue: [],
-  xIconShow: true,
-  onChange: () => {},
-  showLabelOnTop: true,
-  orderBy: "asc",
-  elementType: "number"
-};
 
 const DropdownMain = styled.div`
   position: relative;
@@ -23904,21 +23893,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -41536,6 +41526,11 @@ const ButtonContainer$1 = styled.div`
   flex-direction: column;
   gap: 5px;
   margin-top: 16px;
+  .ButtonContainer {
+    label {
+      white-space: nowrap;
+    }
+  }
 `;
 const Container$1 = styled.div`
   display: flex;
@@ -41552,6 +41547,11 @@ const Trash$1 = styled.div`
   height: 24px;
   padding: 0 12px;
   cursor: pointer;
+
+  svg {
+    pointer-events: none;
+  }
+  
   svg path {
     fill: white;
   }
@@ -41833,8 +41833,8 @@ const AddButtonContainer = styled.div`
 `;
 const Container = styled.div`
   display: flex;
+  gap: 16px;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
 `;
 const Item$1 = styled.div`
@@ -41854,14 +41854,11 @@ const Item$1 = styled.div`
 const Title$2 = styled.div`
 overflow: hidden;
 color: #000;
-
-font-feature-settings: 'liga' off;
 text-overflow: ellipsis;
+margin-right: auto;
 /* Content/P2 Regular */
 font-size: 14px;
-font-style: normal;
 font-weight: 400;
-line-height: normal;
 `;
 const ComponentContainer = styled.div`
   border-radius: 48px;
@@ -41894,6 +41891,11 @@ const Trash = styled.div`
   height: 24px;
   padding: 0 8px;
   cursor: pointer;
+
+  svg {
+    pointer-events: none;
+  }
+  
   svg path {
     fill: white;
   }
@@ -41908,14 +41910,27 @@ const Trash = styled.div`
 const NewSubitemList = props => {
   const {
     vendor,
-    setSelectedPackage,
     onBack,
     handleSubitemDetail,
     itemAndPackage,
-    onTrashClick,
+    setSelectedPackage,
+    setItemAndPackage,
     linkColor
   } = props;
   const vendorItems = itemAndPackage.find(i => i.name === vendor.name).packages || [];
+  const onDeletePackage = item => {
+    const updatedPackages = vendorItems.filter(pkg => pkg.brands !== item.brands);
+    const updatedItemAndPackage = itemAndPackage.map(v => v.name === vendor.name ? {
+      ...v,
+      packages: updatedPackages
+    } : v);
+    setItemAndPackage(updatedItemAndPackage);
+  };
+  // useEffect(() => {
+  //   console.log("Vendor items updated:", vendorItems);
+  //   console.log("Props:", props);
+  // }, [vendorItems]);
+
   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, {
@@ -41927,15 +41942,16 @@ const NewSubitemList = props => {
     text: "Add Package",
     type: "primary"
   })), /*#__PURE__*/React$1.createElement(List, null, vendorItems.map((item, idx) => /*#__PURE__*/React$1.createElement(Item$1, {
+    key: idx
+  }, /*#__PURE__*/React$1.createElement(PaperPlane, null), /*#__PURE__*/React$1.createElement(Container, {
     onClick: e => {
       setSelectedPackage(item);
       handleSubitemDetail(item);
-    },
-    key: idx
-  }, /*#__PURE__*/React$1.createElement(PaperPlane, null), /*#__PURE__*/React$1.createElement(Container, null, 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)), /*#__PURE__*/React$1.createElement(Trash, {
+    }
+  }, 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))), /*#__PURE__*/React$1.createElement(Trash, {
     className: "trash-icon",
     onClick: e => {
-      onTrashClick(item);
+      onDeletePackage(item);
     }
   }, /*#__PURE__*/React$1.createElement("svg", {
     width: "14",
@@ -42082,11 +42098,9 @@ const NegotiatedTextarea = styled.textarea`
   width: 90%;
   min-height: 220px;
   margin-top: 8px;
-
   border: 1px solid #e3e4e5;
   border-radius: 12px;
   padding: 16px;
-  font-family: Poppins;
   font-size: 15px;
   resize: vertical;
   background: #fff;
@@ -42114,7 +42128,7 @@ const NewSubitem = ({
   const [negotiatedComponent, setNegotiatedComponent] = useState("Scale");
 
   // Form state
-  const isApplyEnabled = negotiatedBrands.trim().length > 0;
+  const isApplyEnabled = negotiatedBrands.trim().length > 2;
   useEffect(() => {
     if (!packageObject) return;
     if (!packageObject.brands) return;
@@ -42151,13 +42165,7 @@ const NewSubitem = ({
     onChange: e => setNegotiatedBrands(e.target.value),
     required: true,
     placeholder: "Specify by text the participated brands, divided by commas"
-  })), /*#__PURE__*/React$1.createElement(NegotiatedContainer, null, /*#__PURE__*/React$1.createElement(AddNegotiatedBrand, {
-    style: {
-      fontWeight: 500,
-      fontFamily: "Poppins",
-      fontSize: 15
-    }
-  }, "Component ", /*#__PURE__*/React$1.createElement("span", {
+  })), /*#__PURE__*/React$1.createElement(NegotiatedContainer, null, /*#__PURE__*/React$1.createElement(AddNegotiatedBrand, null, "Component ", /*#__PURE__*/React$1.createElement("span", {
     style: {
       color: "red"
     }
@@ -50844,1038 +50852,18 @@ const ItemManagerPanel = _ref => {
     height = "100%",
     onSendForms = () => {},
     editMode = true,
-    itemAndPackage = [{
-      name: "3M",
-      packages: [{
-        brands: "Pepssi, Cola",
-        component: "Scale"
-      }]
-    }, {
-      name: "4C FOODS CORP",
-      packages: [{
-        brands: "Tide, Ariel",
-        component: "Scale"
-      }]
-    }, {
-      name: "8 TRACK FOODS INC",
-      packages: null
-    }, {
-      name: "88 ACRES",
-      packages: null
-    }, {
-      name: "8TH AVENUE FOOD & PROVISIONS INC",
-      packages: null
-    }, {
-      name: "A GAME BEVERAGES LLC",
-      packages: null
-    }, {
-      name: "A LOACKER LTD",
-      packages: null
-    }, {
-      name: "A P DEAUVILLE",
-      packages: null
-    }, {
-      name: "AB WORLD FOODS",
-      packages: null
-    }, {
-      name: "ABBOTT LABS INC",
-      packages: null
-    }, {
-      name: "ABBVIE",
-      packages: null
-    }, {
-      name: "ABF",
-      packages: null
-    }, {
-      name: "AC FOODS",
-      packages: null
-    }, {
-      name: "ACH FOODS",
-      packages: null
-    }, {
-      name: "ACME SMOKED FISH",
-      packages: null
-    }, {
-      name: "ADVANCEPIERRE FOODS",
-      packages: null
-    }, {
-      name: "ADVANTAGE SOLUTIONS",
-      packages: null
-    }, {
-      name: "AGRI MARK FARMERS CO OP",
-      packages: null
-    }, {
-      name: "AGROS NOVA LTD",
-      packages: null
-    }, {
-      name: "AHIMSA COMPANIES",
-      packages: null
-    }, {
-      name: "AINSWORTH",
-      packages: null
-    }, {
-      name: "AJ LETIZIO-TWO RIVERS",
-      packages: null
-    }, {
-      name: "AJINOMOTO CO INC",
-      packages: null
-    }, {
-      name: "ALANRIC FOOD DIST INC",
-      packages: null
-    }, {
-      name: "ALBANESE CONFECTIONERY GRP INC",
-      packages: null
-    }, {
-      name: "ALCON EYE CARE",
-      packages: null
-    }, {
-      name: "ALEN USA",
-      packages: null
-    }, {
-      name: "ALEXIA FOODS",
-      packages: null
-    }, {
-      name: "ALFRED RITTER GMBH & CO KG",
-      packages: null
-    }, {
-      name: "ALKALINE88 LLC",
-      packages: null
-    }, {
-      name: "ALOHA",
-      packages: null
-    }, {
-      name: "ALPHA FOODS INC",
-      packages: null
-    }, {
-      name: "ALTER ECO",
-      packages: null
-    }, {
-      name: "ALWAYS FRESH FARMS",
-      packages: null
-    }, {
-      name: "AMERICAN BEVERAGE MARKETERS",
-      packages: null
-    }, {
-      name: "AMERICAN GREETINGS CORP",
-      packages: null
-    }, {
-      name: "AMERICAN HALAL CO INC",
-      packages: null
-    }, {
-      name: "AMERICAN LICORICE CO",
-      packages: null
-    }, {
-      name: "AMERICAN PET NUTRITION INC",
-      packages: null
-    }, {
-      name: "AMOROSOS BAKERY",
-      packages: null
-    }, {
-      name: "AMPLIFY SNACKS",
-      packages: null
-    }, {
-      name: "AMYS KITCHEN INC",
-      packages: null
-    }, {
-      name: "ANDERSON MAPLE SYRUP CO",
-      packages: null
-    }, {
-      name: "ANDRE PROST INC",
-      packages: null
-    }, {
-      name: "ANDROS FOODS USA INC",
-      packages: null
-    }, {
-      name: "ANDYS SEASONING INC",
-      packages: null
-    }, {
-      name: "ANIMATED BRANDS",
-      packages: null
-    }, {
-      name: "APPLE & EVE INC",
-      packages: null
-    }, {
-      name: "AQUA VITEA LLC",
-      packages: null
-    }, {
-      name: "ARCA CONTINENTAL",
-      packages: null
-    }, {
-      name: "ARIZONA BEVERAGES",
-      packages: null
-    }, {
-      name: "ARIZONA CANNING",
-      packages: null
-    }, {
-      name: "ARTISAN CHEF MANUFACTURING CO",
-      packages: null
-    }, {
-      name: "ARTISAN TROPIC",
-      packages: null
-    }, {
-      name: "ASHOC",
-      packages: null
-    }, {
-      name: "ASPIRE BVRG CO",
-      packages: null
-    }, {
-      name: "ASR GRP",
-      packages: null
-    }, {
-      name: "ASSOCIATED BRITISH FOODS PLC",
-      packages: null
-    }, {
-      name: "ATEECO INC",
-      packages: null
-    }, {
-      name: "ATHENS BAKING CO LLC",
-      packages: null
-    }, {
-      name: "ATK FOODS",
-      packages: null
-    }, {
-      name: "ATLANTIC NATURAL FOODS LLC",
-      packages: null
-    }, {
-      name: "AUGUSTAS CREATIONS",
-      packages: null
-    }, {
-      name: "AUNT KITTYS FOODS",
-      packages: null
-    }, {
-      name: "AUNT SUES RAW HONEY",
-      packages: null
-    }, {
-      name: "AVOCADOS FROM MEXICO",
-      packages: null
-    }, {
-      name: "B&B PECAN PROCESSORS",
-      packages: null
-    }, {
-      name: "B&G FOODS INC",
-      packages: null
-    }, {
-      name: "B.S.A. INTERNATIONAL S.A.",
-      packages: null
-    }, {
-      name: "B2Z PRODS INC",
-      packages: null
-    }, {
-      name: "BACHANS SPECIALTY FOODS LLC",
-      packages: null
-    }, {
-      name: "BACK TO NATURE",
-      packages: null
-    }, {
-      name: "BADIA SPICES INC",
-      packages: null
-    }, {
-      name: "BAKER MILLS",
-      packages: null
-    }, {
-      name: "BALL CORP",
-      packages: null
-    }, {
-      name: "BANG ENERGY",
-      packages: null
-    }, {
-      name: "BANTAM BAGELS",
-      packages: null
-    }, {
-      name: "BARCEL",
-      packages: null
-    }, {
-      name: "BARD VALLEY MEDJOOL DATE",
-      packages: null
-    }, {
-      name: "BARILLA AMERICA INC BARILLA GER FRATELLI",
-      packages: null
-    }, {
-      name: "BARKMAN HONEY LLC",
-      packages: null
-    }, {
-      name: "BARNIES COFFEE KITCHEN",
-      packages: null
-    }, {
-      name: "BAR-S FOODS",
-      packages: null
-    }, {
-      name: "BAY VALLEY FOODS",
-      packages: null
-    }, {
-      name: "BAYER AG",
-      packages: null
-    }, {
-      name: "BAZOOKA CANDY BRANDS",
-      packages: null
-    }, {
-      name: "BEANITOS",
-      packages: null
-    }, {
-      name: "BEECH-NUT",
-      packages: null
-    }, {
-      name: "BEIERSDORF INC",
-      packages: null
-    }, {
-      name: "BEL BRANDS",
-      packages: null
-    }, {
-      name: "BELGIOIOSO CHEESE",
-      packages: null
-    }, {
-      name: "BELL & EVANS CO",
-      packages: null
-    }, {
-      name: "BELL CARTER FOODS INC",
-      packages: null
-    }, {
-      name: "BELLISIO FOODS",
-      packages: null
-    }, {
-      name: "BERKSHIRE HATHAWAY INC",
-      packages: null
-    }, {
-      name: "BERNATELLOS PIZZA INC",
-      packages: null
-    }, {
-      name: "BETTER FOODS JEYER LLC",
-      packages: null
-    }, {
-      name: "BETTYS & TAYLORS OF HARROGATE",
-      packages: null
-    }, {
-      name: "BEVCO",
-      packages: null
-    }, {
-      name: "BEYOND BETTER FOODS LLC",
-      packages: null
-    }, {
-      name: "BEYOND MEAT INC",
-      packages: null
-    }, {
-      name: "BIC USA INC",
-      packages: null
-    }, {
-      name: "BIC WORLD",
-      packages: null
-    }, {
-      name: "BIG EASY BLENDS LLC",
-      packages: null
-    }, {
-      name: "BIG HEART PET",
-      packages: null
-    }, {
-      name: "BIG MOZZ INC",
-      packages: null
-    }, {
-      name: "BIG RUSS BEER CHEESE",
-      packages: null
-    }, {
-      name: "BIG SHOW FOODS INC",
-      packages: null
-    }, {
-      name: "BIG TREE FARMS",
-      packages: null
-    }, {
-      name: "BING BEVERAGE",
-      packages: null
-    }, {
-      name: "BIOSTEEL",
-      packages: null
-    }, {
-      name: "BITCHIN SAUCE",
-      packages: null
-    }, {
-      name: "BLACK RIFLE COFFEE CO",
-      packages: null
-    }, {
-      name: "BLACKBEARD BEVERAGE",
-      packages: null
-    }, {
-      name: "BLACKHAWK",
-      packages: null
-    }, {
-      name: "BLUE DIAMOND GROWERS",
-      packages: null
-    }, {
-      name: "BLUE DOG BAKERY",
-      packages: null
-    }, {
-      name: "BLUE NORTHERN FOODS",
-      packages: null
-    }, {
-      name: "BLUE RHINO",
-      packages: null
-    }, {
-      name: "BLUEBERRY COUNCIL",
-      packages: null
-    }, {
-      name: "BLUETRITON BRANDS",
-      packages: null
-    }, {
-      name: "BNRG",
-      packages: null
-    }, {
-      name: "BOARDWALK FROZEN TREATS LLC",
-      packages: null
-    }, {
-      name: "BOBS RED MILL NTRL FOODS",
-      packages: null
-    }, {
-      name: "BODYARMOR",
-      packages: null
-    }, {
-      name: "BOLTHOUSE",
-      packages: null
-    }, {
-      name: "BONA",
-      packages: null
-    }, {
-      name: "BONOLIO",
-      packages: null
-    }, {
-      name: "BORDEN",
-      packages: null
-    }, {
-      name: "BORGES USA STAR FINE FOODS INC",
-      packages: null
-    }, {
-      name: "BOTANICAL FOODS CO",
-      packages: null
-    }, {
-      name: "BOTTICELLI FOOD CORP",
-      packages: null
-    }, {
-      name: "BOWERY FARMING",
-      packages: null
-    }, {
-      name: "BOWMAN ANDROS",
-      packages: null
-    }, {
-      name: "BOYLAN BOTTLING CO INC",
-      packages: null
-    }, {
-      name: "BRADSHAW HOME",
-      packages: null
-    }, {
-      name: "BRAGG LIVE FOOD PRODS INC",
-      packages: null
-    }, {
-      name: "BRASWELL FOODS",
-      packages: null
-    }, {
-      name: "BREW DR",
-      packages: null
-    }, {
-      name: "BRIDGFORD FOODS CORP",
-      packages: null
-    }, {
-      name: "BRIGHT FARMS INC",
-      packages: null
-    }, {
-      name: "BRITVIC WORLDWIDE BRANDS LTD",
-      packages: null
-    }, {
-      name: "BROWNE DRUG COMPANY",
-      packages: null
-    }, {
-      name: "BROWNIE BRITTLE",
-      packages: null
-    }, {
-      name: "BRU BOTTLING INC",
-      packages: null
-    }, {
-      name: "BRYNWOOD PARTNERS",
-      packages: null
-    }, {
-      name: "BS GRILLIN COMPANY",
-      packages: null
-    }, {
-      name: "BUBBAS SWEET NECTAR",
-      packages: null
-    }, {
-      name: "BUDDY FRUITS",
-      packages: null
-    }, {
-      name: "BUMBLE BEE SEAFOOD CO.",
-      packages: null
-    }, {
-      name: "BUONA FOODS INC",
-      packages: null
-    }, {
-      name: "BUSH BROTHERS & CO",
-      packages: null
-    }, {
-      name: "BUTLER HOME PRODUCTS",
-      packages: null
-    }, {
-      name: "BUTTERBALL",
-      packages: null
-    }, {
-      name: "BUTTERFLY EQUITY",
-      packages: null
-    }, {
-      name: "CA FORTUNE",
-      packages: null
-    }, {
-      name: "CA WALNUT COUNCIL",
-      packages: null
-    }, {
-      name: "CAB ENTERPRISES",
-      packages: null
-    }, {
-      name: "CABOT CREAMERY INC",
-      packages: null
-    }, {
-      name: "CACIQUE FOODS LLC",
-      packages: null
-    }, {
-      name: "CALABRO CHEESE CORP",
-      packages: null
-    }, {
-      name: "CALBEE NORTH AMERICA LLC",
-      packages: null
-    }, {
-      name: "CALICO BRANDS INC",
-      packages: null
-    }, {
-      name: "CALIFIA FARMS LLC",
-      packages: null
-    }, {
-      name: "CALIFORNIA GRAPE COMMISSION",
-      packages: null
-    }, {
-      name: "CALIFORNIA OLIVE RANCH INC",
-      packages: null
-    }, {
-      name: "CALIFORNIA TABLE GRAPE COMMISSION",
-      packages: null
-    }, {
-      name: "CALISE SONS BAKERY INC",
-      packages: null
-    }, {
-      name: "CAMELLIA",
-      packages: null
-    }, {
-      name: "CAMERONS COFFEE",
-      packages: null
-    }, {
-      name: "CAMPBELL SOUP CO",
-      packages: null
-    }, {
-      name: "CAPE COD CAFE",
-      packages: null
-    }, {
-      name: "CAPE COD SELECT",
-      packages: null
-    }, {
-      name: "CAPITAL CITY PRODUCE",
-      packages: null
-    }, {
-      name: "CARBONE FINE FOOD LLC",
-      packages: null
-    }, {
-      name: "CARGILL INC",
-      packages: null
-    }, {
-      name: "CARL BUDDIG & CO",
-      packages: null
-    }, {
-      name: "CARLYLE GROUP LP",
-      packages: null
-    }, {
-      name: "CARMICHAELS HONEY LLC",
-      packages: null
-    }, {
-      name: "CAROLINA BREWERY",
-      packages: null
-    }, {
-      name: "CAROLINA NUT COMPANY",
-      packages: null
-    }, {
-      name: "CARTERS",
-      packages: null
-    }, {
-      name: "CASA VISCO",
-      packages: null
-    }, {
-      name: "CASARO",
-      packages: null
-    }, {
-      name: "CASCADIAN",
-      packages: null
-    }, {
-      name: "CASPERS ICE CREAM CO INC",
-      packages: null
-    }, {
-      name: "CATALINA SNACKS INC",
-      packages: null
-    }, {
-      name: "CAULIPOWER",
-      packages: null
-    }, {
-      name: "CEC ENTERTAINMENT INC",
-      packages: null
-    }, {
-      name: "CEDARS MEDITERRANEAN FOODS INC",
-      packages: null
-    }, {
-      name: "CELSIUS HOLDINGS",
-      packages: null
-    }, {
-      name: "CENTRAL GARDEN & PET",
-      packages: null
-    }, {
-      name: "CENTURY SNACKS LLC",
-      packages: null
-    }, {
-      name: "CERELIA BAKERY USA",
-      packages: null
-    }, {
-      name: "CEVES BEVERAGES",
-      packages: null
-    }, {
-      name: "CF SAUER COMPANY",
-      packages: null
-    }, {
-      name: "CHALLENGE DAIRY PRODS INC",
-      packages: null
-    }, {
-      name: "CHAMELEON COLD BREW LLC",
-      packages: null
-    }, {
-      name: "CHARLES & ALICE INC",
-      packages: null
-    }, {
-      name: "CHARLESTON BVRG CO LLC",
-      packages: null
-    }, {
-      name: "CHAROEN POKPHAND",
-      packages: null
-    }, {
-      name: "CHATTEM",
-      packages: null
-    }, {
-      name: "CHEDDIES",
-      packages: null
-    }, {
-      name: "CHEFLER FOODS",
-      packages: null
-    }, {
-      name: "CHELSEA MILLING CO",
-      packages: null
-    }, {
-      name: "CHERIBUNDI INC",
-      packages: null
-    }, {
-      name: "CHICKEN OF THE SEA",
-      packages: null
-    }, {
-      name: "CHILEAN CHERRIES",
-      packages: null
-    }, {
-      name: "CHIQUITA BRANDS LLC",
-      packages: null
-    }, {
-      name: "CHO AMERICA",
-      packages: null
-    }, {
-      name: "CHOBANI INC",
-      packages: null
-    }, {
-      name: "CHOCOLAT FREY AG",
-      packages: null
-    }, {
-      name: "CHOICE CANNING CO",
-      packages: null
-    }, {
-      name: "CHOLULA BRANDS",
-      packages: null
-    }, {
-      name: "CHURCH & DWIGHT CO INC",
-      packages: null
-    }, {
-      name: "CINCINNATI SEAFOOD IMP",
-      packages: null
-    }, {
-      name: "CITRUS WORLD INC",
-      packages: null
-    }, {
-      name: "CJ CHEILJEDANG CORP",
-      packages: null
-    }, {
-      name: "CJ FOODS INC",
-      packages: null
-    }, {
-      name: "CLASSIC COOKING INC",
-      packages: null
-    }, {
-      name: "CLAVEL CORP",
-      packages: null
-    }, {
-      name: "CLEAN CAUSE",
-      packages: null
-    }, {
-      name: "CLEARLY CANADIAN BVRG CORP",
-      packages: null
-    }, {
-      name: "CLEMENS FOOD GRP",
-      packages: null
-    }, {
-      name: "CLEVELAND KITCHEN",
-      packages: null
-    }, {
-      name: "CLIF BAR & CO",
-      packages: null
-    }, {
-      name: "CLOROX CO",
-      packages: null
-    }, {
-      name: "COBRAM ESTATE PTY LTD",
-      packages: null
-    }, {
-      name: "COCA COLA CO",
-      packages: null
-    }, {
-      name: "COLAVITA USA",
-      packages: null
-    }, {
-      name: "COLGATE PALMOLIVE CO",
-      packages: null
-    }, {
-      name: "COMBE INC",
-      packages: null
-    }, {
-      name: "COMMUNITY COFFEE CO INC",
-      packages: null
-    }, {
-      name: "COMPLETELY FRESH FOODS",
-      packages: null
-    }, {
-      name: "CONAGRA BRANDS",
-      packages: null
-    }, {
-      name: "CONAIR CORP",
-      packages: null
-    }, {
-      name: "CONCORD PREMIUM MEATS",
-      packages: null
-    }, {
-      name: "CONGO BRANDS",
-      packages: null
-    }, {
-      name: "CONSERVE ITALIA",
-      packages: null
-    }, {
-      name: "CONSORZIO CASALASCO DEL POMODORO",
-      packages: null
-    }, {
-      name: "CONSTELLATION BRANDS INC",
-      packages: null
-    }, {
-      name: "CONTINENTAL MILLS",
-      packages: null
-    }, {
-      name: "COOPER STREET COOKIES LLC",
-      packages: null
-    }, {
-      name: "COPPER MOON COFFEE LLC",
-      packages: null
-    }, {
-      name: "CORE NUTRITION LLC",
-      packages: null
-    }, {
-      name: "CORMAN USA INC",
-      packages: null
-    }, {
-      name: "COTY",
-      packages: null
-    }, {
-      name: "CR BRANDS INC",
-      packages: null
-    }, {
-      name: "CRAVE BETTER FOODS LLC",
-      packages: null
-    }, {
-      name: "CREATIVE SNACKS",
-      packages: null
-    }, {
-      name: "CRISPY GREEN INC",
-      packages: null
-    }, {
-      name: "CROFTERS FOOD LTD",
-      packages: null
-    }, {
-      name: "CROSSINGWELL CONSUMER HEALTH",
-      packages: null
-    }, {
-      name: "CRYSTAL FARMS",
-      packages: null
-    }, {
-      name: "CSM BAKERY PRODS NORTH AMERICA",
-      packages: null
-    }, {
-      name: "CUMBERLAND PACKING CORP",
-      packages: null
-    }, {
-      name: "CURATION FOODS INC",
-      packages: null
-    }, {
-      name: "CUSTOM BAKEHOUSE",
-      packages: null
-    }, {
-      name: "CVC CAPITAL PARTNERS",
-      packages: null
-    }, {
-      name: "DAILY HARVEST",
-      packages: null
-    }, {
-      name: "DAIRY FARMERS OF AMERICA",
-      packages: null
-    }, {
-      name: "DAISY BRAND",
-      packages: null
-    }, {
-      name: "DAIYA FOODS INC",
-      packages: null
-    }, {
-      name: "DAKOTA GROWERS PASTA COMPANY",
-      packages: null
-    }, {
-      name: "DAN OS SEASONING",
-      packages: null
-    }, {
-      name: "DANSONS INC",
-      packages: null
-    }, {
-      name: "DAYKA & HACKETT LLC",
-      packages: null
-    }, {
-      name: "DD & B SOLUTIONS LLC",
-      packages: null
-    }, {
-      name: "DE NIGRIS",
-      packages: null
-    }, {
-      name: "DEAN FOODS",
-      packages: null
-    }, {
-      name: "DECAS CRANBERRY PRODS INC",
-      packages: null
-    }, {
-      name: "DECAS FARMS",
-      packages: null
-    }, {
-      name: "DEEP FOODS INC",
-      packages: null
-    }, {
-      name: "DEL GROSSO FOODS INC",
-      packages: null
-    }, {
-      name: "DEL MONTE FRESH PRODUCE INC",
-      packages: null
-    }, {
-      name: "DEL REAL FOODS",
-      packages: null
-    }, {
-      name: "DEL SOL FOOD CO",
-      packages: null
-    }, {
-      name: "DELIZZA PATISSERIE NV",
-      packages: null
-    }, {
-      name: "DEMAKES ENT INC",
-      packages: null
-    }, {
-      name: "DEMETS",
-      packages: null
-    }, {
-      name: "DEOLEO",
-      packages: null
-    }, {
-      name: "DEWAFLEBAKKERS",
-      packages: null
-    }, {
-      name: "DEWEYS BAKERY",
-      packages: null
-    }, {
-      name: "DIABOLO BEVERAGES",
-      packages: null
-    }, {
-      name: "DIAMOND FOODS LLC",
-      packages: null
-    }, {
-      name: "DIANAS BANANAS INC",
-      packages: null
-    }, {
-      name: "DIANES KITCHEN",
-      packages: null
-    }, {
-      name: "DIEFFENBACHS POTATO CHIPS INC",
-      packages: null
-    }, {
-      name: "DIETZ & WATSON INC",
-      packages: null
-    }, {
-      name: "DOLE FOOD CO INC",
-      packages: null
-    }, {
-      name: "DOLE INTL HOLDINGS INC",
-      packages: null
-    }, {
-      name: "DONGWON IND",
-      packages: null
-    }, {
-      name: "DOT FOODS",
-      packages: null
-    }, {
-      name: "DR BRONNERS MAGIC SOAPS",
-      packages: null
-    }, {
-      name: "DR HAROLD KATZ LLC",
-      packages: null
-    }, {
-      name: "DR OETKER USA",
-      packages: null
-    }, {
-      name: "DR PRAEGERS SENSIBLE FOODS",
-      packages: null
-    }, {
-      name: "DRIP DROP INC",
-      packages: null
-    }, {
-      name: "DRISCOLL STRAWBERRY ASSN INC",
-      packages: null
-    }, {
-      name: "DUBRETON INC",
-      packages: null
-    }, {
-      name: "DUDA FARM FRESH FOODS",
-      packages: null
-    }, {
-      name: "DUDE PRODS",
-      packages: null
-    }, {
-      name: "DUKE FOODS",
-      packages: null
-    }, {
-      name: "DURACELL",
-      packages: null
-    }, {
-      name: "DURAFLAME INC",
-      packages: null
-    }, {
-      name: "DYLA LLC",
-      packages: null
-    }, {
-      name: "EAGLE BRANDS",
-      packages: null
-    }, {
-      name: "EAGLE FAMILY FOODS INC",
-      packages: null
-    }, {
-      name: "EARTHLY TREATS",
-      packages: null
-    }, {
-      name: "EARTHS OWN FOOD",
-      packages: null
-    }, {
-      name: "EAST COAST FRESH CUTS",
-      packages: null
-    }, {
-      name: "EAST WEST TEA CO LLC",
-      packages: null
-    }, {
-      name: "EAT THE CHANGE INC",
-      packages: null
-    }, {
-      name: "EBRO FOODS INC",
-      packages: null
-    }, {
-      name: "ECO SOUL",
-      packages: null
-    }, {
-      name: "EDGEWELL PERSONAL CARE",
-      packages: null
-    }, {
-      name: "EGGLANDS BEST LLC",
-      packages: null
-    }, {
-      name: "EGGLIFE FOODS",
-      packages: null
-    }, {
-      name: "EGGLIFE LLC",
-      packages: null
-    }, {
-      name: "EKATERRA",
-      packages: null
-    }, {
-      name: "EL TERRIFICO TAMALE",
-      packages: null
-    }, {
-      name: "ELEEO BRANDS LLC",
-      packages: null
-    }, {
-      name: "ELIDA",
-      packages: null
-    }, {
-      name: "EMERGY INC",
-      packages: null
-    }, {
-      name: "EMERSON HEALTHCARE",
-      packages: null
-    }, {
-      name: "EMPIRE",
-      packages: null
-    }, {
-      name: "EMPRESAS TAJIN",
-      packages: null
-    }, {
-      name: "ENDANGERED SPECIES CHOCOLATE LLC",
-      packages: null
-    }, {
-      name: "ENERGIZER HOLDINGS INC",
-      packages: null
-    }, {
-      name: "ENJOY LIFE",
-      packages: null
-    }, {
-      name: "ENVIROCON TECH INC",
-      packages: null
-    }, {
-      name: "EPICUREAN",
-      packages: null
-    }, {
-      name: "EQT",
-      packages: null
-    }, {
-      name: "ETERNAL BVRG",
-      packages: null
-    }, {
-      name: "EVANS FOOD GROUP LTD",
-      packages: null
-    }, {
-      name: "EVERGREEN ENT INC",
-      packages: null
-    }, {
-      name: "EVIVE",
-      packages: null
-    }, {
-      name: "EZAKI GLICO USA - POCKY",
-      packages: null
-    }],
+    disabledSendForms = false,
+    itemAndPackage = [],
     setItemAndPackage,
     linkColor = "#212121",
     backgroundColor = 'white',
     onDelete = () => {}
   } = _ref;
-  const [screen, setScreen] = useState(undefined); // 'list' | 'subitem'
+  const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
   const [selectedPackage, setSelectedPackage] = useState(null);
-  const handleShowVendorSelection = () => setScreen("list");
-  const handleBackToList = () => setScreen("subitem");
   const handleVendorClick = vendor => {
+    // console.log("Vendor clicked:", vendor);
     setSelectedVendor(vendor);
     setScreen("subitem");
   };
@@ -51905,8 +50893,12 @@ const ItemManagerPanel = _ref => {
   const handleBackToDefault = () => {
     setScreen("");
   };
-  const handleSubitemDetail = () => {
-    setScreen("subitemdetail");
+  const onDeleteVendor = vendor => {
+    const updatedItemAndPackage = itemAndPackage.filter(item => item.name !== vendor.name);
+    setItemAndPackage([...updatedItemAndPackage, {
+      name: vendor.name,
+      packages: null
+    }]);
   };
   if (screen === "subitem") {
     return /*#__PURE__*/React$1.createElement(Card, {
@@ -51916,10 +50908,12 @@ const ItemManagerPanel = _ref => {
     }, /*#__PURE__*/React$1.createElement(NewSubitemList, {
       linkColor: linkColor,
       setSelectedPackage: setSelectedPackage,
+      setItemAndPackage: setItemAndPackage,
       vendor: selectedVendor,
       itemAndPackage: itemAndPackage,
-      onBack: handleBackToList,
-      handleSubitemDetail: handleSubitemDetail
+      onBack: () => setScreen("initial"),
+      onTrashClick: () => onDeleteInner(selectedVendor),
+      handleSubitemDetail: () => setScreen("subitemdetail")
     }));
   }
   if (screen === "confirmation") {
@@ -51959,7 +50953,7 @@ const ItemManagerPanel = _ref => {
       vendor: selectedVendor,
       itemAndPackage: itemAndPackage,
       addNewPackage: addNewPackage,
-      onBack: handleBackToList
+      onBack: () => setScreen("subitem")
     }));
   }
   if (screen === "list") {
@@ -51973,47 +50967,49 @@ const ItemManagerPanel = _ref => {
       onVendorClick: handleVendorClick
     }));
   }
-
-  // Default panel
-  return /*#__PURE__*/React$1.createElement(Card, {
-    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, {
-    leftIcon: "Fly",
-    onClick: () => setScreen("confirmation"),
-    rightIcon: "none",
-    size: "small",
-    text: "Send Forms",
-    type: "secondary",
-    borderRadius: "8px"
-  }), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
-    leftIcon: "Plus",
-    onClick: handleShowVendorSelection,
-    rightIcon: "none",
-    size: "small",
-    text: "First Vendor",
-    type: "primary",
-    textColor: linkColor
-  })), /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem$1, {
-    onClick: e => {
-      handleVendorClick(item);
-    },
-    key: idx
-  }, /*#__PURE__*/React$1.createElement(DotContainer, null, item.packages.length === 0 && /*#__PURE__*/React$1.createElement(RedDot, null)), /*#__PURE__*/React$1.createElement(LineContainer, null, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), item.packages.length === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, item.packages.length, " Packages Sent")), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
-    className: "trash-icon",
-    onClick: e => {
-      onDelete(item);
-    }
-  }, /*#__PURE__*/React$1.createElement("svg", {
-    width: "14",
-    height: "18",
-    viewBox: "0 0 14 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM14 1H10.5L9.5 0H4.5L3.5 1H0V3H14V1Z"
-  })))))));
+  if (screen === "initial") {
+    return /*#__PURE__*/React$1.createElement(Card, {
+      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, {
+      leftIcon: "Fly",
+      onClick: () => setScreen("confirmation"),
+      rightIcon: "none",
+      disabled: disabledSendForms,
+      size: "small",
+      text: "Send Forms",
+      type: "secondary",
+      borderRadius: "8px"
+    }), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
+      leftIcon: "Plus",
+      onClick: () => setScreen("list"),
+      rightIcon: "none",
+      size: "small",
+      text: "First Vendor",
+      type: "primary",
+      textColor: linkColor
+    })), /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem$1, {
+      key: idx
+    }, /*#__PURE__*/React$1.createElement(DotContainer, null, item.packages.length === 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), item.packages.length === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, item.packages.length, " Packages Sent")), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
+      className: "trash-icon",
+      onClick: () => {
+        onDeleteVendor(item);
+      }
+    }, /*#__PURE__*/React$1.createElement("svg", {
+      width: "14",
+      height: "18",
+      viewBox: "0 0 14 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React$1.createElement("path", {
+      d: "M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM14 1H10.5L9.5 0H4.5L3.5 1H0V3H14V1Z"
+    })))))));
+  }
 };
 
 const Overlay = styled.div`
@@ -52098,13 +51094,13 @@ const scrollableStyles = `
 const DropdownContainer = styled.div`
   position: relative;
   width: ${props => props.width || '100%'};
-  min-width: 320px;
+  /* min-width: 320px; */
   max-width: 600px;
   font-family: "Poppins", sans-serif;
 `;
 const DropdownButton = styled.button`
   width: 100%;
-  min-width: 320px;
+  /* min-width: 320px; */
   max-width: 600px;
   background: #fff;
   border: 1px solid #8B8989;
@@ -52130,7 +51126,7 @@ const DropdownList = styled.ul`
   margin: 0;
   padding: 8px 0;
   width: ${props => props.width || '100%'};
-  min-width: 320px;
+  /* min-width: 320px; */
   max-width: 600px;
   max-height: ${props => props.dropdownMaxHeight || '400px'}; 
   overflow-y: auto;
@@ -52195,7 +51191,7 @@ styled.div`
   box-shadow: 0 2px 12px rgba(0,0,0,0.12);
   padding: 8px 12px;
   font-size: 13px;
-  max-width: 320px;
+  /* max-width: 320px; */
   white-space: pre-line;
 `;
 
@@ -52236,17 +51232,17 @@ const FieldRow = styled.div`
   border-bottom: 1px solid #D9D9D9;
 `;
 const Label = styled.label`
-  font-size: 15px;
-  color: #222;
-  min-width: 38px;
+  font-size: 14px;
+  color: #212121;
 `;
 const Input = styled.input`
-  width: 60px;
+  width: 64px;
   padding: 7px 8px;
   border-radius: 7px;
-  border: 1.5px solid #ccc;
-  font-size: 16px;
+  border: 1px solid #ccc;
+  font-size: 14px;
   outline: none;
+  box-sizing: border-box;
   background-color: #F7F8FA;
   transition: border 0.18s;
   ${props => props.error && `
@@ -52305,7 +51301,10 @@ const OverlayTemplateDialog = ({
   const [touched, setTouched] = useState(() => params.map(() => false));
   if (!open) return null;
   const errors = fields.map((val, idx) => touched[idx] ? validateField(val, params[idx]) : null);
-  const isValid = errors.every(e => !e);
+
+  // Check if all fields are filled and valid
+  const allFieldsFilled = fields.every(field => field !== '' && field !== null && field !== undefined);
+  const isValid = allFieldsFilled && errors.every(e => !e);
   const handleChange = (idx, val) => {
     setFields(prev => prev.map((f, i) => i === idx ? val : f));
   };
@@ -52329,10 +51328,16 @@ const OverlayTemplateDialog = ({
       if (isValid) onApply(fields);
     }
   }, /*#__PURE__*/React$1.createElement(FieldRow, null, params.map((param, idx) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
-    key: param.label
+    key: `${param.label}-${idx}`
   }, /*#__PURE__*/React$1.createElement(Label, {
     htmlFor: `param-${idx}`
-  }, param.label), /*#__PURE__*/React$1.createElement(Input, {
+  }, param.label), /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px'
+    }
+  }, /*#__PURE__*/React$1.createElement(Input, {
     id: `param-${idx}`,
     type: "number",
     value: fields[idx],
@@ -52341,6 +51346,20 @@ const OverlayTemplateDialog = ({
     onBlur: () => handleBlur(idx),
     min: 0,
     max: param.type === 'percent' ? 100 : undefined
+  }), param.suffix && /*#__PURE__*/React$1.createElement("span", {
+    style: {
+      color: '#212121',
+      fontSize: '14px',
+      whiteSpace: 'nowrap'
+    }
+  }, param.suffix)), errors[idx] && /*#__PURE__*/React$1.createElement("span", {
+    style: {
+      color: 'red',
+      fontSize: '12px',
+      gridColumn: '1 / -1',
+      marginTop: '-8px',
+      marginBottom: '8px'
+    }
   })))), /*#__PURE__*/React$1.createElement(Actions, null, /*#__PURE__*/React$1.createElement(Button$1, {
     text: "Cancel",
     borderRadius: "8px",
@@ -52355,15 +51374,13 @@ const OverlayTemplateDialog = ({
   }), /*#__PURE__*/React$1.createElement(Button$1, {
     text: "Apply",
     borderRadius: "8px",
-    backgroundColor: isValid ? buttonColor : buttonColor,
+    backgroundColor: buttonColor,
     textColor: "#fff",
-    borderColor: isValid ? buttonColor : buttonColor,
+    borderColor: buttonColor,
     hoverTextColor: "#fff",
-    hoverBackgroundColor: isValid ? buttonHoverColor : buttonHoverColor,
-    hoverBorderColor: isValid ? buttonHoverColor : buttonHoverColor,
+    hoverBackgroundColor: buttonHoverColor,
+    hoverBorderColor: buttonHoverColor,
     disabledTextColor: "#fff",
-    disabledBackgroundColor: buttonColor,
-    disabledBorderColor: buttonColor,
     fontSize: "16px",
     padding: "8px 22px",
     disabled: !isValid,
@@ -52379,7 +51396,8 @@ OverlayTemplateDialog.propTypes = {
   template: PropTypes.object,
   params: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['number', 'percent']).isRequired
+    type: PropTypes.oneOf(['number', 'percent']).isRequired,
+    suffix: PropTypes.string
   })).isRequired,
   buttonColor: PropTypes.string,
   buttonHoverColor: PropTypes.string
@@ -52405,6 +51423,7 @@ const OverlayDropdown = _ref => {
   const [hoveredText, setHoveredText] = useState(null);
   const [templateDialog, setTemplateDialog] = useState(null);
   const [dropdownPosition, setDropdownPosition] = useState('below');
+  const [lastDefinedGroup, setLastDefinedGroup] = useState(null);
   const buttonRef = useRef(null);
   const dropdownRef = useRef(null);
   const containerRef = useRef(null);
@@ -52447,9 +51466,19 @@ const OverlayDropdown = _ref => {
     }
   }, [open, dropdownMaxHeight]);
 
+  // Combine original data with "Last defined by you" group
+  const getDataWithLastDefined = () => {
+    const combinedData = [...data];
+    if (lastDefinedGroup) {
+      combinedData.unshift(lastDefinedGroup);
+    }
+    return combinedData;
+  };
+
   // Find selected item across all groups
   const findSelectedItem = () => {
-    for (const group of data) {
+    const allData = getDataWithLastDefined();
+    for (const group of allData) {
       if (group.items) {
         const found = group.items.find(item => item.value === value);
         if (found) return found;
@@ -52465,33 +51494,112 @@ const OverlayDropdown = _ref => {
     if (text.length > 66) return text.slice(0, 66) + '...';
     return text;
   };
-
-  // Template parameters for templateType === 2
   const getTemplateParams = label => {
+    if (!label) return [];
+
+    // Pattern 1: "Buy X & Get Y% Off" - X and Y must be standalone capital letters
+    // Using word boundaries for better browser compatibility
+    const buyGetOffPattern = /^(.*?)\bX\b(.*?)\bY\b(.*)$/;
+    const buyGetOffMatch = label.match(buyGetOffPattern);
+    if (buyGetOffMatch) {
+      const [, beforeX, betweenXY, afterY] = buyGetOffMatch;
+      return [{
+        label: beforeX.trim(),
+        // "Buy "
+        type: 'number',
+        suffix: ''
+      }, {
+        label: betweenXY.trim(),
+        // " & Get "
+        type: 'number',
+        suffix: afterY.trim() // " % Off"
+      }];
+    }
+
+    // Pattern 2: Single variable patterns - X or Y must be standalone capital letters
+    const singleVariablePattern = /^(.*?)\b([XY])\b(.*)$/;
+    const singleVariableMatch = label.match(singleVariablePattern);
+    if (singleVariableMatch) {
+      const [, beforeVar, variable, afterVar] = singleVariableMatch;
+      return [{
+        label: beforeVar.trim(),
+        // "Buy "
+        type: 'number',
+        suffix: afterVar.trim() // " of item(s), Get Free Item"
+      }];
+    }
+
+    // Fallback: if no pattern matches, treat as single input
     return [{
-      label: 'Value 1',
-      type: 'number'
-    }, {
-      label: 'Value 2',
-      type: 'number'
+      label: 'Value',
+      type: 'number',
+      suffix: ''
     }];
   };
+  const generateFinalSentence = (template, values) => {
+    let sentence = template.label;
+
+    // Pattern 1: "Buy X & Get Y% Off" - X and Y must be standalone capital letters
+    const buyGetOffPattern = /^(.*?)\bX\b(.*?)\bY\b(.*)$/;
+    const buyGetOffMatch = sentence.match(buyGetOffPattern);
+    if (buyGetOffMatch && values.length >= 2) {
+      const [, beforeX, betweenXY, afterY] = buyGetOffMatch;
+      return beforeX + values[0] + betweenXY + values[1] + afterY;
+    }
+
+    // Pattern 2: Single variable patterns - X or Y must be standalone capital letters
+    const singleVariablePattern = /^(.*?)\b([XY])\b(.*)$/;
+    const singleVariableMatch = sentence.match(singleVariablePattern);
+    if (singleVariableMatch && values.length >= 1) {
+      const [, beforeVar, variable, afterVar] = singleVariableMatch;
+      return beforeVar + values[0] + afterVar;
+    }
+
+    // Fallback
+    return sentence;
+  };
   const handleTemplateApply = fields => {
     if (templateDialog && onSelectClick) {
-      const result = {
+      const finalSentence = generateFinalSentence(templateDialog.item, fields);
+
+      // Create new item for "Last defined by you" group
+      const newItem = {
         ...templateDialog.item,
+        label: finalSentence,
+        value: `last_defined_${Date.now()}`,
+        // Unique value
         overlayCode: templateDialog.group.overlayCode,
         overlayName: templateDialog.group.overlayName,
         templateType: templateDialog.group.templateType,
         appliedValues: fields
       };
+
+      // Update "Last defined by you" group - add to existing or create new
+      if (lastDefinedGroup) {
+        // Add to existing group
+        setLastDefinedGroup({
+          ...lastDefinedGroup,
+          items: [newItem, ...lastDefinedGroup.items] // Add new item at the beginning
+        });
+      } else {
+        // Create new group
+        setLastDefinedGroup({
+          overlayCode: 'last_defined',
+          overlayName: 'Last defined by you',
+          templateType: 1,
+          items: [newItem]
+        });
+      }
       setTemplateDialog(null);
-      onSelectClick(result);
+
+      // Select the new item
+      onSelectClick(newItem);
     }
   };
   const toggleDropdown = () => {
     setOpen(prev => !prev);
   };
+  const dataToRender = getDataWithLastDefined();
   return /*#__PURE__*/React$1.createElement(DropdownContainer, {
     width: width,
     ref: containerRef
@@ -52522,7 +51630,7 @@ const OverlayDropdown = _ref => {
     dropdownMaxHeight: dropdownMaxHeight,
     width: width,
     position: dropdownPosition
-  }, data.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement("div", {
+  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement("div", {
     key: group.overlayCode
   }, /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
     key: item.value,