componentes-sinco 1.0.36-rc.1 → 1.0.36-rc.2

package/dist/index.cjs

@@ -386,14 +386,6 @@ var SCModal = ({
   const handleToggle = (0, import_react4.useCallback)(() => setModalOpen((prev) => !prev), [setModalOpen]);
   const handleClose = (0, import_react4.useCallback)(() => setModalOpen(false), [setModalOpen]);
   const Icon = (0, import_react4.useMemo)(() => getIconComponent(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
-  const prevAction = (0, import_react4.useMemo)(
-    () => action != null ? action : [
-      { text: "Cancelar", fn: handleClose },
-      { text: "Consultar", fn: () => {
-      } }
-    ],
-    [action, handleClose]
-  );
   const { icon, defaultDescription } = modalStateConfig[state];
   return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, buttonModal && /* @__PURE__ */ import_react4.default.createElement(
     import_material2.Button,
@@ -2298,6 +2290,7 @@ var DrawerActions = ({ actions, anchor }) => {
       padding: "8px 12px",
       height: "42px",
       alignItems: "center",
+      flexWrap: "nowrap",
       justifyContent: actions.length > 1 ? "space-between" : anchor !== "right" ? "flex-end" : "flex-start",
       flexDirection: anchor !== "right" ? "row-reverse" : "row"
     },
@@ -2309,7 +2302,8 @@ var DrawerActions = ({ actions, anchor }) => {
         color: "primary",
         onClick: btn.fn,
         disabled: btn.disabled || false,
-        size: "small"
+        size: "small",
+        fullWidth: anchor === "bottom" ? true : false
       },
       btn.text
     ))
@@ -2324,14 +2318,16 @@ var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
 var DrawerHeader = ({
   title,
   colorTitle,
-  onClose
+  onClose,
+  anchor
 }) => {
   return /* @__PURE__ */ import_react19.default.createElement(
     import_Grid3.default,
     {
       container: true,
       sx: {
-        backgroundColor: "primary.50",
+        marginTop: anchor == "bottom" ? "16px" : "0px",
+        backgroundColor: anchor == "bottom" ? "white" : "primary.50",
         alignItems: "center",
         height: "42px",
         textAlign: "left",
@@ -2479,7 +2475,8 @@ function SCDrawer({
       {
         title,
         colorTitle,
-        onClose: handleDrawerClose
+        onClose: handleDrawerClose,
+        anchor
       }
     ), /* @__PURE__ */ import_react20.default.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ import_react20.default.createElement(DrawerActions, { actions: drawerActions, anchor }))
   ));
@@ -3291,6 +3288,8 @@ var EmptyState = ({
 var import_react33 = __toESM(require("react"), 1);
 var import_material20 = require("@mui/material");
 var import_Grid6 = __toESM(require("@mui/material/Grid"), 1);
+var import_ToggleButton = __toESM(require("@mui/material/ToggleButton"), 1);
+var import_ToggleButtonGroup = __toESM(require("@mui/material/ToggleButtonGroup"), 1);
 var import_Close2 = __toESM(require("@mui/icons-material/Close"), 1);
 var Muicon5 = __toESM(require("@mui/icons-material"), 1);
 var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, typeView = "web", setShow, show }) => {
@@ -3367,7 +3366,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       }
     },
-    title && /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react33.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, null, /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react33.default.createElement(import_material20.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react33.default.createElement(import_Close2.default, { color: "action" })) : "")),
+    title && /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react33.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react33.default.createElement(import_Grid6.default, { sx: { width: "98%" } }, /* @__PURE__ */ import_react33.default.createElement(import_material20.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), subtitle ? subtitle : "")), disableClose != true ? /* @__PURE__ */ import_react33.default.createElement(import_material20.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react33.default.createElement(import_Close2.default, { color: "action" })) : "")),
     /* @__PURE__ */ import_react33.default.createElement(
       import_material20.DialogContent,
       {
@@ -3391,7 +3390,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
               case "extra-large":
                 return { xs: "84vw", md: "93vw" };
               default:
-                return { xs: "64vw", md: "56vw" };
+                return { xs: "100% !important", md: "100% !important" };
             }
           })
         }
@@ -3406,7 +3405,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       ) : content.component
     ),
-    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, dialogActions.length >= 3 ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+    dialogActions != void 0 && dialogActions != false ? Array.isArray(dialogActions) && (dialogActions == null ? void 0 : dialogActions.length) > 0 ? /* @__PURE__ */ import_react33.default.createElement(import_material20.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, typeView !== "mobile" ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, dialogActions.length >= 3 ? /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
       import_material20.Button,
       {
         variant: "text",
@@ -3445,7 +3444,10 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         },
         boton.text
       );
-    })) : "" : ""
+    })) : /* @__PURE__ */ import_react33.default.createElement(import_material20.Box, { sx: { width: "100%", display: "flex", flexDirection: "row", justifyContent: "center" } }, /* @__PURE__ */ import_react33.default.createElement(import_ToggleButtonGroup.default, { size: "large", fullWidth: true }, dialogActions.map((boton, index) => {
+      var _a;
+      return /* @__PURE__ */ import_react33.default.createElement(import_ToggleButton.default, { fullWidth: boton.text ? true : false, size: "medium", value: "text", onClick: boton.fn }, (_a = boton.text) != null ? _a : /* @__PURE__ */ import_react33.default.createElement(import_material20.SvgIcon, { fontSize: "small", component: boton.icon }));
+    })))) : "" : ""
   )));
 };
 
@@ -3453,42 +3455,48 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
 var import_react34 = __toESM(require("react"), 1);
 var import_material21 = require("@mui/material");
 var import_Grid7 = __toESM(require("@mui/material/Grid"), 1);
+var import_Avatar = __toESM(require("@mui/material/Avatar"), 1);
 var Muicon6 = __toESM(require("@mui/icons-material"), 1);
-var SCListContent = ({ options }) => {
+var SCListContent = ({ options, iconLeftType = "Icon", iconRightType = "Icon" }) => {
   const [selectedIndex, setSelectedIndex] = import_react34.default.useState("1");
   const [value, setValue] = import_react34.default.useState("1");
   options.map(function(option, index, array) {
     if (option == null ? void 0 : option.iconLeft) {
       if ((option == null ? void 0 : option.iconLeft.type) == void 0) {
-        option.iconLeft = Muicon6[option == null ? void 0 : option.iconLeft];
-      } else {
-        option;
+        const found = Muicon6[option == null ? void 0 : option.iconLeft];
+        if (found != void 0) {
+          option.iconLeft = Muicon6[option == null ? void 0 : option.iconLeft];
+        }
       }
     }
     if (option == null ? void 0 : option.iconRight) {
       if ((option == null ? void 0 : option.iconRight.type) == void 0) {
-        option.iconRight = Muicon6[option == null ? void 0 : option.iconRight];
-      } else {
-        option;
+        const found = Muicon6[option == null ? void 0 : option.iconRight];
+        if (found != void 0) {
+          option.iconRight = Muicon6[option == null ? void 0 : option.iconRight];
+        }
       }
     }
   });
-  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_material21.List, { sx: { width: "100%", maxWidth: 360, bgcolor: "background.paper", padding: "0px !important" } }, options.map((option, index) => /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, { key: index }, /* @__PURE__ */ import_react34.default.createElement(
-    import_material21.ListItemButton,
-    {
-      disabled: option.disable,
-      onClick: option.fn
-    },
-    option.iconLeft ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "30px !important" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ import_react34.default.createElement(
-      import_material21.ListItemText,
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_material21.List, { sx: { width: "100%", maxWidth: 360, bgcolor: "background.paper", padding: "0px !important" } }, options.map((option, index) => {
+    var _a, _b;
+    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, { key: index }, /* @__PURE__ */ import_react34.default.createElement(
+      import_material21.ListItemButton,
       {
-        primary: option.title,
-        secondary: /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { gap: 0.5 }, /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.subtitle), /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.description))
-      }
-    ),
-    option.iconRight ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight })) : ""
-  ), option.divider == true ? /* @__PURE__ */ import_react34.default.createElement(import_material21.Divider, null) : ""))));
+        disabled: option.disable,
+        onClick: option.fn
+      },
+      option.iconLeft ? iconLeftType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, null, ((_a = option.iconLeft) == null ? void 0 : _a.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft }) : option.iconLeft) : "",
+      /* @__PURE__ */ import_react34.default.createElement(
+        import_material21.ListItemText,
+        {
+          primary: option.title,
+          secondary: /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { gap: 0.5 }, /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.subtitle), /* @__PURE__ */ import_react34.default.createElement(import_Grid7.default, { container: true, gap: 0.5 }, option.description))
+        }
+      ),
+      option.iconRight ? iconRightType == "Icon" ? /* @__PURE__ */ import_react34.default.createElement(import_material21.ListItemIcon, { sx: { minWidth: "0px !important", marginRight: "8px" } }, /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight })) : /* @__PURE__ */ import_react34.default.createElement(import_Avatar.default, null, ((_b = option.iconRight) == null ? void 0 : _b.type) != void 0 ? /* @__PURE__ */ import_react34.default.createElement(import_material21.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight }) : option.iconRight) : ""
+    ), option.divider == true ? /* @__PURE__ */ import_react34.default.createElement(import_material21.Divider, null) : "");
+  })));
 };
 
 // src/Components/SCMenu.tsx
@@ -4203,7 +4211,7 @@ var import_dayjs6 = __toESM(require("dayjs"), 1);
 var import_localeData2 = __toESM(require("dayjs/plugin/localeData"), 1);
 import_dayjs6.default.extend(import_localeData2.default);
 var WeekView = ({
-  events = [],
+  events,
   currentDate,
   isLoading,
   onDayClick,
@@ -4212,11 +4220,7 @@ var WeekView = ({
   startHour = 0,
   endHour = 23
 }) => {
-  const normalizedEvents = events.map((e) => __spreadProps(__spreadValues({}, e), {
-    start: (0, import_dayjs6.default)(e.start),
-    end: (0, import_dayjs6.default)(e.end)
-  }));
-  const noEvents = normalizedEvents.length === 0;
+  const noEvents = events.length === 0;
   const todayString = (0, import_dayjs6.default)().format("YYYY-MM-DD");
   const startOfWeek3 = currentDate.startOf("week");
   const days = Array.from({ length: 7 }, (_, i) => startOfWeek3.add(i, "day"));
@@ -4266,74 +4270,77 @@ var WeekView = ({
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
       icon: /* @__PURE__ */ import_react44.default.createElement(LogoCalendario, null)
     }
-  ) : /* @__PURE__ */ import_react44.default.createElement(import_material29.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react44.default.createElement(import_material29.Box, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ import_react44.default.createElement(
-    import_material29.Box,
-    {
-      key: h,
-      height: 60,
-      textAlign: "right",
-      pr: 1,
-      borderColor: "divider"
-    },
-    /* @__PURE__ */ import_react44.default.createElement(import_material29.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
-  ))), days.map((day) => {
-    const dayEvents = normalizedEvents.filter(
-      (event2) => day.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
-    ).filter((event2) => {
-      const startsInRange = event2.start.hour() >= startHour && event2.start.hour() <= endHour;
-      const endsInRange = event2.end.hour() >= startHour && event2.end.hour() <= endHour;
-      return startsInRange || endsInRange;
-    }).sort((a, b) => a.start.valueOf() - b.start.valueOf());
-    return /* @__PURE__ */ import_react44.default.createElement(
+  ) : (
+    // Grid de horas y eventos
+    /* @__PURE__ */ import_react44.default.createElement(import_material29.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react44.default.createElement(import_material29.Box, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ import_react44.default.createElement(
       import_material29.Box,
       {
-        key: day.toString(),
-        flex: 1,
-        borderLeft: "1px solid",
-        borderColor: "divider",
-        position: "relative",
-        "data-testid": `week-day-column-${day.format("YYYY-MM-DD")}`,
-        onClick: () => onDayClick == null ? void 0 : onDayClick(day)
+        key: h,
+        height: 60,
+        textAlign: "right",
+        pr: 1,
+        borderColor: "divider"
       },
-      hours.map((hourIdx) => {
-        const borderType = getCellBorderType2(hourIdx, dayEvents);
-        return /* @__PURE__ */ import_react44.default.createElement(
-          import_material29.Box,
-          {
-            key: hourIdx,
-            height: 60,
-            borderTop: "1px solid",
-            borderColor: borderType === "start" || borderType === "full" || borderType === "none" ? "divider" : "transparent",
-            borderBottom: borderType === "end" || borderType === "full" ? "1px solid divider" : void 0
-          }
-        );
-      }),
-      dayEvents.map((event2) => {
-        const eventStart = day.isSame(event2.start, "day") ? event2.start : day.startOf("day").hour(startHour).minute(0);
-        const eventEnd = day.isSame(event2.end, "day") ? event2.end : day.endOf("day").hour(endHour).minute(59);
-        const startMinutes = (eventStart.hour() - startHour) * 60 + eventStart.minute();
-        const durationMinutes = eventEnd.diff(eventStart, "minute");
-        return /* @__PURE__ */ import_react44.default.createElement(
-          CalendarEventCard,
-          {
-            key: `${event2.id}-${day.toString()}`,
-            event: event2,
-            color: stateColors[event2.state],
-            onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
-            onHover: onEventHover,
-            sx: {
-              position: "absolute",
-              top: `${startMinutes}px`,
-              left: 4,
-              right: 4,
-              cursor: "pointer",
-              height: `${durationMinutes}px`
+      /* @__PURE__ */ import_react44.default.createElement(import_material29.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
+    ))), days.map((day) => {
+      const dayEvents = events.filter(
+        (event2) => day.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
+      ).filter((event2) => {
+        const startsInRange = event2.start.hour() >= startHour && event2.start.hour() <= endHour;
+        const endsInRange = event2.end.hour() >= startHour && event2.end.hour() <= endHour;
+        return startsInRange || endsInRange;
+      }).sort((a, b) => a.start.valueOf() - b.start.valueOf());
+      return /* @__PURE__ */ import_react44.default.createElement(
+        import_material29.Box,
+        {
+          key: day.toString(),
+          flex: 1,
+          borderLeft: "1px solid",
+          borderColor: "divider",
+          position: "relative",
+          "data-testid": `week-day-column-${day.format("YYYY-MM-DD")}`,
+          onClick: () => onDayClick == null ? void 0 : onDayClick(day)
+        },
+        hours.map((hourIdx) => {
+          const borderType = getCellBorderType2(hourIdx, dayEvents);
+          return /* @__PURE__ */ import_react44.default.createElement(
+            import_material29.Box,
+            {
+              key: hourIdx,
+              height: 60,
+              borderTop: "1px solid",
+              borderColor: borderType === "start" || borderType === "full" || borderType === "none" ? "divider" : "transparent",
+              borderBottom: borderType === "end" || borderType === "full" ? "1px solid divider" : void 0
             }
-          }
-        );
-      })
-    );
-  })));
+          );
+        }),
+        dayEvents.map((event2) => {
+          const eventStart = day.isSame(event2.start, "day") ? event2.start : day.startOf("day").hour(startHour).minute(0);
+          const eventEnd = day.isSame(event2.end, "day") ? event2.end : day.endOf("day").hour(endHour).minute(59);
+          const startMinutes = (eventStart.hour() - startHour) * 60 + eventStart.minute();
+          const durationMinutes = eventEnd.diff(eventStart, "minute");
+          return /* @__PURE__ */ import_react44.default.createElement(
+            CalendarEventCard,
+            {
+              key: `${event2.id}-${day.toString()}`,
+              event: event2,
+              color: stateColors[event2.state],
+              onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+              onHover: onEventHover,
+              sx: {
+                position: "absolute",
+                top: `${startMinutes}px`,
+                left: 4,
+                right: 4,
+                cursor: "pointer",
+                height: `${durationMinutes}px`
+              }
+            }
+          );
+        })
+      );
+    }))
+  ));
 };
 
 // src/Components/Calendario/Views/DayView.tsx
@@ -4848,7 +4855,7 @@ var SCActivityCalendar = ({
       sx: { fontSize: "12px !important", height: "300px !important", background: background ? background : "white", "& .MuiDayCalendar-header": { justifyContent: "space-between" }, "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" }, "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" }, "& .MuiPickersDay-root": { fontSize: "12px !important" }, "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" } },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", height: openCalendar ? "calc(91% - 300px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 300px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
       key: dayIndex
@@ -4874,7 +4881,7 @@ var SCActivityCalendar = ({
           {
             key: idx,
             options: [{
-              title: event2.description,
+              title: event2.activityDescription,
               subtitle: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, configRangeHour && new Date(event2.date.replace("00:00:00", event2.startTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getHours() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getHours() && new Date(event2.date.replace("00:00:00", event2.startTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getMinutes() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getMinutes() ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, "Todo el dia"), /* @__PURE__ */ import_react50.default.createElement(import_LightModeOutlined.default, { fontSize: "small" })) : /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ import_react50.default.createElement(import_ArrowForward.default, { fontSize: "small" }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
               iconLeftColor: event2.state === "Finalizada" ? "success" : "action",
               iconLeft: event2.state === "Finalizada" ? "CheckCircle" : event2.state === "Aplazada" ? "EventBusyOutlined" : event2.state === "En progreso" ? "PendingOutlined" : "RadioButtonUnchecked",