componentes-sinco 1.0.33 → 1.0.34-rc.2

package/dist/index.js

@@ -756,7 +756,7 @@ var Attachment = ({
 
 // src/Components/Drawer/SCDrawer.tsx
 import React16 from "react";
-import { Drawer, Stack as Stack6 } from "@mui/material";
+import { Drawer, Stack as Stack6, SwipeableDrawer, Box as Box11 } from "@mui/material";
 import Grid6 from "@mui/material/Grid";
 
 // src/Components/Drawer/Helpers/Utils.tsx
@@ -1987,7 +1987,6 @@ var SCDateRange = ({
   const isStartEmpty = required && !state[0];
   const isEndEmpty = required && !state[1];
   const hasError = isStartEmpty || isEndEmpty;
-  const minDate = new Date(2013, 0, 1);
   const [notification, setNotification] = React12.useState(false);
   const handleDateChange = (newValue) => {
     const minDateDayjs = dayjs("2013-01-01");
@@ -2007,7 +2006,30 @@ var SCDateRange = ({
         return;
       }
     }
-    setState(convertedValue);
+    const startDateChanged = convertedValue[0] && state[0] && !convertedValue[0].isSame(state[0], "day");
+    const hasEndDate = convertedValue[1] !== null;
+    if (startDateChanged && convertedValue[0]) {
+      if (!hasEndDate || hasEndDate && convertedValue[0].isAfter(convertedValue[1])) {
+        const correctedValue = [
+          convertedValue[0],
+          convertedValue[0]
+          // Establecer fecha final igual a la inicial
+        ];
+        setState(correctedValue);
+        return;
+      }
+    }
+    const isInvalidRange = convertedValue[0] && convertedValue[1] && convertedValue[0].isAfter(convertedValue[1]);
+    if (isInvalidRange) {
+      const correctedValue = [
+        convertedValue[0],
+        convertedValue[0]
+        // Establecer fecha final igual a la inicial
+      ];
+      setState(correctedValue);
+    } else {
+      setState(convertedValue);
+    }
   };
   return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: "es" }, /* @__PURE__ */ React12.createElement(Box9, { sx: { width: "100%" } }, /* @__PURE__ */ React12.createElement(
     DateRangePicker,
@@ -2019,44 +2041,38 @@ var SCDateRange = ({
         field: MultiInputDateRangeField
       },
       slotProps: {
-        field: {
-          slotProps: {
-            textField: ({ position }) => ({
-              label: position === "start" ? labelDateInitial : labelDateFinal,
-              size: "small",
-              variant: "outlined",
-              required,
-              error: position === "start" ? isStartEmpty : isEndEmpty,
-              InputProps: {
-                endAdornment: /* @__PURE__ */ React12.createElement(InputAdornment4, { position: "end" }, /* @__PURE__ */ React12.createElement(
-                  EventIcon,
-                  {
-                    color: hasError ? "error" : "action",
-                    fontSize: "small"
-                  }
-                ))
+        textField: ({ position }) => {
+          const isStart = position === "start";
+          return {
+            label: isStart ? labelDateInitial : labelDateFinal,
+            size: "small",
+            variant: "outlined",
+            required,
+            error: isStart ? isStartEmpty : isEndEmpty,
+            InputProps: {
+              endAdornment: /* @__PURE__ */ React12.createElement(InputAdornment4, { position: "end" }, /* @__PURE__ */ React12.createElement(
+                EventIcon,
+                {
+                  color: hasError ? "error" : "action",
+                  fontSize: "small"
+                }
+              ))
+            },
+            sx: {
+              flex: 1,
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: background === "transparent" ? "transparent" : background
               },
-              sx: {
-                mr: position === "start" ? 1 : 0,
-                "& .MuiOutlinedInput-root": {
-                  backgroundColor: background === "transparent" ? "transparent" : background
-                },
-                "& .MuiInputLabel-asterisk": {
-                  color: "error.main"
-                },
-                background: background != null ? background : "transparent"
-              }
-            })
-          }
+              "& .MuiInputLabel-asterisk": {
+                color: "error.main"
+              },
+              background: background != null ? background : "transparent"
+            }
+          };
         }
-      },
-      sx: {
-        display: "flex",
-        gap: 1,
-        width: "100%"
       }
     }
-  ))), notification && /* @__PURE__ */ React12.createElement(SCToastNotification, { title: "El Formato de la fecha no es v\xE1lido", type: "error" }));
+  ))));
 };
 
 // src/Components/Drawer/components/DrawerContent.tsx
@@ -2225,7 +2241,7 @@ var DrawerActions = ({ actions, anchor }) => {
 
 // src/Components/Drawer/components/DrawerHeader.tsx
 import React15 from "react";
-import { Typography as Typography9, IconButton as IconButton8 } from "@mui/material";
+import { Typography as Typography8, IconButton as IconButton8 } from "@mui/material";
 import Grid5 from "@mui/material/Grid";
 import CloseIcon from "@mui/icons-material/Close";
 var DrawerHeader = ({
@@ -2247,7 +2263,7 @@ var DrawerHeader = ({
         alignContent: "center"
       }
     },
-    /* @__PURE__ */ React15.createElement(Typography9, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"),
+    /* @__PURE__ */ React15.createElement(Typography8, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"),
     /* @__PURE__ */ React15.createElement(IconButton8, { onClick: onClose }, /* @__PURE__ */ React15.createElement(CloseIcon, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))
   );
 };
@@ -2265,6 +2281,7 @@ function SCDrawer({
   setOpen,
   chipFilters
 }) {
+  const drawerBleeding = 56;
   const { drawerOpen, handleDrawerClose, toggleDrawer } = useDrawerState({ open, setOpen });
   const { toast, setToastWithDelay } = useToast();
   const {
@@ -2327,12 +2344,12 @@ function SCDrawer({
         onToggle: toggleDrawer(true)
       }
     )
-  ), /* @__PURE__ */ React16.createElement(
+  ), anchor != "bottom" ? /* @__PURE__ */ React16.createElement(
     Drawer,
     {
       open: drawerOpen,
       onClose: toggleDrawer(false),
-      anchor,
+      anchor: anchor != null ? anchor : "left",
       sx: {
         "& .MuiDrawer-paper": {
           width: width != null ? width : "450px",
@@ -2349,12 +2366,51 @@ function SCDrawer({
         onClose: handleDrawerClose
       }
     ), /* @__PURE__ */ React16.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ React16.createElement(DrawerActions, { actions: drawerActions, anchor }))
+  ) : /* @__PURE__ */ React16.createElement(
+    SwipeableDrawer,
+    {
+      open: drawerOpen,
+      onClose: toggleDrawer(false),
+      onOpen: toggleDrawer(true),
+      anchor: "bottom",
+      swipeAreaWidth: drawerBleeding,
+      sx: {
+        "& .MuiDrawer-paper": {
+          width: "auto",
+          height: `calc(50% - ${drawerBleeding}px)`,
+          boxSizing: "border-box",
+          borderRadius: "4px 4px 0px 0px"
+        }
+      }
+    },
+    /* @__PURE__ */ React16.createElement(
+      Box11,
+      {
+        sx: {
+          width: 30,
+          height: 6,
+          backgroundColor: "#ccc",
+          borderRadius: 3,
+          position: "absolute",
+          top: 8,
+          left: "calc(50% - 15px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ React16.createElement(Stack6, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ React16.createElement(
+      DrawerHeader,
+      {
+        title,
+        colorTitle,
+        onClose: handleDrawerClose
+      }
+    ), /* @__PURE__ */ React16.createElement(DrawerContent, { arrayElements }), /* @__PURE__ */ React16.createElement(DrawerActions, { actions: drawerActions, anchor }))
   ));
 }
 
 // src/Components/FooterAction/FooterAction.tsx
 import React17 from "react";
-import { AppBar, Toolbar, Box as Box11, Typography as Typography10 } from "@mui/material";
+import { AppBar, Toolbar, Box as Box12, Typography as Typography9 } from "@mui/material";
 var FooterAction = ({
   leftContent,
   rightContent,
@@ -2374,8 +2430,8 @@ var FooterAction = ({
         sx: { gap: 1.5, minHeight: "50px !important" }
       },
       leftContent,
-      /* @__PURE__ */ React17.createElement(Box11, { flexGrow: 1 }),
-      label && /* @__PURE__ */ React17.createElement(Typography10, { variant: "body2", color: "text.secondary" }, label),
+      /* @__PURE__ */ React17.createElement(Box12, { flexGrow: 1 }),
+      label && /* @__PURE__ */ React17.createElement(Typography9, { variant: "body2", color: "text.secondary" }, label),
       rightContent
     )
   );
@@ -2387,12 +2443,12 @@ import { Button as Button8, Checkbox as Checkbox2, FormControl as FormControl3,
 import { SearchOutlined } from "@mui/icons-material";
 
 // src/Components/MultiSelect/helpers/useHandlers.tsx
-import { useCallback as useCallback3, useState as useState10 } from "react";
+import { useCallback as useCallback3, useState as useState11 } from "react";
 function useMultiSelectHandlers() {
-  const [anchorEl, setAnchorEl] = useState10(null);
-  const [open, setOpen] = useState10(false);
-  const [selectedItems, setSelectedItems] = useState10([]);
-  const [filterValue, setFilterValue] = useState10("");
+  const [anchorEl, setAnchorEl] = useState11(null);
+  const [open, setOpen] = useState11(false);
+  const [selectedItems, setSelectedItems] = useState11([]);
+  const [filterValue, setFilterValue] = useState11("");
   const handleOpen = useCallback3((e) => {
     setAnchorEl(e.currentTarget);
     setOpen(true);
@@ -2570,7 +2626,7 @@ function MultiSelect({
 
 // src/Components/PageHeader/PageHeader.tsx
 import React19 from "react";
-import { Stack as Stack8, Typography as Typography11 } from "@mui/material";
+import { Stack as Stack8, Typography as Typography10 } from "@mui/material";
 var PageHeader = ({
   title,
   subtitle,
@@ -2591,13 +2647,13 @@ var PageHeader = ({
       zIndex: 10,
       sx: { boxShadow: shadow ? (theme) => theme.shadows[1] : "none" }
     },
-    /* @__PURE__ */ React19.createElement(Stack8, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React19.createElement(Stack8, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ React19.createElement(Stack8, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ React19.createElement(Typography11, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ React19.createElement(Typography11, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ React19.createElement(Stack8, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
+    /* @__PURE__ */ React19.createElement(Stack8, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React19.createElement(Stack8, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ React19.createElement(Stack8, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ React19.createElement(Typography10, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ React19.createElement(Typography10, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ React19.createElement(Stack8, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
   );
 };
 
 // src/Components/SCCalendarSwipeable.tsx
-import React20, { useState as useState11 } from "react";
-import { Typography as Typography12, IconButton as IconButton9, Box as Box12 } from "@mui/material";
+import React20, { useState as useState12 } from "react";
+import { Typography as Typography11, IconButton as IconButton9, Box as Box13 } from "@mui/material";
 import Grid7 from "@mui/material/Grid";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as LocalizationProvider2 } from "@mui/x-date-pickers/LocalizationProvider";
@@ -2615,8 +2671,8 @@ var SCCalendarSwipeable = ({
   state
 }) => {
   let convertFecha;
-  const [fecha, setFecha] = useState11(/* @__PURE__ */ new Date());
-  const [fechaSeleccionada, setFechaSeleccionada] = useState11();
+  const [fecha, setFecha] = useState12(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = useState12();
   const [stateVal, setstateVal] = React20.useState(/* @__PURE__ */ new Date());
   const [openCalendar, setOpenCalendar] = React20.useState(false);
   const hoy = /* @__PURE__ */ new Date();
@@ -2641,8 +2697,8 @@ var SCCalendarSwipeable = ({
     setOpenCalendar(newOpen);
   };
   const locale = __spreadValues({}, es);
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(LocalizationProvider2, { dateAdapter: AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React20.createElement(Box12, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React20.createElement(Box12, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React20.createElement(Grid7, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ React20.createElement(Grid7, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React20.createElement(Box12, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React20.createElement(Typography12, { sx: { fontSize: "12px !important", color: "#10184099" } }, format(dia, "EEEE", { locale: es }).charAt(0).toUpperCase())), /* @__PURE__ */ React20.createElement(
-    Box12,
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(LocalizationProvider2, { dateAdapter: AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React20.createElement(Box13, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React20.createElement(Box13, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React20.createElement(Grid7, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ React20.createElement(Grid7, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React20.createElement(Box13, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React20.createElement(Typography11, { sx: { fontSize: "12px !important", color: "#10184099" } }, format(dia, "EEEE", { locale: es }).charAt(0).toUpperCase())), /* @__PURE__ */ React20.createElement(
+    Box13,
     {
       onClick: () => setFecha(dia),
       sx: {
@@ -2657,8 +2713,8 @@ var SCCalendarSwipeable = ({
         //height: '36px',
       }
     },
-    /* @__PURE__ */ React20.createElement(Typography12, { sx: { fontSize: "12px !important", color: isSameDay(dia, fecha) ? "white" : "#101840DE" } }, format(dia, "d"))
-  )))), /* @__PURE__ */ React20.createElement(Grid7, { container: true, justifyContent: "center" }, /* @__PURE__ */ React20.createElement(IconButton9, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React20.createElement(KeyboardDoubleArrowDownIcon, null))))) : /* @__PURE__ */ React20.createElement(Box12, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React20.createElement(Typography11, { sx: { fontSize: "12px !important", color: isSameDay(dia, fecha) ? "white" : "#101840DE" } }, format(dia, "d"))
+  )))), /* @__PURE__ */ React20.createElement(Grid7, { container: true, justifyContent: "center" }, /* @__PURE__ */ React20.createElement(IconButton9, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React20.createElement(KeyboardDoubleArrowDownIcon, null))))) : /* @__PURE__ */ React20.createElement(Box13, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React20.createElement(
     StaticDatePicker,
     {
       orientation: "landscape",
@@ -2672,7 +2728,7 @@ var SCCalendarSwipeable = ({
 };
 
 // src/Components/SCDataGrid.tsx
-import React21, { useEffect as useEffect14, useState as useState12 } from "react";
+import React21, { useEffect as useEffect14, useState as useState13 } from "react";
 import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
 import { LicenseInfo as LicenseInfo2 } from "@mui/x-license";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
@@ -2834,10 +2890,10 @@ function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSel
   let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 36 : 32;
   let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length.toString()) : data.length < 10 ? parseInt(data.length.toString()) : 10;
   let validationGroupingColDef = groupingColDefs || {};
-  const [groupDataLenght, setGroupDataLengh] = useState12(0);
-  const [pageSize, setPageSize] = useState12(rows);
-  const [arrayRows, setArrayRows] = useState12([]);
-  const [selectionModel, setSelectionModel] = useState12([]);
+  const [groupDataLenght, setGroupDataLengh] = useState13(0);
+  const [pageSize, setPageSize] = useState13(rows);
+  const [arrayRows, setArrayRows] = useState13([]);
+  const [selectionModel, setSelectionModel] = useState13([]);
   useEffect14(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
@@ -2953,6 +3009,48 @@ function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSel
         "& .MuiDataGrid-cell": {
           padding: "0 !important",
           background: "white"
+        },
+        // Ocultar scrollbars personalizados de MUI completamente
+        "& .MuiDataGrid-scrollbar": {
+          display: "none !important",
+          visibility: "hidden !important",
+          width: "0 !important",
+          opacity: "0 !important"
+        },
+        "& .MuiDataGrid-scrollbar--vertical": {
+          display: "none !important",
+          visibility: "hidden !important",
+          width: "0 !important",
+          opacity: "0 !important"
+        },
+        // Scrollbar filler y content siempre transparentes
+        "& .MuiDataGrid-scrollbarFiller": {
+          backgroundColor: "transparent !important",
+          display: "none !important"
+        },
+        "& .MuiDataGrid-scrollbarContent": {
+          backgroundColor: "transparent !important",
+          display: "none !important"
+        },
+        // Scrollbar nativo visible solo cuando hay overflow
+        "& .MuiDataGrid-virtualScroller": {
+          overflowY: "auto !important",
+          scrollbarWidth: "thin",
+          scrollbarColor: "#888 transparent",
+          "&::-webkit-scrollbar": {
+            width: "8px",
+            height: "8px"
+          },
+          "&::-webkit-scrollbar-track": {
+            background: "transparent"
+          },
+          "&::-webkit-scrollbar-thumb": {
+            background: "#888",
+            borderRadius: "4px"
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: "#555"
+          }
         }
       }
     }
@@ -2965,7 +3063,7 @@ var SCDataGrid = React21.memo(SCDataGridInitial, (prevProps, nextProps) => {
 
 // src/Components/EmptyState/EmptyState.tsx
 import React26 from "react";
-import { Button as Button10, Stack as Stack9, Typography as Typography13 } from "@mui/material";
+import { Button as Button10, Stack as Stack9, Typography as Typography12 } from "@mui/material";
 
 // src/assets/ImgEmptyState/create.tsx
 import React22 from "react";
@@ -3027,8 +3125,8 @@ var EmptyState = ({
       "data-testid": "empty-state-container"
     },
     icon && /* @__PURE__ */ React26.createElement(Stack9, null, icon),
-    /* @__PURE__ */ React26.createElement(Stack9, { gap: 0.5 }, /* @__PURE__ */ React26.createElement(Typography13, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ React26.createElement(
-      Typography13,
+    /* @__PURE__ */ React26.createElement(Stack9, { gap: 0.5 }, /* @__PURE__ */ React26.createElement(Typography12, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ React26.createElement(
+      Typography12,
       {
         variant: subtitleVariant,
         textAlign: "center",
@@ -3064,8 +3162,8 @@ var EmptyState = ({
 };
 
 // src/Components/SCDialog.tsx
-import React27, { useEffect as useEffect15, useState as useState13 } from "react";
-import { Button as Button11, Typography as Typography14, Modal as Modal2, Dialog, DialogActions, DialogContent, DialogTitle, IconButton as IconButton10, Tooltip as Tooltip4, Box as Box13, SvgIcon as SvgIcon5 } from "@mui/material";
+import React27, { useEffect as useEffect15, useState as useState14 } from "react";
+import { Button as Button11, Typography as Typography13, Modal as Modal2, Dialog, DialogActions, DialogContent, DialogTitle, IconButton as IconButton10, Tooltip as Tooltip4, Box as Box14, SvgIcon as SvgIcon5 } from "@mui/material";
 import Grid8 from "@mui/material/Grid";
 import CloseIcon2 from "@mui/icons-material/Close";
 import * as Muicon5 from "@mui/icons-material";
@@ -3074,7 +3172,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
   let iconTitleValidation = "";
   let IconTitle;
   let ButtonIcon;
-  const [open, setOpen] = useState13(show);
+  const [open, setOpen] = useState14(show);
   useEffect15(() => {
     if (show) {
       handleOpen();
@@ -3127,7 +3225,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
     }
   };
   const dialogActions = actions == false ? false : actions != void 0 ? actions : [{ text: "Cerrar", fn: handleClose }];
-  content = content != null ? content : { component: /* @__PURE__ */ React27.createElement(Box13, null, " Aqui va el contenido ") };
+  content = content != null ? content : { component: /* @__PURE__ */ React27.createElement(Box14, null, " Aqui va el contenido ") };
   return /* @__PURE__ */ React27.createElement("div", null, buttonDialog ? /* @__PURE__ */ React27.createElement(React27.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React27.createElement(Tooltip4, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React27.createElement(Button11, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ React27.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ React27.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React27.createElement(IconButton10, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React27.createElement(SvgIcon5, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React27.createElement(Modal2, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React27.createElement(
     Dialog,
     {
@@ -3143,7 +3241,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       }
     },
-    title && /* @__PURE__ */ React27.createElement(DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ React27.createElement(Grid8, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ React27.createElement(Grid8, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ React27.createElement(Box13, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React27.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React27.createElement(SvgIcon5, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ React27.createElement(Grid8, null, /* @__PURE__ */ React27.createElement(Typography14, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ React27.createElement(Typography14, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ React27.createElement(IconButton10, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ React27.createElement(CloseIcon2, { color: "action" })) : "")),
+    title && /* @__PURE__ */ React27.createElement(DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ React27.createElement(Grid8, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ React27.createElement(Grid8, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ React27.createElement(Box14, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React27.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React27.createElement(SvgIcon5, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ React27.createElement(Grid8, null, /* @__PURE__ */ React27.createElement(Typography13, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ React27.createElement(Typography13, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ React27.createElement(IconButton10, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ React27.createElement(CloseIcon2, { color: "action" })) : "")),
     /* @__PURE__ */ React27.createElement(
       DialogContent,
       {
@@ -3193,7 +3291,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         startIcon: dialogActions[0].icon ? /* @__PURE__ */ React27.createElement(SvgIcon5, { fontSize: "small", component: dialogActions[0].icon }) : void 0
       },
       dialogActions[0].text
-    ), /* @__PURE__ */ React27.createElement(Box13, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
+    ), /* @__PURE__ */ React27.createElement(Box14, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
       return /* @__PURE__ */ React27.createElement(
         Button11,
         {
@@ -3269,11 +3367,11 @@ var SCListContent = ({ options }) => {
 
 // src/Components/SCMenu.tsx
 import React29 from "react";
-import { Box as Box15, Typography as Typography16, Paper as Paper2, Divider as Divider5, MenuList as MenuList2, MenuItem as MenuItem5, ListItemIcon as ListItemIcon5, SvgIcon as SvgIcon7 } from "@mui/material";
+import { Box as Box16, Typography as Typography15, Paper as Paper2, Divider as Divider5, MenuList as MenuList2, MenuItem as MenuItem5, ListItemIcon as ListItemIcon5, SvgIcon as SvgIcon7 } from "@mui/material";
 import Grid10 from "@mui/material/Grid";
 
 // src/Components/Hooks/useWindowDimensions.ts
-import { useState as useState15, useEffect as useEffect17 } from "react";
+import { useState as useState16, useEffect as useEffect17 } from "react";
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
   return {
@@ -3282,7 +3380,7 @@ function getWindowDimensions() {
   };
 }
 function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState15(getWindowDimensions());
+  const [windowDimensions, setWindowDimensions] = useState16(getWindowDimensions());
   useEffect17(() => {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
@@ -3345,12 +3443,12 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
       onClick: (event2) => handleClickMenusItem(event2, index)
     },
     option.iconLeft ? /* @__PURE__ */ React29.createElement(ListItemIcon5, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React29.createElement(SvgIcon7, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ React29.createElement(Grid10, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ React29.createElement(Typography16, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ React29.createElement(ListItemIcon5, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React29.createElement(SvgIcon7, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
-  ), option.divider == true ? /* @__PURE__ */ React29.createElement(Divider5, null) : "")))), /* @__PURE__ */ React29.createElement(Grid10, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ React29.createElement(Box15, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ React29.createElement(Typography16, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+    /* @__PURE__ */ React29.createElement(Grid10, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ React29.createElement(Typography15, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ React29.createElement(ListItemIcon5, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React29.createElement(SvgIcon7, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ React29.createElement(Divider5, null) : "")))), /* @__PURE__ */ React29.createElement(Grid10, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ React29.createElement(Box16, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ React29.createElement(Typography15, { color: "error" }, "No se ha configurado el componente a visualizar")))));
 };
 
 // src/Components/Menu/Menu.tsx
-import React30, { useCallback as useCallback4, useState as useState16 } from "react";
+import React30, { useCallback as useCallback4, useState as useState17 } from "react";
 import { Button as Button13, Menu } from "@mui/material";
 var BasicMenu = ({
   open,
@@ -3361,8 +3459,8 @@ var BasicMenu = ({
   options
 }) => {
   var _a, _b, _c, _d;
-  const [internalAnchorEl, setInternalAnchorEl] = useState16(null);
-  const [internalOpen, setInternalOpen] = useState16(open != null ? open : false);
+  const [internalAnchorEl, setInternalAnchorEl] = useState17(null);
+  const [internalOpen, setInternalOpen] = useState17(open != null ? open : false);
   const isControlled = Boolean(onClose);
   const menuOpen = isControlled ? open != null ? open : false : internalOpen;
   const setMenuOpen = isControlled ? () => {
@@ -3419,7 +3517,7 @@ var BasicMenu = ({
 
 // src/Components/SCTabs.tsx
 import React31, { useEffect as useEffect18 } from "react";
-import { Typography as Typography17, Box as Box16, SvgIcon as SvgIcon8, Tab as Tab2, Tabs as Tabs2, Badge } from "@mui/material";
+import { Typography as Typography16, Box as Box17, SvgIcon as SvgIcon8, Tab as Tab2, Tabs as Tabs2, Badge } from "@mui/material";
 import TabPanel from "@mui/lab/TabPanel";
 import TabContext from "@mui/lab/TabContext";
 import * as Muicon8 from "@mui/icons-material";
@@ -3481,7 +3579,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       setValue(newValue);
     }
   };
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ React31.createElement(Box16, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ React31.createElement(TabContext, { value }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ React31.createElement(Box17, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ React31.createElement(TabContext, { value }, /* @__PURE__ */ React31.createElement(
     Tabs2,
     {
       "data-testid": "tab-container",
@@ -3530,18 +3628,18 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       value: String(l = l + 1),
       sx: { padding: "16px" }
     },
-    option.page ? option.page : /* @__PURE__ */ React31.createElement(Typography17, null, "No se ha configurado el componente a visualizar ")
-  )))) : /* @__PURE__ */ React31.createElement(Box16, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React31.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
+    option.page ? option.page : /* @__PURE__ */ React31.createElement(Typography16, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ React31.createElement(Box17, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React31.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
 };
 
 // src/Components/Calendario/Calendar.tsx
-import React39, { useEffect as useEffect19, useState as useState19 } from "react";
-import { Box as Box23, CircularProgress as CircularProgress5 } from "@mui/material";
+import React39, { useEffect as useEffect19, useState as useState20 } from "react";
+import { Box as Box24, CircularProgress as CircularProgress5 } from "@mui/material";
 
 // src/Components/Calendario/CalendarToolbar.tsx
-import React32, { useState as useState17 } from "react";
+import React32, { useState as useState18 } from "react";
 import { ChevronLeft, ChevronRight, KeyboardArrowDown as KeyboardArrowDown2, LightModeOutlined } from "@mui/icons-material";
-import { Box as Box17, Chip as Chip5, IconButton as IconButton12, Menu as Menu2, MenuItem as MenuItem7, Stack as Stack11, Typography as Typography18 } from "@mui/material";
+import { Box as Box18, Chip as Chip5, IconButton as IconButton12, Menu as Menu2, MenuItem as MenuItem7, Stack as Stack11, Typography as Typography17 } from "@mui/material";
 import dayjs2 from "dayjs";
 import updateLocale from "dayjs/plugin/updateLocale";
 import "dayjs/locale/es";
@@ -3558,7 +3656,7 @@ var CalendarToolbar = ({
   onNavigate,
   children
 }) => {
-  const [anchorEl, setAnchorEl] = useState17(null);
+  const [anchorEl, setAnchorEl] = useState18(null);
   const open = Boolean(anchorEl);
   const handleMenuOpen = (event2) => {
     setAnchorEl(event2.currentTarget);
@@ -3581,7 +3679,7 @@ var CalendarToolbar = ({
     }
     return labelDate.format(" DD MMMM YYYY");
   };
-  return /* @__PURE__ */ React32.createElement(Stack11, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ React32.createElement(Box17, null, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React32.createElement(Stack11, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ React32.createElement(Box18, null, /* @__PURE__ */ React32.createElement(
     Chip5,
     {
       label: "Hoy",
@@ -3589,7 +3687,7 @@ var CalendarToolbar = ({
       color: "primary",
       onClick: () => onNavigate("TODAY")
     }
-  )), /* @__PURE__ */ React32.createElement(Stack11, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React32.createElement(IconButton12, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ React32.createElement(ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ React32.createElement(IconButton12, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ React32.createElement(ChevronRight, { fontSize: "small" })), /* @__PURE__ */ React32.createElement(Typography18, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ React32.createElement(IconButton12, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ React32.createElement(KeyboardArrowDown2, { fontSize: "small" })), /* @__PURE__ */ React32.createElement(
+  )), /* @__PURE__ */ React32.createElement(Stack11, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React32.createElement(IconButton12, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ React32.createElement(ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ React32.createElement(IconButton12, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ React32.createElement(ChevronRight, { fontSize: "small" })), /* @__PURE__ */ React32.createElement(Typography17, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ React32.createElement(IconButton12, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ React32.createElement(KeyboardArrowDown2, { fontSize: "small" })), /* @__PURE__ */ React32.createElement(
     Menu2,
     {
       anchorEl,
@@ -3601,12 +3699,12 @@ var CalendarToolbar = ({
     /* @__PURE__ */ React32.createElement(MenuItem7, { onClick: () => handleViewChange("month") }, "Mes"),
     /* @__PURE__ */ React32.createElement(MenuItem7, { onClick: () => handleViewChange("week") }, "Semana"),
     /* @__PURE__ */ React32.createElement(MenuItem7, { onClick: () => handleViewChange("day") }, "D\xEDa")
-  )), children ? /* @__PURE__ */ React32.createElement(Box17, null, children) : /* @__PURE__ */ React32.createElement(Box17, { width: "24px" }), " ");
+  )), children ? /* @__PURE__ */ React32.createElement(Box18, null, children) : /* @__PURE__ */ React32.createElement(Box18, { width: "24px" }), " ");
 };
 
 // src/Components/Calendario/Views/MonthView.tsx
 import React36 from "react";
-import { Box as Box20, Typography as Typography21, IconButton as IconButton13, Paper as Paper3, Tooltip as Tooltip6, Stack as Stack13, CircularProgress as CircularProgress2 } from "@mui/material";
+import { Box as Box21, Typography as Typography20, IconButton as IconButton13, Paper as Paper3, Tooltip as Tooltip6, Stack as Stack13, CircularProgress as CircularProgress2 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import dayjs5 from "dayjs";
 import localeData from "dayjs/plugin/localeData";
@@ -3638,7 +3736,7 @@ var stateColors = {
 
 // src/Components/Calendario/Event.tsx
 import React33 from "react";
-import { Box as Box18, Stack as Stack12, Typography as Typography19, Divider as Divider6, Popover as Popover5 } from "@mui/material";
+import { Box as Box19, Stack as Stack12, Typography as Typography18, Divider as Divider6, Popover as Popover5 } from "@mui/material";
 var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
   const [anchorEl, setAnchorEl] = React33.useState(null);
   const handlePopoverOpen = (event3) => {
@@ -3682,7 +3780,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
       }
     ),
     /* @__PURE__ */ React33.createElement(
-      Box18,
+      Box19,
       {
         px: 1,
         py: 0.5,
@@ -3692,7 +3790,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
         alignItems: "center"
       },
       /* @__PURE__ */ React33.createElement(
-        Typography19,
+        Typography18,
         {
           color: "text.primary",
           variant: "caption",
@@ -3739,7 +3837,7 @@ var LogoCalendario = () => {
 
 // src/Components/Calendario/components/DayEventsList.tsx
 import React35 from "react";
-import { Box as Box19, Typography as Typography20, Divider as Divider7 } from "@mui/material";
+import { Box as Box20, Typography as Typography19, Divider as Divider7 } from "@mui/material";
 var DayEventsList = ({
   events,
   day,
@@ -3747,7 +3845,7 @@ var DayEventsList = ({
   onEventHover
 }) => {
   const [first, ...rest] = events;
-  return /* @__PURE__ */ React35.createElement(Box19, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ React35.createElement(Typography20, { width: "100%", color: "text.secondary" }, "Proximo evento"), first && /* @__PURE__ */ React35.createElement(Box19, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React35.createElement(Box20, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ React35.createElement(Typography19, { width: "100%", color: "text.secondary" }, "Proximo evento"), first && /* @__PURE__ */ React35.createElement(Box20, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ React35.createElement(
     CalendarEventCard,
     {
       event: first,
@@ -3763,8 +3861,8 @@ var DayEventsList = ({
         }
       }
     }
-  )), /* @__PURE__ */ React35.createElement(Divider7, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ React35.createElement(Typography20, { width: "100%", py: 1, color: "text.secondary" }, "Eventos restantes"), /* @__PURE__ */ React35.createElement(
-    Box19,
+  )), /* @__PURE__ */ React35.createElement(Divider7, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ React35.createElement(Typography19, { width: "100%", py: 1, color: "text.secondary" }, "Eventos restantes"), /* @__PURE__ */ React35.createElement(
+    Box20,
     {
       width: "100%",
       height: "100%",
@@ -3863,7 +3961,7 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
   const [openDrawer, setOpenDrawer] = React36.useState(false);
   const [selectedDay, setSelectedDay] = React36.useState(null);
   const [selectedEvents, setSelectedEvents] = React36.useState([]);
-  return /* @__PURE__ */ React36.createElement(Box20, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ React36.createElement(Box20, { minWidth: CALENDAR_CONSTANTS.MIN_WIDTH }, /* @__PURE__ */ React36.createElement(Box20, { display: "grid", gridTemplateColumns: CALENDAR_CONSTANTS.GRID_TEMPLATE, gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ React36.createElement(Box20, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ React36.createElement(Typography21, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), isLoading ? /* @__PURE__ */ React36.createElement(Box20, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: CALENDAR_CONSTANTS.LOADING_CONTAINER_HEIGHT }, /* @__PURE__ */ React36.createElement(CircularProgress2, { sx: { width: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE, height: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React36.createElement(Box21, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ React36.createElement(Box21, { minWidth: CALENDAR_CONSTANTS.MIN_WIDTH }, /* @__PURE__ */ React36.createElement(Box21, { display: "grid", gridTemplateColumns: CALENDAR_CONSTANTS.GRID_TEMPLATE, gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ React36.createElement(Box21, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ React36.createElement(Typography20, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), isLoading ? /* @__PURE__ */ React36.createElement(Box21, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: CALENDAR_CONSTANTS.LOADING_CONTAINER_HEIGHT }, /* @__PURE__ */ React36.createElement(CircularProgress2, { sx: { width: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE, height: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ React36.createElement(
     EmptyState,
     {
       containerHeight: "480px",
@@ -3871,7 +3969,7 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
       icon: /* @__PURE__ */ React36.createElement(LogoCalendario, null)
     }
-  ) : /* @__PURE__ */ React36.createElement(Box20, { display: "grid", gridTemplateColumns: CALENDAR_CONSTANTS.GRID_TEMPLATE, gap: 0.5 }, days.map((day) => {
+  ) : /* @__PURE__ */ React36.createElement(Box21, { display: "grid", gridTemplateColumns: CALENDAR_CONSTANTS.GRID_TEMPLATE, gap: 0.5 }, days.map((day) => {
     const dayEvents = filterEventsForDay(events, day);
     const isCurrentMonth = day.month() === currentDate.month();
     return /* @__PURE__ */ React36.createElement(
@@ -3891,8 +3989,8 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
           overflow: "hidden"
         }
       },
-      /* @__PURE__ */ React36.createElement(Box20, { p: 1, flexShrink: 0 }, /* @__PURE__ */ React36.createElement(Box20, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ React36.createElement(
-        Box20,
+      /* @__PURE__ */ React36.createElement(Box21, { p: 1, flexShrink: 0 }, /* @__PURE__ */ React36.createElement(Box21, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ React36.createElement(
+        Box21,
         {
           sx: {
             width: CALENDAR_CONSTANTS.DAY_CIRCLE_SIZE,
@@ -3905,7 +4003,7 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
           }
         },
         /* @__PURE__ */ React36.createElement(
-          Typography21,
+          Typography20,
           {
             variant: "body2",
             sx: { color: isToday(day) ? "white" : "text.secondary" }
@@ -3926,7 +4024,7 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
         },
         /* @__PURE__ */ React36.createElement(AddIcon, { fontSize: "small" })
       )))),
-      /* @__PURE__ */ React36.createElement(Box20, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, CALENDAR_CONSTANTS.MAX_VISIBLE_EVENTS).map((event2) => /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React36.createElement(Box21, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, CALENDAR_CONSTANTS.MAX_VISIBLE_EVENTS).map((event2) => /* @__PURE__ */ React36.createElement(
         CalendarEventCard,
         {
           key: `${event2.id}-${day.toString()}`,
@@ -3974,7 +4072,7 @@ var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEv
 
 // src/Components/Calendario/Views/WeekView.tsx
 import React37 from "react";
-import { Box as Box21, CircularProgress as CircularProgress3, Typography as Typography22 } from "@mui/material";
+import { Box as Box22, CircularProgress as CircularProgress3, Typography as Typography21 } from "@mui/material";
 import dayjs6 from "dayjs";
 import localeData2 from "dayjs/plugin/localeData";
 dayjs6.extend(localeData2);
@@ -4008,10 +4106,10 @@ var WeekView = ({
     }
     return "none";
   };
-  return /* @__PURE__ */ React37.createElement(Box21, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React37.createElement(Box21, { display: "flex", bgcolor: "transparent" }, /* @__PURE__ */ React37.createElement(Box21, { width: 45, bgcolor: "transparent" }), days.map((day) => {
+  return /* @__PURE__ */ React37.createElement(Box22, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React37.createElement(Box22, { display: "flex", bgcolor: "transparent" }, /* @__PURE__ */ React37.createElement(Box22, { width: 45, bgcolor: "transparent" }), days.map((day) => {
     const isToday2 = day.format("YYYY-MM-DD") === todayString;
     return /* @__PURE__ */ React37.createElement(
-      Box21,
+      Box22,
       {
         key: day.toString(),
         height: 40,
@@ -4027,10 +4125,10 @@ var WeekView = ({
         borderBottom: isToday2 ? 2 : 0,
         borderColor: isToday2 ? "primary.main" : "transparent"
       },
-      /* @__PURE__ */ React37.createElement(Typography22, { variant: "h6", color: "text.primary" }, day.format("D")),
-      /* @__PURE__ */ React37.createElement(Typography22, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
+      /* @__PURE__ */ React37.createElement(Typography21, { variant: "h6", color: "text.primary" }, day.format("D")),
+      /* @__PURE__ */ React37.createElement(Typography21, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
     );
-  })), isLoading ? /* @__PURE__ */ React37.createElement(Box21, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ React37.createElement(CircularProgress3, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ React37.createElement(
+  })), isLoading ? /* @__PURE__ */ React37.createElement(Box22, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ React37.createElement(CircularProgress3, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ React37.createElement(
     EmptyState,
     {
       containerHeight: "480px",
@@ -4040,8 +4138,8 @@ var WeekView = ({
     }
   ) : (
     // Grid de horas y eventos
-    /* @__PURE__ */ React37.createElement(Box21, { display: "flex", flex: 1 }, /* @__PURE__ */ React37.createElement(Box21, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ React37.createElement(
-      Box21,
+    /* @__PURE__ */ React37.createElement(Box22, { display: "flex", flex: 1 }, /* @__PURE__ */ React37.createElement(Box22, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ React37.createElement(
+      Box22,
       {
         key: h,
         height: 60,
@@ -4049,7 +4147,7 @@ var WeekView = ({
         pr: 1,
         borderColor: "divider"
       },
-      /* @__PURE__ */ React37.createElement(Typography22, { variant: "caption", color: "text.secondary" }, dayjs6().hour(h).format("h A"))
+      /* @__PURE__ */ React37.createElement(Typography21, { variant: "caption", color: "text.secondary" }, dayjs6().hour(h).format("h A"))
     ))), days.map((day) => {
       const dayEvents = events.filter(
         (event2) => day.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
@@ -4059,7 +4157,7 @@ var WeekView = ({
         return startsInRange || endsInRange;
       }).sort((a, b) => a.start.valueOf() - b.start.valueOf());
       return /* @__PURE__ */ React37.createElement(
-        Box21,
+        Box22,
         {
           key: day.toString(),
           flex: 1,
@@ -4072,7 +4170,7 @@ var WeekView = ({
         hours.map((hourIdx) => {
           const borderType = getCellBorderType2(hourIdx, dayEvents);
           return /* @__PURE__ */ React37.createElement(
-            Box21,
+            Box22,
             {
               key: hourIdx,
               height: 60,
@@ -4113,7 +4211,7 @@ var WeekView = ({
 
 // src/Components/Calendario/Views/DayView.tsx
 import React38 from "react";
-import { Box as Box22, CircularProgress as CircularProgress4, Typography as Typography23 } from "@mui/material";
+import { Box as Box23, CircularProgress as CircularProgress4, Typography as Typography22 } from "@mui/material";
 import dayjs7 from "dayjs";
 var DayView = ({
   events,
@@ -4127,7 +4225,7 @@ var DayView = ({
   const hours = Array.from({ length: endHour - startHour + 1 }, (_, i) => startHour + i);
   const dayEvents = filterEventsForDay(events, currentDate);
   const noEvents = events.length === 0;
-  return /* @__PURE__ */ React38.createElement(Box22, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React38.createElement(Box22, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ React38.createElement(Box22, { width: CALENDAR_CONSTANTS.SIDEBAR_WIDTH, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ React38.createElement(Box22, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ React38.createElement(Typography23, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ React38.createElement(Typography23, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ React38.createElement(Box22, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: CALENDAR_CONSTANTS.LOADING_CONTAINER_HEIGHT }, /* @__PURE__ */ React38.createElement(CircularProgress4, { sx: { width: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE, height: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React38.createElement(Box23, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React38.createElement(Box23, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ React38.createElement(Box23, { width: CALENDAR_CONSTANTS.SIDEBAR_WIDTH, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ React38.createElement(Box23, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ React38.createElement(Typography22, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ React38.createElement(Typography22, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ React38.createElement(Box23, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: CALENDAR_CONSTANTS.LOADING_CONTAINER_HEIGHT }, /* @__PURE__ */ React38.createElement(CircularProgress4, { sx: { width: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE, height: CALENDAR_CONSTANTS.LOADING_SPINNER_SIZE }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ React38.createElement(
     EmptyState,
     {
       containerHeight: "480px",
@@ -4135,8 +4233,8 @@ var DayView = ({
       subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
       icon: /* @__PURE__ */ React38.createElement(LogoCalendario, null)
     }
-  ) : /* @__PURE__ */ React38.createElement(Box22, { display: "flex", flex: 1 }, /* @__PURE__ */ React38.createElement(Box22, { width: CALENDAR_CONSTANTS.SIDEBAR_WIDTH, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ React38.createElement(
-    Box22,
+  ) : /* @__PURE__ */ React38.createElement(Box23, { display: "flex", flex: 1 }, /* @__PURE__ */ React38.createElement(Box23, { width: CALENDAR_CONSTANTS.SIDEBAR_WIDTH, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ React38.createElement(
+    Box23,
     {
       key: h,
       height: CALENDAR_CONSTANTS.DAY_HEIGHT,
@@ -4146,11 +4244,11 @@ var DayView = ({
       borderRight: "1px solid",
       borderColor: "divider"
     },
-    /* @__PURE__ */ React38.createElement(Typography23, { variant: "caption", color: "text.secondary" }, dayjs7().hour(h).format("h A"))
-  ))), /* @__PURE__ */ React38.createElement(Box22, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
+    /* @__PURE__ */ React38.createElement(Typography22, { variant: "caption", color: "text.secondary" }, dayjs7().hour(h).format("h A"))
+  ))), /* @__PURE__ */ React38.createElement(Box23, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
     const borderType = getCellBorderType(hourIdx, dayEvents);
     return /* @__PURE__ */ React38.createElement(
-      Box22,
+      Box23,
       {
         key: hourIdx,
         height: CALENDAR_CONSTANTS.DAY_HEIGHT,
@@ -4187,10 +4285,10 @@ var DayView = ({
 };
 
 // src/Components/Calendario/hooks/useCalendarNavigation.ts
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import dayjs8 from "dayjs";
 var useCalendarNavigation = (initialDate, onDateChange) => {
-  const [currentDate, setCurrentDate] = useState18(initialDate || dayjs8());
+  const [currentDate, setCurrentDate] = useState19(initialDate || dayjs8());
   const getNavigationUnit = (view) => {
     switch (view) {
       case "day":
@@ -4243,7 +4341,7 @@ var Calendar = ({
   startHour = CALENDAR_CONSTANTS.DEFAULT_START_HOUR,
   endHour = CALENDAR_CONSTANTS.DEFAULT_END_HOUR
 }) => {
-  const [view, setView] = useState19(initialView);
+  const [view, setView] = useState20(initialView);
   const { currentDate, navigateDate } = useCalendarNavigation(dayjs9(), onDateChange);
   useEffect19(() => {
     onDateChange == null ? void 0 : onDateChange(currentDate);
@@ -4255,7 +4353,7 @@ var Calendar = ({
   const handleNavigate = (action) => {
     navigateDate(action, view);
   };
-  return /* @__PURE__ */ React39.createElement(Box23, null, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React39.createElement(Box24, null, /* @__PURE__ */ React39.createElement(
     CalendarToolbar,
     {
       labelDate: currentDate,
@@ -4265,7 +4363,7 @@ var Calendar = ({
     },
     toolbar
   ), isLoading ? /* @__PURE__ */ React39.createElement(
-    Box23,
+    Box24,
     {
       display: "flex",
       justifyContent: "center",
@@ -4318,8 +4416,8 @@ var Calendar = ({
 };
 
 // src/Components/SCTime.tsx
-import React40, { useState as useState20 } from "react";
-import { Box as Box24, InputAdornment as InputAdornment6, Popover as Popover6, ClickAwayListener as ClickAwayListener2 } from "@mui/material";
+import React40, { useState as useState21 } from "react";
+import { Box as Box25, InputAdornment as InputAdornment6, Popover as Popover6, ClickAwayListener as ClickAwayListener2 } from "@mui/material";
 import { LocalizationProvider as LocalizationProvider3 } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs as AdapterDayjs2 } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs10 from "dayjs";
@@ -4335,16 +4433,17 @@ var SCTime = ({
   background = "transparent",
   timeStep = 5,
   state,
-  setState
+  setState,
+  error
 }) => {
   LicenseInfo3.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
   const isTimeEmpty = required && !state;
-  const hasError = isTimeEmpty;
-  const [anchorEl, setAnchorEl] = useState20(null);
-  const [isOpenPopover, setIsOpenPopover] = useState20(false);
-  const [popoverPlacement, setPopoverPlacement] = useState20("bottom");
+  const hasError = isTimeEmpty || error;
+  const [anchorEl, setAnchorEl] = useState21(null);
+  const [isOpenPopover, setIsOpenPopover] = useState21(false);
+  const [popoverPlacement, setPopoverPlacement] = useState21("bottom");
   const detectPlacement = (element) => {
     const rect = element.getBoundingClientRect();
     const windowHeight = window.innerHeight;
@@ -4375,7 +4474,7 @@ var SCTime = ({
     setIsOpenPopover(false);
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ React40.createElement(LocalizationProvider3, { dateAdapter: AdapterDayjs2 }, /* @__PURE__ */ React40.createElement(Box24, { sx: { position: "relative", width: "120px" } }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React40.createElement(LocalizationProvider3, { dateAdapter: AdapterDayjs2 }, /* @__PURE__ */ React40.createElement(Box25, { sx: { position: "relative", width: "120px" } }, /* @__PURE__ */ React40.createElement(
     TimeField,
     {
       label,
@@ -4444,7 +4543,7 @@ var SCTime = ({
         }
       }
     },
-    /* @__PURE__ */ React40.createElement(ClickAwayListener2, { onClickAway: handleClose }, /* @__PURE__ */ React40.createElement(Box24, { sx: { p: 0 } }, /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React40.createElement(ClickAwayListener2, { onClickAway: handleClose }, /* @__PURE__ */ React40.createElement(Box25, { sx: { p: 0 } }, /* @__PURE__ */ React40.createElement(
       DigitalClock,
       {
         value: state,
@@ -4467,7 +4566,7 @@ var SCTime = ({
 
 // src/Components/SCCard.tsx
 import React41 from "react";
-import { Button as Button15, Box as Box25, SvgIcon as SvgIcon9 } from "@mui/material";
+import { Button as Button15, Box as Box26, SvgIcon as SvgIcon9 } from "@mui/material";
 import IconButton14 from "@mui/material/IconButton";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
@@ -4501,7 +4600,7 @@ var SCCard = ({ title, image, iconTitle, actionsTitle, subtitle, content, action
   return /* @__PURE__ */ React41.createElement(Card, { sx: { maxWidth: 345 } }, title && /* @__PURE__ */ React41.createElement(
     CardHeader,
     {
-      avatar: iconTitle ? iconTitleValidation === "image" ? /* @__PURE__ */ React41.createElement(Box25, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React41.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React41.createElement(SvgIcon9, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : void 0,
+      avatar: iconTitle ? iconTitleValidation === "image" ? /* @__PURE__ */ React41.createElement(Box26, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React41.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React41.createElement(SvgIcon9, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : void 0,
       action: (expand == null ? void 0 : expand.position) == "top" ? (expand == null ? void 0 : expand.type) === "text" ? /* @__PURE__ */ React41.createElement(Button15, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, "Expandir") : (expand == null ? void 0 : expand.type) === "icon" && /* @__PURE__ */ React41.createElement(IconButton14, { onClick: handleExpandClick, sx: { marginRight: "auto" }, size: "small" }, /* @__PURE__ */ React41.createElement(ExpandMoreIcon, { fontSize: "small" })) : actionsTitle,
       title,
       subheader: subtitle,
@@ -4543,8 +4642,8 @@ var SCCard = ({ title, image, iconTitle, actionsTitle, subtitle, content, action
 };
 
 // src/Components/SCActivityCalendar.tsx
-import React42, { useState as useState22 } from "react";
-import { Typography as Typography26, IconButton as IconButton15, Box as Box26, Badge as Badge2 } from "@mui/material";
+import React42, { useState as useState23 } from "react";
+import { Typography as Typography25, IconButton as IconButton15, Box as Box27, Badge as Badge2 } from "@mui/material";
 import Grid11 from "@mui/material/Grid";
 import { AdapterDateFns as AdapterDateFns2 } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as LocalizationProvider4 } from "@mui/x-date-pickers/LocalizationProvider";
@@ -4567,8 +4666,8 @@ var SCActivityCalendar = ({
   configRangeHour
 }) => {
   let convertFecha;
-  const [fecha, setFecha] = useState22(/* @__PURE__ */ new Date());
-  const [fechaSeleccionada, setFechaSeleccionada] = useState22();
+  const [fecha, setFecha] = useState23(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = useState23();
   const [stateVal, setstateVal] = React42.useState(/* @__PURE__ */ new Date());
   const [openCalendar, setOpenCalendar] = React42.useState(false);
   const hoy = /* @__PURE__ */ new Date();
@@ -4598,8 +4697,8 @@ var SCActivityCalendar = ({
       // 0 para domingo, 1 para lunes, etc.
     }
   });
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(LocalizationProvider4, { dateAdapter: AdapterDateFns2, adapterLocale: es2 }, openCalendar == false ? /* @__PURE__ */ React42.createElement(Box26, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React42.createElement(Box26, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React42.createElement(Grid11, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ React42.createElement(Grid11, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React42.createElement(Box26, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React42.createElement(Typography26, { sx: { fontSize: "12px !important", color: "#10184099" } }, format2(dia, "EEEE", { locale: es2 }).charAt(0).toUpperCase())), /* @__PURE__ */ React42.createElement(
-    Box26,
+  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(LocalizationProvider4, { dateAdapter: AdapterDateFns2, adapterLocale: es2 }, openCalendar == false ? /* @__PURE__ */ React42.createElement(Box27, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React42.createElement(Box27, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React42.createElement(Grid11, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ React42.createElement(Grid11, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React42.createElement(Box27, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React42.createElement(Typography25, { sx: { fontSize: "12px !important", color: "#10184099" } }, format2(dia, "EEEE", { locale: es2 }).charAt(0).toUpperCase())), /* @__PURE__ */ React42.createElement(
+    Box27,
     {
       onClick: () => setFecha(dia),
       sx: {
@@ -4614,8 +4713,8 @@ var SCActivityCalendar = ({
         //height: '36px',
       }
     },
-    /* @__PURE__ */ React42.createElement(Typography26, { sx: { fontSize: "12px !important", color: isSameDay2(dia, fecha) ? "white" : "#101840DE" } }, format2(dia, "d"))
-  )))), /* @__PURE__ */ React42.createElement(Grid11, { container: true, justifyContent: "center" }, /* @__PURE__ */ React42.createElement(IconButton15, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React42.createElement(KeyboardDoubleArrowDownIcon2, { color: "action" }))))) : /* @__PURE__ */ React42.createElement(Box26, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React42.createElement(Typography25, { sx: { fontSize: "12px !important", color: isSameDay2(dia, fecha) ? "white" : "#101840DE" } }, format2(dia, "d"))
+  )))), /* @__PURE__ */ React42.createElement(Grid11, { container: true, justifyContent: "center" }, /* @__PURE__ */ React42.createElement(IconButton15, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React42.createElement(KeyboardDoubleArrowDownIcon2, { color: "action" }))))) : /* @__PURE__ */ React42.createElement(Box27, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React42.createElement(
     StaticDatePicker2,
     {
       orientation: "landscape",
@@ -4625,19 +4724,19 @@ 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__ */ React42.createElement(Grid11, { container: true, justifyContent: "center" }, /* @__PURE__ */ React42.createElement(IconButton15, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React42.createElement(KeyboardDoubleArrowUpIcon2, { color: "action" }))))), /* @__PURE__ */ React42.createElement(Box26, { 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__ */ React42.createElement(
-    Box26,
+  ), /* @__PURE__ */ React42.createElement(Grid11, { container: true, justifyContent: "center" }, /* @__PURE__ */ React42.createElement(IconButton15, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React42.createElement(KeyboardDoubleArrowUpIcon2, { color: "action" }))))), /* @__PURE__ */ React42.createElement(Box27, { 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__ */ React42.createElement(
+    Box27,
     {
       key: dayIndex
     },
-    /* @__PURE__ */ React42.createElement(Grid11, { container: true }, /* @__PURE__ */ React42.createElement(Typography26, { variant: "subtitle1", sx: { color: isSameDay2(day, fecha) ? "info.dark" : "text.secondary" } }, day.toLocaleDateString("es-ES", {
+    /* @__PURE__ */ React42.createElement(Grid11, { container: true }, /* @__PURE__ */ React42.createElement(Typography25, { variant: "subtitle1", sx: { color: isSameDay2(day, fecha) ? "info.dark" : "text.secondary" } }, day.toLocaleDateString("es-ES", {
       day: "numeric"
     }), " de ", day.toLocaleDateString("es-ES", {
       month: "short"
     }), ", ", day.toLocaleDateString("es-ES", {
       weekday: "long"
     }))),
-    /* @__PURE__ */ React42.createElement(Box26, { sx: {
+    /* @__PURE__ */ React42.createElement(Box27, { sx: {
       display: "flex",
       flexDirection: "column"
     } }, (() => {
@@ -4652,10 +4751,10 @@ var SCActivityCalendar = ({
             key: idx,
             options: [{
               title: event2.description,
-              subtitle: /* @__PURE__ */ React42.createElement(React42.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__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography26, null, "Todo el dia"), /* @__PURE__ */ React42.createElement(LightModeOutlinedIcon, { fontSize: "small" })) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography26, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ React42.createElement(ArrowForwardIcon, { fontSize: "small" }), /* @__PURE__ */ React42.createElement(Typography26, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
+              subtitle: /* @__PURE__ */ React42.createElement(React42.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__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography25, null, "Todo el dia"), /* @__PURE__ */ React42.createElement(LightModeOutlinedIcon, { fontSize: "small" })) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Typography25, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ React42.createElement(ArrowForwardIcon, { fontSize: "small" }), /* @__PURE__ */ React42.createElement(Typography25, 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",
-              description: /* @__PURE__ */ React42.createElement(React42.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Badge2, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ React42.createElement(Typography26, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null),
+              description: /* @__PURE__ */ React42.createElement(React42.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Badge2, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ React42.createElement(Typography25, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null),
               divider: eventosDelDia.length === idx + 1 ? false : true,
               disable: event2.state === "Finalizada" || event2.state === "Aplazada" || event2.state === "En progreso" ? true : false,
               fn: fn ? () => fn(event2) : void 0