@eclass/ui-kit 1.52.6 → 1.52.7

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
               })]
@@ -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",
@@ -6378,6 +6405,7 @@ const EventsList = ({
   type
 }) => {
   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 = {
@@ -6392,7 +6420,7 @@ const EventsList = ({
     p: "16px 24px",
     display: "flex",
     gap: "12px",
-    children: [/* @__PURE__ */ jsxs(Box, {
+    children: [!isMobile && /* @__PURE__ */ jsxs(Box, {
       bg: color,
       minW: "80px",
       minH: "80px",
@@ -6428,21 +6456,48 @@ const EventsList = ({
         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
+        })]
+      }), showsCourseName && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
         display: "flex",
-        alignItems: "center",
         gap: "4px",
-        lineHeight: "19px",
-        children: /* @__PURE__ */ jsxs(Box, {
+        alignItems: "center",
+        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",
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          lineHeight: "normal",
           children: [/* @__PURE__ */ jsx("strong", {
             children: text ? `${text}:` : "Curso:"
           }), " ", courseName]
-        })
+        })]
       })]
     })]
   });