@eclass/ui-kit 1.54.6 → 1.54.8

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, {
@@ -3280,8 +3280,11 @@ function Footer({
     p: "1rem",
     borderTop: "1px solid",
     borderTopColor: vars("colors-neutral-platinum"),
+    tabIndex: 0,
+    className: "footerButtonBox",
     children: [isCourseActive(action.enabled, Profile2 == null ? void 0 : Profile2.id) ? /* @__PURE__ */ jsxs(Fragment, {
       children: [hasFinanzeFreezed && modalPaymentText ? /* @__PURE__ */ jsx(Box, {
+        className: "uno",
         color: vars("colors-main-deepSkyBlue"),
         backgroundColor: "transparent",
         fontWeight: "500",
@@ -3297,6 +3300,7 @@ function Footer({
         fontSize: "1rem !important",
         children: action.text
       }) : /* @__PURE__ */ jsx(Text, {
+        className: "dos",
         color: vars("colors-main-deepSkyBlue"),
         fontWeight: "500",
         mr: action.hasIcon ? "1.5rem" : "0",
@@ -3308,6 +3312,7 @@ function Footer({
         color: vars("colors-main-deepSkyBlue")
       })]
     }) : /* @__PURE__ */ jsx(Text, {
+      className: "tres",
       fontWeight: "500",
       lineHeight: "1.172rem",
       color: vars("colors-neutral-spanishGrey"),
@@ -3345,6 +3350,7 @@ function BoxTraditional({
   return /* @__PURE__ */ jsx(CourseBoxContext.Provider, {
     value: data,
     children: /* @__PURE__ */ jsx(LinkBox, {
+      className: "linkBoxTraditional",
       as: "article",
       border: vars("borders-light"),
       borderRadius: vars("radii-big"),
@@ -3352,8 +3358,9 @@ function BoxTraditional({
       transition: "box-shadow .3s",
       _active: cssActive,
       _hover: cssActive,
-      _focus: cssActive,
       overflow: "hidden",
+      tabIndex: 0,
+      role: "link",
       children: /* @__PURE__ */ jsx(WithRipples$1, {
         enabled: isCourseActive((_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data.Profile) == null ? void 0 : _c.id),
         children: /* @__PURE__ */ jsxs(Flex, {
@@ -3364,7 +3371,9 @@ function BoxTraditional({
             className: "CourseList-TraditionalBox",
             children: [!data.hasFinanzeFreezed && isCourseActive((_e = (_d = data.action) == null ? void 0 : _d.enabled) != null ? _e : false, (_f = data.Profile) == null ? void 0 : _f.id) && /* @__PURE__ */ jsx(LinkOverlay, {
               href: (_g = data.action) == null ? void 0 : _g.href,
-              isExternal: (_h = data.action) == null ? void 0 : _h.targetBlank
+              isExternal: (_h = data.action) == null ? void 0 : _h.targetBlank,
+              tabIndex: -1,
+              className: "linkOverlay"
             }), /* @__PURE__ */ jsx(Header$1, {}), /* @__PURE__ */ jsx(Section, {})]
           }), /* @__PURE__ */ jsx(Footer, {
             modalPaymentText
@@ -3493,6 +3502,7 @@ function CourseList({
     return null;
   }
   return /* @__PURE__ */ jsx(Box, {
+    className: "courseListBox",
     display: "grid",
     gridColumnGap: `${columnGap}rem`,
     gridRowGap: "1.75rem",
@@ -4141,7 +4151,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,
@@ -4208,6 +4218,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")
 }) => {
@@ -4267,7 +4314,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",
@@ -4303,6 +4350,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,
@@ -4335,7 +4407,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, {
@@ -6755,5 +6827,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