@eclass/ui-kit 1.51.12 → 1.51.14

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

@@ -35227,37 +35227,38 @@ const GoToCalendar = ({
   onlyToCalendar,
   onClick
 }) => {
-  var _a;
+  var _a, _b;
+  const activeBg = (_a = vars("colors-main-deepSkyBlue")) != null ? _a : "#0189FF";
   return /* @__PURE__ */ jsx(NewTooltip, {
     label: text != null ? text : "Calendario",
     m: "2px 0 0 0",
     isDisabled: tooltipDisabled,
     children: /* @__PURE__ */ jsx(MenuButton, {
       onClick: () => onlyToCalendar && onClick && onClick(),
-      background: (_a = vars("colors-main-blueGrey")) != null ? _a : "#60798E",
+      background: (_b = vars("colors-main-blueGrey")) != null ? _b : "#60798E",
       border: "1px solid transparent",
       borderRadius: "100%",
-      height: "30px!important",
-      width: "30px!important",
+      height: "30px !important",
+      width: "30px !important",
+      padding: "0 !important",
+      margin: "0 !important",
       position: "relative",
+      _active: {
+        bg: activeBg,
+        "&:hover": {
+          bg: activeBg
+        }
+      },
       _hover: {
         bg: "rgba(96, 121, 142, 0.8)"
       },
       sx: {
         ">span": {
+          display: "grid",
           alignContent: "center",
           h: "16px!important",
           justifyItems: "center",
-          lineHeight: "0",
-          m: "0!important",
-          p: "0!important",
-          w: "16px!important",
-          svg: {
-            h: "16px!important",
-            m: "0!important",
-            p: "0!important",
-            w: "16px!important"
-          }
+          lineHeight: "0"
         }
       },
       children: /* @__PURE__ */ jsx(CalendarButtonIcon, {})
@@ -35268,35 +35269,21 @@ const Header = ({
   text,
   isMobile
 }) => {
-  var _a, _b, _c;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Box, {
-      as: "header",
-      bg: (_a = vars("colors-neutral-davysGrey")) != null ? _a : "#5C5C5C",
-      borderRadius: isMobile ? "none" : "10px 10px 0 0",
-      color: (_b = vars("colors-neutral-white")) != null ? _b : "#FFFFFF",
-      fontSize: "14px",
-      fontWeight: "500",
-      lineHeight: "normal",
-      padding: "16px",
-      position: "absolute",
-      width: isMobile ? "100vw" : "100%",
-      top: 0,
-      zIndex: "1",
-      children: text != null ? text : "Pr\xF3ximas fechas importantes de tus cursos"
-    }), /* @__PURE__ */ jsx(Box, {
-      className: "arrow",
-      "aria-hidden": true,
-      borderBottom: `12px solid ${(_c = vars("colors-neutral-davysGrey")) != null ? _c : "#5C5C5C"}`,
-      borderLeft: "14px solid transparent",
-      borderRight: "14px solid transparent",
-      display: isMobile ? "none" : "block",
-      height: "0",
-      position: "fixed",
-      right: isMobile ? "71px" : "-437px",
-      top: isMobile ? "54px" : "-9px",
-      width: "0"
-    })]
+  var _a, _b;
+  return /* @__PURE__ */ jsx(Box, {
+    as: "header",
+    bg: (_a = vars("colors-neutral-davysGrey")) != null ? _a : "#5C5C5C",
+    borderRadius: isMobile ? "none" : "10px 10px 0 0",
+    color: (_b = vars("colors-neutral-white")) != null ? _b : "#FFFFFF",
+    fontSize: "14px",
+    fontWeight: "500",
+    lineHeight: "normal",
+    padding: "16px",
+    position: "absolute",
+    width: isMobile ? "100vw" : "100%",
+    top: 0,
+    zIndex: "1",
+    children: text != null ? text : "Pr\xF3ximas fechas importantes de tus cursos"
   });
 };
 const NoEventsIcon = () => /* @__PURE__ */ jsxs("svg", {
@@ -35574,7 +35561,7 @@ const CalendarDropdownContainer = ({
   onlyToCalendar,
   m: m2
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const [isMobile] = useMediaQuery("(max-width: 577px)");
   const {
     closeAndMarkSeen,
@@ -35621,11 +35608,27 @@ const CalendarDropdownContainer = ({
   return /* @__PURE__ */ jsx(Box, {
     zIndex: 4,
     className: `calendarDropdown ${hasNew && !onlyToCalendar ? "hasNew" : ""}`,
+    width: "30px",
+    height: "30px",
     m: m2,
     position: "relative",
     sx: {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderColor: `transparent transparent ${(_a = vars("colors-neutral-davysGrey")) != null ? _a : "#5C5C5C"}
+          transparent`,
+        borderStyle: "solid",
+        borderWidth: "0 11px 10px 11px",
+        top: isMobile ? "30px" : "30px",
+        right: isMobile ? "3px" : "15px",
+        display: isMenuOpen && !isMobile ? "block" : "none",
+        transform: isMobile ? "none" : "translateX(50%)"
+      },
       "&.hasNew::before": {
-        background: (_a = vars("colors-secondary-pumpkin")) != null ? _a : "#FF7A14",
+        background: (_b = vars("colors-secondary-pumpkin")) != null ? _b : "#FF7A14",
         borderRadius: "50%",
         content: '""',
         display: "block",
@@ -35645,10 +35648,13 @@ const CalendarDropdownContainer = ({
       ".chakra-menu__menu-list": {
         padding: "0",
         position: "absolute",
+        left: isMobile ? "auto" : "-30px",
+        top: isMobile ? "-6px !important" : "auto",
         width: isMobile ? "100vw" : "500px",
         maxHeight: isMobile ? "calc(100vh - 62px)" : "auto",
         overflowY: isMobile ? "auto" : "hidden",
         background: "white",
+        border: "none",
         borderRadius: isMobile ? "0" : "10px",
         boxShadow: isMobile ? "none" : "rgba(47, 47, 47, 0.2) -1px 6px 40px 0px",
         animation: "none !important",
@@ -35673,18 +35679,18 @@ const CalendarDropdownContainer = ({
       onClose,
       children: /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(GoToCalendar, {
-          text: (_b = text == null ? void 0 : text.tooltip) != null ? _b : "Ir a Mi Calendario",
+          text: (_c = text == null ? void 0 : text.tooltip) != null ? _c : "Ir a Mi Calendario",
           tooltipDisabled: isTooltipDisabled,
           onlyToCalendar,
           onClick: redirectToCalendar
         }), !onlyToCalendar && /* @__PURE__ */ jsxs(MenuList, {
           children: [/* @__PURE__ */ jsx(Header, {
-            text: (_c = text == null ? void 0 : text.header) != null ? _c : "Pr\xF3ximas fechas importantes de tus cursos",
+            text: (_d = text == null ? void 0 : text.header) != null ? _d : "Pr\xF3ximas fechas importantes de tus cursos",
             isMobile
           }), loading ? /* @__PURE__ */ jsx(Loading, {
-            text: (_d = text == null ? void 0 : text.loading) != null ? _d : "Cargando"
+            text: (_e = text == null ? void 0 : text.loading) != null ? _e : "Cargando"
           }) : events.length === 0 || empty ? /* @__PURE__ */ jsx(Empty, {
-            text: (_e = text == null ? void 0 : text.empty) != null ? _e : "A\xFAn no tienes eventos en tu calendario"
+            text: (_f = text == null ? void 0 : text.empty) != null ? _f : "A\xFAn no tienes eventos en tu calendario"
           }) : /* @__PURE__ */ jsx(Events, {
             colors: courseColors,
             events: all,