@eclass/ui-kit 1.45.1 → 1.45.3

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

@@ -32049,80 +32049,80 @@ const LargeBox = ({
   };
   return /* @__PURE__ */ jsx(Link, {
     href: redirect,
-    _hover: {
-      textDecoration: "none"
-    },
     target: targetBlank ? "_blank" : "_self",
     rel: targetBlank ? "noopener noreferrer" : void 0,
-    display: "contents",
-    children: /* @__PURE__ */ jsxs(Flex, {
-      cursor: "pointer",
-      transition: "box-shadow .3s",
-      _active: cssActive,
-      _hover: cssActive,
-      _focus: cssActive,
-      w: "fit-content",
-      borderRadius: vars("radii-big"),
-      display: isMobile ? "block" : "flex",
-      children: [/* @__PURE__ */ jsx(Box, {
-        width: "285px",
-        height: isMobile ? "140px" : "168px",
-        bgImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${eventImage})`,
-        backgroundSize: "cover",
-        borderRadius: isMobile ? "8px 8px 0px 0px" : "8px 0 0 8px"
-      }), /* @__PURE__ */ jsxs(Box, {
-        width: isMobile ? "285px" : "305px",
-        minHeight: isMobile ? "160px" : "168px",
-        borderRadius: isMobile ? "0 0 8px 8px" : "0 8px 8px 0",
-        border: vars("borders-light"),
-        display: "flex",
-        flexDirection: "column",
+    w: "fit-content",
+    h: "fit-content",
+    transition: "box-shadow .3s",
+    borderRadius: vars("radii-big"),
+    _active: cssActive,
+    _hover: cssActive,
+    _focus: cssActive,
+    children: /* @__PURE__ */ jsx(Ripples, {
+      children: /* @__PURE__ */ jsxs(Flex, {
         cursor: "pointer",
-        children: [/* @__PURE__ */ jsxs(Box, {
-          width: "inherit",
-          height: "100%",
-          padding: "4",
-          color: "#555555",
-          gap: "16px",
-          display: "grid",
-          children: [/* @__PURE__ */ jsx(Text, {
-            fontWeight: "700",
-            children: eventTitle
-          }), /* @__PURE__ */ jsxs(Box, {
-            display: "flex",
-            alignItems: "center",
-            gap: "4px",
-            children: [/* @__PURE__ */ jsx(Calendar, {
-              color: vars("colors-main-ziggurat")
-            }), /* @__PURE__ */ jsx(Text, {
-              fontWeight: "400",
-              children: startDate
-            }), /* @__PURE__ */ jsx(Text, {
-              color: vars("borders-light"),
-              children: "|"
-            }), /* @__PURE__ */ jsx(Clock, {
-              color: vars("colors-main-ziggurat")
-            }), /* @__PURE__ */ jsx(Text, {
-              children: startTime
+        w: "fit-content",
+        display: isMobile ? "block" : "flex",
+        children: [/* @__PURE__ */ jsx(Box, {
+          width: "285px",
+          height: isMobile ? "140px" : "168px",
+          bgImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${eventImage})`,
+          backgroundSize: "cover",
+          borderRadius: isMobile ? "8px 8px 0px 0px" : "8px 0 0 8px"
+        }), /* @__PURE__ */ jsxs(Box, {
+          width: isMobile ? "285px" : "305px",
+          minHeight: isMobile ? "160px" : "168px",
+          borderRadius: isMobile ? "0 0 8px 8px" : "0 8px 8px 0",
+          border: vars("borders-light"),
+          display: "flex",
+          flexDirection: "column",
+          cursor: "pointer",
+          children: [/* @__PURE__ */ jsxs(Box, {
+            width: "inherit",
+            height: "100%",
+            padding: "4",
+            color: "#555555",
+            gap: "16px",
+            display: "grid",
+            children: [/* @__PURE__ */ jsx(Text, {
+              fontWeight: "700",
+              children: eventTitle
+            }), /* @__PURE__ */ jsxs(Box, {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              children: [/* @__PURE__ */ jsx(Calendar, {
+                color: vars("colors-main-ziggurat")
+              }), /* @__PURE__ */ jsx(Text, {
+                fontWeight: "400",
+                children: startDate
+              }), /* @__PURE__ */ jsx(Text, {
+                color: vars("borders-light"),
+                children: "|"
+              }), /* @__PURE__ */ jsx(Clock, {
+                color: vars("colors-main-ziggurat")
+              }), /* @__PURE__ */ jsx(Text, {
+                children: startTime
+              })]
             })]
+          }), /* @__PURE__ */ jsx(Box, {
+            borderTop: `${vars("borders-light")}`,
+            width: "100%",
+            height: "50px",
+            padding: "12px",
+            backgroundColor: "white",
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "center",
+            borderRadius: " 0 0 8px 8px",
+            fontSize: "16px",
+            fontFamily: "Roboto",
+            color: vars("colors-main-deepSkyBlue"),
+            fontWeight: "500",
+            children: buttonInfo
           })]
-        }), /* @__PURE__ */ jsx(Box, {
-          borderTop: `${vars("borders-light")}`,
-          width: "100%",
-          height: "50px",
-          padding: "12px",
-          backgroundColor: "white",
-          alignItems: "center",
-          display: "flex",
-          justifyContent: "center",
-          borderRadius: " 0 0 8px 8px",
-          fontSize: "16px",
-          fontFamily: "Roboto",
-          color: vars("colors-main-deepSkyBlue"),
-          fontWeight: "500",
-          children: buttonInfo
         })]
-      })]
+      })
     })
   }, id2);
 };
@@ -32141,78 +32141,79 @@ const SmallBox = ({
   };
   return /* @__PURE__ */ jsx(Link, {
     href: redirect,
-    _hover: {
-      textDecoration: "none"
-    },
     target: targetBlank ? "_blank" : "_self",
     rel: targetBlank ? "noopener noreferrer" : void 0,
-    display: "contents",
-    children: /* @__PURE__ */ jsxs(Box, {
-      width: "286px",
-      height: "247px",
-      borderRadius: vars("radii-big"),
-      border: vars("borders-light"),
-      justifyContent: "center",
-      textAlign: "center",
-      display: "flex",
-      flexDirection: "column",
-      cursor: "pointer",
-      transition: "box-shadow .3s",
-      _active: cssActive,
-      _hover: cssActive,
-      _focus: cssActive,
-      children: [/* @__PURE__ */ jsx(Box, {
-        flex: "1",
-        bgImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${eventImage})`,
-        backgroundSize: "cover",
-        borderRadius: "8px 8px 0 0",
-        margin: "0",
-        display: "grid",
-        alignItems: "flex-end",
-        children: /* @__PURE__ */ jsxs(Box, {
-          color: vars("colors-neutral-white"),
-          padding: "16px",
-          textAlign: "initial",
-          fontFamily: "Roboto",
-          fontSize: "16px",
-          lineHeight: "21px",
+    transition: "box-shadow .3s",
+    _active: cssActive,
+    _hover: cssActive,
+    _focus: cssActive,
+    width: "286px",
+    height: "247px",
+    borderRadius: vars("radii-big"),
+    children: /* @__PURE__ */ jsx(Ripples, {
+      children: /* @__PURE__ */ jsxs(Box, {
+        width: "286px",
+        height: "247px",
+        borderRadius: vars("radii-big"),
+        border: vars("borders-light"),
+        justifyContent: "center",
+        textAlign: "center",
+        display: "flex",
+        flexDirection: "column",
+        cursor: "pointer",
+        children: [/* @__PURE__ */ jsx(Box, {
+          flex: "1",
+          bgImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${eventImage})`,
+          backgroundSize: "cover",
+          borderRadius: "8px 8px 0 0",
+          margin: "0",
           display: "grid",
-          gap: "8px",
-          children: [/* @__PURE__ */ jsx(Text, {
-            fontWeight: "700",
-            m: "0px",
-            children: eventTitle
-          }), /* @__PURE__ */ jsxs(Box, {
-            display: "flex",
-            alignItems: "center",
-            gap: "4px",
-            children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx(Text, {
-              fontWeight: "400",
-              m: "0px",
-              children: startDate
-            }), /* @__PURE__ */ jsx(Text, {
+          alignItems: "flex-end",
+          children: /* @__PURE__ */ jsxs(Box, {
+            color: vars("colors-neutral-white"),
+            padding: "16px",
+            textAlign: "initial",
+            fontFamily: "Roboto",
+            fontSize: "16px",
+            lineHeight: "21px",
+            display: "grid",
+            gap: "8px",
+            children: [/* @__PURE__ */ jsx(Text, {
+              fontWeight: "700",
               m: "0px",
-              children: "|"
-            }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Text, {
-              m: "0px",
-              children: startTime
+              children: eventTitle
+            }), /* @__PURE__ */ jsxs(Box, {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx(Text, {
+                fontWeight: "400",
+                m: "0px",
+                children: startDate
+              }), /* @__PURE__ */ jsx(Text, {
+                m: "0px",
+                children: "|"
+              }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Text, {
+                m: "0px",
+                children: startTime
+              })]
             })]
-          })]
-        })
-      }), /* @__PURE__ */ jsx(Box, {
-        width: "100%",
-        height: "50px",
-        backgroundColor: "white",
-        alignItems: "center",
-        display: "flex",
-        justifyContent: "center",
-        borderRadius: " 0 0 8px 8px",
-        fontSize: "16px",
-        fontFamily: "Roboto",
-        color: vars("colors-main-deepSkyBlue"),
-        fontWeight: "500",
-        children: buttonInfo
-      })]
+          })
+        }), /* @__PURE__ */ jsx(Box, {
+          width: "100%",
+          height: "50px",
+          backgroundColor: "white",
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "center",
+          borderRadius: " 0 0 8px 8px",
+          fontSize: "16px",
+          fontFamily: "Roboto",
+          color: vars("colors-main-deepSkyBlue"),
+          fontWeight: "500",
+          children: buttonInfo
+        })]
+      })
     })
   }, id2);
 };
@@ -33206,68 +33207,67 @@ const Resources = ({
     href: resourceLink,
     target: targetBlank ? "_blank" : "_self",
     rel: targetBlank ? "noopener noreferrer" : void 0,
-    _hover: {
-      textDecoration: "none"
-    },
-    display: "contents",
-    children: /* @__PURE__ */ jsxs(Box, {
-      width: "285px",
-      height: "147px",
-      borderRadius: vars("radii-big"),
-      border: vars("borders-light"),
-      justifyContent: "center",
-      textAlign: "center",
-      display: "grid",
-      gap: "8px",
-      padding: "1rem",
-      transition: "box-shadow .3s",
-      _active: cssActive,
-      _hover: cssActive,
-      _focus: cssActive,
-      cursor: "pointer",
-      children: [/* @__PURE__ */ jsx(Box, {
-        children: /* @__PURE__ */ jsx(Icons, {
-          type: resourceType
-        })
-      }), /* @__PURE__ */ jsx(Box, {
-        children: /* @__PURE__ */ jsx(Text, {
-          fontFamily: "Roboto",
-          fontWeight: "700",
-          lineHeight: "21px",
-          fontSize: "16px",
-          color: "#555555",
-          m: "0px",
-          children: resourceTitle
-        })
-      }), /* @__PURE__ */ jsx(Box, {
-        children: /* @__PURE__ */ jsx(Text, {
-          fontFamily: "Roboto",
-          fontWeight: "400",
-          lineHeight: "14px",
-          fontSize: "12px",
-          color: "#555555",
-          m: "0px",
-          children: resourceDetail
-        })
-      }), /* @__PURE__ */ jsx(Box, {
-        display: "flex",
-        alignItems: "center",
+    transition: "box-shadow 0.3s",
+    _active: cssActive,
+    _hover: cssActive,
+    _focus: cssActive,
+    cursor: "pointer",
+    borderRadius: vars("radii-big"),
+    border: vars("borders-light"),
+    overflow: "hidden",
+    children: /* @__PURE__ */ jsx(Ripples, {
+      children: /* @__PURE__ */ jsxs(Box, {
+        width: "285px",
+        height: "147px",
         justifyContent: "center",
-        children: /* @__PURE__ */ jsxs(Text, {
-          fontFamily: "Roboto",
-          fontWeight: "500",
-          fontSize: "14px",
-          lineHeight: "16px",
-          color: vars("colors-neutral-gray"),
-          textDecoration: "underline",
-          gap: "8px",
+        textAlign: "center",
+        display: "grid",
+        gap: "8px",
+        padding: "1rem",
+        children: [/* @__PURE__ */ jsx(Box, {
+          children: /* @__PURE__ */ jsx(Icons, {
+            type: resourceType
+          })
+        }), /* @__PURE__ */ jsx(Box, {
+          children: /* @__PURE__ */ jsx(Text, {
+            fontFamily: "Roboto",
+            fontWeight: "700",
+            lineHeight: "21px",
+            fontSize: "16px",
+            color: "#555555",
+            m: "0px",
+            children: resourceTitle
+          })
+        }), /* @__PURE__ */ jsx(Box, {
+          children: /* @__PURE__ */ jsx(Text, {
+            fontFamily: "Roboto",
+            fontWeight: "400",
+            lineHeight: "14px",
+            fontSize: "12px",
+            color: "#555555",
+            m: "0px",
+            children: resourceDetail
+          })
+        }), /* @__PURE__ */ jsx(Box, {
           display: "flex",
-          m: "0px",
-          children: [/* @__PURE__ */ jsx(Download, {
-            color: vars("colors-main-deepSkyBlue")
-          }), resourceTextDownload]
-        })
-      })]
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */ jsxs(Text, {
+            fontFamily: "Roboto",
+            fontWeight: "500",
+            fontSize: "14px",
+            lineHeight: "16px",
+            color: vars("colors-neutral-gray"),
+            textDecoration: "underline",
+            gap: "8px",
+            display: "flex",
+            m: "0px",
+            children: [/* @__PURE__ */ jsx(Download, {
+              color: vars("colors-main-deepSkyBlue")
+            }), resourceTextDownload]
+          })
+        })]
+      })
     })
   });
 };