sag_components 2.0.0-beta210 → 2.0.0-beta212

package/dist/index.esm.js

@@ -2094,7 +2094,7 @@ const NoDataFoundMessage = props => {
   }, noDataText));
 };
 
-const scrollableStyles$f = `
+const scrollableStyles$g = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -2123,7 +2123,7 @@ const ControlsContainer$e = styled.div`
   display: flex;
   align-items: center;
   @media (max-width: 1536px) {
-    ${scrollableStyles$f}
+    ${scrollableStyles$g}
   }
 
   > * {
@@ -3805,7 +3805,7 @@ const SearchInput$1 = props => {
   }));
 };
 
-const scrollableStyles$e = `
+const scrollableStyles$f = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -3888,7 +3888,7 @@ const PresentationSlider = styled.div`
 `;
 const Body = styled.div`
   width: 100%;
-  ${scrollableStyles$e}
+  ${scrollableStyles$f}
   position: relative;
   overflow-x: hidden;
   box-sizing: border-box;
@@ -8742,7 +8742,7 @@ const MenuItemUpIcon = _ref => {
 };
 
 /* eslint-disable no-nested-ternary */
-const scrollableStyles$d = `
+const scrollableStyles$e = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -8886,7 +8886,7 @@ const OptionsSubContainer$3 = styled.ul`
   z-index: 101;
   top: 100%;
   /* left: 0; */
-  ${scrollableStyles$d}
+  ${scrollableStyles$e}
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -9236,7 +9236,7 @@ const CheckBoxNotCheckedIcon = _ref => {
 };
 
 /* eslint-disable no-nested-ternary */
-const scrollableStyles$c = `
+const scrollableStyles$d = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -9381,7 +9381,7 @@ const OptionsSubContainer$2 = styled.ul`
   z-index: 101;
   top: 100%;
   /* left: 0; */
-  ${scrollableStyles$c}
+  ${scrollableStyles$d}
   list-style: none;
   font-weight: 400;
   margin: 0;
@@ -10580,23 +10580,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11038,22 +11039,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11980,7 +11982,7 @@ const SortIcon$1 = _ref => {
   }))));
 };
 
-const scrollableStyles$b = `
+const scrollableStyles$c = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -12215,7 +12217,7 @@ const TableWrapper$3 = styled.div`
   border: 1px solid #dddddd;
   border-radius: ${props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px'};
   overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
-  ${scrollableStyles$b}
+  ${scrollableStyles$c}
 `;
 const Table$3 = styled.table`
   font-family: "Poppins", sans-serif;
@@ -13292,7 +13294,7 @@ const BannerEventBoxList = props => {
   })), showDraft && /*#__PURE__*/React$1.createElement(DraftTag$1, null, "DRAFT")) : children));
 };
 
-const scrollableStyles$a = `
+const scrollableStyles$b = `
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -13329,7 +13331,7 @@ const Modal$1 = styled.div`
     width: 79%;
     max-width: 1500px;
     margin: 0 auto;
-    ${scrollableStyles$a}
+    ${scrollableStyles$b}
 `;
 const ModalHeader$2 = styled.div`
     display: flex;
@@ -13338,7 +13340,7 @@ const ModalHeader$2 = styled.div`
     margin-bottom: 32px;
 `;
 const ModalBody$1 = styled.div`
-    ${scrollableStyles$a}
+    ${scrollableStyles$b}
     max-height: 80vh;
 `;
 const ModalTitle$2 = styled.h5`
@@ -24164,21 +24166,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("");
@@ -24395,101 +24398,98 @@ QuickFilterDropdownSingle.defaultProps = {
   showLabelOnTop: true
 };
 
+const scrollableStyles$a = `
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
 const DropdownWrapper = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  justify-content: center;
-  align-items: flex-start;
-  width: ${props => props.width || '300px'};  
-  font-family: "Poppins", sans-serif;
-  font-weight: 400;
+position: relative;
+display: flex;
+flex-direction: column;
+align-content: center;
+justify-content: center;
+align-items: flex-start;
+width: ${props => props.width || '300px'};
+min-width: ${props => props.width || '300px'};
+max-width: ${props => props.width || '300px'};
+font-family: "Poppins", sans-serif;
+font-weight: 400;
   font-size: 14px;
   border-radius: 10px;
 `;
 const Label$5 = styled.label`
-  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
-  font-weight: 400;
-  padding-inline-end: 5px;
-  padding-inline-start: 5px;
-  margin-right: 10px;
-  z-index: 2;
-  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor};
-  background-color: ${props => props.showLabelOnTop ? 'white' : 'transparent'} ;
-  position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : '27px'};
-  left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
-  font-family: Poppins;  
-  transform: translateY(-50%);
-  transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${props => props.disabled ? '#D0D0D0' : '212121'};
+  white-space: nowrap;
+`;
+const InputContainer$2 = styled.div`
   display: flex;
+  justify-content: space-between;
+  align-content: center;
+  white-space: pre-wrap;
   align-items: center;
+  overflow: hidden;
+  padding: 6px 16px;
+  margin-bottom: 8px;
+  height: ${props => props.height || '38px'};
+  min-height: ${props => props.height || '38px'};
+  max-height: ${props => props.height || '38px'};
+  width: 100%;
   box-sizing: border-box;
-  gap: 4px;
-  &:hover {
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  }
-`;
-const InputContainer$2 = styled.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 5px 0 0;
-    margin-bottom: 8px;
-    gap: 4px;
-    width: 100%;
-    height: 100%;    
-    box-sizing: border-box;
-    background-color: transparent;    
-    border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
-    font-family: "Poppins", sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    border-radius: 12px;
-    outline: none;
-    color: ${props => props.disabled ? '#888' : '#212121'};
+  border: 1px solid
+    ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: 9px;
+  outline: none;
+  color: ${props => props.disabled ? '#888' : '#212121'};
+
   &:hover {
-    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
+    border: 1px solid
+      ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.hoverColor || '#212121'};
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
-  &:focus {  
-    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'}; 
+
+  &:focus {
+    border: 1px solid
+      ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 `;
 const InputSubContainer$1 = styled.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: 10px 4px 10px 10px;
-    width: 100%;
-    height: 50px;
-    box-sizing: border-box;
-    background-color: transparent;    
-    border-radius: 12px;
-    outline: none;
-    color: ${props => props.disabled ? '#888' : '#212121'};     
+  display: flex;
+  align-items: center;
+  color: ${props => props.disabled ? '#888' : '#212121'};
+  gap: 4px;
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+  max-width: calc(100% - 40px);
 `;
 const StyledInput$2 = styled.input`
-  width: calc(100% - 20px);
-  height: 25px;
-  font-family: Poppins;
+  width: 100%;
+  height: 20px;
+  font-family: "Poppins";
   font-weight: 400;
   font-size: 14px;
-  outline: none;  
-  background-color: transparent;    
-  color: ${props => props.disabled ? '#888' : '#212121'};    
-  border: none;  
+  outline: none;
+  color: ${props => props.disabled ? '#888' : '#212121'};
+  border: none;
+  background-color: transparent;
+  &::placeholder {
+    color: ${props => props.disabled ? '#D0D0D0' : '#b1b1b1'};
+  }
 `;
 const OptionsContainer$1 = styled.div`  
   margin: 0;   
@@ -24516,10 +24516,12 @@ const OptionsSubContainer = styled.ul`
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-  max-height: 400px;
-  overflow: auto;
+  max-height: ${props => props.dropdownHeight || '400px'};
+  ${scrollableStyles$a}
 `;
 const OptionItem = styled.li`  
+  display: flex;
+  align-items: center;
   gap: 8px;
   padding: 10px;
   cursor: pointer;
@@ -24540,34 +24542,34 @@ const ErrorMessage$1 = styled.div`
   margin-top: 5px;
 `;
 const SelectedOptionsContainer = styled.div`
-    display: flex;   
-    flex-direction: row;
-    flex-wrap: nowrap; 
-    justify-content: flex-start;
-    align-content: center; 
-    align-items: center;
-    white-space: pre-wrap;
-    overflow: hidden;
-    padding: 0;
-    font-weight: 400;
-    border-top: none;
-    border-radius: 4px; 
-    background-color: #fff;    
-    gap: 4px;   
-`;
-const SelectedOptionItem = styled.div`  
-  display: flex;  
-  margin: 0;
-  flex-wrap: nowrap; 
-  white-space: pre-wrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
   overflow: hidden;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 170px;
+`;
+const SelectedOptionItem = styled.div`
+  display: flex;
+  align-items: center;
   cursor: pointer;
   color: #212121;
   background-color: #E3E4E5;
-  border-radius: 4px; 
-  align-items: center;
-  padding: 4px 6px;
+  border-radius: 4px;
+  padding: 2px 4px;
   font-size: 12px;
+  height: 20px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  width: 65px;
+  max-width: 65px;
+  min-width: 65px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
 `;
 const IconContainer$2 = styled.div`  
   display: flex;  
@@ -24575,23 +24577,26 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -24702,33 +24707,35 @@ const QuickFilterDropdownMultiSelection = ({
   const displaySelectedOptions = () => {
     const content = /*#__PURE__*/React$1.createElement(SelectedOptionsContainer, {
       className: "SelectedOptionsContainer"
-    }, selectedOptions?.map((option, index) => index < 2 ? /*#__PURE__*/React$1.createElement(SelectedOptionItem, {
-      className: "SelectedOptionItem",
-      key: option.value,
-      onClick: () => {
-        toggleOption(option);
-        setIsFocused(true);
-        if (inputRef?.current) {
-          inputRef?.current?.focus();
-        }
+    }, selectedOptions?.map((option, index) => {
+      if (index < 2) {
+        return /*#__PURE__*/React$1.createElement(SelectedOptionItem, {
+          className: "SelectedOptionItem",
+          key: option.value,
+          onClick: () => {
+            toggleOption(option);
+            setIsFocused(true);
+            if (inputRef?.current) {
+              inputRef?.current?.focus();
+            }
+          }
+        }, option.label && option.label?.length > 5 ? `${option.label?.substring(0, 5)}...` : option.label, /*#__PURE__*/React$1.createElement(CloseXIcon, {
+          width: "8px",
+          height: "8px",
+          fill: "#212121"
+        }));
       }
-    }, option.label && option.label?.length > 10 ? `${option.label?.substring(0, 10)}...  ` : `${option.label}  `, /*#__PURE__*/React$1.createElement(CloseXIcon, {
-      width: "8px",
-      height: "8px",
-      fill: "#212121"
-    })) : ' '), selectedOptions.length > 2 ? /*#__PURE__*/React$1.createElement(SelectedOptionItem, {
+      return null;
+    }), selectedOptions.length > 2 && /*#__PURE__*/React$1.createElement(SelectedOptionItem, {
       className: "SelectedOptionItem"
-    }, selectedOptions.length - 2, "+") : '');
+    }, "+", selectedOptions.length - 2));
     return content;
   };
   const getLabel = () => {
     if (!showLabelOnTop && isFocused) {
       return '';
     }
-    if (selectedOptions?.length > 0) {
-      return label;
-    }
-    return labelEmptyValue;
+    return label;
   };
   const getRequired = () => {
     if (!showLabelOnTop && isFocused) {
@@ -24737,18 +24744,12 @@ const QuickFilterDropdownMultiSelection = ({
     if (!showLabelOnTop && !label && selectedOptions?.length > 0) {
       return '';
     }
-    if (required) {
-      return /*#__PURE__*/React$1.createElement("span", {
-        style: {
-          color: 'red'
-        }
-      }, "*");
-    }
     return '';
   };
   return /*#__PURE__*/React$1.createElement(DropdownWrapper, {
     className: "DropdownWrapper",
     width: width,
+    height: height,
     onMouseEnter: () => setHoverInputContainer(true),
     onMouseLeave: () => setHoverInputContainer(false)
   }, /*#__PURE__*/React$1.createElement(InputContainer$2, {
@@ -24756,7 +24757,8 @@ const QuickFilterDropdownMultiSelection = ({
     labelColor: labelColor,
     disabled: disabled,
     error: error,
-    isFocused: isFocused
+    isFocused: isFocused,
+    height: height
   }, /*#__PURE__*/React$1.createElement(InputSubContainer$1, {
     className: "InputSubContainer",
     ref: containerRef,
@@ -24774,7 +24776,7 @@ const QuickFilterDropdownMultiSelection = ({
     errorMessage: errorMessage,
     onClick: handleLabelClick,
     showLabelOnTop: showLabelOnTop
-  }, getLabel(), getRequired()), displaySelectedOptions(), showOptions ? /*#__PURE__*/React$1.createElement(StyledInput$2, {
+  }, getLabel(), getRequired()), displaySelectedOptions(), /*#__PURE__*/React$1.createElement(StyledInput$2, {
     className: "StyledInput",
     ref: inputRef,
     value: inputValue,
@@ -24783,10 +24785,10 @@ const QuickFilterDropdownMultiSelection = ({
     onClick: handleLabelClick,
     type: "search",
     disabled: disabled,
-    placeholder: isFocused ? placeHolder || 'Type to search...' : '',
+    placeholder: placeHolder,
     error: error,
     isFocused: isFocused
-  }) : ' '), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$2, {
+  })), selectedOptions.length > 0 && xIconShow && /*#__PURE__*/React$1.createElement(IconContainer$2, {
     className: "IconContainer",
     onClick: handleClearClick
   }, /*#__PURE__*/React$1.createElement(CloseXIcon, {
@@ -24815,13 +24817,14 @@ const QuickFilterDropdownMultiSelection = ({
     className: "OptionsSubContainer",
     showoptions: showOptions,
     disabled: disabled,
-    filteredoptions: filteredoptions
+    filteredoptions: filteredoptions,
+    dropdownHeight: dropdownHeight
   }, filteredoptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
     selected: isDropdowned(option)
-  }, highlightText(option.label, inputValue), /*#__PURE__*/React$1.createElement(IconContainer$2, {
+  }, /*#__PURE__*/React$1.createElement(IconContainer$2, {
     className: "IconContainer"
   }, selectedOptions.find(itemSelectedOptions => option.value === itemSelectedOptions.value) ? /*#__PURE__*/React$1.createElement(CheckBoxCheckedIcon, {
     width: "14px",
@@ -24831,7 +24834,7 @@ const QuickFilterDropdownMultiSelection = ({
     width: "14px",
     height: "14px",
     color: disabled ? '#888' : '#212121'
-  })), option.label)))));
+  })), highlightText(option.label, inputValue))))));
 };
 QuickFilterDropdownMultiSelection.propTypes = {
   placeHolder: PropTypes.string,
@@ -24841,6 +24844,8 @@ QuickFilterDropdownMultiSelection.propTypes = {
   checkBoxColor: PropTypes.string,
   required: PropTypes.bool,
   width: PropTypes.string,
+  height: PropTypes.string,
+  dropdownHeight: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   errorMessage: '',
@@ -24864,6 +24869,8 @@ QuickFilterDropdownMultiSelection.defaultProps = {
   checkBoxColor: '#229E38',
   required: true,
   width: '300px',
+  height: '38px',
+  dropdownHeight: '500px',
   disabled: false,
   error: false,
   errorMessage: '',
@@ -24900,7 +24907,9 @@ const QuickFilter = _ref => {
     labelColor = "#066768",
     placeHolder = "Select From List",
     width = "auto",
+    height = "38px",
     checkBoxColor = "#229E38",
+    dropdownHeight = "500px",
     onChange = value => {},
     options = [],
     selectedValue = []
@@ -24916,6 +24925,8 @@ const QuickFilter = _ref => {
     checkBoxColor: checkBoxColor,
     options: options,
     width: width,
+    height: height,
+    dropdownHeight: dropdownHeight,
     disabled: disabled,
     error: error,
     errorMessage: errorMessage,
@@ -34614,7 +34625,7 @@ const ModalBody = styled.div`
   width: 100%;
   height: 100%;
 `;
-const TooltipContent$1 = styled.span`
+const TooltipContent$3 = styled.span`
   color: #212121;
   font-family: Poppins;
   font-size: 14px;
@@ -34687,7 +34698,7 @@ const ModalWithOverlay = props => {
   }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
     direction: "top",
     topFactor: -0.85,
-    content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent$3, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -34875,17 +34886,18 @@ css`
  * • onApply(start,end) — callback, both numbers (inclusive)
  * • onCancel()         — callback
  */
-const WeeksCalendar = ({
-  year,
-  defaultStartWeek = null,
-  defaultEndWeek = null,
-  backgroundColor = "#066768",
-  hoverBackgroundColor = "#E6F0F0",
-  allowedWeekRange = null,
-  // New prop for range restriction
-  onApply,
-  onCancel
-}) => {
+const WeeksCalendar = _ref => {
+  let {
+    year,
+    defaultStartWeek = null,
+    defaultEndWeek = null,
+    backgroundColor = "#066768",
+    hoverBackgroundColor = "#E6F0F0",
+    allowedWeekRange = null,
+    // New prop for range restriction
+    onApply,
+    onCancel
+  } = _ref;
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = useState(defaultStartWeek);
   const [endWeek, setEndWeek] = useState(defaultEndWeek);
@@ -35967,9 +35979,12 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${({
-  disabled
-}) => disabled ? 0.5 : 1};
+  opacity: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 0.5 : 1;
+}};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -35977,15 +35992,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
+  background: ${_ref2 => {
+  let {
+    checked,
+    disabled
+  } = _ref2;
+  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36004,9 +36023,10 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36016,10 +36036,11 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -39545,7 +39566,7 @@ const CloseButton = styled.button`
     transform: scale(0.95);
   }
 `;
-const TooltipContent = styled.span`
+const TooltipContent$2 = styled.span`
   color: #212121;
   font-family: Poppins;
   font-size: 14px;
@@ -39634,7 +39655,7 @@ const MessageBox = _ref => {
     direction: "top",
     showTooltip: isDisabled,
     topFactor: -0.85,
-    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent$2, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -39722,7 +39743,7 @@ const TrashIcon = ({
 const DisabledTrashIcon = ({
   width = "22",
   height = "22",
-  color = "#D9D9D9"
+  color = "#B1B1B1"
 }) => {
   return /*#__PURE__*/React$1.createElement("svg", {
     width: width,
@@ -39735,7 +39756,7 @@ const DisabledTrashIcon = ({
     fill: color
   }), /*#__PURE__*/React$1.createElement("path", {
     d: "M0.853591 21.8534L0.146484 21.1463L21.1463 0.146484L21.8534 0.853591L0.853591 21.8534Z",
-    fill: "#D9D9D9"
+    fill: "#B1B1B1"
   }));
 };
 
@@ -44459,12 +44480,12 @@ const VendorItem$1 = styled$1.div`
   cursor: pointer;
   
   &:hover {
-    background: #f7f7fa;
+    background: #E6F0F0;
       .trash-icon svg path {
         fill: #B1B1B1;
       }
       .trash-icon-disabled svg path {
-        fill: #D9D9D9;
+        fill: #B1B1B1;
       }
   }
 `;
@@ -44527,6 +44548,14 @@ const CustomTooltip$1 = styled$1(Tooltip$2)`
     }
   }
 `;
+const TooltipContent$1 = styled$1.span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const Container$1 = styled$1.div`
   display: flex;
   align-items: center;
@@ -44623,6 +44652,7 @@ const DisabledTrashIconWrapper = styled$1.div`
   &[data-tooltip]:hover::after {
     left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
   }
+
 `;
 const TrashIconWrapper = styled$1.div`
   ${baseIconWrapperStyles}
@@ -44948,8 +44978,19 @@ const Item$1 = styled.div`
     .trash-icon svg path {
       fill: #b1b1b1;
     }
+    .trash-icon-disabled svg path {
+      fill: #B1B1B1;
+    }
   }
 `;
+const TooltipContent = styled.span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const Title$2 = styled.div`
   font-size: 14px;
   overflow: hidden;
@@ -45139,6 +45180,7 @@ const NewSubitemList = props => {
     linkColor
   } = props;
   const [isHovered, setIsHovered] = useState(false);
+  const [trashIsHovered, setTrashIsHovered] = useState(false);
   const vendorItems = itemAndPackage.find(i => i.name === vendor.name).packages || [];
   const onDeletePackage = item => {
     const updatedPackages = vendorItems.filter(pkg => pkg.brands !== item.brands);
@@ -45173,6 +45215,8 @@ const NewSubitemList = props => {
   };
   const handleMouseEnter = () => setIsHovered(true);
   const handleMouseLeave = () => setIsHovered(false);
+  const handleMouseTrashEnter = () => setTrashIsHovered(true);
+  const handleMouseTrashLeave = () => setTrashIsHovered(false);
   return /*#__PURE__*/React$1.createElement(NewSubitemContainer$1, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(BackButton$1, {
     onClick: onBack
   }, /*#__PURE__*/React$1.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React$1.createElement(BackTitle$1, null, "All Vendors")), /*#__PURE__*/React$1.createElement(SelectionTitle$1, null, vendor.name), /*#__PURE__*/React$1.createElement(AddButtonContainer, null, /*#__PURE__*/React$1.createElement(LinkButton, {
@@ -45189,7 +45233,11 @@ const NewSubitemList = props => {
     ref: el => setupTooltip(el, "Package was Sent")
   }, /*#__PURE__*/React$1.createElement(CustomTooltip, {
     hideTooltip: isHovered,
-    content: "Package was Sent",
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+      dangerouslySetInnerHTML: {
+        __html: "Package was Sent"
+      }
+    }),
     topFactor: 0,
     direction: "right"
   }, item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(PackageSendIcon, {
@@ -45201,14 +45249,25 @@ const NewSubitemList = props => {
     }
   }, item.brands && /*#__PURE__*/React$1.createElement(Title$2, {
     title: item.brands
-  }, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+  }, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(CustomTooltip, {
+    hideTooltip: trashIsHovered,
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+      dangerouslySetInnerHTML: {
+        __html: "Package cannot be deleted since it<br/> has been sent to the vendor as a form."
+      }
+    }),
+    topFactor: 0,
+    direction: "left"
+  }, /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
     className: "trash-icon-disabled"
 
     // ref={(el) => setupTooltip(el, trashTooltipText)}
   }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {
+    onMouseEnter: handleMouseTrashEnter,
+    onMouseLeave: handleMouseTrashLeave,
     width: "22",
     height: "22"
-  })) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
+  }))) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
     className: "trash-icon",
     onClick: e => {
       e.stopPropagation();
@@ -54121,7 +54180,7 @@ const ItemManagerPanel = _ref => {
     linkColor = "#212121",
     backgroundColor = 'white',
     buttonTooltipText = "Please fill out all forms before sending.",
-    trashTooltipText = 'Package cannot be deleted since it<br/> has been sent to the vendor as a form.',
+    trashTooltipText = 'Vendor cannot be deleted since its  packages <br/> have already been sent as a form.',
     maxVisibleVendors = 12,
     componentText = "Scale"
   } = _ref;
@@ -54327,7 +54386,11 @@ const ItemManagerPanel = _ref => {
       ref: headerRef
     }, /*#__PURE__*/React$1.createElement(Container$1, null, /*#__PURE__*/React$1.createElement(TitleContainer, null, /*#__PURE__*/React$1.createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React$1.createElement(SubtitleContainer, null, /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React$1.createElement("span", null, "\xB7"), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0), " ", "Packages"))), editMode && /*#__PURE__*/React$1.createElement(ButtonContainer, null, /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
       hideTooltip: !disabledSendForms,
-      content: buttonTooltipText,
+      content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
+        dangerouslySetInnerHTML: {
+          __html: buttonTooltipText
+        }
+      }),
       topFactor: 2,
       direction: "bottom"
     }, /*#__PURE__*/React$1.createElement(Button$1, {
@@ -54377,9 +54440,15 @@ const ItemManagerPanel = _ref => {
         } else {
           return `${sentPackagesLength}/${packagesLength} Packages Sent`;
         }
-      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, null, /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
+      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+        className: "trash-icon-disabled"
+      }, /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
         hideTooltip: trashIsHovered,
-        content: trashTooltipText,
+        content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
+          dangerouslySetInnerHTML: {
+            __html: trashTooltipText
+          }
+        }),
         topFactor: 0,
         direction: "left"
       }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {
@@ -54529,10 +54598,11 @@ const DropdownList = styled.ul`
       `}
 `;
 const SectionDiv = styled.div`
-  ${({
-  $showBorder,
-  margin
-}) => {
+  ${_ref => {
+  let {
+    $showBorder,
+    margin
+  } = _ref;
   switch ($showBorder) {
     case 'Template Offer':
       return css`border-top: 1px solid #e6e2e2ff;