@eclass/ui-kit 1.45.0 → 1.45.2

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

@@ -32044,6 +32044,9 @@ const LargeBox = ({
   targetBlank,
   isMobile
 }) => {
+  const cssActive = {
+    boxShadow: `0 2px 7px 0 ${vars("colors-neutral-silverSand")}`
+  };
   return /* @__PURE__ */ jsx(Link, {
     href: redirect,
     _hover: {
@@ -32054,10 +32057,10 @@ const LargeBox = ({
     display: "contents",
     children: /* @__PURE__ */ jsxs(Flex, {
       cursor: "pointer",
-      transition: "box-shadow 0.3s ease-in-out",
-      _hover: {
-        shadow: "sm"
-      },
+      transition: "box-shadow .3s",
+      _active: cssActive,
+      _hover: cssActive,
+      _focus: cssActive,
       w: "fit-content",
       borderRadius: vars("radii-big"),
       display: isMobile ? "block" : "flex",
@@ -32133,6 +32136,9 @@ const SmallBox = ({
   eventImage,
   targetBlank
 }) => {
+  const cssActive = {
+    boxShadow: `0 2px 7px 0 ${vars("colors-neutral-silverSand")}`
+  };
   return /* @__PURE__ */ jsx(Link, {
     href: redirect,
     _hover: {
@@ -32151,10 +32157,10 @@ const SmallBox = ({
       display: "flex",
       flexDirection: "column",
       cursor: "pointer",
-      transition: "box-shadow 0.3s ease-in-out",
-      _hover: {
-        shadow: "sm"
-      },
+      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})`,
@@ -33193,72 +33199,74 @@ const Resources = ({
   resourceLink,
   targetBlank
 }) => {
+  const cssActive = {
+    boxShadow: `0 2px 7px 0 ${vars("colors-neutral-silverSand")}`
+  };
   return /* @__PURE__ */ jsx(Link, {
     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 0.3s ease-in-out",
-      _hover: {
-        shadow: "sm"
-      },
-      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]
+          })
+        })]
+      })
     })
   });
 };