@eclass/ui-kit 1.52.3 → 1.52.6

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

@@ -4091,7 +4091,7 @@ function ModalAlert({
   });
 }
 ModalAlert.displayName = "ModalAlert";
-const Calendar$1 = ({
+const Calendar = ({
   color = "white"
 }) => {
   return /* @__PURE__ */ jsxs(Icon, {
@@ -4124,7 +4124,7 @@ const Calendar$1 = ({
     })]
   });
 };
-const Clock$1 = ({
+const Clock = ({
   color = "white"
 }) => {
   return /* @__PURE__ */ jsx(Icon, {
@@ -4201,7 +4201,7 @@ const LargeBox = ({
               display: "flex",
               alignItems: "center",
               gap: "4px",
-              children: [/* @__PURE__ */ jsx(Calendar$1, {
+              children: [/* @__PURE__ */ jsx(Calendar, {
                 color: vars("colors-main-ziggurat")
               }), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
@@ -4213,7 +4213,7 @@ const LargeBox = ({
                 m: "0px",
                 p: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock$1, {
+              }), /* @__PURE__ */ jsx(Clock, {
                 color: vars("colors-main-ziggurat")
               }), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
@@ -4302,14 +4302,14 @@ const SmallBox = ({
               display: "flex",
               alignItems: "center",
               gap: "4px",
-              children: [/* @__PURE__ */ jsx(Calendar$1, {}), /* @__PURE__ */ jsx(Text, {
+              children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
                 m: "0px",
                 children: startDate
               }), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock$1, {}), /* @__PURE__ */ jsx(Text, {
+              }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: startTime
               })]
@@ -6059,15 +6059,11 @@ const EventsGroup = ({
   title,
   events,
   text,
-  colors: colors2,
-  clickEvent
+  colors: colors2
 }) => {
   var _a;
   if (!events || events && events.length === 0)
     return /* @__PURE__ */ jsx(Fragment, {});
-  const handleClick = (event) => {
-    clickEvent == null ? void 0 : clickEvent(event);
-  };
   return /* @__PURE__ */ jsx(Box, {
     className: "calendar-events-group",
     _focus: {
@@ -6100,13 +6096,14 @@ const EventsGroup = ({
           children: /* @__PURE__ */ jsx(EventsList, {
             name: event.associated_resource.name || "",
             courseName: event.course.name,
-            date: event.formatedDate.start,
-            hours: event.formatedDate.hours,
+            day: event.formatedDate.day,
+            date: event.formatedDate.date,
+            time: event.formatedDate.time,
             color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
             text,
+            type: event.type,
             hasNotification: event.isNew,
-            isDropdown: true,
-            clickEvent: () => handleClick(event)
+            showsCourseName: true
           }, event.id)
         }, event.id);
       })
@@ -6118,8 +6115,7 @@ const Events = ({
   text,
   redirecToCalendar,
   isMobile,
-  colors: colors2,
-  clickEvent
+  colors: colors2
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const {
@@ -6158,20 +6154,17 @@ const Events = ({
       colors: colors2,
       text: (_c = text == null ? void 0 : text.course) != null ? _c : "",
       title: (_e = (_d = text == null ? void 0 : text.events) == null ? void 0 : _d.today) != null ? _e : "Hoy",
-      events: today,
-      clickEvent
+      events: today
     }), /* @__PURE__ */ jsx(EventsGroup, {
       colors: colors2,
       text: (_f = text == null ? void 0 : text.course) != null ? _f : "",
       title: (_h = (_g = text == null ? void 0 : text.events) == null ? void 0 : _g.tomorrow) != null ? _h : "Ma\xF1ana",
-      events: tomorrow,
-      clickEvent
+      events: tomorrow
     }), /* @__PURE__ */ jsx(EventsGroup, {
       colors: colors2,
       text: (_i = text == null ? void 0 : text.course) != null ? _i : "",
       title: (_k = (_j = text == null ? void 0 : text.events) == null ? void 0 : _j.next) != null ? _k : "Pr\xF3ximos",
-      events: next,
-      clickEvent
+      events: next
     })]
   });
 };
@@ -6183,8 +6176,7 @@ const CalendarDropdownContainer = ({
   redirectToCalendar,
   courseColors,
   onlyToCalendar,
-  m: m2,
-  clickEvent
+  m: m2
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const [isMobile] = useMediaQuery("(max-width: 577px)");
@@ -6322,8 +6314,7 @@ const CalendarDropdownContainer = ({
               events: all,
               text,
               redirecToCalendar: redirectToCalendar,
-              isMobile,
-              clickEvent
+              isMobile
             })
           })]
         })]
@@ -6346,8 +6337,7 @@ const CalendarDropdown = ({
   events,
   loading,
   onlyToCalendar = false,
-  m: m2,
-  clickEvent
+  m: m2
 }) => {
   const date = new Date(now);
   const isoDate = date.toISOString();
@@ -6359,37 +6349,9 @@ const CalendarDropdown = ({
     courseColors,
     redirectToCalendar,
     text,
-    onlyToCalendar,
-    clickEvent
+    onlyToCalendar
   });
 };
-function Calendar(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.displayName = "Calendar";
-function Clock(props) {
-  return /* @__PURE__ */ jsx(Base, {
-    ...props,
-    title: "Clock",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "#B0CFE0",
-      d: "M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H7V4h2v3h3v2z"
-    })
-  });
-}
-Clock.displayName = "Clock";
 const NotificationIcon = () => /* @__PURE__ */ jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "8px",
@@ -6404,93 +6366,85 @@ const NotificationIcon = () => /* @__PURE__ */ jsx("svg", {
   })
 });
 const EventsList = ({
-  hasNotification,
-  isDropdown,
-  name,
   courseName,
   color,
-  text,
+  day,
   date,
-  hours,
-  clickEvent
+  hasNotification,
+  showsCourseName,
+  time,
+  name,
+  text,
+  type
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const border = `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`;
-  const handleClick = () => clickEvent == null ? void 0 : clickEvent();
-  return /* @__PURE__ */ jsx(Ripples, {
-    children: /* @__PURE__ */ jsx(Box, {
-      className: "eventsList",
-      borderTop: border,
-      padding: "16px 24px",
-      onClick: handleClick,
-      cursor: "pointer",
-      bg: (_b = vars("colors-neutral-white")) != null ? _b : "#fff",
-      _hover: {
-        bg: (_c = vars("colors-neutral-cultured2")) != null ? _c : "#F8F8F8"
-      },
-      children: /* @__PURE__ */ jsxs(Box, {
+  const initOrEnd = ["end-course", "init-course", "init-course-flexible", "end-course-flexible"].includes(type);
+  const dateTextStyle = {
+    fontSize: "18px",
+    fontWeight: "700",
+    color: vars("colors-neutral-white"),
+    lineHeight: "100%"
+  };
+  return /* @__PURE__ */ jsxs(Box, {
+    className: "eventsList",
+    borderTop: border,
+    p: "16px 24px",
+    display: "flex",
+    gap: "12px",
+    children: [/* @__PURE__ */ jsxs(Box, {
+      bg: color,
+      minW: "80px",
+      minH: "80px",
+      maxW: "80px",
+      maxH: "80px",
+      borderRadius: "4px",
+      p: "8px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-around",
+      children: [/* @__PURE__ */ jsx(Box, {
+        as: "span",
+        sx: dateTextStyle,
+        children: day
+      }), /* @__PURE__ */ jsx(Box, {
+        as: "span",
+        sx: dateTextStyle,
+        children: date
+      }), /* @__PURE__ */ jsx(Box, {
+        as: "span",
+        fontSize: "14px",
+        fontWeight: "700",
+        color: vars("colors-neutral-white"),
+        children: time
+      })]
+    }), /* @__PURE__ */ jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      children: [/* @__PURE__ */ jsxs(Box, {
+        lineHeight: "21px",
         display: "flex",
-        flexDirection: "column",
-        gap: "8px",
-        children: [/* @__PURE__ */ jsxs(Box, {
-          lineHeight: "21px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          fontSize: "16px",
-          children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
-        }), /* @__PURE__ */ jsxs(Box, {
-          display: "flex",
-          lineHeight: "19px",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: "16px",
+        fontWeight: "700",
+        children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
+      }), showsCourseName && !initOrEnd && /* @__PURE__ */ jsx(Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        lineHeight: "19px",
+        children: /* @__PURE__ */ jsxs(Box, {
+          as: "span",
+          color: (_b = vars("colors-neutral-gray")) != null ? _b : "#808080",
           fontSize: "14px",
-          sx: {
-            svg: {
-              marginRight: "4px"
-            },
-            span: {
-              verticalAlign: "middle"
-            }
-          },
-          children: [/* @__PURE__ */ jsxs(Box, {
-            paddingRight: "8px",
-            borderRight: border,
-            children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx("span", {
-              children: date
-            })]
-          }), /* @__PURE__ */ jsxs(Box, {
-            paddingLeft: "8px",
-            children: [/* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx("span", {
-              children: hours
-            })]
-          })]
-        }), isDropdown && /* @__PURE__ */ jsxs(Box, {
-          display: "flex",
-          alignItems: "center",
-          gap: "4px",
-          lineHeight: "19px",
-          children: [/* @__PURE__ */ jsx(Box, {
-            alignSelf: "flex-start",
-            bg: color,
-            borderRadius: "50%",
-            display: "block",
-            h: "10px",
-            mt: "4px",
-            maxH: "10px",
-            maxW: "10px",
-            minH: "10px",
-            minW: "10px",
-            w: "10px"
-          }), /* @__PURE__ */ jsxs(Box, {
-            as: "span",
-            color: (_d = vars("colors-neutral-gray")) != null ? _d : "#808080",
-            fontSize: "14px",
-            children: [/* @__PURE__ */ jsxs("strong", {
-              children: [text != null ? text : "Curso", ":"]
-            }), " ", courseName]
-          })]
-        })]
-      })
-    })
+          children: [/* @__PURE__ */ jsx("strong", {
+            children: text ? `${text}:` : "Curso:"
+          }), " ", courseName]
+        })
+      })]
+    })]
   });
 };
 export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };