@eclass/ui-kit 1.54.3 → 1.54.5

package/dist/eclass-ui-kit.es.js

@@ -108,6 +108,7 @@ const overlay = {
 };
 const dialog = {
   boxShadow: shadows.lg,
+  bg: colors.neutral.white,
   borderRadius: radii.big
 };
 const theme = extendTheme({
@@ -1870,6 +1871,7 @@ const NavBarButton = ({
     id: isAccessibility ? "UserWayButton" : "",
     onClick: isAccessibility ? triggerWidget : onClick,
     sx: {
+      alignItems: "center",
       background: "none !important",
       border: "1px transparent !important",
       cursor: "pointer",
@@ -4115,55 +4117,8 @@ const useFlashNotification = ({ state, message }) => {
     }
   };
 };
-const StyledModalFooter = ModalFooter;
-const ModalButtons = ({
-  buttons,
-  buttonsCenter,
-  buttonsColumn,
-  buttonsInside,
-  isDesktop,
-  px,
-  py
-}) => {
-  if (!buttons || buttons && buttons.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  const buttonFull = !isDesktop && buttonsColumn;
-  const hasLoading = buttons.some((button) => button.isLoading);
-  return /* @__PURE__ */ jsx(StyledModalFooter, {
-    as: "footer",
-    flexDirection: buttonFull ? "column" : "row",
-    gap: "24px",
-    justifyContent: buttonsCenter ? "center" : "flex-start",
-    pb: buttonsInside ? 0 : py,
-    pt: py,
-    px: buttonsInside ? 0 : px,
-    children: buttons.map((button, index2) => {
-      var _a, _b;
-      if ((button == null ? void 0 : button.type) === "secondary") {
-        return /* @__PURE__ */ jsx(BtnSecondary, {
-          onClick: () => button.action(),
-          isFullWidth: buttonFull,
-          isLoading: button.isLoading,
-          disabled: (_a = button.isDisabled) != null ? _a : hasLoading,
-          children: button.text
-        }, index2);
-      }
-      return /* @__PURE__ */ jsx(BtnPrimary, {
-        onClick: () => button.action(),
-        isFullWidth: buttonFull,
-        isLoading: button.isLoading,
-        disabled: (_b = button.isDisabled) != null ? _b : hasLoading,
-        children: button.text
-      }, index2);
-    })
-  });
-};
+const uiKitModalIsDesktop = 641;
 const Modal = ({
-  buttons,
-  buttonsCenter,
-  buttonsColumn = true,
-  buttonsInside,
   children,
   closeOnOverlayClick = true,
   fixedSubtitle,
@@ -4171,38 +4126,48 @@ const Modal = ({
   onClose,
   title,
   withoutMargin = false,
-  scrollBehavior = "outside"
+  scrollBehavior = "outside",
+  fixedButtons = false
 }) => {
   const py = "32px";
   const px = "24px";
-  const [isDesktop] = useMediaQuery("(min-width: 641px)");
-  const hasLoading = (buttons == null ? void 0 : buttons.length) && buttons.some((button) => button.isLoading);
-  const handleClose = () => {
-    if (hasLoading)
-      return;
-    return onClose();
-  };
-  const isInside = scrollBehavior === "inside";
+  const [isDesktop] = useMediaQuery(`(min-width: ${uiKitModalIsDesktop}px)`);
+  const isInside = scrollBehavior === "inside" || fixedButtons;
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs(Modal$1, {
-      closeOnOverlayClick: hasLoading ? false : closeOnOverlayClick,
+      closeOnOverlayClick,
+      closeOnEsc: closeOnOverlayClick,
       isOpen,
       motionPreset: "scale",
-      onClose: handleClose,
-      scrollBehavior,
+      onClose,
+      scrollBehavior: isInside ? "inside" : "outside",
       children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
         maxH: isInside ? "100dvh" : "auto",
-        minH: "300px",
+        minH: isDesktop ? "300px" : "100dvh",
         padding: 0,
         width: "100%",
         sx: {
+          bgColor: vars("colors-neutral-white"),
           borderRadius: isDesktop ? "8px" : 0,
-          height: isDesktop ? "auto" : "100dvh",
           mt: isDesktop ? "48px" : 0,
           marginX: isDesktop ? "auto" : 0,
           mb: 0,
           maxH: isInside ? "calc(100dvh - 96px)" : "auto",
-          maxWidth: isDesktop ? "600px" : "100%"
+          maxWidth: isDesktop ? "600px" : "100%",
+          ...fixedButtons && {
+            ".uikit-modalContent": {
+              pb: 0
+            },
+            ".uikit-modalButtons": {
+              py
+            }
+          },
+          ...withoutMargin && {
+            ".uikit-modalContent": {
+              pt: 0,
+              px: 0
+            }
+          }
         },
         children: [/* @__PURE__ */ jsx(ModalHeader, {
           bg: vars("colors-main-deepSkyBlue"),
@@ -4234,27 +4199,7 @@ const Modal = ({
           textAlign: "center",
           px,
           children: fixedSubtitle
-        }), children && /* @__PURE__ */ jsxs(ModalBody, {
-          px: withoutMargin ? 0 : px,
-          py: 0,
-          mb: (buttons == null ? void 0 : buttons.length) === 0 ? py : buttonsInside ? py : 0,
-          children: [children, buttonsInside && buttons && buttons.length > 0 && /* @__PURE__ */ jsx(ModalButtons, {
-            buttons,
-            buttonsCenter,
-            buttonsColumn,
-            buttonsInside: true,
-            isDesktop,
-            px,
-            py
-          })]
-        }), !buttonsInside && /* @__PURE__ */ jsx(ModalButtons, {
-          buttons,
-          buttonsCenter,
-          buttonsColumn,
-          isDesktop,
-          px,
-          py
-        })]
+        }), children]
       })]
     })
   });
@@ -4305,9 +4250,9 @@ const ModalAlertNew = ({
   type,
   isOpen,
   onClose,
+  children,
   title,
   description,
-  buttons,
   status
 }) => {
   const [isDesktop] = useMediaQuery("(min-width: 641px)");
@@ -4349,30 +4294,7 @@ const ModalAlertNew = ({
             lineHeight: "24px",
             children: description
           })]
-        }), type === "info" && (buttons == null ? void 0 : buttons.length) && /* @__PURE__ */ jsx(Box, {
-          display: "flex",
-          borderTop: `1px solid ${vars("colors-neutral-platinum")}`,
-          sx: {
-            button: {
-              borderRight: `1px solid ${vars("colors-neutral-platinum")}`,
-              fontFamily: "Roboto",
-              fontSize: "16px",
-              fontWeight: 500,
-              lineHeight: "21px",
-              p: "16px",
-              textDecor: "none",
-              width: "100%",
-              "&:last-child": {
-                borderRight: "none"
-              }
-            }
-          },
-          children: buttons.map((button, index2) => /* @__PURE__ */ jsx(BtnLink, {
-            as: "button",
-            onClick: () => button.action(),
-            children: button.text
-          }, index2))
-        })]
+        }), type !== "loading" && children ? children : /* @__PURE__ */ jsx(Fragment, {})]
       })]
     })
   });