@eclass/ui-kit 1.52.6 → 1.52.8

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/Clock.d.ts

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

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

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

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

@@ -4091,7 +4091,7 @@ function ModalAlert({
   });
 }
 ModalAlert.displayName = "ModalAlert";
-const Calendar = ({
+const Calendar$1 = ({
   color = "white"
 }) => {
   return /* @__PURE__ */ jsxs(Icon, {
@@ -4124,7 +4124,7 @@ const Calendar = ({
     })]
   });
 };
-const Clock = ({
+const Clock$1 = ({
   color = "white"
 }) => {
   return /* @__PURE__ */ jsx(Icon, {
@@ -4201,7 +4201,7 @@ const LargeBox = ({
               display: "flex",
               alignItems: "center",
               gap: "4px",
-              children: [/* @__PURE__ */ jsx(Calendar, {
+              children: [/* @__PURE__ */ jsx(Calendar$1, {
                 color: vars("colors-main-ziggurat")
               }), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
@@ -4213,7 +4213,7 @@ const LargeBox = ({
                 m: "0px",
                 p: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock, {
+              }), /* @__PURE__ */ jsx(Clock$1, {
                 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, {}), /* @__PURE__ */ jsx(Text, {
+              children: [/* @__PURE__ */ jsx(Calendar$1, {}), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
                 m: "0px",
                 children: startDate
               }), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Text, {
+              }), /* @__PURE__ */ jsx(Clock$1, {}), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: startTime
               })]
@@ -6103,7 +6103,7 @@ const EventsGroup = ({
             text,
             type: event.type,
             hasNotification: event.isNew,
-            showsCourseName: true
+            showCourse: true
           }, event.id)
         }, event.id);
       })
@@ -6352,6 +6352,33 @@ const CalendarDropdown = ({
     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",
@@ -6370,14 +6397,17 @@ const EventsList = ({
   color,
   day,
   date,
+  name,
   hasNotification,
-  showsCourseName,
+  showCourse,
+  showUnit,
   time,
-  name,
   text,
-  type
+  type,
+  unitName
 }) => {
   var _a, _b;
+  const [isMobile] = useMediaQuery("(max-width: 580px)");
   const border = `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`;
   const initOrEnd = ["end-course", "init-course", "init-course-flexible", "end-course-flexible"].includes(type);
   const dateTextStyle = {
@@ -6386,13 +6416,20 @@ const EventsList = ({
     color: vars("colors-neutral-white"),
     lineHeight: "100%"
   };
+  const detailTextStyle = {
+    color: (_b = vars("colors-neutral-gray")) != null ? _b : "#808080",
+    fontSize: "14px",
+    display: "flex",
+    gap: "4px",
+    lineHeight: "normal"
+  };
   return /* @__PURE__ */ jsxs(Box, {
     className: "eventsList",
     borderTop: border,
     p: "16px 24px",
     display: "flex",
     gap: "12px",
-    children: [/* @__PURE__ */ jsxs(Box, {
+    children: [!isMobile && /* @__PURE__ */ jsxs(Box, {
       bg: color,
       minW: "80px",
       minH: "80px",
@@ -6422,27 +6459,64 @@ const EventsList = ({
       display: "flex",
       flexDirection: "column",
       gap: "8px",
+      w: "100%",
       children: [/* @__PURE__ */ jsxs(Box, {
         lineHeight: "21px",
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center",
         fontSize: "16px",
-        fontWeight: "700",
+        fontWeight: isMobile ? "400" : "700",
         children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
-      }), showsCourseName && !initOrEnd && /* @__PURE__ */ jsx(Box, {
+      }), isMobile && /* @__PURE__ */ jsxs(Box, {
+        lineHeight: "normal",
+        sx: {
+          ">svg": {
+            marginRight: "4px"
+          }
+        },
+        children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsxs(Box, {
+          as: "span",
+          verticalAlign: "middle",
+          p: "0 8px 0 0",
+          borderRight: `1px solid ${vars("colors-neutral-platinum")}`,
+          mr: "8px",
+          children: [day, " ", date]
+        }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Box, {
+          as: "span",
+          verticalAlign: "middle",
+          children: time
+        })]
+      }), showCourse && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
         display: "flex",
-        alignItems: "center",
         gap: "4px",
-        lineHeight: "19px",
-        children: /* @__PURE__ */ jsxs(Box, {
+        alignItems: "baseline",
+        children: [isMobile && /* @__PURE__ */ jsx(Box, {
+          height: "10px",
+          width: "10px",
+          bg: color,
+          borderRadius: "50%"
+        }), /* @__PURE__ */ jsxs(Box, {
           as: "span",
-          color: (_b = vars("colors-neutral-gray")) != null ? _b : "#808080",
-          fontSize: "14px",
+          sx: detailTextStyle,
           children: [/* @__PURE__ */ jsx("strong", {
             children: text ? `${text}:` : "Curso:"
           }), " ", courseName]
-        })
+        })]
+      }), showUnit && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
+        display: "flex",
+        gap: "4px",
+        alignItems: "baseline",
+        children: [isMobile && /* @__PURE__ */ jsx(Box, {
+          height: "10px",
+          width: "10px",
+          bg: color,
+          borderRadius: "50%"
+        }), /* @__PURE__ */ jsx(Box, {
+          as: "span",
+          sx: detailTextStyle,
+          children: unitName
+        })]
       })]
     })]
   });