@eclass/ui-kit 1.7.0 → 1.7.3

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

@@ -26078,6 +26078,46 @@ const styles = {
     ".react-ripples": {
       h: "100%",
       display: "grid!important"
+    },
+    ".chakra-button": {
+      borderStyle: "none"
+    },
+    ".chakra-modal__content-container": {
+      padding: "1.87rem",
+      zIndex: "1400",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "auto"
+    },
+    ".chakra-modal__content": {
+      borderRadius: "0.5rem",
+      background: "white",
+      color: "inherit",
+      zIndex: "1400",
+      maxWidth: "36.813rem",
+      boxShadow: "0px 4px 16px rgba(92, 92, 92, 0.2)"
+    },
+    ".chakra-modal__header": {
+      paddingInlineStart: "1.5rem",
+      paddingInlineEnd: "1.5rem",
+      fontSize: "1.25rem",
+      fontWeight: "700",
+      textAlign: "center",
+      ".chakra-icon": {
+        width: "13rem"
+      }
+    },
+    ".chakra-modal__close-btn": {
+      width: "2rem",
+      height: "2rem",
+      borderRadius: "0.5rem",
+      fontSize: "0.75rem",
+      position: "absolute",
+      top: "0.5rem",
+      right: "0.75rem",
+      color: "#60798E",
+      backgroundColor: "transparent",
+      borderStyle: "none"
     }
   })
 };
@@ -27386,8 +27426,10 @@ function maxWidthCoursesList(nCols = 4) {
 }
 function PaymentModal({
   isOpen,
+  onOpen,
   onClose,
-  showOverlay
+  showOverlay,
+  modalPaymentText
 }) {
   const cssButton = {
     backgroundColor: "transparent"
@@ -27410,9 +27452,11 @@ function PaymentModal({
     isOpen,
     onClose,
     size: "xl",
+    blockScrollOnMount: false,
+    closeOnOverlayClick: false,
     children: [overlay, /* @__PURE__ */ jsxs(ModalContent, {
       marginTop: "0",
-      marginBottom: "10.75rem",
+      marginBottom: ["25.75rem", "15.75rem"],
       children: [/* @__PURE__ */ jsxs(ModalHeader, {
         justifyContent: "center",
         display: "flex",
@@ -27423,7 +27467,7 @@ function PaymentModal({
           w: "52",
           h: "45",
           viewBox: "0 0 45 52"
-        }), "Curso congelado por pagos pendientes"]
+        }), modalPaymentText.title]
       }), /* @__PURE__ */ jsx(ModalCloseButton, {
         size: "md",
         color: vars("colors-main-blueGrey"),
@@ -27433,7 +27477,8 @@ function PaymentModal({
       }), /* @__PURE__ */ jsx(ModalBody, {
         p: "1rem 2rem 2rem 2rem",
         children: /* @__PURE__ */ jsx(Text, {
-          children: "Para regularizar esta situaci\xF3n y continuar estudiando, comun\xEDcate cuanto antes con regularizacion@eclass.com, de lo contrario tu curso ser\xE1 deshabilitado."
+          align: "center",
+          children: modalPaymentText.body
         })
       }), /* @__PURE__ */ jsx(ModalFooter, {
         justifyContent: "center",
@@ -27450,14 +27495,16 @@ function PaymentModal({
           _hover: cssButton,
           _focus: cssButton,
           _active: cssButton,
-          children: "Entendido"
+          children: modalPaymentText.buttonName
         })
       })]
     })]
   });
 }
 Modal.displayName = "Modal";
-function Footer() {
+function Footer({
+  modalPaymentText
+}) {
   var _a;
   const {
     action,
@@ -27495,6 +27542,7 @@ function Footer() {
         mr: action.hasIcon ? "1.5rem" : "0",
         lineHeight: "1.172rem",
         p: "0",
+        zIndex: "inherit !important",
         _hover: cssButton,
         _focus: cssButton,
         _active: cssButton,
@@ -27520,7 +27568,9 @@ function Footer() {
     }), /* @__PURE__ */ jsx(PaymentModal, {
       isOpen,
       onClose,
-      showOverlay: overlay
+      showOverlay: overlay,
+      onOpen,
+      modalPaymentText
     })]
   });
 }
@@ -27537,7 +27587,8 @@ function WithRipples({
   });
 }
 function CourseBox({
-  data
+  data,
+  modalPaymentText
 }) {
   var _a, _b, _c;
   const cssActive = {
@@ -27563,7 +27614,9 @@ function CourseBox({
           h: "100%",
           children: [/* @__PURE__ */ jsxs(Box, {
             children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(Section, {})]
-          }), /* @__PURE__ */ jsx(Footer, {})]
+          }), /* @__PURE__ */ jsx(Footer, {
+            modalPaymentText
+          })]
         })
       })
     })
@@ -27574,6 +27627,7 @@ const columnGap = 1.25;
 const wCourse = 17.8125;
 function CourseList({
   courses,
+  modalPaymentText,
   m: m2 = "0 auto"
 }) {
   if (courses === void 0) {
@@ -27587,7 +27641,8 @@ function CourseList({
     m: m2,
     w: "100%",
     children: courses == null ? void 0 : courses.map((course) => /* @__PURE__ */ jsx(CourseBox, {
-      data: course
+      data: course,
+      modalPaymentText
     }, course.id))
   });
 }