@eclass/ui-kit 1.45.2 → 1.46.0

package/dist/atoms/Icons/Accessibility.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseProps } from './Base';
+export declare function Accessibility(props: BaseProps): JSX.Element;

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

@@ -29915,6 +29915,88 @@ const NewTooltip = ({
     })
   });
 };
+function Accessibility(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    children: /* @__PURE__ */ jsx("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 5C8.82843 5 9.5 4.32843 9.5 3.5C9.5 2.67157 8.82843 2 8 2C7.17157 2 6.5 2.67157 6.5 3.5C6.5 4.32843 7.17157 5 8 5ZM2.96967 5.96967C3.11032 5.82902 3.30109 5.75 3.5 5.75H12.5C12.6989 5.75 12.8897 5.82902 13.0303 5.96967C13.171 6.11032 13.25 6.30109 13.25 6.5C13.25 6.69891 13.171 6.88968 13.0303 7.03033C12.8897 7.17098 12.6989 7.25 12.5 7.25H10.25V13.25C10.25 13.4489 10.171 13.6397 10.0303 13.7803C9.88968 13.921 9.69891 14 9.5 14C9.30109 14 9.11032 13.921 8.96967 13.7803C8.82902 13.6397 8.75 13.4489 8.75 13.25V10.25H7.25V13.25C7.25 13.4489 7.17098 13.6397 7.03033 13.7803C6.88968 13.921 6.69891 14 6.5 14C6.30109 14 6.11032 13.921 5.96967 13.7803C5.82902 13.6397 5.75 13.4489 5.75 13.25V7.25H3.5C3.30109 7.25 3.11032 7.17098 2.96967 7.03033C2.82902 6.88968 2.75 6.69891 2.75 6.5C2.75 6.30109 2.82902 6.11032 2.96967 5.96967Z",
+        fill: "white"
+      })
+    })
+  });
+}
+const waitForUserWay = async () => {
+  return await new Promise((resolve, reject) => {
+    const checkUserWay = () => {
+      if (window.UserWay) {
+        resolve();
+      } else {
+        requestAnimationFrame(checkUserWay);
+      }
+    };
+    try {
+      checkUserWay();
+    } catch (error) {
+      reject(new Error("UserWay script failed to load"));
+    }
+  });
+};
+function UserWay({
+  accountId = "06mvMZzmO4",
+  color: color2 = "#0189FF"
+}) {
+  const [isUserWayReady, setIsUserWayReady] = useState(false);
+  useEffect(() => {
+    if (!document.getElementById("userway-script")) {
+      const script = document.createElement("script");
+      script.id = "userway-script";
+      script.src = "https://cdn.userway.org/widget.js";
+      script.async = true;
+      script.setAttribute("data-account", accountId);
+      script.setAttribute("data-color", color2);
+      script.setAttribute("data-trigger", "customTrigger");
+      document.body.appendChild(script);
+    }
+    waitForUserWay().then(() => {
+      setIsUserWayReady(true);
+      return void 0;
+    }).catch((error) => {
+      console.error("Failed to load UserWay:", error);
+    });
+  }, [accountId, color2]);
+  const handleButtonClick = () => {
+    var _a;
+    if (isUserWayReady && ((_a = window == null ? void 0 : window.UserWay) == null ? void 0 : _a.widgetOpen)) {
+      window.UserWay.widgetOpen();
+    } else {
+      console.error("UserWay script not loaded yet.");
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, {
+    as: "button",
+    alignItems: "center",
+    bg: vars("colors-main-blueGrey"),
+    borderRadius: "100%",
+    border: "none",
+    display: "flex",
+    height: "30px",
+    id: "customTrigger",
+    justifyContent: "center",
+    onClick: handleButtonClick,
+    width: "30px",
+    _hover: {
+      background: "rgba(96, 121, 142, 0.8)"
+    },
+    children: /* @__PURE__ */ jsx(Accessibility, {})
+  });
+}
 const STUDENT = 4;
 function Header() {
   const {
@@ -32049,80 +32131,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 +32223,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, {
-              m: "0px",
-              children: "|"
-            }), /* @__PURE__ */ jsx(Clock, {}), /* @__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: 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);
 };
@@ -33270,5 +33353,5 @@ const Resources = ({
     })
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, Eventos, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, Eventos, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map