@eclass/ui-kit 1.64.1 → 1.64.3

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

@@ -7719,6 +7719,7 @@ const useModalConfig = ({
     }
   };
 };
+const StyledModalContent$1 = ModalContent$1;
 const uiKitModalIsDesktop = 641;
 const ModalPadding = {
   py: "32px",
@@ -7773,7 +7774,7 @@ const Modal = ({
           }
         }
       },
-      children: /* @__PURE__ */ jsx(ModalContent$1, {
+      children: /* @__PURE__ */ jsx(StyledModalContent$1, {
         ...modalConfig.contentProps,
         children: /* @__PURE__ */ jsx(ModalContentBase, {
           fixedButtons,
@@ -9606,7 +9607,7 @@ const StandardBackground = ({
     })]
   });
 };
-const StyledText$3 = Text$1;
+const StyledText$2 = Text$1;
 const StyledLink$1 = Link;
 const Resources = ({
   id,
@@ -9688,7 +9689,7 @@ const Resources = ({
         gap: "8px",
         padding: "1rem",
         children: [/* @__PURE__ */ jsx(Box, {
-          children: /* @__PURE__ */ jsx(StyledText$3, {
+          children: /* @__PURE__ */ jsx(StyledText$2, {
             fontFamily: "Roboto",
             fontWeight: "700",
             lineHeight: "21px",
@@ -9698,7 +9699,7 @@ const Resources = ({
             children: resourceTitle
           })
         }), /* @__PURE__ */ jsx(Box, {
-          children: /* @__PURE__ */ jsx(StyledText$3, {
+          children: /* @__PURE__ */ jsx(StyledText$2, {
             fontFamily: "Roboto",
             fontWeight: "400",
             lineHeight: "14px",
@@ -9711,7 +9712,7 @@ const Resources = ({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          children: /* @__PURE__ */ jsxs(StyledText$3, {
+          children: /* @__PURE__ */ jsxs(StyledText$2, {
             fontFamily: "Roboto",
             fontWeight: "500",
             fontSize: "14px",
@@ -11328,7 +11329,7 @@ function CustomCloseIcon(props) {
 }
 const StyledImage$2 = Image;
 const StyledFlex$3 = Flex;
-const StyledText$2 = Text$1;
+const StyledText$1 = Text$1;
 const StyledDivider = Divider;
 const StyledLink = Link;
 const InitialShareContent = ({
@@ -11348,14 +11349,14 @@ const InitialShareContent = ({
       }), /* @__PURE__ */ jsxs(StyledFlex$3, {
         flexDir: "column",
         gap: "8px",
-        children: [/* @__PURE__ */ jsx(StyledText$2, {
+        children: [/* @__PURE__ */ jsx(StyledText$1, {
           as: "h6",
           fontSize: "xl",
           fontWeight: "bold",
           color: vars("colors-neutral-darkCharcoal"),
           m: "0",
           children: "\xA1Qu\xE9 bueno que quieras compartirlo!"
-        }), /* @__PURE__ */ jsx(StyledText$2, {
+        }), /* @__PURE__ */ jsx(StyledText$1, {
           fontSize: "md",
           color: vars("colors-neutral-darkCharcoal"),
           mb: "0",
@@ -11372,7 +11373,7 @@ const InitialShareContent = ({
       children: [/* @__PURE__ */ jsx(StyledDivider, {
         borderColor: vars("colors-neutral-platinum"),
         m: "0"
-      }), /* @__PURE__ */ jsx(StyledText$2, {
+      }), /* @__PURE__ */ jsx(StyledText$1, {
         fontSize: "sm",
         color: vars("colors-neutral-gray"),
         whiteSpace: "nowrap",
@@ -11382,7 +11383,7 @@ const InitialShareContent = ({
         borderColor: vars("colors-neutral-platinum"),
         m: "0"
       })]
-    }), /* @__PURE__ */ jsx(StyledText$2, {
+    }), /* @__PURE__ */ jsx(StyledText$1, {
       as: "p",
       fontSize: "md",
       fontWeight: "700",
@@ -11413,7 +11414,7 @@ const InitialShareContent = ({
 };
 const StyledImage$1 = Image;
 const StyledFlex$2 = Flex;
-const StyledText$1 = Text$1;
+const StyledText = Text$1;
 const AfterShareContent = ({
   onClose,
   onLeaveReview
@@ -11437,14 +11438,14 @@ const AfterShareContent = ({
       h: "70px",
       alt: "cotill\xF3n de celebraci\xF3n",
       src: "https://cdn.eclass.com/vendors/apps/front_v8/assets/Common/celebration.webp"
-    }), /* @__PURE__ */ jsx(StyledText$1, {
+    }), /* @__PURE__ */ jsx(StyledText, {
       as: "h6",
       fontSize: "xl",
       fontWeight: "bold",
       color: vars("colors-neutral-darkCharcoal"),
       m: "0",
       children: "\xBFYa lo compartiste en LinkedIn?"
-    }), /* @__PURE__ */ jsxs(StyledText$1, {
+    }), /* @__PURE__ */ jsxs(StyledText, {
       fontSize: "md",
       fontWeight: "400",
       color: vars("colors-neutral-darkCharcoal"),
@@ -11540,35 +11541,46 @@ const ShareAndReviewModal = ({
     })]
   });
 };
-const StyledText = Text$1;
 const StyledFlex = Flex;
 const StyledImage = Image;
 const StyledLinkBox = LinkBox;
 const StyledLinkOverlay = LinkOverlay;
 const SimpleCourseBox = ({
   courseName,
+  grade,
   href,
   img,
   icon,
+  isApproved,
   label,
-  noLink = false
+  isEnabled = true,
+  noBorder = false
 }) => {
-  const link = noLink || !href || href === "" ? void 0 : href;
+  const link = !isEnabled || !href || href === "" ? void 0 : href;
+  const [isDesktop] = useMediaQuery("(min-width: 768px)");
   return /* @__PURE__ */ jsx(StyledLinkBox, {
-    p: "16px",
-    borderBottom: `1px solid ${vars("colors-neutral-platinum")}`,
+    p: isDesktop ? "16px 24px" : "16px",
+    borderBottom: noBorder ? "none" : `1px solid ${vars("colors-neutral-platinum")}`,
     _hover: {
       backgroundColor: link ? vars("colors-neutral-cultured2") : "none",
       cursor: link ? "pointer" : "default"
     },
+    sx: {
+      a: {
+        textDecoration: "none",
+        color: vars("colors-neutral-darkCharcoal")
+      }
+    },
     children: /* @__PURE__ */ jsxs(StyledLinkOverlay, {
       href: link,
       display: "flex",
+      gap: "24px",
       alignItems: "center",
       justifyContent: "space-between",
       children: [/* @__PURE__ */ jsxs(StyledFlex, {
-        gap: "24px",
-        alignItems: "center",
+        gap: isDesktop ? "24px" : "16px",
+        alignItems: isDesktop ? "center" : "flex-start",
+        flexDir: isDesktop ? "row" : "column",
         children: [/* @__PURE__ */ jsx(StyledImage, {
           src: img,
           w: "150px",
@@ -11580,7 +11592,7 @@ const SimpleCourseBox = ({
           justifyContent: "center",
           children: [/* @__PURE__ */ jsx("strong", {
             children: courseName
-          }), icon && label && /* @__PURE__ */ jsxs(StyledText, {
+          }), icon && label && /* @__PURE__ */ jsxs(Box, {
             m: "0",
             fontSize: "14px",
             lineHeight: "19px",
@@ -11594,10 +11606,22 @@ const SimpleCourseBox = ({
             },
             children: [/* @__PURE__ */ jsx(IconSelection, {
               type: icon
-            }), " ", label]
+            }), /* @__PURE__ */ jsx("p", {
+              children: label
+            }), grade && /* @__PURE__ */ jsx(Box, {
+              h: "17px",
+              w: "34px",
+              fontSize: "12px",
+              fontWeight: "700",
+              textAlign: "center",
+              borderRadius: "5px",
+              color: vars("colors-neutral-white"),
+              bg: isApproved ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
+              children: grade
+            })]
           })]
         })]
-      }), link && /* @__PURE__ */ jsx(Box, {
+      }), isEnabled && link && /* @__PURE__ */ jsx(Box, {
         children: /* @__PURE__ */ jsx(ArrowRight, {
           color: "#60798E"
         })