@eclass/ui-kit 1.54.5 → 1.54.7

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

@@ -1,4 +1,4 @@
-import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
+import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState } from "react";
 const main = {
@@ -3202,7 +3202,7 @@ function PaymentModal({
     size: "xl",
     blockScrollOnMount: false,
     closeOnOverlayClick: false,
-    children: [overlay2, /* @__PURE__ */ jsxs(ModalContent, {
+    children: [overlay2, /* @__PURE__ */ jsxs(ModalContent$1, {
       marginTop: "0",
       marginBottom: ["25.75rem", "15.75rem"],
       children: [/* @__PURE__ */ jsxs(ModalHeader, {
@@ -4141,7 +4141,7 @@ const Modal = ({
       motionPreset: "scale",
       onClose,
       scrollBehavior: isInside ? "inside" : "outside",
-      children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent$1, {
         maxH: isInside ? "100dvh" : "auto",
         minH: isDesktop ? "300px" : "100dvh",
         padding: 0,
@@ -4153,19 +4153,23 @@ const Modal = ({
           marginX: isDesktop ? "auto" : 0,
           mb: 0,
           maxH: isInside ? "calc(100dvh - 96px)" : "auto",
-          maxWidth: isDesktop ? "600px" : "100%",
+          maxWidth: isDesktop ? "690px" : "100%",
           ...fixedButtons && {
             ".uikit-modalContent": {
               pb: 0
             },
             ".uikit-modalButtons": {
-              py
+              py,
+              px
             }
           },
           ...withoutMargin && {
             ".uikit-modalContent": {
               pt: 0,
               px: 0
+            },
+            ".uikit-modalButtons": {
+              px
             }
           }
         },
@@ -4204,6 +4208,43 @@ const Modal = ({
     })
   });
 };
+const StyledModalFooter = ModalFooter;
+const StyledModalBody = ModalBody;
+const ModalButtons = ({
+  children,
+  buttonsCenter,
+  buttonsColumn
+}) => {
+  const [isDesktop] = useMediaQuery(`(min-width: ${uiKitModalIsDesktop}px)`);
+  const buttonFull = !isDesktop && buttonsColumn;
+  return /* @__PURE__ */ jsx(StyledModalFooter, {
+    as: "footer",
+    flexDirection: buttonFull ? "column" : "row",
+    gap: "24px",
+    justifyContent: buttonsCenter ? "center" : "flex-start",
+    px: 0,
+    pt: "32px",
+    pb: 0,
+    className: "uikit-modalButtons",
+    sx: {
+      "&>div, &>div>.react-ripples, &>div>.react-ripples>button": {
+        width: isDesktop ? "auto" : "100%"
+      }
+    },
+    children
+  });
+};
+const ModalContent = ({
+  children,
+  pb = "32px"
+}) => {
+  return /* @__PURE__ */ jsx(StyledModalBody, {
+    pt: 0,
+    pb,
+    className: "uikit-modalContent",
+    children
+  });
+};
 const Loading$1 = ({
   fill = vars("colors-main-deepSkyBlue")
 }) => {
@@ -4263,7 +4304,7 @@ const ModalAlertNew = ({
       motionPreset: "scale",
       onClose,
       closeOnEsc: type !== "loading",
-      children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent$1, {
         borderRadius: "8px",
         p: 0,
         m: "10vh auto 0",
@@ -4299,6 +4340,31 @@ const ModalAlertNew = ({
     })
   });
 };
+const ModalAlertButtons = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Box, {
+    display: "flex",
+    w: "100%",
+    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
+  });
+};
 function ModalAlert({
   showModal,
   typeAlert,
@@ -4331,7 +4397,7 @@ function ModalAlert({
       right: "0",
       bottom: "0",
       zIndex: "998"
-    }), /* @__PURE__ */ jsxs(ModalContent, {
+    }), /* @__PURE__ */ jsxs(ModalContent$1, {
       zIndex: "999",
       sx: modalStyles.content,
       children: [/* @__PURE__ */ jsxs(Box, {
@@ -6751,5 +6817,5 @@ const EventsList = ({
     })]
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, Modal, ModalAlert, ModalAlertNew, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalContent, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map