@eclass/ui-kit 1.44.0 → 1.45.1

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: {
@@ -32051,15 +32054,15 @@ const LargeBox = ({
     },
     target: targetBlank ? "_blank" : "_self",
     rel: targetBlank ? "noopener noreferrer" : void 0,
-    display: "inline-block",
+    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: "8px",
+      borderRadius: vars("radii-big"),
       display: isMobile ? "block" : "flex",
       children: [/* @__PURE__ */ jsx(Box, {
         width: "285px",
@@ -32071,8 +32074,7 @@ const LargeBox = ({
         width: isMobile ? "285px" : "305px",
         minHeight: isMobile ? "160px" : "168px",
         borderRadius: isMobile ? "0 0 8px 8px" : "0 8px 8px 0",
-        border: "1px",
-        borderColor: vars("colors-neutral-platinum"),
+        border: vars("borders-light"),
         display: "flex",
         flexDirection: "column",
         cursor: "pointer",
@@ -32096,7 +32098,7 @@ const LargeBox = ({
               fontWeight: "400",
               children: startDate
             }), /* @__PURE__ */ jsx(Text, {
-              color: vars("colors-neutral-platinum"),
+              color: vars("borders-light"),
               children: "|"
             }), /* @__PURE__ */ jsx(Clock, {
               color: vars("colors-main-ziggurat")
@@ -32105,7 +32107,7 @@ const LargeBox = ({
             })]
           })]
         }), /* @__PURE__ */ jsx(Box, {
-          borderTop: `1px solid ${vars("colors-neutral-platinum")}`,
+          borderTop: `${vars("borders-light")}`,
           width: "100%",
           height: "50px",
           padding: "12px",
@@ -32134,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: {
@@ -32141,22 +32146,21 @@ const SmallBox = ({
     },
     target: targetBlank ? "_blank" : "_self",
     rel: targetBlank ? "noopener noreferrer" : void 0,
-    display: "inline-block",
+    display: "contents",
     children: /* @__PURE__ */ jsxs(Box, {
       width: "286px",
       height: "247px",
-      borderRadius: "8px",
-      border: "1px",
-      borderColor: vars("colors-neutral-platinum"),
+      borderRadius: vars("radii-big"),
+      border: vars("borders-light"),
       justifyContent: "center",
       textAlign: "center",
       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})`,
@@ -32176,6 +32180,7 @@ const SmallBox = ({
           gap: "8px",
           children: [/* @__PURE__ */ jsx(Text, {
             fontWeight: "700",
+            m: "0px",
             children: eventTitle
           }), /* @__PURE__ */ jsxs(Box, {
             display: "flex",
@@ -32183,10 +32188,13 @@ const SmallBox = ({
             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
             })]
           })]
@@ -33191,6 +33199,9 @@ 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",
@@ -33198,21 +33209,21 @@ const Resources = ({
     _hover: {
       textDecoration: "none"
     },
+    display: "contents",
     children: /* @__PURE__ */ jsxs(Box, {
       width: "285px",
       height: "147px",
-      borderRadius: "8px",
-      border: "1px",
-      borderColor: vars("colors-neutral-platinum"),
+      borderRadius: vars("radii-big"),
+      border: vars("borders-light"),
       justifyContent: "center",
       textAlign: "center",
       display: "grid",
       gap: "8px",
-      padding: 4,
-      transition: "box-shadow 0.3s ease-in-out",
-      _hover: {
-        shadow: "sm"
-      },
+      padding: "1rem",
+      transition: "box-shadow .3s",
+      _active: cssActive,
+      _hover: cssActive,
+      _focus: cssActive,
       cursor: "pointer",
       children: [/* @__PURE__ */ jsx(Box, {
         children: /* @__PURE__ */ jsx(Icons, {
@@ -33225,6 +33236,7 @@ const Resources = ({
           lineHeight: "21px",
           fontSize: "16px",
           color: "#555555",
+          m: "0px",
           children: resourceTitle
         })
       }), /* @__PURE__ */ jsx(Box, {
@@ -33234,6 +33246,7 @@ const Resources = ({
           lineHeight: "14px",
           fontSize: "12px",
           color: "#555555",
+          m: "0px",
           children: resourceDetail
         })
       }), /* @__PURE__ */ jsx(Box, {
@@ -33249,6 +33262,7 @@ const Resources = ({
           textDecoration: "underline",
           gap: "8px",
           display: "flex",
+          m: "0px",
           children: [/* @__PURE__ */ jsx(Download, {
             color: vars("colors-main-deepSkyBlue")
           }), resourceTextDownload]