sag_components 2.0.0-beta202 → 2.0.0-beta204

package/dist/index.esm.js

@@ -2390,16 +2390,16 @@ const TooltipTip$1 = styled.div`
 const Tooltip$2 = props => {
   const {
     children,
-    content = 'Tooltip content',
-    showToolTip = true,
-    direction = 'top',
-    delay = '400',
+    content = "Tooltip content",
+    showTooltip = true,
+    direction = "top",
+    delay = "400",
     topFactor = -1.8,
     hideTooltip = false,
     className
   } = props;
   let timeout;
-  const [active, setActive] = useState(showToolTip);
+  const [active, setActive] = useState(showTooltip);
   const showTip = () => {
     timeout = setTimeout(() => {
       setActive(true);
@@ -2413,12 +2413,12 @@ const Tooltip$2 = props => {
     className: className
   }, /*#__PURE__*/React$1.createElement(TooltipWrapper$2, {
     className: "tooltip-wrapper",
-    onMouseEnter: showToolTip && showTip,
-    onMouseLeave: showToolTip && hideTip
+    onMouseEnter: showTooltip && showTip,
+    onMouseLeave: showTooltip && hideTip
   }, children, active && !hideTooltip && /*#__PURE__*/React$1.createElement(TooltipTip$1, {
-    className: `controls ${direction || 'top'}`,
+    className: `controls ${direction || "top"}`,
     topFactor: topFactor
-  }, typeof content === 'string' ? /*#__PURE__*/React$1.createElement("span", {
+  }, typeof content === "string" ? /*#__PURE__*/React$1.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: content
     }
@@ -34618,7 +34618,7 @@ const ModalBody = styled.div`
   width: 100%;
   height: 100%;
 `;
-const TooltipContent = styled.span`
+const TooltipContent$1 = styled.span`
   color: #212121;
   font-family: Poppins;
   font-size: 14px;
@@ -34691,7 +34691,7 @@ const ModalWithOverlay = props => {
   }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
     direction: "top",
     topFactor: -0.85,
-    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -36037,9 +36037,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 {
@@ -39507,26 +39507,26 @@ styled.div`
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    font-family: 'Poppins', sans-serif;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, ${props => props.opacity || 0.5});
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  font-family: "Poppins", sans-serif;
 `;
 const ModalContainer = styled.div`
-    background-color: white;
-    border-radius: 12px;
-    width: ${props => props.$width || '400px'};
-    height: ${props => props.$height || 'auto'};
-    position: relative;
-    font-family: 'Poppins', sans-serif;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  background-color: white;
+  border-radius: 12px;
+  width: ${props => props.$width || "400px"};
+  height: ${props => props.$height || "auto"};
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 `;
 const CloseButton = styled.button`
   background: none;
@@ -39549,6 +39549,14 @@ const CloseButton = styled.button`
     transform: scale(0.95);
   }
 `;
+const TooltipContent = styled.span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const ModalHeader = styled.div`
   display: flex;
   justify-content: space-between;
@@ -39564,15 +39572,15 @@ const ModalTitle = styled.h5`
   margin: 0;
 `;
 const ModalContent = styled.div`
-    padding: 24px;
-    border-top: ${props => props.showBorders ? '1px solid #D9D9D9' : 'none'};
-    border-bottom: ${props => props.showBorders ? '1px solid #D9D9D9' : 'none'};
+  padding: 24px;
+  border-top: ${props => props.showBorders ? "1px solid #D9D9D9" : "none"};
+  border-bottom: ${props => props.showBorders ? "1px solid #D9D9D9" : "none"};
 `;
 const ButtonContainer$1 = styled.div`
-    display: flex;
-    gap: 16px;
-    justify-content: flex-end;
-    padding: 16px 24px;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  padding: 16px 24px;
 `;
 
 // MessageBox.jsx
@@ -39589,9 +39597,11 @@ const MessageBox = _ref => {
     height = "auto",
     color = "#F00021",
     hoverColor = "#ff7875",
+    opacity = 0.5,
     secondaryColor = "#ffffff",
     seperateSectionBorder = false,
-    children
+    children,
+    tooltipContent = "Please fill in all required details"
   } = _ref;
   if (!isOpen) return null;
   const handleOverlayClick = e => {
@@ -39600,7 +39610,8 @@ const MessageBox = _ref => {
     }
   };
   return /*#__PURE__*/React$1.createElement(ModalOverlay, {
-    onClick: handleOverlayClick
+    onClick: handleOverlayClick,
+    opacity: opacity
   }, /*#__PURE__*/React$1.createElement(ModalContainer, {
     $width: width,
     $height: height
@@ -39623,7 +39634,16 @@ const MessageBox = _ref => {
     width: "auto",
     minWidth: "60px",
     onClick: onClose
-  }), /*#__PURE__*/React$1.createElement(Button$1, {
+  }), tooltipContent !== "" && /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    direction: "top",
+    showTooltip: isDisabled,
+    topFactor: -0.85,
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+      dangerouslySetInnerHTML: {
+        __html: tooltipContent
+      }
+    })
+  }, /*#__PURE__*/React$1.createElement(Button$1, {
     text: primaryText,
     size: "medium",
     backgroundColor: color,
@@ -39639,7 +39659,7 @@ const MessageBox = _ref => {
     width: "auto",
     minWidth: "60px",
     onClick: onConfirm
-  }))));
+  })))));
 };
 
 // OkIcon.jsx