sag_components 2.0.0-beta211 → 2.0.0-beta212

package/dist/index.esm.js

@@ -34625,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;
@@ -34698,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
       }
@@ -34886,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);
@@ -35978,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;
@@ -35988,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;`;
@@ -36015,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;`;
@@ -36027,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":
@@ -36044,9 +36054,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -39556,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;
@@ -39645,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
       }
@@ -39733,7 +39743,7 @@ const TrashIcon = ({
 const DisabledTrashIcon = ({
   width = "22",
   height = "22",
-  color = "#D9D9D9"
+  color = "#B1B1B1"
 }) => {
   return /*#__PURE__*/React$1.createElement("svg", {
     width: width,
@@ -39746,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"
   }));
 };
 
@@ -44470,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;
       }
   }
 `;
@@ -44538,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;
@@ -44634,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}
@@ -44959,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;
@@ -45150,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);
@@ -45184,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, {
@@ -45200,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, {
@@ -45212,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();
@@ -54132,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;
@@ -54338,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, {
@@ -54388,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, {
@@ -54540,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;