@eclass/ui-kit 1.64.0 → 1.64.2

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

@@ -3566,8 +3566,8 @@ function BoxTraditional({
   });
 }
 BoxTraditional.displayName = "BoxTraditional";
-const StyledLinkBox = LinkBox;
-const StyledLinkOverlay = LinkOverlay;
+const StyledLinkBox$1 = LinkBox;
+const StyledLinkOverlay$1 = LinkOverlay;
 function WithRipples({
   enabled,
   children
@@ -3607,7 +3607,7 @@ function BoxImage({
   };
   return /* @__PURE__ */ jsx(WithRipples, {
     enabled: isClickable,
-    children: /* @__PURE__ */ jsxs(StyledLinkBox, {
+    children: /* @__PURE__ */ jsxs(StyledLinkBox$1, {
       className: "CourseList-ImageBox",
       _focusVisible: {
         boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
@@ -3637,7 +3637,7 @@ function BoxImage({
       "aria-label": hasCustomClick ? title : void 0,
       role: hasCustomClick ? "button" : void 0,
       onKeyDown: hasCustomClick ? handleKeyDown : void 0,
-      children: [(hasCustomClick || !(data == null ? void 0 : data.hasFinanzeFreezed)) && isClickable && (hasHref || hasCustomClick) && /* @__PURE__ */ jsx(StyledLinkOverlay, {
+      children: [(hasCustomClick || !(data == null ? void 0 : data.hasFinanzeFreezed)) && isClickable && (hasHref || hasCustomClick) && /* @__PURE__ */ jsx(StyledLinkOverlay$1, {
         "data-testid": "course-link-overlay",
         href: hasHref ? (_e = data == null ? void 0 : data.action) == null ? void 0 : _e.href : void 0,
         isExternal: hasHref && ((_f = data == null ? void 0 : data.action) == null ? void 0 : _f.targetBlank),
@@ -9606,7 +9606,7 @@ const StandardBackground = ({
     })]
   });
 };
-const StyledText$3 = Text$1;
+const StyledText$2 = Text$1;
 const StyledLink$1 = Link;
 const Resources = ({
   id,
@@ -9688,7 +9688,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 +9698,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 +9711,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 +11328,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 +11348,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 +11372,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 +11382,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 +11413,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 +11437,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,56 +11540,91 @@ const ShareAndReviewModal = ({
     })]
   });
 };
-const StyledText = Text$1;
 const StyledFlex = Flex;
 const StyledImage = Image;
+const StyledLinkBox = LinkBox;
+const StyledLinkOverlay = LinkOverlay;
 const SimpleCourseBox = ({
-  img,
   courseName,
+  grade,
+  href,
+  img,
   icon,
-  label
+  isApproved,
+  label,
+  isEnabled = true,
+  noBorder = false
 }) => {
-  return /* @__PURE__ */ jsxs(StyledFlex, {
-    alignItems: "center",
-    justifyContent: "space-between",
+  const link = !isEnabled || !href || href === "" ? void 0 : href;
+  return /* @__PURE__ */ jsx(StyledLinkBox, {
     p: "16px 0",
-    borderBottom: `1px solid ${vars("colors-neutral-platinum")}`,
-    children: [/* @__PURE__ */ jsxs(StyledFlex, {
+    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",
-      children: [/* @__PURE__ */ jsx(StyledImage, {
-        src: img,
-        w: "150px",
-        h: "74px",
-        borderRadius: "10px"
-      }), /* @__PURE__ */ jsxs(StyledFlex, {
-        flexDirection: "column",
-        gap: "8px",
-        justifyContent: "center",
-        children: [/* @__PURE__ */ jsx("strong", {
-          children: courseName
-        }), icon && label && /* @__PURE__ */ jsxs(StyledText, {
-          m: "0",
-          fontSize: "14px",
-          lineHeight: "19px",
-          display: "flex",
-          gap: "10px",
-          maxW: "395px",
-          sx: {
-            svg: {
-              verticalAlign: "top"
-            }
-          },
-          children: [/* @__PURE__ */ jsx(IconSelection, {
-            type: icon
-          }), " ", label]
+      justifyContent: "space-between",
+      pr: "8px",
+      children: [/* @__PURE__ */ jsxs(StyledFlex, {
+        gap: "24px",
+        alignItems: "center",
+        children: [/* @__PURE__ */ jsx(StyledImage, {
+          src: img,
+          w: "150px",
+          h: "74px",
+          borderRadius: "10px"
+        }), /* @__PURE__ */ jsxs(StyledFlex, {
+          flexDirection: "column",
+          gap: "8px",
+          justifyContent: "center",
+          children: [/* @__PURE__ */ jsx("strong", {
+            children: courseName
+          }), icon && label && /* @__PURE__ */ jsxs(Box, {
+            m: "0",
+            fontSize: "14px",
+            lineHeight: "19px",
+            display: "flex",
+            gap: "10px",
+            maxW: "395px",
+            sx: {
+              svg: {
+                verticalAlign: "top"
+              }
+            },
+            children: [/* @__PURE__ */ jsx(IconSelection, {
+              type: icon
+            }), /* @__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
+            })]
+          })]
         })]
+      }), isEnabled && link && /* @__PURE__ */ jsx(Box, {
+        children: /* @__PURE__ */ jsx(ArrowRight, {
+          color: "#60798E"
+        })
       })]
-    }), /* @__PURE__ */ jsx(Box, {
-      children: /* @__PURE__ */ jsx(ArrowRight, {
-        color: "#60798E"
-      })
-    })]
+    })
   });
 };
 export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalCard, ModalCardContent, ModalContent, ModalMultiple, ModalSimple, NavBarButton, NewTooltip, Progress, Resources, Ripples, ShareAndReviewModal, SimpleCourseBox, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };