@eclass/ui-kit 1.58.4 → 1.59.1

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseProps } from './Base';
+export declare function Calendar(props: BaseProps): JSX.Element;
+export declare namespace Calendar {
+    var displayName: string;
+}
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/atoms/Icons/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/Calendar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AACxC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAYtD;yBAZe,QAAQ"}

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

@@ -1,6 +1,7 @@
 export * from './AcademicRecord';
 export * from './AlertInfo';
 export * from './ArrowRight';
+export * from './Calendar';
 export * from './Certificate';
 export * from './CircularCheck';
 export * from './CircularInformation';

package/dist/atoms/Icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA"}

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

@@ -1,6 +1,6 @@
-import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
+import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList, MenuItem } from "@chakra-ui/react";
 import * as React$1 from "react";
-import React__default, { useEffect, useCallback, useState } from "react";
+import React__default, { useEffect, useState, useCallback, useRef } from "react";
 const main = {
   deepSkyBlue: "#0189FF",
   azureRadiance: "#017BE5",
@@ -620,6 +620,22 @@ function ArrowRight(props) {
   });
 }
 ArrowRight.displayName = "ArrowRight";
+function Calendar$1(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    title: "Calendar",
+    children: /* @__PURE__ */ jsxs("g", {
+      fill: "#B0CFE0",
+      children: [/* @__PURE__ */ jsx("path", {
+        fill: "#B0CFE0",
+        d: "M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-1 12H2V5h12v9z"
+      }), /* @__PURE__ */ jsx("path", {
+        d: "M4 7h2v2H4zM7 7h2v2H7zM4 10h2v2H4zM7 10h2v2H7zM10 7h2v2h-2zM10 10h2v2h-2z"
+      })]
+    })
+  });
+}
+Calendar$1.displayName = "Calendar";
 function Certificate(props) {
   return /* @__PURE__ */ jsxs(Base, {
     ...props,
@@ -1323,6 +1339,7 @@ var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   AcademicRecord,
   AlertInfo,
   ArrowRight,
+  Calendar: Calendar$1,
   Certificate,
   CircularCheck,
   CircularInformation,
@@ -6741,6 +6758,104 @@ function skipAttributesToProps(node2) {
 })(lib$3);
 var HTMLReactParser = /* @__PURE__ */ getDefaultExportFromCjs(lib$3);
 var ReactParser = HTMLReactParser.default || HTMLReactParser;
+const AVATAR_COLORS = ["#0076ba", "#229f9c", "#2cb26b", "#30baed", "#95569e", "#9bc03a", "#d84315", "#f5a623", "#f6712f", "#ff6363"];
+const getColorByUserId = (userId) => {
+  if (userId >= 0) {
+    const digits = userId.toString().split("");
+    const position = parseInt(digits[digits.length - 1], 10);
+    return AVATAR_COLORS[position];
+  }
+  return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];
+};
+const getInitials = (fullName) => fullName.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
+const Avatar = ({
+  fullName,
+  userId,
+  picture,
+  size = 50,
+  fontSize = 14,
+  alt = "Avatar",
+  id,
+  borderDecoration = false
+}) => {
+  const [bgColor, setBgColor] = useState("");
+  const [imageValid, setImageValid] = useState(false);
+  useEffect(() => {
+    setBgColor(getColorByUserId(userId));
+  }, [userId]);
+  const wrapperStyle = {
+    alignItems: "center",
+    backgroundColor: (fullName == null ? void 0 : fullName.length) === 0 ? "#fff" : bgColor,
+    border: borderDecoration ? `3px solid #0189FF` : "none",
+    borderRadius: "50%",
+    display: "flex",
+    flexShrink: 0,
+    height: `${size}px`,
+    justifyContent: "center",
+    margin: 0,
+    overflow: "hidden",
+    width: `${size}px`,
+    boxSizing: "border-box"
+  };
+  const initialsStyle = {
+    color: "#fff",
+    fontFamily: "Roboto, sans-serif",
+    fontSize: `${fontSize}px`,
+    fontWeight: "bold",
+    lineHeight: "30px",
+    textTransform: "uppercase"
+  };
+  const imgStyle = {
+    height: "100%",
+    width: "100%",
+    objectFit: "cover",
+    display: "block"
+  };
+  if (!fullName || fullName.length === 0) {
+    return /* @__PURE__ */ jsx("figure", {
+      style: wrapperStyle,
+      "data-testid": "Avatar",
+      "aria-hidden": "true",
+      id
+    });
+  }
+  if (picture) {
+    return /* @__PURE__ */ jsxs("figure", {
+      style: wrapperStyle,
+      "data-testid": "Avatar",
+      role: "presentation",
+      children: [!imageValid && /* @__PURE__ */ jsx("span", {
+        style: initialsStyle,
+        id,
+        "aria-hidden": "true",
+        children: getInitials(fullName)
+      }), /* @__PURE__ */ jsx("img", {
+        src: picture,
+        alt,
+        id: imageValid ? id : void 0,
+        role: "presentation",
+        style: {
+          ...imgStyle,
+          display: imageValid ? "block" : "none"
+        },
+        onLoad: () => setImageValid(true),
+        onError: () => setImageValid(false)
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx("figure", {
+    style: wrapperStyle,
+    "data-testid": "Avatar",
+    role: "presentation",
+    children: bgColor ? /* @__PURE__ */ jsx("span", {
+      style: initialsStyle,
+      id,
+      "aria-hidden": "true",
+      children: getInitials(fullName)
+    }) : null
+  });
+};
+Avatar.displayName = "Avatar";
 const alertStates = {
   success: {
     icon: /* @__PURE__ */ jsx(SuccessWhite, {}),
@@ -10367,5 +10482,504 @@ const EventsList = ({
     })]
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalContent, ModalMultiple, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+const profileStyle = {
+  header: {
+    background: vars("colors-neutral-davysGrey"),
+    fontFamily: "Roboto",
+    fontSize: "15px",
+    fontWeight: "500",
+    margin: "0",
+    padding: "0 20px 15px",
+    color: vars("colors-neutral-white")
+  },
+  logout: {
+    background: vars("colors-neutral-white"),
+    border: "none",
+    color: vars("colors-alert-deepSkyBlue"),
+    fontFamily: "Roboto",
+    fontSize: "14px",
+    fontWeight: "500",
+    justifyContent: "center",
+    padding: "14px 20px",
+    width: "-webkit-fill-available",
+    _hover: {
+      background: vars("colors-neutral-cultured"),
+      MenuItemShadow: "none",
+      boxShadow: "none",
+      textDecoration: "none"
+    },
+    _focus: {
+      boxShadow: `0 0 0 3px ${vars("colors-icon-deepSkyBlue")} inset`
+    }
+  },
+  items: {
+    background: vars("colors-neutral-white"),
+    borderBottom: `solid 1px ${vars("colors-neutral-platinum")}`,
+    color: vars("colors-neutral-spanishGrey"),
+    fontWeight: "500",
+    fontSize: "12px",
+    textTransform: "uppercase",
+    _focus: {
+      boxShadow: `0 0 0 3px ${vars("colors-icon-deepSkyBlue")} inset`
+    },
+    _hover: {
+      background: vars("colors-neutral-cultured"),
+      boxShadow: "none",
+      color: vars("colors-neutral-spanishGrey"),
+      textDecoration: "none"
+    }
+  }
+};
+function focusMenuWithKeys(event, menuListRef) {
+  if (!menuListRef.current)
+    return;
+  const focusableItems = Array.from(
+    menuListRef.current.querySelectorAll('[role="menuitem"]:not([disabled])')
+  );
+  if (!focusableItems.length)
+    return;
+  const currentIndex = focusableItems.findIndex((item) => item === document.activeElement);
+  const firstIndex = 0;
+  const lastIndex = focusableItems.length - 1;
+  let nextIndex = -1;
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    nextIndex = currentIndex === -1 ? firstIndex : (currentIndex + 1) % focusableItems.length;
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    nextIndex = currentIndex === -1 ? lastIndex : (currentIndex - 1 + focusableItems.length) % focusableItems.length;
+  }
+  if (event.key === "Tab") {
+    if (event.shiftKey) {
+      if (currentIndex > firstIndex) {
+        event.preventDefault();
+        nextIndex = currentIndex - 1;
+      }
+    } else {
+      if (currentIndex < lastIndex) {
+        event.preventDefault();
+        nextIndex = currentIndex + 1;
+      }
+    }
+  }
+  if (nextIndex >= 0) {
+    focusableItems[nextIndex].focus();
+  }
+}
+function useTooltipToggleDelay(isMenuOpen, setTooltipDisabled, delay = 300) {
+  useEffect(() => {
+    if (isMenuOpen) {
+      setTooltipDisabled(true);
+    } else {
+      const timer = setTimeout(() => setTooltipDisabled(false), delay);
+      return () => clearTimeout(timer);
+    }
+  }, [isMenuOpen, setTooltipDisabled, delay]);
+}
+const useHideBackgroundOnMobile = (isOpen) => {
+  const [isMobile] = useMediaQuery("(max-width: 480px)");
+  useEffect(() => {
+    if (!isMobile)
+      return;
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    const viewContainer = document.getElementById("ViewContainer");
+    if (viewContainer) {
+      viewContainer.style.display = isOpen ? "none" : "";
+    } else {
+      const mainElement = document.querySelector(".main");
+      if (!mainElement)
+        return;
+      const firstChild = mainElement.firstElementChild;
+      if (!firstChild || !(firstChild instanceof HTMLElement))
+        return;
+      const headerElement = firstChild.querySelector("header.header");
+      if (!headerElement)
+        return;
+      const targetElement = headerElement.nextElementSibling;
+      if (!targetElement || !(targetElement instanceof HTMLElement))
+        return;
+      targetElement.style.display = isOpen ? "none" : "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      const viewContainer2 = document.getElementById("ViewContainer");
+      if (viewContainer2) {
+        viewContainer2.style.display = "";
+      } else {
+        const mainElement = document.querySelector(".main");
+        if (mainElement) {
+          const firstChild = mainElement.firstElementChild;
+          if (firstChild instanceof HTMLElement) {
+            const headerElement = firstChild.querySelector("header.header");
+            if (headerElement) {
+              const targetElement = headerElement.nextElementSibling;
+              if (targetElement instanceof HTMLElement) {
+                targetElement.style.display = "";
+              }
+            }
+          }
+        }
+      }
+    };
+  }, [isMobile, isOpen]);
+  return isMobile;
+};
+const CoursesIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: "45",
+  height: "45",
+  viewBox: "0 0 45 45",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/* @__PURE__ */ jsx("circle", {
+    cx: "22.5",
+    cy: "22.5",
+    r: "22.5",
+    fill: "#E0EEFA"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7 38C9.20914 38 11 36.2091 11 34C11 31.7909 9.20914 30 7 30C4.79086 30 3 31.7909 3 34C3 36.2091 4.79086 38 7 38Z",
+    fill: "#0189FF"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23 37C24.6569 37 26 35.6569 26 34C26 32.3431 24.6569 31 23 31C21.3431 31 20 32.3431 20 34C20 35.6569 21.3431 37 23 37Z",
+    fill: "#1EBDAF",
+    stroke: "#1EBDAF",
+    strokeWidth: "2"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7 34C7 33.4477 7.44772 33 8 33L36 33C36.5523 33 37 33.4477 37 34C37 34.5523 36.5523 35 36 35L8 35C7.44772 35 7 34.5523 7 34Z",
+    fill: "#08044F"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M35 34C35 31.7909 36.7909 30 39 30C41.2091 30 43 31.7909 43 34C43 36.2091 41.2091 38 39 38C36.7909 38 35 36.2091 35 34ZM39 32C37.8954 32 37 32.8954 37 34C37 35.1046 37.8954 36 39 36C40.1046 36 41 35.1046 41 34C41 32.8954 40.1046 32 39 32Z",
+    fill: "#08044F"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M2 12C2 10.8954 2.89543 10 4 10H19C20.1046 10 21 10.8954 21 12V22H2V12Z",
+    fill: "#FF554D"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M25 12C25 10.8954 25.8954 10 27 10H42C43.1046 10 44 10.8954 44 12V22H25V12Z",
+    fill: "#FFBC27"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 20H4L4 24H19V20ZM2 18V24C2 25.1046 2.89543 26 4 26H19C20.1046 26 21 25.1046 21 24V18H2Z",
+    fill: "#08044F"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M42 20H27L27 24H42V20ZM25 18V24C25 25.1046 25.8954 26 27 26H42C43.1046 26 44 25.1046 44 24V18H25Z",
+    fill: "#08044F"
+  })]
+});
+const AcademicHistorialIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: "45",
+  height: "45",
+  viewBox: "0 0 45 45",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  role: "AcademicHistorialIcon",
+  children: [/* @__PURE__ */ jsx("circle", {
+    cx: "22.5",
+    cy: "22.5",
+    r: "22.5",
+    fill: "#E0EEFA"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M11 8H4C3.44772 8 3 8.44772 3 9V14C3 14.5523 3.44772 15 4 15H11C11.5523 15 12 14.5523 12 14V9C12 8.44772 11.5523 8 11 8Z",
+    fill: "#FFBC27"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M40 8H17C16.4477 8 16 8.44772 16 9V14C16 14.5523 16.4477 15 17 15H40C40.5523 15 41 14.5523 41 14V9C41 8.44772 40.5523 8 40 8Z",
+    fill: "#0189FF"
+  }), /* @__PURE__ */ jsx("rect", {
+    x: "4",
+    y: "8",
+    width: "37",
+    height: "26",
+    rx: "1",
+    stroke: "#08044F",
+    strokeWidth: "2"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M15 35L15 39",
+    stroke: "#08044F",
+    strokeWidth: "2",
+    strokeLinecap: "square"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M30 35L30 40",
+    stroke: "#08044F",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M13 40L32 40",
+    stroke: "#08044F",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M31 19H14C13.4477 19 13 19.4477 13 20V22C13 22.5523 13.4477 23 14 23H31C31.5523 23 32 22.5523 32 22V20C32 19.4477 31.5523 19 31 19Z",
+    fill: "#1EBDAF"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M31 26H14C13.4477 26 13 26.4477 13 27V29C13 29.5523 13.4477 30 14 30H31C31.5523 30 32 29.5523 32 29V27C32 26.4477 31.5523 26 31 26Z",
+    fill: "#FF554D"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M4 15L41 15",
+    stroke: "#08044F",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  })]
+});
+const ProfileIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: "45",
+  height: "45",
+  role: "ProfileIcon",
+  viewBox: "0 0 45 45",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/* @__PURE__ */ jsx("circle", {
+    cx: "22.5",
+    cy: "22.5",
+    r: "22.5",
+    fill: "#E0EEFA"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M-1.74846e-07 29L-4.37114e-08 32C-1.95703e-08 32.5523 0.447715 33 1 33L14 33C14.5523 33 15 32.5523 15 32L15 29C15 28.4477 14.5523 28 14 28L1 28C0.447715 28 -1.98987e-07 28.4477 -1.74846e-07 29Z",
+    fill: "#0189FF"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M5 22L5 25C5 25.5523 5.44772 26 6 26L14 26C14.5523 26 15 25.5523 15 25L15 22C15 21.4477 14.5523 21 14 21L6 21C5.44772 21 5 21.4477 5 22Z",
+    fill: "#FF554D"
+  }), /* @__PURE__ */ jsx("path", {
+    d: "M-1.74846e-07 15L-4.37114e-08 18C-1.95703e-08 18.5523 0.447715 19 1 19L14 19C14.5523 19 15 18.5523 15 18L15 15C15 14.4477 14.5523 14 14 14L1 14C0.447715 14 -1.98987e-07 14.4477 -1.74846e-07 15Z",
+    fill: "#FFBC27"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 10C11 8.89543 11.8954 8 13 8H38C39.1046 8 40 8.89543 40 10V36C40 37.1046 39.1046 38 38 38H13C11.8954 38 11 37.1046 11 36V10ZM38 10L13 10V36H38V10Z",
+    fill: "#08044F"
+  }), /* @__PURE__ */ jsx("rect", {
+    x: "20",
+    y: "13",
+    width: "11",
+    height: "8",
+    rx: "1",
+    fill: "#1EBDAF"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18 18.5C18 14.3579 21.3579 11 25.5 11C29.6421 11 33 14.3579 33 18.5C33 22.6421 29.6421 26 25.5 26C21.3579 26 18 22.6421 18 18.5ZM25.5 13C22.4624 13 20 15.4624 20 18.5C20 21.5376 22.4624 24 25.5 24C28.5376 24 31 21.5376 31 18.5C31 15.4624 28.5376 13 25.5 13Z",
+    fill: "#08044F"
+  }), /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.1824 32.4242C19.0622 29.7548 22.078 28 25.5 28C28.922 28 31.9378 29.7548 33.8176 32.4242C34.1356 32.8758 34.0273 33.4996 33.5758 33.8176C33.1242 34.1356 32.5004 34.0273 32.1824 33.5758C30.6413 31.3874 28.2115 30 25.5 30C22.7885 30 20.3587 31.3874 18.8176 33.5758C18.4997 34.0273 17.8758 34.1356 17.4243 33.8176C16.9727 33.4996 16.8644 32.8758 17.1824 32.4242Z",
+    fill: "#08044F"
+  })]
+});
+const CalendarIcon = () => {
+  return /* @__PURE__ */ jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 45,
+    height: 45,
+    fill: "none",
+    children: [/* @__PURE__ */ jsx("circle", {
+      cx: 22.5,
+      cy: 22.5,
+      r: 22.5,
+      fill: "#E0EEFA"
+    }), /* @__PURE__ */ jsx("path", {
+      fill: "#FF554D",
+      d: "M29 30a3 3 0 1 0 6 0 3 3 0 0 0-6 0Z"
+    }), /* @__PURE__ */ jsx("path", {
+      fill: "#1EBDAF",
+      d: "M19.5 30a3 3 0 1 0 6 0 3 3 0 0 0-6 0Z"
+    }), /* @__PURE__ */ jsx("path", {
+      fill: "#F5A623",
+      d: "M10 30a3 3 0 1 0 6 0 3 3 0 0 0-6 0Z"
+    }), /* @__PURE__ */ jsx("path", {
+      fill: "#08044F",
+      fillRule: "evenodd",
+      d: "M10 22a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM29 22a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM19.5 22a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
+      clipRule: "evenodd"
+    }), /* @__PURE__ */ jsx("path", {
+      fill: "#0189FF",
+      d: "M4 8a2 2 0 0 1 2-2h33a2 2 0 0 1 2 2v9H4V8Z"
+    }), /* @__PURE__ */ jsx("path", {
+      fill: "#08044F",
+      fillRule: "evenodd",
+      d: "M6 13v24h33V13H6Zm-1-2a1 1 0 0 0-1 1v25a2 2 0 0 0 2 2h33a2 2 0 0 0 2-2V12a1 1 0 0 0-1-1H5Z",
+      clipRule: "evenodd"
+    }), /* @__PURE__ */ jsx("path", {
+      fill: "#08044F",
+      fillRule: "evenodd",
+      d: "M11 15a1 1 0 0 1-1-1V9a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1ZM34 15a1 1 0 0 1-1-1V9a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1ZM22.5 15a1 1 0 0 1-1-1V9a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1Z",
+      clipRule: "evenodd"
+    })]
+  });
+};
+const getMenuItemIcon = (type) => {
+  switch (type) {
+    case "courses":
+      return /* @__PURE__ */ jsx(CoursesIcon, {});
+    case "calendar":
+      return /* @__PURE__ */ jsx(CalendarIcon, {});
+    case "academic-history":
+      return /* @__PURE__ */ jsx(AcademicHistorialIcon, {});
+    case "profile":
+      return /* @__PURE__ */ jsx(ProfileIcon, {});
+    case "logout":
+      return null;
+    default:
+      return null;
+  }
+};
+const StyledMenuButton = MenuButton;
+const StyledMenuList = MenuList;
+const StyledHeading = Heading;
+const StyledMenuItem = MenuItem;
+const UserDropdown = ({
+  userInfo,
+  menuItems,
+  isOpen: controlledIsOpen,
+  onOpen: controlledOnOpen,
+  onClose: controlledOnClose
+}) => {
+  var _a;
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = controlledIsOpen != null ? controlledIsOpen : internalIsOpen;
+  const onOpen = controlledOnOpen != null ? controlledOnOpen : () => setInternalIsOpen(true);
+  const onClose = controlledOnClose != null ? controlledOnClose : () => setInternalIsOpen(false);
+  const isMobile = useHideBackgroundOnMobile(isOpen);
+  const [isTooltipDisabled, setTooltipDisabled] = useState(false);
+  useTooltipToggleDelay(isOpen, setTooltipDisabled);
+  const menuListRef = useRef(null);
+  const handleArrowKeyFocus = (event) => {
+    focusMenuWithKeys(event, menuListRef);
+  };
+  return /* @__PURE__ */ jsx(Box, {
+    "aria-label": "Mi perfil",
+    "data-menu": "profile",
+    position: "relative",
+    sx: {
+      "&::after": {
+        borderColor: `transparent transparent ${(_a = vars("colors-neutral-davysGrey")) != null ? _a : "#5C5C5C"} transparent`,
+        borderStyle: "solid",
+        borderWidth: "0 11px 10px 11px",
+        content: '""',
+        display: isOpen ? "block" : "none",
+        height: "0",
+        right: "4px",
+        position: "absolute",
+        top: "30px",
+        width: "0"
+      },
+      ">div": {
+        left: isMobile ? "0 !important" : "auto",
+        position: isMobile ? "fixed !important" : "absolute",
+        top: isMobile ? "52px !important" : "auto",
+        transform: isMobile ? "none !important" : "auto"
+      },
+      ".chakra-menu__menu-list": {
+        animation: "none !important",
+        background: vars("colors-neutral-davysGrey"),
+        borderRadius: isMobile ? "0" : "10px",
+        boxShadow: isMobile ? "none" : "rgba(47, 47, 47, 0.2) -1px 6px 40px 0px",
+        maxHeight: isMobile ? "calc(100vh - 62px)" : "auto",
+        opacity: "1 !important",
+        overflowY: isMobile ? "auto" : "hidden",
+        padding: "15px 0 0",
+        position: "absolute",
+        right: isMobile ? "auto" : "-8px",
+        top: isMobile ? "3px !important" : "auto",
+        transform: "none !important",
+        transition: "none !important",
+        width: isMobile ? "100vw" : "290px"
+      },
+      ".content": {
+        height: isMobile ? "100%" : "auto",
+        borderRadius: !isMobile ? "10px" : "0",
+        bg: vars("colors-neutral-white"),
+        ">button": {
+          borderBottom: isMobile ? `solid 1px ${vars("colors-neutral-platinum")}` : "none"
+        }
+      },
+      ".css-r6z5ec": {
+        zIndex: "4"
+      }
+    },
+    children: /* @__PURE__ */ jsx(Menu, {
+      autoSelect: false,
+      placement: "bottom-end",
+      isOpen,
+      onOpen,
+      onClose,
+      children: () => /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(NewTooltip, {
+          label: "Mi perfil",
+          isDisabled: isTooltipDisabled,
+          children: /* @__PURE__ */ jsx(StyledMenuButton, {
+            background: "transparent",
+            border: "transparent",
+            height: "30px",
+            lineHeight: "0",
+            p: "0",
+            _focusVisible: {
+              boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")}`,
+              borderRadius: "50%"
+            },
+            children: /* @__PURE__ */ jsx(Avatar, {
+              fullName: userInfo.name,
+              userId: userInfo.id,
+              picture: userInfo.picture,
+              size: 30,
+              fontSize: 14,
+              id: "CrossAvatar"
+            })
+          })
+        }), /* @__PURE__ */ jsxs(StyledMenuList, {
+          ref: menuListRef,
+          tabIndex: -1,
+          onKeyDown: handleArrowKeyFocus,
+          borderWidth: "0",
+          "aria-hidden": true,
+          children: [/* @__PURE__ */ jsx(StyledHeading, {
+            sx: profileStyle.header,
+            textAlign: "start",
+            children: userInfo.name
+          }), /* @__PURE__ */ jsx(Box, {
+            className: "content",
+            children: menuItems.map((item) => {
+              const {
+                label,
+                type,
+                href,
+                onClick
+              } = item;
+              const view = getMenuItemIcon(type);
+              const isLogout = type === "logout";
+              return /* @__PURE__ */ jsx(StyledMenuItem, {
+                "aria-label": onClick ? "Bot\xF3n" : `V\xEDnculo, ${label}`,
+                as: isLogout || onClick ? "button" : Link,
+                href: onClick ? void 0 : href,
+                onClick,
+                icon: view ? /* @__PURE__ */ jsx(Fragment, {
+                  children: view
+                }) : void 0,
+                padding: isMobile ? "15px 20px" : "10px 20px",
+                sx: isLogout ? profileStyle.logout : profileStyle.items,
+                borderRadius: isLogout && !isMobile ? "0 0 10px 10px" : void 0,
+                height: isLogout && isMobile ? "60px" : "auto",
+                children: label
+              }, label);
+            })
+          })]
+        })]
+      })
+    })
+  });
+};
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalContent, ModalMultiple, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map