componentes-sinco 1.0.26 → 1.0.27

package/dist/index.cjs

@@ -55,37 +55,62 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
   ADCSincoTheme: () => ADCSincoTheme,
   AdproSincoTheme: () => AdproSincoTheme,
+  Attachment: () => Attachment,
   Calendar: () => Calendar,
   EmptyState: () => EmptyState,
   FooterAction: () => FooterAction,
   MultiSelect: () => MultiSelect,
   PageHeader: () => PageHeader,
+  SCActivityCalendar: () => SCActivityCalendar,
   SCAutocomplete: () => SCAutocomplete,
   SCCalendarSwipeable: () => SCCalendarSwipeable,
+  SCCard: () => SCCard,
   SCDataGrid: () => SCDataGrid,
   SCDataGridInitial: () => SCDataGridInitial,
   SCDateRange: () => SCDateRange,
   SCDialog: () => SCDialog,
   SCDrawer: () => SCDrawer,
+  SCListContent: () => SCListContent,
   SCMenu: () => SCMenu,
   SCModal: () => SCModal,
   SCSelect: () => SCSelect,
   SCTabs: () => SCTabs,
   SCTextArea: () => SCTextArea,
   SCTextField: () => SCTextField,
+  SCTime: () => SCTime,
   SCToastNotification: () => SCToastNotification,
   SincoTheme: () => SincoTheme,
   ToastProgress: () => ToastProgress,
   capitalize: () => capitalize,
   getButtonColor: () => getButtonColor,
   getIcon: () => getIcon,
-  getIconComponent: () => getIconComponent2,
+  getIconComponent: () => getIconComponent,
   getIconMultiSelect: () => getIconMultiSelect,
   getModalColor: () => getModalColor,
   modalStateConfig: () => modalStateConfig,
@@ -95,21 +120,710 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/Components/Drawer/SCDrawer.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_material7 = require("@mui/material");
+// src/Components/Adjuntar/Adjuntar.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_material3 = require("@mui/material");
+var import_icons_material5 = require("@mui/icons-material");
+
+// src/Components/ToastNotification/SCToastNotification.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_material = require("@mui/material");
+var import_icons_material = require("@mui/icons-material");
+
+// src/Components/ToastNotification/useProgress.ts
+var import_react = require("react");
+var useProgress = (timeProgress, lote) => {
+  const [progress, setProgress] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+        }
+        if (lote) {
+          const nextProgress = prev + lote;
+          return nextProgress <= 100 ? nextProgress : 100;
+        } else {
+          return prev + 1;
+        }
+      });
+    }, timeProgress * 10);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeProgress, lote]);
+  return {
+    progress
+  };
+};
+var ToastProgress = (timeProgress) => {
+  const [progress, setProgress] = (0, import_react.useState)(100);
+  (0, import_react.useEffect)(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev <= 0) {
+          clearInterval(interval);
+        }
+        return prev - 1;
+      });
+    }, timeProgress * 10);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeProgress]);
+  return {
+    progressToast: progress
+  };
+};
+
+// src/Components/ToastNotification/SCToastNotification.tsx
+var SCToastNotification = (toast) => {
+  var _a;
+  const [stateOptions, setStateOptions] = (0, import_react2.useState)(true);
+  const [stateToast, setStateToast] = (0, import_react2.useState)(true);
+  const timeProgress = toast.time || 10;
+  const { progress } = useProgress(timeProgress);
+  const toastColorConfig = toast.type || "info";
+  const toastIconOption = {
+    success: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.CheckCircleRounded, { color: "success" }),
+    error: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.ErrorRounded, { color: "error" }),
+    warning: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.WarningRounded, { color: "warning" }),
+    info: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.InfoRounded, { color: "info" })
+  };
+  const acciones = [...toast.actions || [{ text: "Action", fn: () => {
+    alert("");
+  } }, { text: "Consultar", fn: () => {
+  } }]];
+  const ToastIconConfig = toastIconOption[toast.type];
+  const closeToast = () => {
+    setStateToast(false);
+  };
+  const toggleToastOptions = () => {
+    setStateOptions((prevShowOptions) => !prevShowOptions);
+  };
+  (0, import_react2.useEffect)(() => {
+    progress >= 100 && setStateToast(false);
+  }, [progress]);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, stateToast && /* @__PURE__ */ import_react2.default.createElement(
+    import_material.Stack,
+    {
+      position: "fixed",
+      zIndex: 1400,
+      right: 16,
+      top: 16,
+      width: 370,
+      sx: {
+        boxShadow: (theme) => theme.shadows[8]
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement(
+      import_material.Box,
+      {
+        padding: 1.5,
+        gap: 1.5,
+        display: "flex",
+        alignItems: "center",
+        sx: {
+          backgroundColor: {
+            success: "success.50",
+            error: "error.50",
+            warning: "warning.50",
+            info: "info.50"
+          }[toastColorConfig]
+        }
+      },
+      /* @__PURE__ */ import_react2.default.createElement(
+        import_material.Stack,
+        {
+          p: 1,
+          gap: 1,
+          borderRadius: 50,
+          bgcolor: {
+            success: "success.100",
+            error: "error.100",
+            warning: "warning.100",
+            info: "info.100"
+          }[(_a = toast.type) != null ? _a : "info"]
+        },
+        /* @__PURE__ */ import_react2.default.createElement(import_material.Stack, null, ToastIconConfig)
+      ),
+      /* @__PURE__ */ import_react2.default.createElement(import_material.Divider, { orientation: "vertical", flexItem: true }),
+      /* @__PURE__ */ import_react2.default.createElement(import_material.Stack, { width: 285 }, /* @__PURE__ */ import_react2.default.createElement(
+        import_material.Stack,
+        {
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center"
+        },
+        /* @__PURE__ */ import_react2.default.createElement(import_material.Typography, { variant: "subtitle2", color: "text.primary" }, toast.title),
+        /* @__PURE__ */ import_react2.default.createElement(
+          import_material.IconButton,
+          {
+            size: "small",
+            "data-testid": "close-icon",
+            onClick: closeToast
+          },
+          /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Close, { fontSize: "small" })
+        )
+      ), /* @__PURE__ */ import_react2.default.createElement(import_material.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react2.default.createElement(import_material.Typography, { color: "text.primary", variant: "body2" }, toast.subtitle), !stateOptions && toast.listITems && toast.listITems.length > 0 && /* @__PURE__ */ import_react2.default.createElement(import_material.Stack, null, toast.listITems.map((element, i) => /* @__PURE__ */ import_react2.default.createElement(import_material.Typography, { variant: "caption", key: i }, "\u2022 ", element)))), /* @__PURE__ */ import_react2.default.createElement(import_material.Stack, { justifyContent: "flex-end", flexDirection: "row", gap: 0.5 }, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ import_react2.default.createElement(import_material.Stack, { flexDirection: "row", gap: 0.5 }, toast.actions.map((button, index) => /* @__PURE__ */ import_react2.default.createElement(
+        import_material.Button,
+        {
+          key: index,
+          color: toast.type === "info" ? "info" : toast.type === "success" ? "success" : toast.type === "error" ? "error" : "warning",
+          variant: "text",
+          onClick: button.fn,
+          disabled: button.disabled || false,
+          size: "small"
+        },
+        button.text.charAt(0).toUpperCase() + button.text.slice(1).toLowerCase()
+      ))), toast.seeMore && /* @__PURE__ */ import_react2.default.createElement(
+        import_material.Button,
+        {
+          onClick: toggleToastOptions,
+          size: "small",
+          variant: "text",
+          color: toastColorConfig
+        },
+        stateOptions ? "Ver m\xE1s" : "Ver menos",
+        stateOptions ? /* @__PURE__ */ import_react2.default.createElement(import_icons_material.KeyboardArrowDown, null) : /* @__PURE__ */ import_react2.default.createElement(import_icons_material.KeyboardArrowUp, null)
+      )))
+    ),
+    /* @__PURE__ */ import_react2.default.createElement(
+      import_material.LinearProgress,
+      {
+        sx: {
+          ".MuiLinearProgress-bar": {
+            transition: "0.1s linear !important",
+            transform: "scaleX(-1)"
+          }
+        },
+        color: toastColorConfig,
+        variant: "determinate",
+        value: 100 - progress
+      }
+    )
+  ));
+};
+
+// src/Components/Modal/Helpers/Data.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_icons_material2 = require("@mui/icons-material");
+var modalStateConfig = {
+  info: {
+    color: "info",
+    defaultDescription: "Se [sincronizar\xE1n] los datos trabajados en modo offline y se [subir\xE1n] a los servidores.",
+    icon: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Info, { color: "info", fontSize: "medium" })
+  },
+  delete: {
+    color: "delete",
+    defaultDescription: "[Elemento espec\xEDfico] [dejar\xE1 de existir en todos los lugares donde est\xE9 en uso]. Esta acci\xF3n es irreversible.",
+    icon: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Info, { color: "error", fontSize: "medium" })
+  },
+  warning: {
+    color: "warning",
+    defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
+    icon: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Warning, { color: "warning", fontSize: "medium" })
+  }
+};
+
+// src/Components/Modal/Helpers/Utils.tsx
+var MuiIcons = __toESM(require("@mui/icons-material"), 1);
+var import_icons_material3 = require("@mui/icons-material");
+var getIconComponent = (iconName) => {
+  return iconName && MuiIcons[iconName] ? MuiIcons[iconName] : import_icons_material3.FilterListOutlined;
+};
+var getModalColor = (state) => {
+  var _a;
+  const colors = {
+    info: "info.100",
+    delete: "error.100",
+    warning: "warning.100"
+  };
+  return (_a = colors[state]) != null ? _a : "warning.100";
+};
+var getButtonColor = (state) => {
+  var _a;
+  const colorMap = {
+    info: "info",
+    delete: "error",
+    warning: "warning"
+  };
+  return (_a = colorMap[state]) != null ? _a : "info";
+};
+
+// src/Components/Modal/SCModal.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_material2 = require("@mui/material");
+var import_icons_material4 = require("@mui/icons-material");
+
+// src/generales/capitalize.tsx
+function capitalize(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+// src/Components/Modal/SCModal.tsx
+var SCModal = ({
+  buttonModal,
+  state = "info",
+  open,
+  setOpen,
+  title,
+  description,
+  action
+}) => {
+  var _a, _b, _c, _d, _e;
+  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(open != null ? open : false);
+  const isControlled = Boolean(setOpen);
+  const modalOpen = isControlled ? open != null ? open : false : internalOpen;
+  const setModalOpen = isControlled ? setOpen : setInternalOpen;
+  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,
+    {
+      "data-testid": "test-buttonModal",
+      color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
+      onClick: handleToggle,
+      variant: (_b = buttonModal == null ? void 0 : buttonModal.variant) != null ? _b : "text",
+      size: (_c = buttonModal == null ? void 0 : buttonModal.size) != null ? _c : "small",
+      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ import_react4.default.createElement(Icon, null),
+      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ import_react4.default.createElement(Icon, null)
+    },
+    capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
+  ), /* @__PURE__ */ import_react4.default.createElement(import_material2.Modal, { open: modalOpen, onClose: handleClose, sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react4.default.createElement(
+    import_material2.Box,
+    {
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: 400,
+        bgcolor: "background.paper",
+        borderRadius: 1,
+        boxShadow: 24
+      }
+    },
+    /* @__PURE__ */ import_react4.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_material2.Stack, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ import_react4.default.createElement(
+      import_material2.Box,
+      {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "50%",
+        height: 36,
+        width: 36,
+        bgcolor: getModalColor(state)
+      },
+      icon
+    ), /* @__PURE__ */ import_react4.default.createElement(import_material2.Typography, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ import_react4.default.createElement(import_material2.IconButton, { onClick: handleClose, "data-testid": "test-buttonClose" }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material4.Close, { color: "action" }))),
+    /* @__PURE__ */ import_react4.default.createElement(import_material2.Stack, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ import_react4.default.createElement(import_material2.Typography, { variant: "body1" }, description || defaultDescription)),
+    action && /* @__PURE__ */ import_react4.default.createElement(
+      import_material2.Stack,
+      {
+        id: "Action",
+        direction: "row",
+        gap: 1,
+        p: 1,
+        justifyContent: "end",
+        bgcolor: "grey.50",
+        sx: { borderRadius: 1 }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        import_material2.Button,
+        {
+          color: "inherit",
+          variant: "text",
+          onClick: handleClose,
+          size: "small"
+        },
+        capitalize("cancelar")
+      ),
+      /* @__PURE__ */ import_react4.default.createElement(
+        import_material2.Button,
+        {
+          "data-testid": "test-aceptar",
+          color: getButtonColor(state),
+          variant: "contained",
+          onClick: (_e = action[0]) == null ? void 0 : _e.fn,
+          disabled: false,
+          size: "small"
+        },
+        capitalize(action[0].text)
+      )
+    )
+  )));
+};
+
+// src/Components/Adjuntar/Adjuntar.tsx
+var Attachment = ({
+  sx,
+  compact,
+  error,
+  maxSize = 400,
+  fileAccepted = "",
+  onLoading,
+  onChange,
+  downloadAction,
+  deleteAction,
+  initialFiles = []
+}) => {
+  const [files, setFiles] = (0, import_react5.useState)([]);
+  const [fileToDelete, setFileToDelete] = (0, import_react5.useState)(null);
+  const [toast, setToast] = (0, import_react5.useState)(null);
+  const [openModal, setOpenModal] = (0, import_react5.useState)(false);
+  const [isDragFile, setIsDragFile] = (0, import_react5.useState)(false);
+  const inputRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (initialFiles && initialFiles.length > 0) {
+      setFiles(initialFiles);
+    }
+  }, []);
+  const handleDrop = (event2) => {
+    event2.preventDefault();
+    setIsDragFile(false);
+    const filesDropped = event2.dataTransfer.files;
+    if (filesDropped && filesDropped.length > 0) {
+      const fakeEvent = {
+        target: { files: filesDropped }
+      };
+      handleUpload(fakeEvent);
+    }
+  };
+  const handleDragOver = (event2) => {
+    event2.preventDefault();
+    setIsDragFile(true);
+  };
+  const handleDragLeave = (event2) => {
+    event2.preventDefault();
+    setIsDragFile(false);
+  };
+  const handleUpload = (event2) => {
+    const newFiles = event2.target.files;
+    if (!newFiles) return;
+    const nuevosArchivos = [];
+    const archivosValidos = [];
+    Array.from(newFiles).forEach((file) => {
+      const isDuplicatedFile = files.findIndex(
+        (e) => e.name === file.name && e.size === file.size
+      );
+      const sizeMB = file.size / (1024 * 1024);
+      if (isDuplicatedFile !== -1) {
+        setToast({
+          type: "error",
+          title: "Archivo duplicado",
+          listITems: ["No se permiten archivos duplicados."],
+          seeMore: true,
+          time: 10
+        });
+        return;
+      }
+      if (sizeMB > maxSize) {
+        nuevosArchivos.push({
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          progress: 0,
+          uploadError: true
+        });
+        setToast({
+          type: "error",
+          title: "Carga fallida",
+          seeMore: true,
+          listITems: [`El archivo supera el l\xEDmite de ${maxSize}MB.`],
+          time: 10
+        });
+        return;
+      }
+      if (fileAccepted && !file.name.match(
+        new RegExp(
+          `(${fileAccepted.replace(/\./g, "\\.").replace(/,/g, "|")})$`,
+          "i"
+        )
+      )) {
+        setToast({
+          type: "error",
+          title: "Tipo de archivo no permitido",
+          listITems: [`El archivo ${file.name} no es un tipo permitido.`],
+          seeMore: true,
+          time: 10
+        });
+        return;
+      }
+      nuevosArchivos.push({
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        progress: 0,
+        uploadError: false
+      });
+      archivosValidos.push(file);
+    });
+    if (nuevosArchivos.length > 0) {
+      setFiles((prev) => {
+        const actualizados = [...prev, ...nuevosArchivos];
+        onChange == null ? void 0 : onChange([
+          ...archivosValidos,
+          ...prev.map((f) => new File([], f.name, { type: f.type }))
+        ]);
+        return actualizados;
+      });
+    }
+    event2.target.value = "";
+  };
+  const deleteFiles = (nameFile) => {
+    setFiles((prev) => {
+      const filtered = prev.filter((e) => e.name !== nameFile);
+      onChange == null ? void 0 : onChange(
+        filtered.map((f) => new File([], f.name, { type: f.type }))
+      );
+      return filtered;
+    });
+  };
+  return /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { spacing: 2 }, toast && /* @__PURE__ */ import_react5.default.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ import_react5.default.createElement(
+    "input",
+    {
+      type: "file",
+      multiple: true,
+      hidden: true,
+      ref: inputRef,
+      onChange: handleUpload
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    import_material3.Stack,
+    {
+      id: "ZonaAdjuntos",
+      justifyContent: "center",
+      alignItems: "center",
+      bgcolor: "transparent",
+      padding: compact ? "12px 16px" : "16px 24px",
+      height: compact ? "56px" : "100%",
+      flexDirection: compact ? "row" : "column",
+      gap: 1,
+      borderRadius: 1,
+      onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.click();
+      },
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      sx: __spreadValues({
+        border: error ? (theme) => `1px solid ${theme.palette.error.main}` : (theme) => `1px dashed ${theme.palette.grey[500]}`,
+        cursor: "pointer",
+        ":hover": {
+          backgroundColor: error ? "error.50" : "action.hover"
+        }
+      }, sx)
+    },
+    onLoading ? /* @__PURE__ */ import_react5.default.createElement(
+      import_material3.Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "450px"
+      },
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.CircularProgress,
+        {
+          sx: { width: "60px", height: "60px" },
+          variant: "indeterminate"
+        }
+      )
+    ) : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
+      import_material3.Box,
+      {
+        display: "flex",
+        bgcolor: error ? "error.50" : "primary.50",
+        borderRadius: "100%",
+        p: 1
+      },
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_icons_material5.CloudUploadOutlined,
+        {
+          color: error ? "error" : "primary",
+          fontSize: "medium"
+        }
+      )
+    ), /* @__PURE__ */ import_react5.default.createElement(
+      import_material3.Stack,
+      {
+        width: "100%",
+        flexDirection: compact ? "row" : "column",
+        alignItems: "center",
+        justifyContent: compact ? "space-between" : "center",
+        gap: 1
+      },
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.Stack,
+        {
+          flexDirection: "column",
+          alignItems: compact ? "start" : "center",
+          gap: 0.5
+        },
+        /* @__PURE__ */ import_react5.default.createElement(import_material3.Typography, { variant: "body2", color: "text.primary" }, "Arrastrar o adjuntar archivos"),
+        /* @__PURE__ */ import_react5.default.createElement(
+          import_material3.Typography,
+          {
+            variant: "caption",
+            color: error ? "error" : "text.secondary",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            maxWidth: "450px"
+          },
+          error ? `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Archivo no soportado` : `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Max. ${maxSize}MB`
+        )
+      ),
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.Button,
+        {
+          variant: "text",
+          color: "primary",
+          size: "small",
+          startIcon: /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.AttachFileOutlined, { color: "primary", fontSize: "small" })
+        },
+        "Adjuntar"
+      )
+    ))
+  ), files.length > 0 && /* @__PURE__ */ import_react5.default.createElement(
+    import_material3.Stack,
+    {
+      id: "ContenedorArchivosAdjuntos",
+      width: "100%",
+      sx: __spreadValues({
+        overflowY: "auto"
+      }, files.length > 5 && {
+        maxHeight: 250
+      }),
+      spacing: 1
+    },
+    files.map((file) => /* @__PURE__ */ import_react5.default.createElement(
+      import_material3.Stack,
+      {
+        height: 46,
+        key: file.name + (file.uploadError ? "_error" : ""),
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        padding: 1,
+        borderRadius: 1,
+        sx: {
+          backgroundColor: file.uploadError ? "error.50" : "transparent",
+          ":hover": {
+            backgroundColor: file.uploadError ? "error.100" : "primary.50"
+          }
+        }
+      },
+      /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
+        import_icons_material5.UploadFileOutlined,
+        {
+          color: file.uploadError ? "error" : "primary",
+          fontSize: "small"
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.Typography,
+        {
+          variant: "body2",
+          color: "text.primary",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          maxWidth: "310px"
+        },
+        file.name
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.Typography,
+        {
+          variant: "caption",
+          color: file.uploadError ? "error" : "text.secondary"
+        },
+        file.uploadError && file.size / (1024 * 1024) > maxSize ? "Archivo super\xF3 el l\xEDmite \u2022 Carga fallida" : file.uploadError ? "Archivo duplicado o inv\xE1lido \u2022 Carga fallida" : `${(file.size / (1024 * 1024)).toFixed(2)}MB \u2022 ${file.type}`
+      ))),
+      /* @__PURE__ */ import_react5.default.createElement(import_material3.Tooltip, { title: "Descargar" }, /* @__PURE__ */ import_react5.default.createElement(import_material3.IconButton, { size: "small", onClick: () => downloadAction == null ? void 0 : downloadAction(file.name) }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.FileDownload, { fontSize: "small", color: "action" }))),
+      /* @__PURE__ */ import_react5.default.createElement(import_material3.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.IconButton,
+        {
+          size: "small",
+          onClick: () => {
+            setFileToDelete(file);
+            setOpenModal(true);
+          }
+        },
+        /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.DeleteOutline, { fontSize: "small", color: "action" })
+      ))
+    ))
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    SCModal,
+    {
+      state: "delete",
+      open: openModal,
+      setOpen: setOpenModal,
+      title: "Eliminar archivo",
+      description: `\xBFEst\xE1s seguro que deseas eliminar "${fileToDelete == null ? void 0 : fileToDelete.name}"?`,
+      action: [
+        {
+          text: "Eliminar",
+          fn: () => __async(void 0, null, function* () {
+            if (fileToDelete) {
+              try {
+                if (deleteAction) {
+                  yield deleteAction(fileToDelete.name);
+                }
+                deleteFiles(fileToDelete.name);
+                setToast({
+                  title: "Archivo eliminado",
+                  type: "success",
+                  time: 2
+                });
+              } catch (error2) {
+                setToast({
+                  title: "Error al eliminar archivo",
+                  type: "error",
+                  time: 2
+                });
+              } finally {
+                setFileToDelete(null);
+                setOpenModal(false);
+              }
+            }
+          })
+        }
+      ]
+    }
+  ));
+};
+
+// src/Components/Drawer/SCDrawer.tsx
+var import_react12 = __toESM(require("react"), 1);
+var import_material9 = require("@mui/material");
 var import_Grid23 = __toESM(require("@mui/material/Grid2"), 1);
 var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
+var import_ArrowBackIos = __toESM(require("@mui/icons-material/ArrowBackIos"), 1);
+var import_ArrowForwardIos = __toESM(require("@mui/icons-material/ArrowForwardIos"), 1);
 
 // src/Components/Textfield/SCTextField.tsx
-var import_react = __toESM(require("react"), 1);
-var import_material = require("@mui/material");
+var import_react6 = __toESM(require("react"), 1);
+var import_material4 = require("@mui/material");
 var import_Grid2 = __toESM(require("@mui/material/Grid2"), 1);
-var import_icons_material = require("@mui/icons-material");
+var import_icons_material6 = require("@mui/icons-material");
 
 // src/Components/Textfield/Helpers/validateIcon.tsx
 var Muicon = __toESM(require("@mui/icons-material"), 1);
-function getIconComponent(name) {
+function getIconComponent2(name) {
   if (typeof name !== "string") return name;
   return name in Muicon ? Muicon[name] : void 0;
 }
@@ -121,13 +835,13 @@ function getIconValidation(name) {
 }
 
 // src/Components/Textfield/Helpers/validateKeyDown.tsx
-function validateKeyDown(event2, format2) {
+function validateKeyDown(event2, format3) {
   const key = event2.key;
   const target = event2.target;
-  if (format2 === "int" && !/^[0-9]$/.test(key)) {
+  if (format3 === "int" && !/^[0-9]$/.test(key)) {
     event2.preventDefault();
   }
-  if (format2 === "decimal" && (target.value === "" && key === "." || key === "-" || key === "+")) {
+  if (format3 === "decimal" && (target.value === "" && key === "." || key === "-" || key === "+")) {
     event2.preventDefault();
   }
   if (target.type === "text") {
@@ -166,7 +880,7 @@ var SCTextField = ({
   maxLength,
   //Apariencia
   variant = "outlined",
-  format: format2,
+  format: format3,
   disabled,
   required,
   size,
@@ -181,23 +895,23 @@ var SCTextField = ({
   onKeyDown
 }) => {
   const inputComponents = {
-    outlined: import_material.OutlinedInput,
-    filled: import_material.FilledInput,
-    standard: import_material.Input
+    outlined: import_material4.OutlinedInput,
+    filled: import_material4.FilledInput,
+    standard: import_material4.Input
   };
-  const InputComponent = inputComponents[variant] || import_material.OutlinedInput;
+  const InputComponent = inputComponents[variant] || import_material4.OutlinedInput;
   let IconInputStartValidation;
   let IconInputEndValidation;
   let IconInputStart;
   let IconInputEnd;
   let IconTitle;
-  const [showPassword, setShowPassword] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(false);
-  const [anchorInfoTitle, setAnchorInfoTitle] = (0, import_react.useState)(null);
+  const [showPassword, setShowPassword] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(false);
+  const [anchorInfoTitle, setAnchorInfoTitle] = (0, import_react6.useState)(null);
   const openInfoTitle = Boolean(anchorInfoTitle);
-  const [anchorInfoElement, setAnchorInfoElement] = (0, import_react.useState)(null);
+  const [anchorInfoElement, setAnchorInfoElement] = (0, import_react6.useState)(null);
   const openInfoElement = Boolean(anchorInfoElement);
-  (0, import_react.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (error) {
       setTimeout(() => {
         setError(false);
@@ -206,21 +920,21 @@ var SCTextField = ({
   }, [error]);
   if (iconInputStart) {
     IconInputStartValidation = getIconValidation(iconInputStart);
-    IconInputStart = getIconComponent(iconInputStart);
+    IconInputStart = getIconComponent2(iconInputStart);
   }
   if (iconInputEnd) {
     IconInputEndValidation = getIconValidation(iconInputEnd);
-    IconInputEnd = getIconComponent(iconInputEnd);
+    IconInputEnd = getIconComponent2(iconInputEnd);
   }
   if (iconTitle) {
-    IconTitle = getIconComponent(iconTitle);
+    IconTitle = getIconComponent2(iconTitle);
   }
   const handleClickShowPassword = () => setShowPassword((show) => !show);
   const handleMouseDownPassword = (event2) => {
     event2.preventDefault();
   };
   const handleKeyDown = (event2) => {
-    validateKeyDown(event2, format2);
+    validateKeyDown(event2, format3);
     if (onKeyDown) onKeyDown(event2);
   };
   const handleInputChange = (event2) => {
@@ -247,16 +961,16 @@ var SCTextField = ({
   const handleCloseInfoElement = () => {
     setAnchorInfoElement(null);
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width } }, /* @__PURE__ */ import_react.default.createElement(import_Grid2.default, { container: true, alignItems: "center", mb: 1.25, gap: 0.5 }, iconTitle && IconTitle ? /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }) : "", title ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { mx: 0.5, variant: "subtitle2", color: "text.secondary" }, title) : "", infoTitle ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    import_icons_material.InfoOutlined,
+  return /* @__PURE__ */ import_react6.default.createElement(import_material4.Box, { sx: { width } }, /* @__PURE__ */ import_react6.default.createElement(import_Grid2.default, { container: true, alignItems: "center", mb: 1.25, gap: 0.5 }, iconTitle && IconTitle ? /* @__PURE__ */ import_react6.default.createElement(import_material4.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }) : "", title ? /* @__PURE__ */ import_react6.default.createElement(import_material4.Typography, { mx: 0.5, variant: "subtitle2", color: "text.secondary" }, title) : "", infoTitle ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
+    import_icons_material6.InfoOutlined,
     {
       color: "action",
       fontSize: "small",
       onMouseEnter: (event2) => handleOpenInfoTitle(event2),
       onMouseLeave: () => handleCloseInfoTitle()
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_material.Popover,
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    import_material4.Popover,
     {
       sx: {
         pointerEvents: "none",
@@ -277,15 +991,15 @@ var SCTextField = ({
       },
       disableRestoreFocus: true
     },
-    /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { p: 2 }, infoTitle.text)
-  )) : /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: infoTitle.text, "data-testid": "test-infoTitle", placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react.default.createElement(
-    import_icons_material.InfoOutlined,
+    /* @__PURE__ */ import_react6.default.createElement(import_material4.Typography, { p: 2 }, infoTitle.text)
+  )) : /* @__PURE__ */ import_react6.default.createElement(import_material4.Tooltip, { title: infoTitle.text, "data-testid": "test-infoTitle", placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react6.default.createElement(
+    import_icons_material6.InfoOutlined,
     {
       color: "action",
       fontSize: "small"
     }
-  ))) : ""), /* @__PURE__ */ import_react.default.createElement(import_Grid2.default, { container: true, sx: { flexWrap: "nowrap", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
-    import_material.FormControl,
+  ))) : ""), /* @__PURE__ */ import_react6.default.createElement(import_Grid2.default, { container: true, sx: { flexWrap: "nowrap", alignItems: "center" } }, /* @__PURE__ */ import_react6.default.createElement(
+    import_material4.FormControl,
     {
       color,
       fullWidth: true,
@@ -293,8 +1007,8 @@ var SCTextField = ({
       variant,
       sx: { background: background || "transparent", borderRadius: "4px" }
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_material.InputLabel,
+    /* @__PURE__ */ import_react6.default.createElement(
+      import_material4.InputLabel,
       {
         "data-testid": "test-label",
         htmlFor: "",
@@ -304,7 +1018,7 @@ var SCTextField = ({
       },
       label ? label : ""
     ),
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react6.default.createElement(
       InputComponent,
       {
         size: size ? size : "medium",
@@ -317,21 +1031,21 @@ var SCTextField = ({
         onChange: handleInputChange,
         onBlur: handleBlur,
         inputProps: { maxLength: maxLength ? maxLength : 50 },
-        type: !showPassword && format2 === "password" ? "password" : (format2 || "text").toUpperCase() === "INT" || (format2 || "text").toUpperCase() === "DECIMAL" ? "number" : "text",
-        className: format2 === "password" && !showPassword ? "" : "",
+        type: !showPassword && format3 === "password" ? "password" : (format3 || "text").toUpperCase() === "INT" || (format3 || "text").toUpperCase() === "DECIMAL" ? "number" : "text",
+        className: format3 === "password" && !showPassword ? "" : "",
         placeholder,
-        startAdornment: iconInputStart ? /* @__PURE__ */ import_react.default.createElement(import_material.InputAdornment, { position: "start" }, IconInputStartValidation === "text" ? iconInputStart : IconInputStart ? /* @__PURE__ */ import_react.default.createElement(IconInputStart, { fontSize: "small" }) : null) : "",
-        endAdornment: /* @__PURE__ */ import_react.default.createElement(import_material.InputAdornment, { position: "end" }, format2 === "password" ? /* @__PURE__ */ import_react.default.createElement(
-          import_material.IconButton,
+        startAdornment: iconInputStart ? /* @__PURE__ */ import_react6.default.createElement(import_material4.InputAdornment, { position: "start" }, IconInputStartValidation === "text" ? iconInputStart : IconInputStart ? /* @__PURE__ */ import_react6.default.createElement(IconInputStart, { fontSize: "small" }) : null) : "",
+        endAdornment: /* @__PURE__ */ import_react6.default.createElement(import_material4.InputAdornment, { position: "end" }, format3 === "password" ? /* @__PURE__ */ import_react6.default.createElement(
+          import_material4.IconButton,
           {
             "aria-label": "toggle password visibility",
             onClick: handleClickShowPassword,
             onMouseDown: handleMouseDownPassword,
             edge: "end"
           },
-          showPassword ? /* @__PURE__ */ import_react.default.createElement(import_icons_material.VisibilityOff, null) : /* @__PURE__ */ import_react.default.createElement(import_icons_material.Visibility, null)
-        ) : iconInputEnd === void 0 && infoElement !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-          import_icons_material.InfoOutlined,
+          showPassword ? /* @__PURE__ */ import_react6.default.createElement(import_icons_material6.VisibilityOff, null) : /* @__PURE__ */ import_react6.default.createElement(import_icons_material6.Visibility, null)
+        ) : iconInputEnd === void 0 && infoElement !== void 0 ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
+          import_icons_material6.InfoOutlined,
           {
             "data-testid": "test-infoElement",
             sx: { ml: 0.5 },
@@ -341,8 +1055,8 @@ var SCTextField = ({
             onMouseEnter: (event2) => handleOpenInfoElement(event2),
             onMouseLeave: () => handleCloseInfoElement()
           }
-        ), /* @__PURE__ */ import_react.default.createElement(
-          import_material.Popover,
+        ), /* @__PURE__ */ import_react6.default.createElement(
+          import_material4.Popover,
           {
             sx: {
               pointerEvents: "none",
@@ -363,20 +1077,20 @@ var SCTextField = ({
             },
             disableRestoreFocus: true
           },
-          /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
-        )) : /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react.default.createElement(
-          import_icons_material.InfoOutlined,
+          /* @__PURE__ */ import_react6.default.createElement(import_material4.Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
+        )) : /* @__PURE__ */ import_react6.default.createElement(import_material4.Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react6.default.createElement(
+          import_icons_material6.InfoOutlined,
           {
             color: "action",
             fontSize: "small"
           }
-        ))) : iconInputEnd !== void 0 ? IconInputEndValidation === "text" ? iconInputEnd : IconInputEnd ? /* @__PURE__ */ import_react.default.createElement(IconInputEnd, { fontSize: "small" }) : null : ""),
-        label: label ? label + (format2 === "password" && !showPassword ? "" : "") : "",
-        autoComplete: format2 === "password" ? "new-password" : "off"
+        ))) : iconInputEnd !== void 0 ? IconInputEndValidation === "text" ? iconInputEnd : IconInputEnd ? /* @__PURE__ */ import_react6.default.createElement(IconInputEnd, { fontSize: "small" }) : null : ""),
+        label: label ? label + (format3 === "password" && !showPassword ? "" : "") : "",
+        autoComplete: format3 === "password" ? "new-password" : "off"
       }
     )
-  ), (iconInputEnd !== void 0 || format2 === "password") && infoElement ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    import_icons_material.InfoOutlined,
+  ), (iconInputEnd !== void 0 || format3 === "password") && infoElement ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
+    import_icons_material6.InfoOutlined,
     {
       "data-testid": "test-infoElement",
       component: "svg",
@@ -386,8 +1100,8 @@ var SCTextField = ({
       onMouseEnter: (event2) => handleOpenInfoElement(event2),
       onMouseLeave: handleCloseInfoElement
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_material.Popover,
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    import_material4.Popover,
     {
       sx: { pointerEvents: "none" },
       open: openInfoElement,
@@ -403,9 +1117,9 @@ var SCTextField = ({
       },
       disableRestoreFocus: true
     },
-    /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
-  )) : /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react.default.createElement(
-    import_icons_material.InfoOutlined,
+    /* @__PURE__ */ import_react6.default.createElement(import_material4.Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
+  )) : /* @__PURE__ */ import_react6.default.createElement(import_material4.Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react6.default.createElement(
+    import_icons_material6.InfoOutlined,
     {
       sx: { marginLeft: "4px" },
       color: "action",
@@ -414,199 +1128,19 @@ var SCTextField = ({
   ))) : ""));
 };
 
-// src/Components/ToastNotification/SCToastNotification.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_material2 = require("@mui/material");
-var import_icons_material2 = require("@mui/icons-material");
-
-// src/Components/ToastNotification/useProgress.ts
-var import_react2 = require("react");
-var useProgress = (timeProgress, lote) => {
-  const [progress, setProgress] = (0, import_react2.useState)(0);
-  (0, import_react2.useEffect)(() => {
-    const interval = setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          clearInterval(interval);
-        }
-        if (lote) {
-          const nextProgress = prev + lote;
-          return nextProgress <= 100 ? nextProgress : 100;
-        } else {
-          return prev + 1;
-        }
-      });
-    }, timeProgress * 10);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [timeProgress, lote]);
-  return {
-    progress
-  };
-};
-var ToastProgress = (timeProgress) => {
-  const [progress, setProgress] = (0, import_react2.useState)(100);
-  (0, import_react2.useEffect)(() => {
-    const interval = setInterval(() => {
-      setProgress((prev) => {
-        if (prev <= 0) {
-          clearInterval(interval);
-        }
-        return prev - 1;
-      });
-    }, timeProgress * 10);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [timeProgress]);
-  return {
-    progressToast: progress
-  };
-};
-
-// src/Components/ToastNotification/SCToastNotification.tsx
-var SCToastNotification = (toast) => {
-  var _a;
-  const [stateOptions, setStateOptions] = (0, import_react3.useState)(true);
-  const [stateToast, setStateToast] = (0, import_react3.useState)(true);
-  const timeProgress = toast.time || 10;
-  const { progress } = useProgress(timeProgress);
-  const toastColorConfig = toast.type || "info";
-  const toastIconOption = {
-    success: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.CheckCircleRounded, { color: "success" }),
-    error: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.ErrorRounded, { color: "error" }),
-    warning: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.WarningRounded, { color: "warning" }),
-    info: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.InfoRounded, { color: "info" })
-  };
-  const acciones = [...toast.actions || [{ text: "Action", fn: () => {
-    alert("");
-  } }, { text: "Consultar", fn: () => {
-  } }]];
-  const ToastIconConfig = toastIconOption[toast.type];
-  const closeToast = () => {
-    setStateToast(false);
-  };
-  const toggleToastOptions = () => {
-    setStateOptions((prevShowOptions) => !prevShowOptions);
-  };
-  (0, import_react3.useEffect)(() => {
-    progress >= 100 && setStateToast(false);
-  }, [progress]);
-  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, stateToast && /* @__PURE__ */ import_react3.default.createElement(
-    import_material2.Stack,
-    {
-      position: "fixed",
-      zIndex: 1400,
-      right: 16,
-      top: 16,
-      width: 370,
-      sx: {
-        boxShadow: (theme) => theme.shadows[8]
-      }
-    },
-    /* @__PURE__ */ import_react3.default.createElement(
-      import_material2.Box,
-      {
-        padding: 1.5,
-        gap: 1.5,
-        display: "flex",
-        alignItems: "center",
-        sx: {
-          backgroundColor: {
-            success: "success.50",
-            error: "error.50",
-            warning: "warning.50",
-            info: "info.50"
-          }[toastColorConfig]
-        }
-      },
-      /* @__PURE__ */ import_react3.default.createElement(
-        import_material2.Stack,
-        {
-          p: 1,
-          gap: 1,
-          borderRadius: 50,
-          bgcolor: {
-            success: "success.100",
-            error: "error.100",
-            warning: "warning.100",
-            info: "info.100"
-          }[(_a = toast.type) != null ? _a : "info"]
-        },
-        /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, null, ToastIconConfig)
-      ),
-      /* @__PURE__ */ import_react3.default.createElement(import_material2.Divider, { orientation: "vertical", flexItem: true }),
-      /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { width: 285 }, /* @__PURE__ */ import_react3.default.createElement(
-        import_material2.Stack,
-        {
-          justifyContent: "space-between",
-          flexDirection: "row",
-          alignItems: "center"
-        },
-        /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { variant: "subtitle2", color: "text.primary" }, toast.title),
-        /* @__PURE__ */ import_react3.default.createElement(
-          import_material2.IconButton,
-          {
-            size: "small",
-            "data-testid": "close-icon",
-            onClick: closeToast
-          },
-          /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Close, { fontSize: "small" })
-        )
-      ), /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { color: "text.primary", variant: "body2" }, toast.subtitle), !stateOptions && toast.listITems && toast.listITems.length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, null, toast.listITems.map((element, i) => /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { variant: "caption", key: i }, "\u2022 ", element)))), /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { justifyContent: "flex-end", flexDirection: "row", gap: 0.5 }, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { flexDirection: "row", gap: 0.5 }, toast.actions.map((button, index) => /* @__PURE__ */ import_react3.default.createElement(
-        import_material2.Button,
-        {
-          key: index,
-          color: toast.type === "info" ? "info" : toast.type === "success" ? "success" : toast.type === "error" ? "error" : "warning",
-          variant: "text",
-          onClick: button.fn,
-          disabled: button.disabled || false,
-          size: "small"
-        },
-        button.text.charAt(0).toUpperCase() + button.text.slice(1).toLowerCase()
-      ))), toast.seeMore && /* @__PURE__ */ import_react3.default.createElement(
-        import_material2.Button,
-        {
-          onClick: toggleToastOptions,
-          size: "small",
-          variant: "text",
-          color: toastColorConfig
-        },
-        stateOptions ? "Ver m\xE1s" : "Ver menos",
-        stateOptions ? /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.KeyboardArrowDown, null) : /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.KeyboardArrowUp, null)
-      )))
-    ),
-    /* @__PURE__ */ import_react3.default.createElement(
-      import_material2.LinearProgress,
-      {
-        sx: {
-          ".MuiLinearProgress-bar": {
-            transition: "0.1s linear !important",
-            transform: "scaleX(-1)"
-          }
-        },
-        color: toastColorConfig,
-        variant: "determinate",
-        value: 100 - progress
-      }
-    )
-  ));
-};
-
 // src/Components/TextArea/Helpers/validateIcon.tsx
-var MuiIcons = __toESM(require("@mui/icons-material"), 1);
+var MuiIcons2 = __toESM(require("@mui/icons-material"), 1);
 function getIcon(name) {
-  if (!name || !(name in MuiIcons)) {
+  if (!name || !(name in MuiIcons2)) {
     return null;
   }
-  return MuiIcons[name];
+  return MuiIcons2[name];
 }
 
 // src/Components/TextArea/SCTextArea.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_material3 = require("@mui/material");
-var import_icons_material3 = require("@mui/icons-material");
+var import_react7 = __toESM(require("react"), 1);
+var import_material5 = require("@mui/material");
+var import_icons_material7 = require("@mui/icons-material");
 var SCTextArea = ({
   //informativas
   title,
@@ -628,11 +1162,11 @@ var SCTextArea = ({
   state,
   onBlur
 }) => {
-  const [helperCount, setHelperCount] = (0, import_react4.useState)(0);
-  const [stateError, setStateError] = (0, import_react4.useState)(false);
-  const [anchorInfoTitle, setAnchorInfoTitle] = import_react4.default.useState(null);
+  const [helperCount, setHelperCount] = (0, import_react7.useState)(0);
+  const [stateError, setStateError] = (0, import_react7.useState)(false);
+  const [anchorInfoTitle, setAnchorInfoTitle] = import_react7.default.useState(null);
   const openInfoTitle = Boolean(anchorInfoTitle);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setHelperCount(state == null ? void 0 : state.length);
   }, [state]);
   const IconTitle = getIcon(iconTitle);
@@ -654,16 +1188,16 @@ var SCTextArea = ({
   const handleCloseInfoTitle = () => {
     setAnchorInfoTitle(null);
   };
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { width } }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Grid, { container: true, sx: { alignItems: "center" }, gap: 0.5 }, iconTitle && IconTitle && /* @__PURE__ */ import_react4.default.createElement(import_material3.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }), title && /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { color: colorTitle || "text.secondary", variant: "subtitle2" }, title), infoTitle ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
-    import_icons_material3.InfoOutlined,
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_material5.Box, { sx: { width } }, /* @__PURE__ */ import_react7.default.createElement(import_material5.Grid, { container: true, sx: { alignItems: "center" }, gap: 0.5 }, iconTitle && IconTitle && /* @__PURE__ */ import_react7.default.createElement(import_material5.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }), title && /* @__PURE__ */ import_react7.default.createElement(import_material5.Typography, { color: colorTitle || "text.secondary", variant: "subtitle2" }, title), infoTitle ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+    import_icons_material7.InfoOutlined,
     {
       color: "action",
       fontSize: "small",
       onMouseEnter: (event2) => handleOpenInfoTitle(event2),
       onMouseLeave: () => handleCloseInfoTitle()
     }
-  ), /* @__PURE__ */ import_react4.default.createElement(
-    import_material3.Popover,
+  ), /* @__PURE__ */ import_react7.default.createElement(
+    import_material5.Popover,
     {
       sx: { pointerEvents: "none" },
       open: openInfoTitle,
@@ -679,15 +1213,15 @@ var SCTextArea = ({
       },
       disableRestoreFocus: true
     },
-    /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { sx: { p: 2 } }, infoTitle.text)
-  )) : /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: infoTitle.text, placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react4.default.createElement(
-    import_icons_material3.InfoOutlined,
+    /* @__PURE__ */ import_react7.default.createElement(import_material5.Typography, { sx: { p: 2 } }, infoTitle.text)
+  )) : /* @__PURE__ */ import_react7.default.createElement(import_material5.Tooltip, { title: infoTitle.text, placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react7.default.createElement(
+    import_icons_material7.InfoOutlined,
     {
       color: "action",
       fontSize: "small"
     }
-  ))) : ""), /* @__PURE__ */ import_react4.default.createElement(import_material3.Stack, null, /* @__PURE__ */ import_react4.default.createElement(
-    import_material3.TextField,
+  ))) : ""), /* @__PURE__ */ import_react7.default.createElement(import_material5.Stack, null, /* @__PURE__ */ import_react7.default.createElement(
+    import_material5.TextField,
     {
       required,
       placeholder,
@@ -708,8 +1242,8 @@ var SCTextArea = ({
       },
       autoComplete: "off"
     }
-  )), /* @__PURE__ */ import_react4.default.createElement(import_material3.Stack, null, /* @__PURE__ */ import_react4.default.createElement(
-    import_material3.Typography,
+  )), /* @__PURE__ */ import_react7.default.createElement(import_material5.Stack, null, /* @__PURE__ */ import_react7.default.createElement(
+    import_material5.Typography,
     {
       variant: "caption",
       color: "text.secondary",
@@ -722,8 +1256,8 @@ var SCTextArea = ({
 };
 
 // src/Components/SCSelect.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_material4 = require("@mui/material");
+var import_react8 = __toESM(require("react"), 1);
+var import_material6 = require("@mui/material");
 var import_Select = __toESM(require("@mui/material/Select"), 1);
 var Muicon2 = __toESM(require("@mui/icons-material"), 1);
 function SCSelect({
@@ -733,25 +1267,23 @@ function SCSelect({
   width = "100%",
   size = "small",
   variant = "outlined",
-  deleteType = "button",
+  background = "white",
   required,
   disabled,
-  background,
-  fnAplicar,
   setState,
   state
 }) {
   const labelContent = `<span style="color: red;">* </span>` + label;
-  const [prevData, setPrevData] = import_react5.default.useState(data);
-  const [error, setError] = import_react5.default.useState(false);
-  (0, import_react5.useEffect)(() => {
+  const [prevData, setPrevData] = import_react8.default.useState(data);
+  const [error, setError] = import_react8.default.useState(false);
+  (0, import_react8.useEffect)(() => {
     if (error) {
       setTimeout(() => {
         setError(false);
       }, 1e3);
     }
   }, [error]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
     if (dataChangeValidation == false) {
       setState({ hiddenValue: "", textValue: "" });
@@ -785,25 +1317,25 @@ function SCSelect({
       }
     }
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, data && /* @__PURE__ */ import_react5.default.createElement(import_material4.Box, { sx: { width } }, /* @__PURE__ */ import_react5.default.createElement(
-    import_material4.FormControl,
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, data && /* @__PURE__ */ import_react8.default.createElement(import_material6.Box, { sx: { width } }, /* @__PURE__ */ import_react8.default.createElement(
+    import_material6.FormControl,
     {
       fullWidth: true,
       size: size ? size : "medium",
       variant
     },
-    /* @__PURE__ */ import_react5.default.createElement(
-      import_material4.InputLabel,
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_material6.InputLabel,
       {
         error
       },
-      required ? /* @__PURE__ */ import_react5.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label
+      required ? /* @__PURE__ */ import_react8.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label
     ),
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(
       import_Select.default,
       {
         value: Array.isArray(state.hiddenValue) ? state.hiddenValue[0] || "" : state.hiddenValue != "-1" ? state.hiddenValue : "",
-        label: required ? /* @__PURE__ */ import_react5.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
+        label: required ? /* @__PURE__ */ import_react8.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
         onChange: handleChange,
         onBlur: handleBlur,
         variant,
@@ -812,28 +1344,34 @@ function SCSelect({
         MenuProps: {
           PaperProps: {
             sx: {
-              left: "0px !important"
+              maxHeight: "300px",
+              minWidth: "100%"
             }
           },
-          sx: {
-            "& .MuiPaper-root": {
-              left: "0px !important"
-            }
-          }
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "left"
+          },
+          disableAutoFocusItem: true,
+          marginThreshold: 0
         }
       },
       data.map((option, index) => {
-        return /* @__PURE__ */ import_react5.default.createElement(import_material4.MenuItem, { key: index, value: getItemValue(option).value }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react5.default.createElement(import_material4.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react5.default.createElement(import_material4.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ import_react5.default.createElement(import_material4.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }));
+        return /* @__PURE__ */ import_react8.default.createElement(import_material6.MenuItem, { key: index, value: getItemValue(option).value }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react8.default.createElement(import_material6.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react8.default.createElement(import_material6.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ import_react8.default.createElement(import_material6.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }));
       })
     )
   )));
 }
 
 // src/Components/SCAutocomplete.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_material5 = require("@mui/material");
+var import_react9 = __toESM(require("react"), 1);
+var import_material7 = require("@mui/material");
 var import_Grid22 = __toESM(require("@mui/material/Grid2"), 1);
-var import_icons_material4 = require("@mui/icons-material");
+var import_icons_material8 = require("@mui/icons-material");
 var Muicon3 = __toESM(require("@mui/icons-material"), 1);
 function SCAutocomplete({
   label = "",
@@ -851,17 +1389,16 @@ function SCAutocomplete({
   state,
   inputChange,
   maxCheck
-  // Agregar el parámetro maxCheck
 }) {
   const labelContent = `<span style="color: red;">* </span>` + label;
   let group = "";
   let isSelected = false;
-  const [selectedOptions, setSelectedOptions] = import_react6.default.useState([]);
-  const [prevData, setPrevData] = import_react6.default.useState(data);
-  const [originalData, setOriginalData] = import_react6.default.useState(data);
-  const [inputValue, setInputValue] = import_react6.default.useState("");
-  const [isUserTyping, setIsUserTyping] = import_react6.default.useState(false);
-  (0, import_react6.useEffect)(() => {
+  const [selectedOptions, setSelectedOptions] = import_react9.default.useState([]);
+  const [prevData, setPrevData] = import_react9.default.useState(data);
+  const [originalData, setOriginalData] = import_react9.default.useState(data);
+  const [inputValue, setInputValue] = import_react9.default.useState("");
+  const [isUserTyping, setIsUserTyping] = import_react9.default.useState(false);
+  (0, import_react9.useEffect)(() => {
     const dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
     if (!dataChangeValidation && !isUserTyping) {
       setState({ hiddenValue: "-1", textValue: "" });
@@ -872,7 +1409,7 @@ function SCAutocomplete({
     }
     setPrevData(data);
   }, [data, isUserTyping]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (typeFormat == "multiselect") {
       if (state.hiddenValue != "-1" && Array.isArray(state.hiddenValue)) {
         const newSelectedOptions = originalData.filter(
@@ -882,7 +1419,7 @@ function SCAutocomplete({
       }
     }
   }, [state.hiddenValue, originalData, typeFormat]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (inputValue === "") {
       setIsUserTyping(false);
     }
@@ -940,11 +1477,12 @@ function SCAutocomplete({
   const selectedValue = typeFormat === "multiselect" ? selectedOptions : originalData.find(
     (item) => getItemValue(item).value === state.hiddenValue
   ) || null;
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, data && /* @__PURE__ */ import_react6.default.createElement(
-    import_material5.Autocomplete,
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, data && /* @__PURE__ */ import_react9.default.createElement(
+    import_material7.Autocomplete,
     {
       multiple: typeFormat === "multiselect",
       clearOnEscape: true,
+      noOptionsText: "No se encuentra",
       disabled,
       options: data,
       isOptionEqualToValue: (option, value) => getItemValue(option).value === getItemValue(value).value,
@@ -966,10 +1504,10 @@ function SCAutocomplete({
       limitTags: 2,
       renderTags: (value, getTagProps) => {
         const limit = 2;
-        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, value.slice(0, limit).map((option, index) => {
+        return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, value.slice(0, limit).map((option, index) => {
           const _a = getTagProps({ index }), { key } = _a, chipProps = __objRest(_a, ["key"]);
-          return /* @__PURE__ */ import_react6.default.createElement(
-            import_material5.Chip,
+          return /* @__PURE__ */ import_react9.default.createElement(
+            import_material7.Chip,
             __spreadProps(__spreadValues({
               key,
               color: "default",
@@ -980,7 +1518,7 @@ function SCAutocomplete({
               style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
             })
           );
-        }), value.length > limit && /* @__PURE__ */ import_react6.default.createElement(import_material5.Box, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
+        }), value.length > limit && /* @__PURE__ */ import_react9.default.createElement(import_material7.Box, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
       },
       renderOption: (props, option) => {
         const _a = props, { key } = _a, optionProps = __objRest(_a, ["key"]);
@@ -998,8 +1536,8 @@ function SCAutocomplete({
           isValid = group == option[columnGroup];
           group = option[columnGroup];
         }
-        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ import_react6.default.createElement(import_material5.Typography, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ import_react6.default.createElement(
-          import_material5.MenuItem,
+        return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ import_react9.default.createElement(import_material7.Typography, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ import_react9.default.createElement(
+          import_material7.MenuItem,
           __spreadProps(__spreadValues({}, optionProps), {
             disabled: isDisabled,
             style: {
@@ -1008,9 +1546,9 @@ function SCAutocomplete({
               opacity: isDisabled ? 0.5 : 1
             }
           }),
-          typeFormat != "multiselect" && getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react6.default.createElement(import_material5.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react6.default.createElement(import_material5.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "",
-          typeFormat == "multiselect" ? /* @__PURE__ */ import_react6.default.createElement(
-            import_material5.Checkbox,
+          typeFormat != "multiselect" && getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react9.default.createElement(import_material7.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react9.default.createElement(import_material7.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "",
+          typeFormat == "multiselect" ? /* @__PURE__ */ import_react9.default.createElement(
+            import_material7.Checkbox,
             {
               checked: isSelected,
               disabled: isDisabled,
@@ -1018,25 +1556,25 @@ function SCAutocomplete({
               color: "primary"
             }
           ) : "",
-          /* @__PURE__ */ import_react6.default.createElement(import_material5.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }),
+          /* @__PURE__ */ import_react9.default.createElement(import_material7.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }),
           getItemValue(option).component != void 0 ? getItemValue(option).component : ""
         )));
       },
-      renderInput: (params) => /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
-        import_material5.TextField,
+      renderInput: (params) => /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
+        import_material7.TextField,
         __spreadProps(__spreadValues({}, params), {
-          label: required ? /* @__PURE__ */ import_react6.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
+          label: required ? /* @__PURE__ */ import_react9.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
           placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
           InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-            endAdornment: /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, deleteType == "icon" && (state.hiddenValue.toString() != "-1" && state.hiddenValue.toString() != "") ? /* @__PURE__ */ import_react6.default.createElement(import_material5.IconButton, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.Clear, { fontSize: "small" })) : "", /* @__PURE__ */ import_react6.default.createElement(import_material5.InputAdornment, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
+            endAdornment: /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, deleteType == "icon" && (state.hiddenValue.toString() != "-1" && state.hiddenValue.toString() != "") ? /* @__PURE__ */ import_react9.default.createElement(import_material7.IconButton, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ import_react9.default.createElement(import_icons_material8.Clear, { fontSize: "small" })) : "", /* @__PURE__ */ import_react9.default.createElement(import_material7.InputAdornment, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ import_react9.default.createElement(import_icons_material8.Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
           })
         })
       )),
       slotProps: {
         listbox: {
-          component: import_react6.default.forwardRef(function ListboxComponent(props, ref) {
-            return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
-              import_material5.Box,
+          component: import_react9.default.forwardRef(function ListboxComponent(props, ref) {
+            return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
+              import_material7.Box,
               __spreadProps(__spreadValues({
                 ref
               }, props), {
@@ -1046,9 +1584,9 @@ function SCAutocomplete({
                   backgroundColor: "white"
                 }, props.sx)
               }),
-              checkMassive && typeFormat == "multiselect" ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_material5.FormControlLabel, { control: /* @__PURE__ */ import_react6.default.createElement(import_material5.Checkbox, { checked: allSelected, indeterminate: selectedOptions.length > 0 && selectedOptions.length < data.length, onChange: handleCheckAll, color: "primary" }), label: "Todos los items", sx: { marginLeft: "0px !important", marginRight: "0px !important", padding: "7px 16px" } }), /* @__PURE__ */ import_react6.default.createElement(import_material5.Divider, null)) : "",
+              checkMassive && typeFormat == "multiselect" ? /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(import_material7.FormControlLabel, { control: /* @__PURE__ */ import_react9.default.createElement(import_material7.Checkbox, { checked: allSelected, indeterminate: selectedOptions.length > 0 && selectedOptions.length < data.length, onChange: handleCheckAll, color: "primary" }), label: "Todos los items", sx: { marginLeft: "0px !important", marginRight: "0px !important", padding: "7px 16px" } }), /* @__PURE__ */ import_react9.default.createElement(import_material7.Divider, null)) : "",
               props.children,
-              deleteType == "button" || fnAplicar ? /* @__PURE__ */ import_react6.default.createElement(
+              deleteType == "button" || fnAplicar ? /* @__PURE__ */ import_react9.default.createElement(
                 import_Grid22.default,
                 {
                   container: true,
@@ -1063,8 +1601,8 @@ function SCAutocomplete({
                     justifyContent: "space-between"
                   }
                 },
-                deleteType == "button" ? /* @__PURE__ */ import_react6.default.createElement(
-                  import_material5.Button,
+                deleteType == "button" ? /* @__PURE__ */ import_react9.default.createElement(
+                  import_material7.Button,
                   {
                     variant: "text",
                     color: "primary",
@@ -1076,8 +1614,8 @@ function SCAutocomplete({
                   },
                   "Limpiar"
                 ) : "",
-                fnAplicar && /* @__PURE__ */ import_react6.default.createElement(
-                  import_material5.Button,
+                fnAplicar && /* @__PURE__ */ import_react9.default.createElement(
+                  import_material7.Button,
                   {
                     variant: "contained",
                     color: "primary",
@@ -1096,8 +1634,8 @@ function SCAutocomplete({
 }
 
 // src/Components/SCDateRange.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_material6 = require("@mui/material");
+var import_react10 = __toESM(require("react"), 1);
+var import_material8 = require("@mui/material");
 var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 var import_AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var import_DateRangePicker = require("@mui/x-date-pickers-pro/DateRangePicker");
@@ -1128,7 +1666,7 @@ var SCDateRange = ({
     ];
     setState(convertedValue);
   };
-  return /* @__PURE__ */ import_react7.default.createElement(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDayjs.AdapterDayjs, adapterLocale: "es" }, /* @__PURE__ */ import_react7.default.createElement(import_material6.Box, { sx: { width: "100%" } }, /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDayjs.AdapterDayjs, adapterLocale: "es" }, /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { width: "100%" } }, /* @__PURE__ */ import_react10.default.createElement(
     import_DateRangePicker.DateRangePicker,
     {
       value: state,
@@ -1147,7 +1685,7 @@ var SCDateRange = ({
               required,
               error: position === "start" ? isStartEmpty : isEndEmpty,
               InputProps: {
-                endAdornment: /* @__PURE__ */ import_react7.default.createElement(import_material6.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react7.default.createElement(
+                endAdornment: /* @__PURE__ */ import_react10.default.createElement(import_material8.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react10.default.createElement(
                   import_Event.default,
                   {
                     color: hasError ? "error" : "action",
@@ -1188,29 +1726,81 @@ var getIcon2 = (iconName) => {
 };
 
 // src/Components/Drawer/Helpers/validateInput.tsx
-var validateInputs = (arrayElements, onError, onSuccess) => {
-  var _a;
+var validateInputs = (arrayElements, onError, onSuccess, setChipFilters, setTextFilters) => {
+  var _a, _b;
   let requiredValues = 0;
   let filledValues = 0;
   for (let i = 0; i < arrayElements.length; i++) {
-    if (arrayElements[i].component === void 0) {
-      if (arrayElements[i].required) {
-        requiredValues++;
-      }
-      if (arrayElements[i].required && ((_a = arrayElements[i].state) == null ? void 0 : _a.trim()) !== "") {
+    const element = arrayElements[i];
+    const { validation, element: typeElement } = validateTypeElements(element);
+    const textValue = ((_a = typeElement.state) == null ? void 0 : _a.textValue) !== void 0 ? String((_b = typeElement.state) == null ? void 0 : _b.textValue) : String(typeElement.state);
+    if (typeElement == null ? void 0 : typeElement.required) {
+      requiredValues++;
+      if (textValue.trim() !== "" && textValue.trim() !== ",") {
         filledValues++;
       }
     }
   }
   if (requiredValues === filledValues) {
     onSuccess();
+    setChipFilters(true);
   } else {
     onError({
       type: "error",
       title: "Algunos campos son requeridos",
       time: 10
     });
+    setChipFilters(false);
+  }
+};
+
+// src/Components/Drawer/Helpers/validateTypeElement.tsx
+var import_react11 = __toESM(require("react"), 1);
+var validateTypeElements = (element) => {
+  var _a;
+  let validation = "";
+  let typeElement = element;
+  if (element.type == "textField") {
+    validation = "textField";
+    typeElement = element;
+  } else if (import_react11.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCtextField") {
+    validation = "textField";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "textArea") {
+    validation = "textArea";
+    typeElement = element;
+  } else if (import_react11.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCtextArea") {
+    validation = "textArea";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "dateRange") {
+    validation = "dateRange";
+    typeElement = element;
+  } else if (import_react11.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCDateRange") {
+    validation = "dateRange";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "autocomplete") {
+    validation = "autocomplete";
+    typeElement = element;
+  } else if (import_react11.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCAutocomplete") {
+    validation = "autocomplete";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.typeFormat == "multiselect") {
+    validation = "multiselect";
+    typeElement = element;
+  } else if (import_react11.default.isValidElement(element == null ? void 0 : element.component) && element.component.props && ((_a = element == null ? void 0 : element.component) == null ? void 0 : _a.props).typeFormat == "multiselect") {
+    validation = "multiselect";
+    typeElement = element == null ? void 0 : element.component.props;
+  } else if (element.type == "select") {
+    validation = "select";
+    typeElement = element;
+  } else if (import_react11.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name == "SCSelect") {
+    validation = "select";
+    typeElement = element == null ? void 0 : element.component.props;
   }
+  return {
+    validation,
+    element: typeElement
+  };
 };
 
 // src/Components/Drawer/SCDrawer.tsx
@@ -1225,16 +1815,42 @@ function SCDrawer({
   anchor = "left",
   width,
   //Funcionales
-  open
+  open,
+  setOpen,
+  chipFilters
 }) {
   var _a, _b;
-  const [drawerOpen, setDrawerOpen] = import_react8.default.useState(open);
-  const [toast, setToast] = import_react8.default.useState(null);
+  const scrollRef = (0, import_react12.useRef)(null);
+  const [drawerOpen, setDrawerOpen] = import_react12.default.useState(open);
+  const [toast, setToast] = import_react12.default.useState(null);
+  const [stateChipFilters, setChipFilters] = import_react12.default.useState(false);
+  const [textFilters, setTextFilters] = import_react12.default.useState([]);
+  (0, import_react12.useEffect)(() => {
+    if (chipFilters != void 0) {
+      if (chipFilters.length > 0) {
+        setTextFilters([]);
+        inputValidation();
+      }
+    }
+  }, [chipFilters]);
+  (0, import_react12.useEffect)(() => {
+    if (open) {
+      toggleDrawer(true);
+    } else {
+      handleDrawerClose();
+    }
+  }, [open]);
   const handleDrawerClose = () => {
     setDrawerOpen(false);
+    if (setOpen) {
+      setOpen(false);
+    }
   };
   const toggleDrawer = (newOpen) => () => {
     setDrawerOpen(newOpen);
+    if (setOpen) {
+      setOpen(true);
+    }
   };
   const ButtonIcon = getIcon2(buttonDrawer == null ? void 0 : buttonDrawer.icon);
   const setToastWithDelay = (toastContent) => {
@@ -1243,39 +1859,179 @@ function SCDrawer({
       setToast(toastContent);
     }, 10);
   };
-  const inputValidation = () => validateInputs(arrayElements, setToastWithDelay, handleDrawerClose);
-  const clean = () => {
-    arrayElements.forEach((element, index) => {
-      var _a2, _b2, _c, _d, _e, _f, _g, _h;
-      if (element.setState || import_react8.default.isValidElement(element == null ? void 0 : element.component) && ((_a2 = element.component.props) == null ? void 0 : _a2.setState)) {
-        if (element.type === "textField" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCtextField" || (element.type === "textArea" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCtextArea")) {
-          element.setState != void 0 ? element.setState("") : null;
-          import_react8.default.isValidElement(element == null ? void 0 : element.component) && ((_b2 = element.component.props) == null ? void 0 : _b2.setState) && ((_d = (_c = element == null ? void 0 : element.component) == null ? void 0 : _c.props) == null ? void 0 : _d.setState(""));
-        } else if (element.type === "dateRange" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCDateRange") {
-          element.setState != void 0 ? element.setState([null, null]) : null;
-          import_react8.default.isValidElement(element == null ? void 0 : element.component) && typeof ((_e = element.component.props) == null ? void 0 : _e.setState) === "function" && element.component.props.setState([null, null]);
-        } else {
-          if (element.type == "autocomplete" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCAutocomplete" || (element.typeFormat == "multiselect" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.props && ((_f = element == null ? void 0 : element.component) == null ? void 0 : _f.props).typeFormat == "multiselect")) {
-            element.setState != void 0 ? element.setState({ hiddenValue: [], textValue: [] }) : null;
-            import_react8.default.isValidElement(element == null ? void 0 : element.component) && typeof ((_g = element.component.props) == null ? void 0 : _g.setState) === "function" && element.component.props.setState({ hiddenValue: [], textValue: [] });
+  const inputValidation = () => {
+    var _a2, _b2, _c, _d;
+    if (chipFilters != void 0 && chipFilters.length > 0) {
+      if (chipFilters && chipFilters.length > 0) {
+        arrayElements.forEach((arrayElement) => {
+          var _a3, _b3, _c2;
+          const { validation, element: typeElement } = validateTypeElements(arrayElement);
+          let currentValue = "";
+          if (validation === "dateRange") {
+            if (typeElement.state && typeElement.state[0] && typeElement.state[1]) {
+              currentValue = `${(_a3 = typeElement.state[0]) == null ? void 0 : _a3.format("DD/MM/YYYY")} - ${(_b3 = typeElement.state[1]) == null ? void 0 : _b3.format("DD/MM/YYYY")}`;
+            }
+          } else {
+            currentValue = ((_c2 = typeElement.state) == null ? void 0 : _c2.textValue) !== void 0 ? String(typeElement.state.textValue).trim() : String(typeElement.state).trim();
+          }
+          chipFilters.forEach((chipFilter) => {
+            const chipValue = String(chipFilter).trim();
+            if (currentValue === chipValue && currentValue !== "" && currentValue !== ",") {
+              setTextFilters((prevFilters) => {
+                const newFilter = { value: currentValue, arrayElement: typeElement };
+                const existingFilterIndex = prevFilters.findIndex(
+                  (filter) => filter.arrayElement.label === arrayElement.label
+                );
+                if (existingFilterIndex !== -1) {
+                  const updatedFilters = [...prevFilters];
+                  updatedFilters[existingFilterIndex] = newFilter;
+                  return updatedFilters;
+                } else {
+                  return [...prevFilters, newFilter];
+                }
+              });
+            }
+          });
+        });
+      }
+    } else {
+      const newFiltersToAdd = [];
+      for (let i = 0; i < arrayElements.length; i++) {
+        const element = arrayElements[i];
+        const { validation, element: typeElement } = validateTypeElements(element);
+        const textValue = ((_a2 = typeElement.state) == null ? void 0 : _a2.textValue) !== void 0 ? String((_b2 = typeElement.state) == null ? void 0 : _b2.textValue) : String(typeElement.state);
+        if (textValue.trim() !== "" && textValue.trim() !== ",") {
+          let newFilter;
+          switch (validation) {
+            case "dateRange":
+              const values = `${(_c = typeElement.state[0]) == null ? void 0 : _c.format("DD/MM/YYYY")} - ${(_d = typeElement.state[1]) == null ? void 0 : _d.format("DD/MM/YYYY")}`;
+              newFilter = { value: values, arrayElement: typeElement };
+              break;
+            default:
+              newFilter = { value: textValue, arrayElement: typeElement };
+              break;
+          }
+          const existingFilterByLabel = newFiltersToAdd.find(
+            (filter) => filter.arrayElement.label === element.label
+          );
+          if (existingFilterByLabel) {
+            existingFilterByLabel.value = newFilter.value;
+            existingFilterByLabel.arrayElement = newFilter.arrayElement;
           } else {
-            element.setState != void 0 ? element.setState({ hiddenValue: "-1", textValue: "" }) : null;
-            import_react8.default.isValidElement(element == null ? void 0 : element.component) && typeof ((_h = element.component.props) == null ? void 0 : _h.setState) === "function" && element.component.props.setState({ hiddenValue: "-1", textValue: "" });
+            newFiltersToAdd.push(newFilter);
           }
         }
       }
-    });
-  };
-  const actionsA = actions == false ? false : actions != void 0 ? actions : [{ text: "Aplicar filtros", fn: inputValidation }, { text: "Limpiar filtros", fn: clean }];
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, toast && /* @__PURE__ */ import_react8.default.createElement(SCToastNotification, __spreadValues({}, toast)), (buttonDrawer == null ? void 0 : buttonDrawer.type) == "chip" ? /* @__PURE__ */ import_react8.default.createElement(
-    import_material7.Chip,
+      setTextFilters((prevFilters) => {
+        let updatedFilters = [...prevFilters];
+        newFiltersToAdd.forEach((newFilter) => {
+          const existingFilterIndex = updatedFilters.findIndex(
+            (filter) => filter.arrayElement.label === newFilter.arrayElement.label
+          );
+          if (existingFilterIndex !== -1) {
+            updatedFilters[existingFilterIndex] = newFilter;
+          } else {
+            updatedFilters.push(newFilter);
+          }
+        });
+        return updatedFilters;
+      });
+      validateInputs(arrayElements, setToastWithDelay, handleDrawerClose, setChipFilters, setTextFilters);
+    }
+  };
+  const resetElementByType = (originalElement, validation, typeElement) => {
+    let defaultValue;
+    switch (validation) {
+      case "textField":
+      case "textArea":
+        defaultValue = "";
+        break;
+      case "dateRange":
+        defaultValue = [null, null];
+        break;
+      case "multiselect":
+        defaultValue = { hiddenValue: [], textValue: [] };
+        break;
+      default:
+        defaultValue = { hiddenValue: "-1", textValue: "" };
+    }
+    if (typeElement.setState) {
+      typeElement.setState(defaultValue);
+    }
+  };
+  const cleanFilters = () => {
+    arrayElements.forEach((element) => {
+      const { validation, element: typeElement } = validateTypeElements(element);
+      if (typeElement.setState) {
+        resetElementByType(element, validation, typeElement);
+      }
+    });
+    setTextFilters([]);
+  };
+  const deleteFilter = (element) => {
+    const { validation, element: typeElement } = validateTypeElements(element);
+    if (typeElement.setState && shouldShowChips == true) {
+      resetElementByType(element, validation, typeElement);
+      setTextFilters(
+        (prevFilters) => prevFilters.filter((filter) => filter.arrayElement.label !== element.label)
+      );
+    }
+  };
+  const scroll = (offset) => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft += offset;
+    }
+  };
+  const hasActiveFilters = () => {
+    return arrayElements.some((arrayElement) => {
+      const { validation, element: typeElement } = validateTypeElements(arrayElement);
+      if (typeElement.state.textValue !== void 0) {
+        return String(typeElement.state.textValue).trim() !== "";
+      } else if (validation === "dateRange") {
+        return typeElement.state && typeElement.state[0] !== null && typeElement.state[1] !== null;
+      } else {
+        return String(typeElement.state).trim() !== "" && String(typeElement.state).trim() !== ",";
+      }
+    });
+  };
+  const shouldShowChips = chipFilters != void 0 && chipFilters.length > 0 ? true : stateChipFilters === true && hasActiveFilters();
+  const actionsA = actions == false ? false : actions != void 0 ? actions : [{ text: "Aplicar filtros", fn: inputValidation }, { text: "Limpiar filtros", fn: cleanFilters }];
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, toast && /* @__PURE__ */ import_react12.default.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ import_react12.default.createElement(import_Grid23.default, { container: true, justifyContent: "flex-start", flexWrap: "nowrap", alignItems: "center", sx: { width: "100%" } }, shouldShowChips && /* @__PURE__ */ import_react12.default.createElement(import_material9.Box, { display: "flex", alignItems: "center", sx: { maxWidth: "78%" } }, /* @__PURE__ */ import_react12.default.createElement(import_material9.IconButton, { onClick: () => scroll(-150), size: "small" }, /* @__PURE__ */ import_react12.default.createElement(import_ArrowBackIos.default, { fontSize: "small" })), /* @__PURE__ */ import_react12.default.createElement(
+    import_material9.Box,
+    {
+      ref: scrollRef,
+      gap: 0.3,
+      sx: {
+        display: "flex",
+        overflowX: "auto",
+        scrollBehavior: "smooth",
+        "&::-webkit-scrollbar": { display: "none" }
+      }
+    },
+    textFilters == null ? void 0 : textFilters.map((chipData, index) => /* @__PURE__ */ import_react12.default.createElement(
+      import_material9.Chip,
+      __spreadProps(__spreadValues({
+        key: index,
+        label: chipData.value
+      }, chipData.arrayElement.required == false || chipData.arrayElement.required == void 0 ? { onDelete: () => deleteFilter(chipData.arrayElement) } : {}), {
+        color: "default",
+        variant: "filled",
+        size: "small",
+        sx: {
+          flexShrink: 0,
+          minWidth: "auto"
+        }
+      })
+    ))
+  ), /* @__PURE__ */ import_react12.default.createElement(import_material9.IconButton, { onClick: () => scroll(150), size: "small" }, /* @__PURE__ */ import_react12.default.createElement(import_ArrowForwardIos.default, { fontSize: "small" }))), (buttonDrawer == null ? void 0 : buttonDrawer.type) == "chip" ? /* @__PURE__ */ import_react12.default.createElement(
+    import_material9.Chip,
     __spreadProps(__spreadValues({
       onClick: toggleDrawer(true),
       color: buttonDrawer == null ? void 0 : buttonDrawer.color,
       variant: (buttonDrawer == null ? void 0 : buttonDrawer.variant) == "contained" ? "filled" : "outlined",
       label: (_a = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _a : "",
-      icon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0,
-      deleteIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0
+      icon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" && ButtonIcon ? /* @__PURE__ */ import_react12.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0,
+      deleteIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react12.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0
     }, (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? { onDelete: () => {
     } } : {}), {
       sx: {
@@ -1285,8 +2041,8 @@ function SCDrawer({
         textTransform: "capitalize"
       }
     })
-  ) : /* @__PURE__ */ import_react8.default.createElement(
-    import_material7.Button,
+  ) : /* @__PURE__ */ import_react12.default.createElement(
+    import_material9.Button,
     {
       "data-testid": "test-buttonDrawer",
       sx: { textTransform: "capitalize" },
@@ -1294,12 +2050,12 @@ function SCDrawer({
       onClick: toggleDrawer(true),
       size: "small",
       variant: (buttonDrawer == null ? void 0 : buttonDrawer.variant) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.variant : "text",
-      startIcon: ((buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" || !(buttonDrawer == null ? void 0 : buttonDrawer.iconPosition)) && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : null,
-      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : null
+      startIcon: ((buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" || !(buttonDrawer == null ? void 0 : buttonDrawer.iconPosition)) && ButtonIcon ? /* @__PURE__ */ import_react12.default.createElement(ButtonIcon, { fontSize: "small" }) : null,
+      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react12.default.createElement(ButtonIcon, { fontSize: "small" }) : null
     },
     (_b = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _b : ""
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    import_material7.Drawer,
+  )), /* @__PURE__ */ import_react12.default.createElement(
+    import_material9.Drawer,
     {
       open: drawerOpen,
       onClose: toggleDrawer(false),
@@ -1312,15 +2068,15 @@ function SCDrawer({
         }
       }
     },
-    /* @__PURE__ */ import_react8.default.createElement(import_material7.Stack, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react8.default.createElement(import_Grid23.default, { container: true, sx: { backgroundColor: "primary.50", alignItems: "center", height: "42px", textAlign: "left", padding: "8px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ import_react8.default.createElement(import_material7.IconButton, { onClick: handleDrawerClose }, /* @__PURE__ */ import_react8.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))), /* @__PURE__ */ import_react8.default.createElement(import_material7.Stack, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
+    /* @__PURE__ */ import_react12.default.createElement(import_material9.Stack, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react12.default.createElement(import_Grid23.default, { container: true, sx: { backgroundColor: "primary.50", alignItems: "center", height: "42px", textAlign: "left", padding: "8px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ import_react12.default.createElement(import_material9.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ import_react12.default.createElement(import_material9.IconButton, { onClick: handleDrawerClose }, /* @__PURE__ */ import_react12.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))), /* @__PURE__ */ import_react12.default.createElement(import_material9.Stack, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
       var _a2, _b2, _c, _d, _e, _f;
-      return /* @__PURE__ */ import_react8.default.createElement(
-        import_material7.Box,
+      return /* @__PURE__ */ import_react12.default.createElement(
+        import_material9.Box,
         {
           key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b2 = arrayElement.label) != null ? _b2 : ""}${index}`,
           sx: { width: "100%" }
         },
-        arrayElement.component ? /* @__PURE__ */ import_react8.default.createElement(import_material7.Stack, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ import_react8.default.createElement(
+        arrayElement.component ? /* @__PURE__ */ import_react12.default.createElement(import_material9.Stack, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ import_react12.default.createElement(
           SCTextField,
           {
             title: arrayElement.title,
@@ -1346,7 +2102,7 @@ function SCDrawer({
             onBlur: arrayElement.onBlur,
             onKeyDown: arrayElement.onKeyDown
           }
-        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ import_react12.default.createElement(
           SCTextArea,
           {
             title: arrayElement.title,
@@ -1365,7 +2121,7 @@ function SCDrawer({
             state: arrayElement.state || "",
             onBlur: arrayElement.onBlur
           }
-        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ import_react12.default.createElement(
           SCAutocomplete,
           {
             label: arrayElement.label,
@@ -1383,7 +2139,7 @@ function SCDrawer({
             state: arrayElement.state || "",
             inputChange: arrayElement.inputChange
           }
-        ) : arrayElement.type === "select" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "select" ? /* @__PURE__ */ import_react12.default.createElement(
           SCSelect,
           {
             label: arrayElement.label,
@@ -1392,7 +2148,6 @@ function SCDrawer({
             width: arrayElement.width,
             size: arrayElement.size,
             variant: arrayElement.variant,
-            deleteType: arrayElement.deleteType,
             required: arrayElement.required,
             disabled: arrayElement.disabled,
             background: arrayElement.background,
@@ -1400,7 +2155,7 @@ function SCDrawer({
             setState: arrayElement.setState,
             state: arrayElement.state || ""
           }
-        ) : arrayElement.type === "dateRange" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "dateRange" ? /* @__PURE__ */ import_react12.default.createElement(
           SCDateRange,
           {
             labelDateInitial: arrayElement.labelDateInitial,
@@ -1413,7 +2168,7 @@ function SCDrawer({
           }
         ) : null
       );
-    })), actionsA != void 0 && actionsA != false ? Array.isArray(actionsA) && (actionsA == null ? void 0 : actionsA.length) > 0 ? /* @__PURE__ */ import_react8.default.createElement(
+    })), actionsA != void 0 && actionsA != false ? Array.isArray(actionsA) && (actionsA == null ? void 0 : actionsA.length) > 0 ? /* @__PURE__ */ import_react12.default.createElement(
       import_Grid23.default,
       {
         sx: { borderTop: 1, borderColor: "#1018403B" },
@@ -1425,8 +2180,8 @@ function SCDrawer({
         justifyContent: actionsA.length > 1 ? "space-between" : !anchor && anchor != "right" ? "flex-end" : "flex-start",
         flexDirection: anchor != "right" ? "row-reverse" : "row"
       },
-      actionsA.map((btn, index) => /* @__PURE__ */ import_react8.default.createElement(
-        import_material7.Button,
+      actionsA.map((btn, index) => /* @__PURE__ */ import_react12.default.createElement(
+        import_material9.Button,
         {
           key: index,
           variant: index === 0 || actionsA.length < 2 ? "contained" : "text",
@@ -1442,207 +2197,61 @@ function SCDrawer({
 }
 
 // src/Components/FooterAction/FooterAction.tsx
-var import_react9 = __toESM(require("react"), 1);
-var import_material8 = require("@mui/material");
+var import_react13 = __toESM(require("react"), 1);
+var import_material10 = require("@mui/material");
 var FooterAction = ({
   leftContent,
   rightContent,
   label,
   variant
 }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(
-    import_material8.AppBar,
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_material10.AppBar,
     {
       color: "inherit",
       sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
     },
-    /* @__PURE__ */ import_react9.default.createElement(
-      import_material8.Toolbar,
+    /* @__PURE__ */ import_react13.default.createElement(
+      import_material10.Toolbar,
       {
         id: "footer-toolbar",
         sx: { gap: 1.5, minHeight: "50px !important" }
       },
       leftContent,
-      /* @__PURE__ */ import_react9.default.createElement(import_material8.Box, { flexGrow: 1 }),
-      label && /* @__PURE__ */ import_react9.default.createElement(import_material8.Typography, { variant: "body2", color: "text.secondary" }, label),
+      /* @__PURE__ */ import_react13.default.createElement(import_material10.Box, { flexGrow: 1 }),
+      label && /* @__PURE__ */ import_react13.default.createElement(import_material10.Typography, { variant: "body2", color: "text.secondary" }, label),
       rightContent
     )
   );
 };
 
-// src/Components/Modal/Helpers/Data.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_icons_material5 = require("@mui/icons-material");
-var modalStateConfig = {
-  info: {
-    color: "info",
-    defaultDescription: "Se [sincronizar\xE1n] los datos trabajados en modo offline y se [subir\xE1n] a los servidores.",
-    icon: /* @__PURE__ */ import_react10.default.createElement(import_icons_material5.Info, { color: "info", fontSize: "medium" })
-  },
-  delete: {
-    color: "delete",
-    defaultDescription: "[Elemento espec\xEDfico] [dejar\xE1 de existir en todos los lugares donde est\xE9 en uso]. Esta acci\xF3n es irreversible.",
-    icon: /* @__PURE__ */ import_react10.default.createElement(import_icons_material5.Info, { color: "error", fontSize: "medium" })
-  },
-  warning: {
-    color: "warning",
-    defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
-    icon: /* @__PURE__ */ import_react10.default.createElement(import_icons_material5.Warning, { color: "warning", fontSize: "medium" })
-  }
-};
-
-// src/Components/Modal/Helpers/Utils.tsx
-var MuiIcons2 = __toESM(require("@mui/icons-material"), 1);
-var import_icons_material6 = require("@mui/icons-material");
-var getIconComponent2 = (iconName) => {
-  return iconName && MuiIcons2[iconName] ? MuiIcons2[iconName] : import_icons_material6.FilterListOutlined;
-};
-var getModalColor = (state) => {
-  var _a;
-  const colors = {
-    info: "info.100",
-    delete: "error.100",
-    warning: "warning.100"
-  };
-  return (_a = colors[state]) != null ? _a : "warning.100";
-};
-var getButtonColor = (state) => {
-  var _a;
-  const colorMap = {
-    info: "info",
-    delete: "error",
-    warning: "warning"
-  };
-  return (_a = colorMap[state]) != null ? _a : "info";
-};
-
-// src/Components/Modal/SCModal.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_material9 = require("@mui/material");
-var import_icons_material7 = require("@mui/icons-material");
-
-// src/generales/capitalize.tsx
-function capitalize(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1);
-}
-
-// src/Components/Modal/SCModal.tsx
-var SCModal = ({
-  buttonModal,
-  state = "info",
-  open,
-  title,
-  description,
-  action
-}) => {
-  var _a, _b, _c, _d, _e;
-  const [openModal, setOpenModal] = (0, import_react11.useState)(open != null ? open : false);
-  (0, import_react11.useEffect)(() => {
-    if (open !== void 0) {
-      setOpenModal(open);
-    }
-  }, [open]);
-  const Icon = (0, import_react11.useMemo)(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
-  const handleClose = (0, import_react11.useCallback)(() => setOpenModal(false), []);
-  const toggleModal = (newOpen) => () => setOpenModal(newOpen);
-  const prevAction = (0, import_react11.useMemo)(
-    () => action != null ? action : [{ text: "Cancelar", fn: handleClose }, { text: "Consultar", fn: () => {
-    } }],
-    [action, handleClose]
-  );
-  const { icon, defaultDescription } = modalStateConfig[state];
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
-    import_material9.Button,
-    {
-      "data-testid": "test-buttonModal",
-      color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
-      onClick: toggleModal(true),
-      variant: (_b = buttonModal == null ? void 0 : buttonModal.variant) != null ? _b : "text",
-      size: (_c = buttonModal == null ? void 0 : buttonModal.size) != null ? _c : "small",
-      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ import_react11.default.createElement(Icon, null),
-      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ import_react11.default.createElement(Icon, null)
-    },
-    capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
-  ), /* @__PURE__ */ import_react11.default.createElement(import_material9.Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react11.default.createElement(
-    import_material9.Box,
-    {
-      sx: {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-        width: 400,
-        bgcolor: "background.paper",
-        borderRadius: 1,
-        boxShadow: 24
-      }
-    },
-    /* @__PURE__ */ import_react11.default.createElement(import_material9.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Stack, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Box, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ import_react11.default.createElement(import_material9.Typography, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ import_react11.default.createElement(import_material9.IconButton, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ import_react11.default.createElement(import_icons_material7.Close, { color: "action" }))),
-    /* @__PURE__ */ import_react11.default.createElement(import_material9.Stack, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Typography, { variant: "body1" }, description || defaultDescription)),
-    action && /* @__PURE__ */ import_react11.default.createElement(
-      import_material9.Stack,
-      {
-        id: "Action",
-        direction: "row",
-        gap: 1,
-        p: 1,
-        justifyContent: "end",
-        bgcolor: "grey.50",
-        sx: { borderRadius: 1 }
-      },
-      /* @__PURE__ */ import_react11.default.createElement(
-        import_material9.Button,
-        {
-          color: "inherit",
-          variant: "text",
-          onClick: handleClose,
-          size: "small"
-        },
-        capitalize("cancelar")
-      ),
-      /* @__PURE__ */ import_react11.default.createElement(
-        import_material9.Button,
-        {
-          "data-testid": "test-aceptar",
-          color: getButtonColor(state),
-          variant: "contained",
-          onClick: (_e = action[0]) == null ? void 0 : _e.fn,
-          disabled: false,
-          size: "small"
-        },
-        capitalize(action[0].text)
-      )
-    )
-  )));
-};
-
 // src/Components/MultiSelect/MultiSelect.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_material10 = require("@mui/material");
-var import_icons_material9 = require("@mui/icons-material");
+var import_react16 = __toESM(require("react"), 1);
+var import_material11 = require("@mui/material");
+var import_icons_material10 = require("@mui/icons-material");
 
 // src/Components/MultiSelect/helpers/useHandlers.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 function useMultiSelectHandlers() {
-  const [anchorEl, setAnchorEl] = (0, import_react12.useState)(null);
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const [selectedItems, setSelectedItems] = (0, import_react12.useState)([]);
-  const [filterValue, setFilterValue] = (0, import_react12.useState)("");
-  const handleOpen = (0, import_react12.useCallback)((e) => {
+  const [anchorEl, setAnchorEl] = (0, import_react14.useState)(null);
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [selectedItems, setSelectedItems] = (0, import_react14.useState)([]);
+  const [filterValue, setFilterValue] = (0, import_react14.useState)("");
+  const handleOpen = (0, import_react14.useCallback)((e) => {
     setAnchorEl(e.currentTarget);
     setOpen(true);
   }, []);
-  const handleClose = (0, import_react12.useCallback)(() => {
+  const handleClose = (0, import_react14.useCallback)(() => {
     setAnchorEl(null);
     setOpen(false);
   }, []);
-  const handleFilterChange = (0, import_react12.useCallback)(
+  const handleFilterChange = (0, import_react14.useCallback)(
     (e) => {
       setFilterValue(e.target.value);
     },
     []
   );
-  const handleCheckboxToggle = (0, import_react12.useCallback)((item) => {
+  const handleCheckboxToggle = (0, import_react14.useCallback)((item) => {
     setSelectedItems(
       (prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
     );
@@ -1663,21 +2272,21 @@ function useMultiSelectHandlers() {
 
 // src/Components/MultiSelect/helpers/Utils.tsx
 var MuiIcons3 = __toESM(require("@mui/icons-material"), 1);
-var import_icons_material8 = require("@mui/icons-material");
+var import_icons_material9 = require("@mui/icons-material");
 function getIconMultiSelect(name) {
-  return name in MuiIcons3 ? MuiIcons3[name] : import_icons_material8.FilterListOutlined;
+  return name in MuiIcons3 ? MuiIcons3[name] : import_icons_material9.FilterListOutlined;
 }
 
 // src/Components/MultiSelect/helpers/useFilteredItems.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
-  const filteredItems = (0, import_react13.useMemo)(
+  const filteredItems = (0, import_react15.useMemo)(
     () => items.filter(
       (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
     ),
     [items, filterValue, getItemLabel]
   );
-  const sortedItems = (0, import_react13.useMemo)(() => {
+  const sortedItems = (0, import_react15.useMemo)(() => {
     return [
       ...filteredItems.filter((item) => selectedItems.includes(item)),
       ...filteredItems.filter((item) => !selectedItems.includes(item))
@@ -1711,16 +2320,16 @@ function MultiSelect({
     handleCheckboxToggle,
     setOpen
   } = useMultiSelectHandlers();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (open !== void 0) {
       setOpen(open);
     }
   }, [open, setOpen]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setSelectedItems([]);
   }, [items, setSelectedItems]);
   const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
-  const Icon = (0, import_react14.useMemo)(() => {
+  const Icon = (0, import_react16.useMemo)(() => {
     var _a2;
     return getIconMultiSelect((_a2 = button == null ? void 0 : button.icon) != null ? _a2 : "FilterListOutlined");
   }, [button == null ? void 0 : button.icon]);
@@ -1734,20 +2343,20 @@ function MultiSelect({
     { text: "Aplicar", fn: () => {
     } }
   ];
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
-    import_material10.Button,
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(
+    import_material11.Button,
     {
       "test-id": "multiselect-button",
       color: (_a = button == null ? void 0 : button.color) != null ? _a : "primary",
       onClick: handleOpen,
       variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
       size: "small",
-      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ import_react14.default.createElement(Icon, null) : null,
-      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ import_react14.default.createElement(Icon, null) : null
+      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ import_react16.default.createElement(Icon, null) : null,
+      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ import_react16.default.createElement(Icon, null) : null
     },
     capitalize(textButton != null ? textButton : "MultiSelect")
-  ), /* @__PURE__ */ import_react14.default.createElement(
-    import_material10.Popover,
+  ), /* @__PURE__ */ import_react16.default.createElement(
+    import_material11.Popover,
     {
       elevation: 8,
       anchorEl,
@@ -1755,8 +2364,8 @@ function MultiSelect({
       open: openMultiselect,
       onClose: () => setOpen(false)
     },
-    /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ import_react14.default.createElement(import_material10.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ import_react14.default.createElement(
-      import_material10.TextField,
+    /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ import_react16.default.createElement(import_material11.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ import_react16.default.createElement(
+      import_material11.TextField,
       {
         "data-testid": "multiselect-input",
         fullWidth: true,
@@ -1767,29 +2376,29 @@ function MultiSelect({
         onChange: handleFilterChange,
         slotProps: {
           input: {
-            endAdornment: /* @__PURE__ */ import_react14.default.createElement(import_material10.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react14.default.createElement(import_icons_material9.SearchOutlined, { fontSize: "small" }))
+            endAdornment: /* @__PURE__ */ import_react16.default.createElement(import_material11.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react16.default.createElement(import_icons_material10.SearchOutlined, { fontSize: "small" }))
           }
         }
       }
-    ))), /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ import_react14.default.createElement(import_material10.MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ import_react14.default.createElement(import_material10.ListItemIcon, null, /* @__PURE__ */ import_react14.default.createElement(import_material10.Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ import_react14.default.createElement(
-      import_material10.MenuItem,
+    ))), /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ import_react16.default.createElement(import_material11.MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ import_react16.default.createElement(import_material11.ListItemIcon, null, /* @__PURE__ */ import_react16.default.createElement(import_material11.Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ import_react16.default.createElement(
+      import_material11.MenuItem,
       {
         key: getItemLabel(item),
         dense,
         onClick: () => handleCheckboxToggle(item)
       },
-      /* @__PURE__ */ import_react14.default.createElement(import_material10.ListItemIcon, null, /* @__PURE__ */ import_react14.default.createElement(
-        import_material10.Checkbox,
+      /* @__PURE__ */ import_react16.default.createElement(import_material11.ListItemIcon, null, /* @__PURE__ */ import_react16.default.createElement(
+        import_material11.Checkbox,
         {
           checked: selectedItems.includes(item),
           color: "primary"
         }
       )),
       getItemLabel(item)
-    )) : /* @__PURE__ */ import_react14.default.createElement(import_material10.MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
+    )) : /* @__PURE__ */ import_react16.default.createElement(import_material11.MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
       var _a2;
-      return /* @__PURE__ */ import_react14.default.createElement(
-        import_material10.Button,
+      return /* @__PURE__ */ import_react16.default.createElement(
+        import_material11.Button,
         {
           key: index,
           variant: index === 0 || resolvedActions.length < 2 ? "text" : "contained",
@@ -1804,8 +2413,8 @@ function MultiSelect({
 }
 
 // src/Components/PageHeader/PageHeader.tsx
-var import_react15 = __toESM(require("react"), 1);
-var import_material11 = require("@mui/material");
+var import_react17 = __toESM(require("react"), 1);
+var import_material12 = require("@mui/material");
 var PageHeader = ({
   title,
   subtitle,
@@ -1814,8 +2423,8 @@ var PageHeader = ({
   fixed,
   shadow = true
 }) => {
-  return /* @__PURE__ */ import_react15.default.createElement(
-    import_material11.Stack,
+  return /* @__PURE__ */ import_react17.default.createElement(
+    import_material12.Stack,
     {
       "data-testid": "main-container",
       justifyContent: "center",
@@ -1826,13 +2435,13 @@ var PageHeader = ({
       zIndex: 10,
       sx: { boxShadow: shadow ? (theme) => theme.shadows[1] : "none" }
     },
-    /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ import_react15.default.createElement(import_material11.Typography, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ import_react15.default.createElement(import_material11.Typography, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
+    /* @__PURE__ */ import_react17.default.createElement(import_material12.Stack, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Stack, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ import_react17.default.createElement(import_material12.Stack, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Typography, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ import_react17.default.createElement(import_material12.Typography, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ import_react17.default.createElement(import_material12.Stack, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
   );
 };
 
 // src/Components/SCCalendarSwipeable.tsx
-var import_react16 = __toESM(require("react"), 1);
-var import_material12 = require("@mui/material");
+var import_react18 = __toESM(require("react"), 1);
+var import_material13 = require("@mui/material");
 var import_Grid24 = __toESM(require("@mui/material/Grid2"), 1);
 var import_AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
 var import_LocalizationProvider2 = require("@mui/x-date-pickers/LocalizationProvider");
@@ -1850,14 +2459,14 @@ var SCCalendarSwipeable = ({
   state
 }) => {
   let convertFecha;
-  const [fecha, setFecha] = (0, import_react16.useState)(/* @__PURE__ */ new Date());
-  const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react16.useState)();
-  const [stateVal, setstateVal] = import_react16.default.useState(/* @__PURE__ */ new Date());
-  const [openCalendar, setOpenCalendar] = import_react16.default.useState(false);
+  const [fecha, setFecha] = (0, import_react18.useState)(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react18.useState)();
+  const [stateVal, setstateVal] = import_react18.default.useState(/* @__PURE__ */ new Date());
+  const [openCalendar, setOpenCalendar] = import_react18.default.useState(false);
   const hoy = /* @__PURE__ */ new Date();
   const inicioSemana = (0, import_date_fns.startOfWeek)(fecha, { weekStartsOn: 0 });
   const diasSemana = Array.from({ length: 7 }, (_, i) => (0, import_date_fns.addDays)(inicioSemana, i));
-  import_react16.default.useEffect(() => {
+  import_react18.default.useEffect(() => {
     if (fecha != null) {
       handleConvertFecha(fecha);
     }
@@ -1876,12 +2485,8 @@ var SCCalendarSwipeable = ({
     setOpenCalendar(newOpen);
   };
   const locale = __spreadValues({}, import_locale.es);
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react16.default.createElement(import_Grid24.default, { container: true, gap: 0.5, sx: {
-    justifyContent: "space-between",
-    padding: "12px 0px",
-    background: "transparent"
-  } }, diasSemana.map((dia) => /* @__PURE__ */ import_react16.default.createElement(import_Grid24.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react16.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react16.default.createElement(
-    import_material12.Box,
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react18.default.createElement(import_material13.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react18.default.createElement(import_material13.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react18.default.createElement(import_Grid24.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react18.default.createElement(import_Grid24.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react18.default.createElement(import_material13.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react18.default.createElement(import_material13.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react18.default.createElement(
+    import_material13.Box,
     {
       onClick: () => setFecha(dia),
       sx: {
@@ -1896,8 +2501,8 @@ var SCCalendarSwipeable = ({
         //height: '36px',
       }
     },
-    /* @__PURE__ */ import_react16.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: (0, import_date_fns.isSameDay)(dia, fecha) ? "white" : "#101840DE" } }, (0, import_date_fns.format)(dia, "d"))
-  )))), /* @__PURE__ */ import_react16.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react16.default.createElement(import_material12.IconButton, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ import_react16.default.createElement(import_KeyboardDoubleArrowDown.default, null))))) : /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react18.default.createElement(import_material13.Typography, { sx: { fontSize: "12px !important", color: (0, import_date_fns.isSameDay)(dia, fecha) ? "white" : "#101840DE" } }, (0, import_date_fns.format)(dia, "d"))
+  )))), /* @__PURE__ */ import_react18.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react18.default.createElement(import_material13.IconButton, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ import_react18.default.createElement(import_KeyboardDoubleArrowDown.default, null))))) : /* @__PURE__ */ import_react18.default.createElement(import_material13.Box, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ import_react18.default.createElement(
     import_StaticDatePicker.StaticDatePicker,
     {
       orientation: "landscape",
@@ -1907,17 +2512,17 @@ var SCCalendarSwipeable = ({
       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_react16.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react16.default.createElement(import_material12.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react16.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
+  ), /* @__PURE__ */ import_react18.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react18.default.createElement(import_material13.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react18.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
 };
 
 // src/Components/SCDataGrid.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_x_data_grid_pro = require("@mui/x-data-grid-pro");
 var import_x_license_pro2 = require("@mui/x-license-pro");
 var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"), 1);
 var import_KeyboardArrowUp = __toESM(require("@mui/icons-material/KeyboardArrowUp"), 1);
 var import_styles = require("@mui/material/styles");
-var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) => {
+function SCDataGridInitial({ data, columns, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) {
   import_x_license_pro2.LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
@@ -1928,45 +2533,80 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
     return Math.floor(Math.random() * 1e6);
   }
   const getTreeDataPaths = (row) => {
+    var _a, _b, _c;
+    const group1Value = groupColumns && ((_a = groupColumns(row)) == null ? void 0 : _a.valueGroup1);
+    const group2Value = groupColumns && ((_b = groupColumns(row)) == null ? void 0 : _b.valueGroup2);
+    const fieldValue = groupColumns && ((_c = groupColumns(row)) == null ? void 0 : _c.fieldFirstColumn);
     return [
-      row[groupColumns[0].split("[")[1].split("]")[0].trim()],
-      ...groupColumns.length > 2 ? [row[groupColumns[1].split("[")[1].split("]")[0].trim()]] : [],
-      `${row[groupColumns[groupColumns.length - 1].split("[")[1].split("]")[0].trim()].toString()}/${generateRandomId()}`
+      String(group1Value || ""),
+      ...group2Value ? [String(group2Value)] : [],
+      `${String(fieldValue || "")}/${generateRandomId()}`
     ];
   };
   const groupingColDefs = {
     field: "grouping",
-    headerName: groupColumns != void 0 ? groupColumns[groupColumns.length - 1].split("[").length == 2 ? groupColumns[groupColumns.length - 1].split("[")[0].trim() : "Agrupador" : "",
+    headerName: groupColumns ? groupColumns(data[0]).headerNameFirstColumn : "Agrupador",
     renderCell: (params) => {
-      var _a;
+      var _a, _b;
       let label = params.value.toString().includes("/") ? params.value.split("/")[0].toString() : params.value.toString();
-      const maxDepth = groupColumns ? groupColumns.length - 2 : 0;
-      if (groupColumns != void 0) {
+      let maxDepth = 0;
+      if (groupColumns && data.length > 0) {
+        const sampleItem = groupColumns(data[0]);
+        if (sampleItem.valueGroup1) maxDepth++;
+        if (sampleItem.valueGroup2) maxDepth++;
+        maxDepth = Math.max(0, maxDepth - 1);
+      }
+      if (groupColumns) {
         if (params.rowNode.depth === 0) {
-          const textBegin = groupColumns[0] ? groupColumns[0].split("[")[0].trim() : "";
-          const textEnd = groupColumns[0] ? groupColumns[0].split("]")[1].trim() : "";
-          const labelGrouping1 = `${textBegin} ${label} ${textEnd}`;
-          const fieldGrouping1 = groupColumns[0].split("[")[1].split("]")[0].trim();
-          const fieldGrouping2 = groupColumns[1].split("[")[1].split("]")[0].trim();
-          const subgroup1 = arrayRows.filter((r) => r[fieldGrouping1].toString() === label).map((r) => r[fieldGrouping2]);
+          let customLabel = label;
+          if (groupColumns) {
+            const originalItem = data.find(
+              (item) => {
+                var _a2;
+                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup1) === label;
+              }
+            );
+            if (originalItem) {
+              const itemValue = groupColumns(originalItem);
+              customLabel = itemValue.textGroup1 || label;
+            }
+          }
+          const subgroup1 = arrayRows.filter((r) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === label;
+          }).map((r) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup2);
+          });
           const groupedDataLength1 = subgroup1.filter((valor, indiceActual, arreglo) => arreglo.indexOf(valor) === indiceActual);
-          label = `${labelGrouping1} (${groupedDataLength1.length})`;
-        } else if (groupColumns.length > 2 && params.rowNode.depth === 1) {
-          const labelGrouping1 = (_a = params.api.getRowNode(params.rowNode.parent)) == null ? void 0 : _a.groupingKey;
-          const textBegin = groupColumns[1] ? groupColumns[1].split("[")[0] : "";
-          const textEnd = groupColumns[1] ? groupColumns[1].split("]")[1].trim() : "";
-          const labelGrouping2 = `${textBegin} ${label} ${textEnd}`;
-          const fieldGrouping1 = groupColumns[0].split("[")[1].split("]")[0].trim();
-          const fieldGrouping2 = groupColumns[1].split("[")[1].split("]")[0].trim();
+          label = `${customLabel} (${groupedDataLength1.length})`;
+        } else if (((_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup2) && params.rowNode.depth === 1) {
+          const labelGrouping1 = (_b = params.api.getRowNode(params.rowNode.parent)) == null ? void 0 : _b.groupingKey.toString();
+          let customLabel = label;
+          if (groupColumns) {
+            const originalItem = data.find(
+              (item) => {
+                var _a2;
+                return String((_a2 = groupColumns(item)) == null ? void 0 : _a2.valueGroup2) === label;
+              }
+            );
+            if (originalItem) {
+              const itemValue = groupColumns(originalItem);
+              customLabel = itemValue.textGroup2 || label;
+            }
+          }
           const groupedDataLength2 = arrayRows.filter(
-            (r) => r[fieldGrouping1] === labelGrouping1 && r[fieldGrouping2] === label
+            (r) => {
+              var _a2, _b2;
+              return groupColumns && String((_a2 = groupColumns(r)) == null ? void 0 : _a2.valueGroup1) === labelGrouping1 && groupColumns && String((_b2 = groupColumns(r)) == null ? void 0 : _b2.valueGroup2) === label;
+            }
           ).length;
-          label = `${labelGrouping2} (${groupedDataLength2})`;
+          label = `${customLabel} (${groupedDataLength2})`;
         } else {
           label = label;
         }
       }
-      return /* @__PURE__ */ import_react17.default.createElement(
+      return /* @__PURE__ */ import_react19.default.createElement(
         "div",
         {
           style: {
@@ -1983,7 +2623,7 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
             fontWeight: params.rowNode.type == "group" ? "400" : "300"
           }
         },
-        params.rowNode.type === "group" && /* @__PURE__ */ import_react17.default.createElement(
+        params.rowNode.type === "group" && /* @__PURE__ */ import_react19.default.createElement(
           "span",
           {
             style: {
@@ -1996,25 +2636,32 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
               params.api.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
             }
           },
-          params.rowNode.childrenExpanded ? /* @__PURE__ */ import_react17.default.createElement(import_KeyboardArrowUp.default, { fontSize: "small", color: "action" }) : /* @__PURE__ */ import_react17.default.createElement(import_KeyboardArrowDown.default, { fontSize: "small", color: "action" })
+          params.rowNode.childrenExpanded ? /* @__PURE__ */ import_react19.default.createElement(import_KeyboardArrowUp.default, { fontSize: "small", color: "action" }) : /* @__PURE__ */ import_react19.default.createElement(import_KeyboardArrowDown.default, { fontSize: "small", color: "action" })
         ),
         label
       );
     },
     colSpan: (params) => {
+      var _a, _b;
       const value = String(params);
-      const fieldGrouping1 = groupColumns[0].split("[")[1].split("]")[0].trim();
-      const fieldGrouping2 = groupColumns.length > 2 ? groupColumns[1].split("[")[1].split("]")[0].trim() : void 0;
+      const fieldGrouping1 = groupColumns ? (_a = groupColumns(data[0])) == null ? void 0 : _a.valueGroup1 : void 0;
+      const fieldGrouping2 = groupColumns ? (_b = groupColumns(data[0])) == null ? void 0 : _b.valueGroup2 : void 0;
       let agrupado1 = false;
       let agrupado2 = false;
       if (fieldGrouping1 != void 0) {
         agrupado1 = arrayRows.some(
-          (row) => String(row[fieldGrouping1]) === value
+          (row) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup1) === value;
+          }
         );
       }
       if (fieldGrouping2 != void 0) {
         agrupado2 = arrayRows.some(
-          (row) => String(row[fieldGrouping2]) === value
+          (row) => {
+            var _a2;
+            return groupColumns && String((_a2 = groupColumns(row)) == null ? void 0 : _a2.valueGroup2) === value;
+          }
         );
       }
       if (agrupado1 || agrupado2) {
@@ -2031,11 +2678,11 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
   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] = (0, import_react17.useState)(0);
-  const [pageSize, setPageSize] = (0, import_react17.useState)(rows);
-  const [arrayRows, setArrayRows] = (0, import_react17.useState)([]);
-  const [selectionModel, setSelectionModel] = (0, import_react17.useState)([]);
-  (0, import_react17.useEffect)(() => {
+  const [groupDataLenght, setGroupDataLengh] = (0, import_react19.useState)(0);
+  const [pageSize, setPageSize] = (0, import_react19.useState)(rows);
+  const [arrayRows, setArrayRows] = (0, import_react19.useState)([]);
+  const [selectionModel, setSelectionModel] = (0, import_react19.useState)([]);
+  (0, import_react19.useEffect)(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
     }
@@ -2091,7 +2738,7 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
       setSelectionModel([...newSelection]);
     }
   };
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, data && /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, data && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react19.default.createElement(
     import_x_data_grid_pro.DataGridPro,
     {
       apiRef,
@@ -2125,7 +2772,6 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
       },
       sx: {
         maxHeight: maxHeight ? `${maxHeight}px` : "none",
-        //overflow: 'auto',
         "& .MuiDataGrid-filler": {
           display: "none !important"
         },
@@ -2155,42 +2801,54 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
       }
     }
   ))));
-};
-var SCDataGrid = import_react17.default.memo(SCDataGridInitial, (prevProps, nextProps) => {
-  const isEqual = prevProps.data === nextProps.data && prevProps.columns === nextProps.columns && prevProps.groupColumns === nextProps.groupColumns && prevProps.rowsTable === nextProps.rowsTable && prevProps.checkboxSelection === nextProps.checkboxSelection && prevProps.width === nextProps.width && prevProps.maxHeight === nextProps.maxHeight && prevProps.density === nextProps.density;
+}
+var SCDataGrid = import_react19.default.memo(SCDataGridInitial, (prevProps, nextProps) => {
+  const isEqual = prevProps.rowsTable === nextProps.rowsTable && prevProps.checkboxSelection === nextProps.checkboxSelection && prevProps.width === nextProps.width && prevProps.maxHeight === nextProps.maxHeight && prevProps.density === nextProps.density;
   return isEqual;
 });
 
 // src/Components/EmptyState/EmptyState.tsx
-var import_react18 = __toESM(require("react"), 1);
-var import_material13 = require("@mui/material");
+var import_react24 = __toESM(require("react"), 1);
+var import_material14 = require("@mui/material");
 
-// src/assets/ImgEmptyState/create.svg
-var create_default = "./create-KZGO2OZA.svg";
+// src/assets/ImgEmptyState/create.tsx
+var import_react20 = __toESM(require("react"), 1);
+var Create = () => {
+  return /* @__PURE__ */ import_react20.default.createElement("svg", { width: "45", height: "41", viewBox: "0 0 45 41", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react20.default.createElement("g", { "clip-path": "url(#clip0_1283_39624)" }, /* @__PURE__ */ import_react20.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.4956 13.1869C44.4386 13.8714 43.8367 14.3801 43.1514 14.3231L39.9978 14.0608C39.3124 14.0038 38.8032 13.4027 38.8602 12.7182C38.9173 12.0336 39.5191 11.525 40.2044 11.582L43.3581 11.8443C44.0434 11.9013 44.5527 12.5024 44.4956 13.1869Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41.0393 1.01388C41.4429 1.57002 41.3187 2.34766 40.7619 2.75078L38.099 4.6787C37.5423 5.08182 36.7637 4.95777 36.3601 4.40163C35.9565 3.84548 36.0807 3.06785 36.6375 2.66473L39.3004 0.736804C39.8572 0.333685 40.6357 0.457736 41.0393 1.01388Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M36.6656 21.2361C36.1755 21.7179 36.1692 22.5054 36.6515 22.9949L38.9584 25.3363C39.4408 25.8258 40.2291 25.8321 40.7193 25.3503C41.2094 24.8685 41.2157 24.0811 40.7333 23.5915L38.4264 21.2502C37.9441 20.7606 37.1557 20.7543 36.6656 21.2361Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.504365 13.1869C0.561439 13.8714 1.16326 14.3801 1.84856 14.323L5.00224 14.0607C5.68755 14.0037 6.19683 13.4026 6.13976 12.7181C6.08268 12.0336 5.48087 11.5249 4.79556 11.5819L1.64188 11.8442C0.956574 11.9012 0.447291 12.5023 0.504365 13.1869Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.95913 1.01431C3.55554 1.57046 3.67974 2.34809 4.23653 2.75121L6.8994 4.67914C7.45619 5.08225 8.23473 4.9582 8.63832 4.40206C9.04191 3.84592 8.91771 3.06828 8.36092 2.66516L5.69805 0.737237C5.14126 0.334118 4.36272 0.458169 3.95913 1.01431Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.33389 21.236C8.82403 21.7178 8.83033 22.5053 8.34796 22.9949L6.04107 25.3362C5.5587 25.8257 4.77034 25.832 4.28021 25.3502C3.79008 24.8684 3.78378 24.081 4.26614 23.5914L6.57304 21.2501C7.0554 20.7605 7.84376 20.7542 8.33389 21.236Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { d: "M19.1448 37.3573H25.5804L25.1621 38.889C25.0636 39.2498 24.7356 39.5 24.3613 39.5H20.3638C19.9895 39.5 19.6615 39.2498 19.563 38.889L19.1448 37.3573Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { d: "M17.6534 35.3665C17.5381 34.8487 17.9326 34.3575 18.4637 34.3575H26.3983C26.9294 34.3575 27.3239 34.8487 27.2087 35.3665L26.9829 36.3814C26.8563 36.9504 26.351 37.3553 25.7674 37.3553H19.0946C18.511 37.3553 18.0057 36.9504 17.8791 36.3814L17.6534 35.3665Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react20.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.85423 13.9906C8.85423 6.60807 14.935 0.652473 22.3998 0.652473C29.8646 0.652473 35.9455 6.60807 35.9455 13.9906C35.9455 17.6153 34.4759 20.9015 32.0983 23.3022C31.9627 23.4392 31.8257 23.5745 31.6935 23.7052L31.6917 23.707C30.7961 24.5922 30.1385 25.2699 29.8494 26.1116C29.7242 26.4761 29.6012 27.1915 29.4988 28.0885C29.4002 28.9527 29.3306 29.8872 29.2854 30.6281C29.2099 31.864 28.1896 32.8547 26.9266 32.8547H17.8731C16.6101 32.8547 15.5898 31.864 15.5143 30.6281C15.469 29.8872 15.3995 28.9527 15.3009 28.0885C15.1985 27.1915 15.0755 26.4761 14.9503 26.1116C14.6612 25.2699 14.0036 24.5922 13.108 23.707L13.106 23.7051C12.9739 23.5744 12.837 23.4391 12.7014 23.3022C10.3238 20.9015 8.85423 17.6153 8.85423 13.9906ZM22.3998 2.85676C16.1214 2.85676 11.0611 7.85765 11.0611 13.9906C11.0611 17.0068 12.2813 19.7437 14.2703 21.752C14.3969 21.8798 14.526 22.0075 14.6602 22.1401C14.6831 22.1627 14.7062 22.1855 14.7294 22.2085C15.5402 23.0091 16.5655 24.0215 17.0377 25.3961C17.2505 26.0156 17.3925 26.9534 17.4936 27.8388C17.5983 28.757 17.6707 29.7342 17.7171 30.4939C17.723 30.59 17.8001 30.6504 17.8731 30.6504H26.9266C26.9996 30.6504 27.0767 30.59 27.0826 30.4939C27.129 29.7342 27.2013 28.757 27.3061 27.8388C27.4072 26.9534 27.5492 26.0156 27.762 25.3961C28.2342 24.0215 29.2594 23.0091 30.0702 22.2085C30.0935 22.1855 30.1166 22.1627 30.1395 22.1401C30.2737 22.0075 30.4028 21.8798 30.5294 21.752C32.5184 19.7437 33.7386 17.0068 33.7386 13.9906C33.7386 7.85765 28.6783 2.85676 22.3998 2.85676Z", fill: "#B9BDC1" })), /* @__PURE__ */ import_react20.default.createElement("defs", null, /* @__PURE__ */ import_react20.default.createElement("clipPath", { id: "clip0_1283_39624" }, /* @__PURE__ */ import_react20.default.createElement("rect", { width: "44", height: "40", fill: "white", transform: "translate(0.5 0.5)" }))));
+};
 
-// src/assets/ImgEmptyState/error.svg
-var error_default = "./error-RUCZUXDN.svg";
+// src/assets/ImgEmptyState/empty.tsx
+var import_react21 = __toESM(require("react"), 1);
+var Empty = () => {
+  return /* @__PURE__ */ import_react21.default.createElement("svg", { width: "41", height: "41", viewBox: "0 0 41 41", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react21.default.createElement("g", { "clip-path": "url(#clip0_1283_39626)" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M36.1351 20.9955C25.1396 25.3151 16.1875 30.5689 11.8186 30.9221L14.7134 35.4696L36.1351 20.9955Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M37.4531 24.9937C39.7468 28.137 42.9751 35.0522 37.4531 35.3441C34.9101 35.4058 31.3306 32.981 37.4531 24.9937Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react21.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M25.6074 1.30001C25.1055 0.501016 24.051 0.26003 23.2522 0.761943L19.6474 3.02673C17.5114 2.68138 14.5326 2.642 12.1799 3.71891C10.8937 4.30766 9.75284 5.25155 9.09396 6.68863C8.65845 7.63849 8.46029 8.74589 8.52317 10.0159L1.2996 14.5543C0.500747 15.0562 0.260156 16.1108 0.762045 16.9098L12.7907 36.0589C13.2926 36.8579 14.3471 37.0989 15.1459 36.597L37.0985 22.8046C37.8973 22.3027 38.1379 21.2481 37.636 20.4491L25.6074 1.30001ZM2.79326 16.1347L8.88857 12.3051C8.91842 12.3953 8.95405 12.4868 8.99634 12.5777C9.70948 14.1097 11.2554 15.9861 13.7088 16.7327C16.2084 17.4934 19.3887 17.0049 23.1824 14.2981L23.3709 14.1636L22.1324 12.4273L21.9439 12.5618C18.5121 15.0104 16.0132 15.2048 14.3292 14.6924C12.5992 14.1659 11.458 12.8132 10.9295 11.6778C10.9197 11.6569 10.9072 11.6225 10.8968 11.5772C10.8595 11.4156 10.8267 11.2584 10.7981 11.1054L24.0275 2.79363L35.6048 21.2243L14.3706 34.5653L2.79326 16.1347ZM13.0675 5.65821C14.0932 5.18871 15.3429 4.98089 16.5902 4.94754L10.716 8.63821C10.7826 8.23367 10.8925 7.88269 11.0323 7.57786C11.4327 6.70447 12.1364 6.08441 13.0675 5.65821Z", fill: "#B9BDC1" }), /* @__PURE__ */ import_react21.default.createElement("path", { d: "M24.3482 14.3207C24.0493 15.6305 22.7454 16.4497 21.4358 16.1505C20.1262 15.8513 19.3069 14.547 19.6058 13.2372C19.9047 11.9274 21.2086 11.1082 22.5182 11.4074C23.8278 11.7066 24.6471 13.011 24.3482 14.3207Z", fill: "#CED1D4" })), /* @__PURE__ */ import_react21.default.createElement("defs", null, /* @__PURE__ */ import_react21.default.createElement("clipPath", { id: "clip0_1283_39626" }, /* @__PURE__ */ import_react21.default.createElement("rect", { width: "40", height: "40", fill: "white", transform: "translate(0.5 0.5)" }))));
+};
 
-// src/assets/ImgEmptyState/empty.svg
-var empty_default = "./empty-3NEKE7WO.svg";
+// src/assets/ImgEmptyState/error.tsx
+var import_react22 = __toESM(require("react"), 1);
+var Error2 = () => {
+  return /* @__PURE__ */ import_react22.default.createElement("svg", { width: "41", height: "41", viewBox: "0 0 41 41", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react22.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.8035 3.2925C17.0304 3.2925 16.358 3.82772 16.1913 4.58349L14.0944 13.8188C13.8625 14.8535 14.6474 15.8412 15.7066 15.8412H25.4175C26.4764 15.8412 27.2677 14.8538 27.0297 13.8185L24.9328 4.58323C24.7608 3.82996 24.0975 3.29514 23.3264 3.2925H17.8035ZM15.9436 13.9945L17.9555 5.13336L23.1745 5.12121L25.1863 13.9945H15.9436Z", fill: "#B9BDC1" }), /* @__PURE__ */ import_react22.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5449 28.1551C10.7717 28.1551 10.0993 28.6904 9.93264 29.4462L8.54048 35.6049C8.46109 35.7863 8.54048 35.6049 8.46109 35.7863H5.42145C4.91308 35.7863 4.50096 36.1984 4.50096 36.7068C4.50096 37.2152 4.91308 37.6273 5.42145 37.6273H35.5795C36.0879 37.6273 36.5 37.2152 36.5 36.7068C36.5 36.1984 36.0879 35.7863 35.5795 35.7863H32.595C32.5443 35.6284 32.5801 35.745 32.5443 35.5928L31.1121 29.4342C30.9394 28.6844 30.2672 28.1551 29.5 28.1551H11.5449ZM10.3781 35.7863L11.6854 29.9961H29.3426L30.6891 35.7863H10.3781Z", fill: "#B9BDC1" }), /* @__PURE__ */ import_react22.default.createElement("path", { d: "M13.7368 17.4381H28.0252C28.2486 17.4381 28.4434 17.5928 28.495 17.8162L30.271 25.9114C30.334 26.2094 30.1106 26.4901 29.8012 26.4901H11.6743C11.3649 26.4901 11.1358 26.1979 11.2102 25.8943L13.2727 17.799C13.3243 17.587 13.519 17.4381 13.7368 17.4381Z", fill: "#CED1D4" }));
+};
 
-// src/assets/ImgEmptyState/search.svg
-var search_default = "./search-OKSCVF2W.svg";
+// src/assets/ImgEmptyState/search.tsx
+var import_react23 = __toESM(require("react"), 1);
+var Search2 = () => {
+  return /* @__PURE__ */ import_react23.default.createElement("svg", { width: "41", height: "41", viewBox: "0 0 41 41", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("g", { "clip-path": "url(#clip0_1283_39628)" }, /* @__PURE__ */ import_react23.default.createElement("path", { d: "M29.421 4.71198C28.943 2.92749 30.0021 1.09315 31.7865 0.61487C33.5709 0.136592 35.405 1.19549 35.883 2.97998L40.3853 19.7878C40.8633 21.5723 39.8042 23.4066 38.0198 23.8849C36.2354 24.3632 34.4013 23.3043 33.9233 21.5198L29.421 4.71198Z", fill: "#CED1D4" }), /* @__PURE__ */ import_react23.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.607749 18.613C0.158895 16.9369 1.15336 15.2141 2.82895 14.7649C4.50454 14.3157 6.22674 15.3102 6.67559 16.9862L8.06043 22.1573C8.50928 23.8333 7.51482 25.5561 5.83923 26.0054C4.16364 26.4546 2.44144 25.46 1.99259 23.784L0.607749 18.613ZM3.41576 16.9561C2.95002 17.0809 2.67359 17.5598 2.79836 18.0257L4.18319 23.1967C4.30796 23.6626 4.78667 23.939 5.25242 23.8142C5.71816 23.6893 5.99459 23.2104 5.86982 22.7445L4.48499 17.5735C4.36022 17.1076 3.88151 16.8312 3.41576 16.9561Z", fill: "#B9BDC1" }), /* @__PURE__ */ import_react23.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.0672 23.7222C17.6115 24.3518 16.9814 24.8602 16.2239 25.1659L23.5692 38.9314C23.929 39.6056 23.6742 40.4438 23.0003 40.8037C22.3263 41.1635 21.4883 40.9087 21.1286 40.2346L14.2002 27.2506L6.15159 39.7788C5.73857 40.4217 4.88273 40.6079 4.24003 40.1948C3.59732 39.7816 3.41113 38.9255 3.82416 38.2826L12.4422 24.8681C11.8201 24.4937 11.2926 23.9601 10.9267 23.3057L6.9728 23.4848C6.43282 23.5092 5.94855 23.1546 5.80865 22.6324L4.48764 17.7008C4.34775 17.1786 4.5899 16.6293 5.06976 16.3804L11.2775 13.1606L11.2169 12.934C11.0764 12.4095 11.3213 11.8581 11.8046 11.6107L26.5904 4.04383C26.8999 3.88542 27.2644 3.87542 27.5822 4.01662C27.8999 4.15781 28.1369 4.43508 28.2269 4.77102L32.7303 21.5831C32.8203 21.9191 32.7537 22.2777 32.5491 22.5589C32.3445 22.8401 32.0238 23.0137 31.6766 23.0314L18.0672 23.7222ZM17.9643 23.1894C18.1495 22.8739 18.2903 22.5322 18.3806 22.1748C18.4139 22.0434 18.4403 21.9098 18.4596 21.7746C18.4048 22.1588 18.2927 22.5298 18.1297 22.876C18.0793 22.983 18.0241 23.0876 17.9643 23.1894ZM18.8739 21.375L30.1375 20.8032L26.3713 6.7432L13.6819 13.2372L14.6854 16.9834C16.5391 17.0063 18.2272 18.2517 18.7306 20.1311C18.8421 20.5473 18.8877 20.9656 18.8739 21.375ZM12.4612 17.5793C11.2373 18.3061 10.4581 19.6082 10.3898 21.0243L7.79324 21.142L6.95134 17.999L11.8877 15.4386L12.4612 17.5793ZM15.1332 23.1064C16.1692 22.8287 16.784 21.7635 16.5064 20.7272C16.2288 19.6909 15.164 19.0759 14.128 19.3536C13.092 19.6313 12.4772 20.6965 12.7547 21.7328C12.9527 22.4718 13.5511 22.9972 14.2553 23.1365C14.2923 23.1351 14.3294 23.1351 14.3667 23.1366C14.4569 23.1402 14.5456 23.1526 14.6318 23.1732C14.797 23.173 14.9652 23.1515 15.1332 23.1064Z", fill: "#B9BDC1" })), /* @__PURE__ */ import_react23.default.createElement("defs", null, /* @__PURE__ */ import_react23.default.createElement("clipPath", { id: "clip0_1283_39628" }, /* @__PURE__ */ import_react23.default.createElement("rect", { width: "40", height: "40", fill: "white", transform: "translate(0.5 0.5)" }))));
+};
 
 // src/Components/EmptyState/EmptyState.tsx
 var EmptyStateImageUrls = {
-  create: create_default,
-  error: error_default,
-  noResult: empty_default,
-  search: search_default
+  create: /* @__PURE__ */ import_react24.default.createElement(Create, null),
+  error: /* @__PURE__ */ import_react24.default.createElement(Error2, null),
+  noResult: /* @__PURE__ */ import_react24.default.createElement(Empty, null),
+  search: /* @__PURE__ */ import_react24.default.createElement(Search2, null)
 };
 var DefaultIcon = ({
   state = "create",
   size = "large"
 }) => {
-  const imageUrl = EmptyStateImageUrls[state];
+  const Icon = EmptyStateImageUrls[state];
   const iconSize = size === "small" ? { width: "40px", height: "40px" } : { width: "60px", height: "60px" };
-  return /* @__PURE__ */ import_react18.default.createElement("img", { src: imageUrl, alt: state, style: iconSize });
+  return /* @__PURE__ */ import_react24.default.createElement("div", null, Icon);
 };
 var EmptyState = ({
   state = "create",
@@ -2199,12 +2857,12 @@ var EmptyState = ({
   subtitle,
   actions,
   containerHeight = "100vh",
-  icon = /* @__PURE__ */ import_react18.default.createElement(DefaultIcon, { state, size })
+  icon = /* @__PURE__ */ import_react24.default.createElement(DefaultIcon, { state, size })
 }) => {
   const titleVariant = size === "small" ? "subtitle2" : "h6";
   const subtitleVariant = size === "small" ? "caption" : "body1";
-  return /* @__PURE__ */ import_react18.default.createElement(
-    import_material13.Stack,
+  return /* @__PURE__ */ import_react24.default.createElement(
+    import_material14.Stack,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -2212,17 +2870,17 @@ var EmptyState = ({
       height: containerHeight,
       "data-testid": "empty-state-container"
     },
-    icon && /* @__PURE__ */ import_react18.default.createElement(import_material13.Stack, null, icon),
-    /* @__PURE__ */ import_react18.default.createElement(import_material13.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react18.default.createElement(import_material13.Typography, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ import_react18.default.createElement(
-      import_material13.Typography,
+    icon && /* @__PURE__ */ import_react24.default.createElement(import_material14.Stack, null, icon),
+    /* @__PURE__ */ import_react24.default.createElement(import_material14.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react24.default.createElement(import_material14.Typography, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ import_react24.default.createElement(
+      import_material14.Typography,
       {
         variant: subtitleVariant,
         textAlign: "center",
         color: "text.secondary"
       },
       subtitle
-    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ import_react18.default.createElement(
-      import_material13.Stack,
+    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ import_react24.default.createElement(
+      import_material14.Stack,
       {
         direction: "row",
         spacing: 2,
@@ -2231,15 +2889,15 @@ var EmptyState = ({
       },
       actions.map((action, index) => {
         var _a, _b, _c, _d;
-        return /* @__PURE__ */ import_react18.default.createElement(
-          import_material13.Button,
+        return /* @__PURE__ */ import_react24.default.createElement(
+          import_material14.Button,
           {
             key: index,
             color: (_a = action.color) != null ? _a : "primary",
             variant: (_b = action.variant) != null ? _b : "text",
             size: (_c = action.size) != null ? _c : "small",
-            startIcon: action.icon && action.iconPosition === "left" ? /* @__PURE__ */ import_react18.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
-            endIcon: action.icon && action.iconPosition === "right" ? /* @__PURE__ */ import_react18.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            startIcon: action.icon && action.iconPosition === "left" ? /* @__PURE__ */ import_react24.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            endIcon: action.icon && action.iconPosition === "right" ? /* @__PURE__ */ import_react24.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
             onClick: action.onClick
           },
           capitalize((_d = action.text) != null ? _d : "action")
@@ -2250,8 +2908,8 @@ var EmptyState = ({
 };
 
 // src/Components/SCDialog.tsx
-var import_react19 = __toESM(require("react"), 1);
-var import_material14 = require("@mui/material");
+var import_react25 = __toESM(require("react"), 1);
+var import_material15 = require("@mui/material");
 var import_Grid25 = __toESM(require("@mui/material/Grid2"), 1);
 var import_Close2 = __toESM(require("@mui/icons-material/Close"), 1);
 var Muicon5 = __toESM(require("@mui/icons-material"), 1);
@@ -2260,8 +2918,8 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
   let iconTitleValidation = "";
   let IconTitle;
   let ButtonIcon;
-  const [open, setOpen] = (0, import_react19.useState)(show);
-  (0, import_react19.useEffect)(() => {
+  const [open, setOpen] = (0, import_react25.useState)(show);
+  (0, import_react25.useEffect)(() => {
     if (show) {
       handleOpen();
     } else {
@@ -2286,7 +2944,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
   });
   if (iconTitle) {
     if (Muicon5[iconTitle] == void 0) {
-      if (iconTitle && import_react19.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
+      if (iconTitle && import_react25.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
         iconTitleValidation = "image";
         IconTitle = iconTitle;
       } else {
@@ -2311,9 +2969,9 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
     }
   };
   const dialogActions = actions != null ? actions : [{ text: "Cerrar", fn: handleClose }];
-  content = content != null ? content : { component: /* @__PURE__ */ import_react19.default.createElement(import_material14.Box, null, " Aqui va el contenido ") };
-  return /* @__PURE__ */ import_react19.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react19.default.createElement(import_material14.Tooltip, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react19.default.createElement(import_material14.Button, { 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__ */ import_react19.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react19.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react19.default.createElement(import_material14.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ import_react19.default.createElement(import_material14.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react19.default.createElement(
-    import_material14.Dialog,
+  content = content != null ? content : { component: /* @__PURE__ */ import_react25.default.createElement(import_material15.Box, null, " Aqui va el contenido ") };
+  return /* @__PURE__ */ import_react25.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react25.default.createElement(import_material15.Tooltip, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react25.default.createElement(import_material15.Button, { 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__ */ import_react25.default.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react25.default.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react25.default.createElement(import_material15.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react25.default.createElement(import_material15.SvgIcon, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ import_react25.default.createElement(import_material15.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react25.default.createElement(
+    import_material15.Dialog,
     {
       "data-testid": "dialog-element",
       open: open || false,
@@ -2326,9 +2984,9 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       }
     },
-    title && /* @__PURE__ */ import_react19.default.createElement(import_material14.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react19.default.createElement(import_Grid25.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react19.default.createElement(import_Grid25.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react19.default.createElement(import_material14.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react19.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react19.default.createElement(import_Grid25.default, null, /* @__PURE__ */ import_react19.default.createElement(import_material14.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react19.default.createElement(import_material14.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react19.default.createElement(import_material14.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react19.default.createElement(import_Close2.default, null)) : "")),
-    /* @__PURE__ */ import_react19.default.createElement(
-      import_material14.DialogContent,
+    title && /* @__PURE__ */ import_react25.default.createElement(import_material15.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react25.default.createElement(import_Grid25.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react25.default.createElement(import_Grid25.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react25.default.createElement(import_material15.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react25.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react25.default.createElement(import_material15.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react25.default.createElement(import_Grid25.default, null, /* @__PURE__ */ import_react25.default.createElement(import_material15.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react25.default.createElement(import_material15.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react25.default.createElement(import_material15.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react25.default.createElement(import_Close2.default, null)) : "")),
+    /* @__PURE__ */ import_react25.default.createElement(
+      import_material15.DialogContent,
       {
         "data-testid": "dialog-content",
         dividers: dividers ? dividers : false,
@@ -2355,7 +3013,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           }
         }
       },
-      content.url ? /* @__PURE__ */ import_react19.default.createElement(
+      content.url ? /* @__PURE__ */ import_react25.default.createElement(
         "iframe",
         {
           style: { border: "none", minWidth: "100%", minHeight: "100%" },
@@ -2365,20 +3023,20 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         }
       ) : content.component
     ),
-    dialogActions.length > 0 ? /* @__PURE__ */ import_react19.default.createElement(import_material14.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, dialogActions.length >= 3 ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
-      import_material14.Button,
+    dialogActions.length > 0 ? /* @__PURE__ */ import_react25.default.createElement(import_material15.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, dialogActions.length >= 3 ? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
+      import_material15.Button,
       {
         variant: "text",
         color: dialogActions[0].color || "primary",
         size: "small",
         onClick: dialogActions[0].fn,
         disabled: dialogActions[0].disabled || false,
-        startIcon: dialogActions[0].icon ? /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: dialogActions[0].icon }) : void 0
+        startIcon: dialogActions[0].icon ? /* @__PURE__ */ import_react25.default.createElement(import_material15.SvgIcon, { fontSize: "small", component: dialogActions[0].icon }) : void 0
       },
       dialogActions[0].text
-    ), /* @__PURE__ */ import_react19.default.createElement(import_material14.Box, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
-      return /* @__PURE__ */ import_react19.default.createElement(
-        import_material14.Button,
+    ), /* @__PURE__ */ import_react25.default.createElement(import_material15.Box, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
+      return /* @__PURE__ */ import_react25.default.createElement(
+        import_material15.Button,
         {
           key: index + 1,
           variant: index === dialogActions.length - 2 ? "contained" : "text",
@@ -2386,13 +3044,13 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           size: "small",
           onClick: boton.fn,
           disabled: boton.disabled || false,
-          startIcon: boton.icon ? /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
+          startIcon: boton.icon ? /* @__PURE__ */ import_react25.default.createElement(import_material15.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
     }))) : dialogActions.map((boton, index) => {
-      return /* @__PURE__ */ import_react19.default.createElement(
-        import_material14.Button,
+      return /* @__PURE__ */ import_react25.default.createElement(
+        import_material15.Button,
         {
           key: index,
           variant: index === dialogActions.length - 1 ? "contained" : "text",
@@ -2400,7 +3058,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           size: "small",
           onClick: boton.fn,
           disabled: boton.disabled || false,
-          startIcon: boton.icon ? /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
+          startIcon: boton.icon ? /* @__PURE__ */ import_react25.default.createElement(import_material15.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
@@ -2408,13 +3066,55 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
   )));
 };
 
-// src/Components/SCMenu.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_material15 = require("@mui/material");
+// src/Components/SCListContent.tsx
+var import_react26 = __toESM(require("react"), 1);
+var import_material16 = require("@mui/material");
 var import_Grid26 = __toESM(require("@mui/material/Grid2"), 1);
+var Muicon6 = __toESM(require("@mui/icons-material"), 1);
+var SCListContent = ({ options }) => {
+  const [selectedIndex, setSelectedIndex] = import_react26.default.useState("1");
+  const [value, setValue] = import_react26.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;
+      }
+    }
+    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;
+      }
+    }
+  });
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_material16.List, { sx: { width: "100%", maxWidth: 360, bgcolor: "background.paper", padding: "0px !important" } }, options.map((option, index) => /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, { key: index }, /* @__PURE__ */ import_react26.default.createElement(
+    import_material16.ListItemButton,
+    {
+      disabled: option.disable,
+      onClick: option.fn
+    },
+    option.iconLeft ? /* @__PURE__ */ import_react26.default.createElement(import_material16.ListItemIcon, { sx: { minWidth: "30px !important" } }, /* @__PURE__ */ import_react26.default.createElement(import_material16.SvgIcon, { fontSize: "small", color: option.iconLeftColor || "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ import_react26.default.createElement(
+      import_material16.ListItemText,
+      {
+        primary: option.title,
+        secondary: /* @__PURE__ */ import_react26.default.createElement(import_Grid26.default, { gap: 0.5 }, /* @__PURE__ */ import_react26.default.createElement(import_Grid26.default, { container: true, gap: 0.5 }, option.subtitle), /* @__PURE__ */ import_react26.default.createElement(import_Grid26.default, { container: true, gap: 0.5 }, option.description))
+      }
+    ),
+    option.iconRight ? /* @__PURE__ */ import_react26.default.createElement(import_material16.ListItemIcon, { sx: { minWidth: "0px !important" } }, /* @__PURE__ */ import_react26.default.createElement(import_material16.SvgIcon, { fontSize: "small", color: option.iconRightColor || "action", component: option.iconRight })) : ""
+  ), option.divider == true ? /* @__PURE__ */ import_react26.default.createElement(import_material16.Divider, null) : ""))));
+};
+
+// src/Components/SCMenu.tsx
+var import_react28 = __toESM(require("react"), 1);
+var import_material17 = require("@mui/material");
+var import_Grid27 = __toESM(require("@mui/material/Grid2"), 1);
 
 // src/Components/Hooks/useWindowDimensions.ts
-var import_react20 = require("react");
+var import_react27 = require("react");
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
   return {
@@ -2423,8 +3123,8 @@ function getWindowDimensions() {
   };
 }
 function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = (0, import_react20.useState)(getWindowDimensions());
-  (0, import_react20.useEffect)(() => {
+  const [windowDimensions, setWindowDimensions] = (0, import_react27.useState)(getWindowDimensions());
+  (0, import_react27.useEffect)(() => {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
@@ -2435,19 +3135,19 @@ function useWindowDimensions() {
 }
 
 // src/Components/SCMenu.tsx
-var Muicon6 = __toESM(require("@mui/icons-material"), 1);
+var Muicon7 = __toESM(require("@mui/icons-material"), 1);
 var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu, widthPage }) => {
   const { height, width } = useWindowDimensions();
   const menuSize = widthMenu ? parseInt(widthMenu) : 284;
   const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
   const widthContainer = menuSize + pageSize;
   let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
-  const [selectedIndex, setSelectedIndex] = import_react21.default.useState("1");
-  const [value, setValue] = import_react21.default.useState("1");
-  import_react21.default.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = import_react28.default.useState("1");
+  const [value, setValue] = import_react28.default.useState("1");
+  import_react28.default.useEffect(() => {
     heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
   }, [height]);
-  import_react21.default.useEffect(() => {
+  import_react28.default.useEffect(() => {
     if (defaultOption) {
       handleClickMenusItem(event, void 0);
     }
@@ -2455,14 +3155,14 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
   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];
+        option.iconLeft = Muicon7[option == null ? void 0 : option.iconLeft];
       } else {
         option;
       }
     }
     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];
+        option.iconRight = Muicon7[option == null ? void 0 : option.iconRight];
       } else {
         option;
       }
@@ -2477,34 +3177,34 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
       setValue(String(index + 1));
     }
   };
-  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(import_Grid26.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react21.default.createElement(import_material15.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
-    import_material15.MenuItem,
+  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(import_Grid27.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react28.default.createElement(import_material17.Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react28.default.createElement(import_material17.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(
+    import_material17.MenuItem,
     {
       disabled: disable == true ? true : false,
       key: index,
       selected: String(index + 1) === selectedIndex,
       onClick: (event2) => handleClickMenusItem(event2, index)
     },
-    option.iconLeft ? /* @__PURE__ */ import_react21.default.createElement(import_material15.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ import_react21.default.createElement(import_Grid26.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react21.default.createElement(import_material15.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
-  ), option.divider == true ? /* @__PURE__ */ import_react21.default.createElement(import_material15.Divider, null) : "")))), /* @__PURE__ */ import_react21.default.createElement(import_Grid26.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react21.default.createElement(import_material15.Box, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react21.default.createElement(import_material15.Typography, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+    option.iconLeft ? /* @__PURE__ */ import_react28.default.createElement(import_material17.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react28.default.createElement(import_material17.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ import_react28.default.createElement(import_Grid27.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react28.default.createElement(import_material17.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react28.default.createElement(import_material17.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react28.default.createElement(import_material17.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ import_react28.default.createElement(import_material17.Divider, null) : "")))), /* @__PURE__ */ import_react28.default.createElement(import_Grid27.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react28.default.createElement(import_material17.Box, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react28.default.createElement(import_material17.Typography, { color: "error" }, "No se ha configurado el componente a visualizar")))));
 };
 
 // src/Components/SCTabs.tsx
-var import_react22 = __toESM(require("react"), 1);
-var import_material16 = require("@mui/material");
+var import_react29 = __toESM(require("react"), 1);
+var import_material18 = require("@mui/material");
 var import_TabPanel = __toESM(require("@mui/lab/TabPanel"), 1);
 var import_TabContext = __toESM(require("@mui/lab/TabContext"), 1);
-var Muicon7 = __toESM(require("@mui/icons-material"), 1);
+var Muicon8 = __toESM(require("@mui/icons-material"), 1);
 var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
-  const [toast, setToast] = import_react22.default.useState(null);
+  const [toast, setToast] = import_react29.default.useState(null);
   let i = 0;
   let j = 0;
   let k = 0;
   let l = 0;
   let validateTypeIcon = true;
-  const [value, setValue] = import_react22.default.useState("1");
-  (0, import_react22.useEffect)(() => {
+  const [value, setValue] = import_react29.default.useState("1");
+  (0, import_react29.useEffect)(() => {
     if (defaultOption) {
       handleChange(event, void 0);
     }
@@ -2513,9 +3213,9 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
     const optionsLength = options.length;
     if (option == null ? void 0 : option.iconOrBadge) {
       if (typeIcon == "icon") {
-        if ((option == null ? void 0 : option.iconOrBadge) in Muicon7 == true) {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon8 == true) {
           validateTypeIcon = true;
-          option.iconOrBadge = Muicon7[option == null ? void 0 : option.iconOrBadge];
+          option.iconOrBadge = Muicon8[option == null ? void 0 : option.iconOrBadge];
         } else {
           validateTypeIcon = false;
           setTimeout(() => {
@@ -2529,7 +3229,7 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
           return;
         }
       } else if (typeIcon == "badge") {
-        if ((option == null ? void 0 : option.iconOrBadge) in Muicon7 == false) {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon8 == false) {
           validateTypeIcon = true;
           option;
         } else {
@@ -2554,8 +3254,8 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       setValue(newValue);
     }
   };
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react22.default.createElement(import_material16.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react22.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react22.default.createElement(
-    import_material16.Tabs,
+  return /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react29.default.createElement(import_material18.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react29.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react29.default.createElement(
+    import_material18.Tabs,
     {
       "data-testid": "tab-container",
       value,
@@ -2568,8 +3268,8 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
       orientation: orientation || "horizontal",
       sx: { borderBottom: orientation == "vertical" ? 0 : 1, borderRight: orientation == "vertical" ? 1 : 0, borderColor: "divider", background: background || "" }
     },
-    options.map((option) => /* @__PURE__ */ import_react22.default.createElement(
-      import_material16.Tab,
+    options.map((option) => /* @__PURE__ */ import_react29.default.createElement(
+      import_material18.Tab,
       {
         "data-testid": "tab-item",
         value: String(i = i + 1),
@@ -2577,8 +3277,8 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
         label: option.name || "",
         disabled: option.disabled || false,
         iconPosition: iconPosition || "end",
-        icon: typeIcon == "badge" ? /* @__PURE__ */ import_react22.default.createElement(
-          import_material16.Badge,
+        icon: typeIcon == "badge" ? /* @__PURE__ */ import_react29.default.createElement(
+          import_material18.Badge,
           {
             sx: {
               width: "20px",
@@ -2592,33 +3292,38 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
             badgeContent: option.iconOrBadge,
             color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
           }
-        ) : typeIcon == "icon" ? /* @__PURE__ */ import_react22.default.createElement(import_material16.SvgIcon, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
+        ) : typeIcon == "icon" ? /* @__PURE__ */ import_react29.default.createElement(import_material18.SvgIcon, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
         sx: { "& .MuiTab-icon": { margin: "0px !important" }, padding: "10px 16px", gap: "4px" }
       }
     ))
-  ), children, options.map((option) => /* @__PURE__ */ import_react22.default.createElement(
+  ), children, options.map((option) => /* @__PURE__ */ import_react29.default.createElement(
     import_TabPanel.default,
     {
       key: k = k + 1,
       value: String(l = l + 1),
       sx: { padding: "16px" }
     },
-    option.page ? option.page : /* @__PURE__ */ import_react22.default.createElement(import_material16.Typography, null, "No se ha configurado el componente a visualizar ")
-  )))) : /* @__PURE__ */ import_react22.default.createElement(import_material16.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react22.default.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
+    option.page ? option.page : /* @__PURE__ */ import_react29.default.createElement(import_material18.Typography, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ import_react29.default.createElement(import_material18.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react29.default.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
 };
 
 // src/Components/Calendario/Calendar.tsx
-var import_react28 = __toESM(require("react"), 1);
-var import_material22 = require("@mui/material");
-var import_dayjs7 = __toESM(require("dayjs"), 1);
+var import_react36 = __toESM(require("react"), 1);
+var import_material24 = require("@mui/material");
 
 // src/Components/Calendario/CalendarToolbar.tsx
-var import_react23 = __toESM(require("react"), 1);
-var import_icons_material10 = require("@mui/icons-material");
-var import_material17 = require("@mui/material");
+var import_react30 = __toESM(require("react"), 1);
+var import_icons_material11 = require("@mui/icons-material");
+var import_material19 = require("@mui/material");
 var import_dayjs2 = __toESM(require("dayjs"), 1);
+var import_updateLocale = __toESM(require("dayjs/plugin/updateLocale"), 1);
 var import_es2 = require("dayjs/locale/es");
 import_dayjs2.default.locale("es");
+import_dayjs2.default.extend(import_updateLocale.default);
+import_dayjs2.default.updateLocale("en", {
+  weekStart: 0
+  // 0 = domingo
+});
 var CalendarToolbar = ({
   labelDate,
   view,
@@ -2626,7 +3331,7 @@ var CalendarToolbar = ({
   onNavigate,
   children
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react23.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react30.useState)(null);
   const open = Boolean(anchorEl);
   const handleMenuOpen = (event2) => {
     setAnchorEl(event2.currentTarget);
@@ -2639,24 +3344,26 @@ var CalendarToolbar = ({
     handleMenuClose();
   };
   const getFormattedDate = () => {
+    const sunday = labelDate.day(0);
     if (view === "month") {
-      return labelDate.format("MMMM YYYY");
+      const textMonth = labelDate.format("MMMM YYYY");
+      return textMonth.charAt(0).toUpperCase() + textMonth.slice(1);
     }
     if (view === "week") {
-      return `${labelDate.startOf("week").add(1, "day").format("DD MMM")} - ${labelDate.endOf("week").format("DD MMM YYYY")}`;
+      return `${labelDate.startOf("week").format("DD MMM")} - ${labelDate.endOf("week").format("DD MMM YYYY")}`;
     }
     return labelDate.format(" DD MMMM YYYY");
   };
-  return /* @__PURE__ */ import_react23.default.createElement(import_material17.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ import_react23.default.createElement(import_material17.Box, null, /* @__PURE__ */ import_react23.default.createElement(
-    import_material17.Chip,
+  return /* @__PURE__ */ import_react30.default.createElement(import_material19.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ import_react30.default.createElement(import_material19.Box, null, /* @__PURE__ */ import_react30.default.createElement(
+    import_material19.Chip,
     {
       label: "Hoy",
-      icon: /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.LightModeOutlined, { fontSize: "small" }),
+      icon: /* @__PURE__ */ import_react30.default.createElement(import_icons_material11.LightModeOutlined, { fontSize: "small" }),
       color: "primary",
       onClick: () => onNavigate("TODAY")
     }
-  )), /* @__PURE__ */ import_react23.default.createElement(import_material17.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react23.default.createElement(import_material17.IconButton, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ import_react23.default.createElement(import_material17.IconButton, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.ChevronRight, { fontSize: "small" })), /* @__PURE__ */ import_react23.default.createElement(import_material17.Typography, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ import_react23.default.createElement(import_material17.IconButton, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.KeyboardArrowDown, { fontSize: "small" })), /* @__PURE__ */ import_react23.default.createElement(
-    import_material17.Menu,
+  )), /* @__PURE__ */ import_react30.default.createElement(import_material19.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react30.default.createElement(import_material19.IconButton, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ import_react30.default.createElement(import_icons_material11.ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ import_react30.default.createElement(import_material19.IconButton, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ import_react30.default.createElement(import_icons_material11.ChevronRight, { fontSize: "small" })), /* @__PURE__ */ import_react30.default.createElement(import_material19.Typography, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ import_react30.default.createElement(import_material19.IconButton, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ import_react30.default.createElement(import_icons_material11.KeyboardArrowDown, { fontSize: "small" })), /* @__PURE__ */ import_react30.default.createElement(
+    import_material19.Menu,
     {
       anchorEl,
       open,
@@ -2664,15 +3371,15 @@ var CalendarToolbar = ({
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__PURE__ */ import_react23.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("month") }, "Mes"),
-    /* @__PURE__ */ import_react23.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("week") }, "Semana"),
-    /* @__PURE__ */ import_react23.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("day") }, "D\xEDa")
-  )), children ? /* @__PURE__ */ import_react23.default.createElement(import_material17.Box, null, children) : /* @__PURE__ */ import_react23.default.createElement(import_material17.Box, { width: "24px" }), " ");
+    /* @__PURE__ */ import_react30.default.createElement(import_material19.MenuItem, { onClick: () => handleViewChange("month") }, "Mes"),
+    /* @__PURE__ */ import_react30.default.createElement(import_material19.MenuItem, { onClick: () => handleViewChange("week") }, "Semana"),
+    /* @__PURE__ */ import_react30.default.createElement(import_material19.MenuItem, { onClick: () => handleViewChange("day") }, "D\xEDa")
+  )), children ? /* @__PURE__ */ import_react30.default.createElement(import_material19.Box, null, children) : /* @__PURE__ */ import_react30.default.createElement(import_material19.Box, { width: "24px" }), " ");
 };
 
 // src/Components/Calendario/Views/MonthView.tsx
-var import_react25 = __toESM(require("react"), 1);
-var import_material19 = require("@mui/material");
+var import_react33 = __toESM(require("react"), 1);
+var import_material21 = require("@mui/material");
 var import_Add = __toESM(require("@mui/icons-material/Add"), 1);
 var import_dayjs4 = __toESM(require("dayjs"), 1);
 var import_localeData = __toESM(require("dayjs/plugin/localeData"), 1);
@@ -2698,21 +3405,32 @@ var stateColors = {
   Asignada: "warning.main",
   Finalizado: "primary.main",
   Vencida: "error.main",
-  EnProgreso: "success.main"
+  EnProgreso: "success.main",
+  Aplazada: "grey.400",
+  Generada: "secondary.main"
 };
 
 // src/Components/Calendario/Event.tsx
-var import_react24 = __toESM(require("react"), 1);
-var import_material18 = require("@mui/material");
-var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
-  return /* @__PURE__ */ import_react24.default.createElement(
-    import_material18.Stack,
+var import_react31 = __toESM(require("react"), 1);
+var import_material20 = require("@mui/material");
+var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
+  const [anchorEl, setAnchorEl] = import_react31.default.useState(null);
+  const handlePopoverOpen = (event3) => {
+    setAnchorEl(event3.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ import_react31.default.createElement(
+    import_material20.Stack,
     {
       direction: "row",
       padding: 0.5,
       borderRadius: 0.5,
       alignItems: "flex-start",
       minHeight: "20px",
+      onMouseOver: () => onHover == null ? void 0 : onHover(event2),
       onClick: (e) => {
         e.stopPropagation();
         onClick == null ? void 0 : onClick(event2);
@@ -2725,8 +3443,8 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         cursor: onClick ? "pointer" : "default"
       }, sx)
     },
-    /* @__PURE__ */ import_react24.default.createElement(
-      import_material18.Divider,
+    /* @__PURE__ */ import_react31.default.createElement(
+      import_material20.Divider,
       {
         orientation: "vertical",
         flexItem: true,
@@ -2737,8 +3455,8 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         }
       }
     ),
-    /* @__PURE__ */ import_react24.default.createElement(
-      import_material18.Box,
+    /* @__PURE__ */ import_react31.default.createElement(
+      import_material20.Box,
       {
         px: 1,
         py: 0.5,
@@ -2747,8 +3465,8 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         display: "flex",
         alignItems: "center"
       },
-      /* @__PURE__ */ import_react24.default.createElement(
-        import_material18.Typography,
+      /* @__PURE__ */ import_react31.default.createElement(
+        import_material20.Typography,
         {
           color: "text.primary",
           variant: "caption",
@@ -2757,30 +3475,66 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
-          }
+          },
+          onMouseEnter: handlePopoverOpen,
+          onMouseLeave: handlePopoverClose
+        },
+        event2.title.charAt(0).toUpperCase() + event2.title.slice(1).toLowerCase()
+      ),
+      /* @__PURE__ */ import_react31.default.createElement(
+        import_material20.Popover,
+        {
+          id: "mouse-over-popover",
+          sx: { pointerEvents: "none" },
+          open,
+          anchorEl,
+          anchorOrigin: {
+            vertical: "top",
+            horizontal: "right"
+          },
+          transformOrigin: {
+            vertical: "bottom",
+            horizontal: "right"
+          },
+          onClose: handlePopoverClose,
+          disableRestoreFocus: true
         },
-        capitalize(event2.title)
+        onHover ? onHover(event2) : " "
       )
     )
   );
 };
 
+// src/assets/LogoCalendario.tsx
+var import_react32 = __toESM(require("react"), 1);
+var LogoCalendario = () => {
+  return /* @__PURE__ */ import_react32.default.createElement("svg", { width: "60", height: "61", viewBox: "0 0 60 61", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react32.default.createElement("g", { "clip-path": "url(#clip0_5353_24891)" }, /* @__PURE__ */ import_react32.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40.7361 11.1589C39.7792 11.1589 39.0106 11.9722 39.0106 12.9661V15.4375H20.0309V12.9661C20.0309 11.964 19.2545 11.1589 18.3055 11.1589C17.3487 11.1589 16.5801 11.9722 16.5801 12.9661V15.4375H12.8819C12.0652 15.4375 11.4038 16.0918 11.4038 16.8998V20.6551C11.4038 21.463 12.0652 22.1174 12.8819 22.1174H46.8383C47.655 22.1174 48.3165 21.463 48.3165 20.6551V16.8998C48.3165 16.0918 47.655 15.4375 46.8383 15.4375H42.4615V12.9661C42.4615 11.964 41.6851 11.1589 40.7361 11.1589ZM19.4827 19.2049C19.6528 19.1343 19.7361 19.006 19.7724 18.8352C19.6916 18.9714 19.594 19.0957 19.4827 19.2049Z", fill: "#00BCD4" }), /* @__PURE__ */ import_react32.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.2037 25.8653C13.7579 25.8653 13.425 26.2168 13.425 26.6093V47.3669C13.425 47.7595 13.7579 48.1109 14.2037 48.1109H46.0004C46.4782 48.1109 46.8656 47.7236 46.8656 47.2458V26.6093C46.8656 26.2168 46.5327 25.8653 46.087 25.8653H14.2037ZM11.6948 26.6093C11.6948 25.2255 12.8384 24.135 14.2037 24.135H46.087C47.4522 24.135 48.5959 25.2255 48.5959 26.6093V47.2458C48.5959 48.6792 47.4339 49.8412 46.0004 49.8412H14.2037C12.8384 49.8412 11.6948 48.7508 11.6948 47.3669V26.6093Z", fill: "#6392BD" }), /* @__PURE__ */ import_react32.default.createElement("path", { d: "M19.481 30.9138C19.481 30.5164 20.1155 30.1903 20.9058 30.1903C21.6894 30.1903 22.3305 30.5131 22.3305 30.9138V32.8862C22.3305 33.2836 21.6894 33.6097 20.9058 33.6097C20.1222 33.6097 19.481 33.2869 19.481 32.8862V30.9138Z", fill: "#6392BD" }), /* @__PURE__ */ import_react32.default.createElement("path", { d: "M30.0242 30.1903C29.2339 30.1903 28.5995 30.5164 28.5995 30.9138V32.8862C28.5995 33.2869 29.2406 33.6097 30.0242 33.6097C30.8079 33.6097 31.449 33.2836 31.449 32.8862V30.9138C31.449 30.5131 30.8079 30.1903 30.0242 30.1903Z", fill: "#6392BD" }), /* @__PURE__ */ import_react32.default.createElement("path", { d: "M37.7179 30.9138C37.7179 30.5164 38.3524 30.1903 39.1427 30.1903C39.608 30.1903 40.022 30.3038 40.2825 30.4797C40.3515 30.5276 40.4116 30.5788 40.4561 30.6344C40.5274 30.7201 40.5675 30.8147 40.5675 30.9138V32.8862C40.5675 33.2836 39.9263 33.6097 39.1427 33.6097C38.3591 33.6097 37.7179 33.2869 37.7179 32.8862V30.9138Z", fill: "#6392BD" }), /* @__PURE__ */ import_react32.default.createElement("path", { d: "M20.9058 39.8787C20.1155 39.8787 19.481 40.2048 19.481 40.6022V42.5746C19.481 42.687 19.5322 42.7927 19.6213 42.8874C19.7036 42.9731 19.8172 43.0499 19.9552 43.1122C20.2068 43.228 20.5407 43.2981 20.9058 43.2981C21.6894 43.2981 22.3305 42.972 22.3305 42.5746V40.6022C22.3305 40.2015 21.6894 39.8787 20.9058 39.8787Z", fill: "#6392BD" }), /* @__PURE__ */ import_react32.default.createElement("path", { d: "M29.524 39.9477C29.7087 39.9032 29.9158 39.8787 30.1339 39.8787C30.9176 39.8787 31.5587 40.2015 31.5587 40.6022V42.5746C31.5587 42.972 30.9176 43.2981 30.1339 43.2981C29.3503 43.2981 28.7092 42.9753 28.7092 42.5746V40.6022C28.7092 40.315 29.0409 40.0646 29.524 39.9477Z", fill: "#6392BD" }), /* @__PURE__ */ import_react32.default.createElement("path", { d: "M38.5141 39.9482C38.6989 39.9037 38.9059 39.8792 39.1241 39.8792C39.9077 39.8792 40.5488 40.202 40.5488 40.6027V42.5751C40.5488 42.9725 39.9077 43.2986 39.1241 43.2986C38.3405 43.2986 37.6993 42.9758 37.6993 42.5751V40.6027C37.6993 40.3155 38.031 40.0651 38.5141 39.9482Z", fill: "#6392BD" })), /* @__PURE__ */ import_react32.default.createElement("defs", null, /* @__PURE__ */ import_react32.default.createElement("clipPath", { id: "clip0_5353_24891" }, /* @__PURE__ */ import_react32.default.createElement("rect", { width: "60", height: "60", fill: "white", transform: "translate(0 0.5)" }))));
+};
+
 // src/Components/Calendario/Views/MonthView.tsx
 import_dayjs4.default.extend(import_localeData.default);
 import_dayjs4.default.extend(import_isBetween.default);
-var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick }) => {
+var MonthView = ({ events, isLoading, onDayClick, onMoreClick, currentDate, onEventClick, onEventHover }) => {
+  const noEvents = events.length === 0;
   const days = getMonthDays(currentDate);
   const weekDays = Array.from({ length: 7 }, (_, i) => (0, import_dayjs4.default)().day(i));
-  const [openDrawer, setOpenDrawer] = import_react25.default.useState(false);
-  const [selectedDay, setSelectedDay] = import_react25.default.useState(null);
-  const [selectedEvents, setSelectedEvents] = import_react25.default.useState([]);
-  return /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { minWidth: "1050px" }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5 }, days.map((day) => {
+  const [openDrawer, setOpenDrawer] = import_react33.default.useState(false);
+  const [selectedDay, setSelectedDay] = import_react33.default.useState(null);
+  const [selectedEvents, setSelectedEvents] = import_react33.default.useState([]);
+  return /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { minWidth: "1050px" }, /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ import_react33.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), isLoading ? /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react33.default.createElement(import_material21.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react33.default.createElement(
+    EmptyState,
+    {
+      title: "Inicia la gesti\xF3n de las actividades",
+      subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
+      icon: /* @__PURE__ */ import_react33.default.createElement(LogoCalendario, null)
+    }
+  ) : /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5 }, days.map((day) => {
     const dayEvents = events.filter(
       (e) => day.isBetween(e.start.startOf("day"), e.end.endOf("day"), null, "[]")
     );
     const isCurrentMonth = day.month() === currentDate.month();
-    return /* @__PURE__ */ import_react25.default.createElement(
-      import_material19.Paper,
+    return /* @__PURE__ */ import_react33.default.createElement(
+      import_material21.Paper,
       {
         key: day.toString(),
         onClick: () => onDayClick == null ? void 0 : onDayClick(day),
@@ -2796,8 +3550,8 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
           overflow: "hidden"
         }
       },
-      /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { p: 1, flexShrink: 0 }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ import_react25.default.createElement(
-        import_material19.Box,
+      /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { p: 1, flexShrink: 0 }, /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ import_react33.default.createElement(
+        import_material21.Box,
         {
           sx: {
             width: 24,
@@ -2809,16 +3563,16 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ import_react25.default.createElement(
-          import_material19.Typography,
+        /* @__PURE__ */ import_react33.default.createElement(
+          import_material21.Typography,
           {
             variant: "body2",
             sx: { color: isToday(day) ? "white" : "text.secondary" }
           },
           day.date()
         )
-      ), dayEvents.length > 2 && /* @__PURE__ */ import_react25.default.createElement(import_material19.Tooltip, { title: "M\xE1s eventos" }, /* @__PURE__ */ import_react25.default.createElement(
-        import_material19.IconButton,
+      ), dayEvents.length > 2 && /* @__PURE__ */ import_react33.default.createElement(import_material21.Tooltip, { title: "M\xE1s eventos" }, /* @__PURE__ */ import_react33.default.createElement(
+        import_material21.IconButton,
         {
           color: "primary",
           size: "small",
@@ -2829,64 +3583,46 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
             setSelectedEvents(dayEvents);
           }
         },
-        /* @__PURE__ */ import_react25.default.createElement(import_Add.default, { fontSize: "small" })
+        /* @__PURE__ */ import_react33.default.createElement(import_Add.default, { fontSize: "small" })
       )))),
-      /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, 2).map((event2) => /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, 2).map((event2) => /* @__PURE__ */ import_react33.default.createElement(
         CalendarEventCard,
         {
           key: `${event2.id}-${day.toString()}`,
           event: event2,
           color: stateColors[event2.state],
-          onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day)
+          onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+          onHover: onEventHover
         }
       ))),
-      dayEvents.length > 2 && /* @__PURE__ */ import_react25.default.createElement(import_material19.Stack, { justifyContent: "flex-end", px: 1, pb: 0.5, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react25.default.createElement(
-        SCDrawer,
+      dayEvents.length > 2 && /* @__PURE__ */ import_react33.default.createElement(
+        import_material21.Stack,
         {
-          width: "350px",
-          title: day.format("DD [de] MMMM YYYY"),
-          open: openDrawer,
-          buttonDrawer: { text: `+ ${dayEvents.length}` },
-          anchor: "right",
-          actions: false,
-          arrayElements: [{
-            component: (() => {
-              const [first, ...rest] = dayEvents;
-              return /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Typography, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ import_react25.default.createElement(
-                CalendarEventCard,
-                {
-                  event: first,
-                  color: stateColors[first.state],
-                  onClick: () => onEventClick == null ? void 0 : onEventClick(first, day),
-                  sx: {
-                    whiteSpace: "normal",
-                    "& .MuiTypography-root": {
-                      whiteSpace: "normal",
-                      overflow: "visible",
-                      textOverflow: "unset"
-                    }
-                  }
-                }
-              )), /* @__PURE__ */ import_react25.default.createElement(import_material19.Divider, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ import_react25.default.createElement(import_material19.Typography, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ import_react25.default.createElement(
-                import_material19.Box,
-                {
-                  width: "100%",
-                  height: "100%",
-                  flex: 1,
-                  overflow: "auto",
-                  p: 1,
-                  pt: 1,
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 1.5
-                },
-                rest.map((event2) => /* @__PURE__ */ import_react25.default.createElement(
+          justifyItems: "center",
+          px: 1,
+          pb: 0.5,
+          onClick: (e) => e.stopPropagation(),
+          sx: { "& .MuiButtonBase-root": { width: "100%" } }
+        },
+        /* @__PURE__ */ import_react33.default.createElement(
+          SCDrawer,
+          {
+            width: "350px",
+            title: day.format("DD [de] MMMM YYYY"),
+            open: openDrawer,
+            buttonDrawer: { text: `+ ${dayEvents.length}` },
+            anchor: "right",
+            actions: false,
+            arrayElements: [{
+              component: (() => {
+                const [first, ...rest] = dayEvents;
+                return /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ import_react33.default.createElement(import_material21.Typography, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ import_react33.default.createElement(import_material21.Box, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ import_react33.default.createElement(
                   CalendarEventCard,
                   {
-                    key: `${event2.id}-${day.toString()}`,
-                    event: event2,
-                    color: stateColors[event2.state],
-                    onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+                    event: first,
+                    color: stateColors[first.state],
+                    onClick: () => onEventClick == null ? void 0 : onEventClick(first, day),
+                    onHover: onEventHover,
                     sx: {
                       whiteSpace: "normal",
                       "& .MuiTypography-root": {
@@ -2896,26 +3632,68 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
                       }
                     }
                   }
-                ))
-              ));
-            })()
-          }]
-        }
-      ))
+                )), /* @__PURE__ */ import_react33.default.createElement(import_material21.Divider, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ import_react33.default.createElement(import_material21.Typography, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ import_react33.default.createElement(
+                  import_material21.Box,
+                  {
+                    width: "100%",
+                    height: "100%",
+                    flex: 1,
+                    overflow: "auto",
+                    p: 1,
+                    pt: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 1.5
+                  },
+                  rest.map((event2) => /* @__PURE__ */ import_react33.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: {
+                        whiteSpace: "normal",
+                        "& .MuiTypography-root": {
+                          whiteSpace: "normal",
+                          overflow: "visible",
+                          textOverflow: "unset"
+                        }
+                      }
+                    }
+                  ))
+                ));
+              })()
+            }]
+          }
+        )
+      )
     );
   }))));
 };
 
 // src/Components/Calendario/Views/WeekView.tsx
-var import_react26 = __toESM(require("react"), 1);
-var import_material20 = require("@mui/material");
+var import_react34 = __toESM(require("react"), 1);
+var import_material22 = require("@mui/material");
 var import_dayjs5 = __toESM(require("dayjs"), 1);
 var import_localeData2 = __toESM(require("dayjs/plugin/localeData"), 1);
 import_dayjs5.default.extend(import_localeData2.default);
-var WeekView = ({ events, currentDate, onDayClick, onEventClick }) => {
-  const startOfWeek2 = currentDate.startOf("week");
-  const days = Array.from({ length: 7 }, (_, i) => startOfWeek2.add(i, "day"));
-  const hours2 = Array.from({ length: 24 }, (_, i) => i);
+var WeekView = ({
+  events,
+  currentDate,
+  isLoading,
+  onDayClick,
+  onEventClick,
+  onEventHover,
+  startHour = 0,
+  endHour = 23
+}) => {
+  const noEvents = events.length === 0;
+  const todayString = (0, import_dayjs5.default)().format("YYYY-MM-DD");
+  const startOfWeek3 = currentDate.startOf("week");
+  const days = Array.from({ length: 7 }, (_, i) => startOfWeek3.add(i, "day"));
+  const hours = Array.from({ length: endHour - startHour + 1 }, (_, i) => startHour + i);
   const getCellBorderType = (cellHour, dayEvents) => {
     for (const event2 of dayEvents) {
       const start = event2.start.hour() + event2.start.minute() / 60;
@@ -2923,8 +3701,7 @@ var WeekView = ({ events, currentDate, onDayClick, onEventClick }) => {
       const cellStart = cellHour;
       const cellEnd = cellHour + 1;
       if (cellEnd > start && cellStart < end) {
-        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01)
-          return "full";
+        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01) return "full";
         if (Math.abs(cellStart - start) < 0.01) return "start";
         if (Math.abs(cellEnd - end) < 0.01) return "end";
         return "middle";
@@ -2932,92 +3709,122 @@ var WeekView = ({ events, currentDate, onDayClick, onEventClick }) => {
     }
     return "none";
   };
-  return /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { display: "flex", bgcolor: "background.default" }, /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { width: 45, bgcolor: "background.default" }), days.map((day) => /* @__PURE__ */ import_react26.default.createElement(
-    import_material20.Box,
-    {
-      key: day.toString(),
-      height: 40,
-      flex: 1,
-      pl: 0.5,
-      textAlign: "center",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "flex-start"
-    },
-    /* @__PURE__ */ import_react26.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
-  ))), /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { width: 45, bgcolor: "background.default" }, hours2.map((h) => /* @__PURE__ */ import_react26.default.createElement(
-    import_material20.Box,
-    {
-      key: h,
-      height: 60,
-      textAlign: "right",
-      pr: 1,
-      borderTop: "1px solid",
-      borderColor: "divider"
-    },
-    /* @__PURE__ */ import_react26.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs5.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, "[]")
-    );
-    return /* @__PURE__ */ import_react26.default.createElement(
-      import_material20.Box,
+  return /* @__PURE__ */ import_react34.default.createElement(import_material22.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react34.default.createElement(import_material22.Box, { display: "flex", bgcolor: "transparent" }, /* @__PURE__ */ import_react34.default.createElement(import_material22.Box, { width: 45, bgcolor: "transparent" }), days.map((day) => {
+    const isToday2 = day.format("YYYY-MM-DD") === todayString;
+    return /* @__PURE__ */ import_react34.default.createElement(
+      import_material22.Box,
       {
         key: day.toString(),
+        height: 40,
         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)
+        pl: 0.5,
+        textAlign: "center",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        bgcolor: isToday2 ? "primary.100" : "transparent",
+        borderRadius: isToday2 ? "6px 6px 0 0" : "0",
+        borderBottom: isToday2 ? 2 : 0,
+        borderColor: isToday2 ? "primary.main" : "transparent"
       },
-      hours2.map((hourIdx) => {
-        const borderType = getCellBorderType(hourIdx, dayEvents);
-        return /* @__PURE__ */ import_react26.default.createElement(
-          import_material20.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(0).minute(0);
-        const eventEnd = day.isSame(event2.end, "day") ? event2.end : day.endOf("day").hour(23).minute(59);
-        const startMinutes = eventStart.hour() * 60 + eventStart.minute();
-        const durationMinutes = eventEnd.diff(eventStart, "minute");
-        return /* @__PURE__ */ import_react26.default.createElement(
-          CalendarEventCard,
-          {
-            key: `${event2.id}-${day.toString()}`,
-            event: event2,
-            color: stateColors[event2.state],
-            onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
-            sx: {
-              position: "absolute",
-              top: `${startMinutes + 15}px`,
-              left: 4,
-              right: 4,
-              cursor: "pointer",
-              height: "auto"
-            }
-          }
-        );
-      })
+      /* @__PURE__ */ import_react34.default.createElement(import_material22.Typography, { variant: "h6", color: "text.primary" }, day.format("D")),
+      /* @__PURE__ */ import_react34.default.createElement(import_material22.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
     );
-  })));
+  })), isLoading ? /* @__PURE__ */ import_react34.default.createElement(import_material22.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react34.default.createElement(import_material22.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react34.default.createElement(
+    EmptyState,
+    {
+      title: "Inicia la gesti\xF3n de las actividades",
+      subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
+      icon: /* @__PURE__ */ import_react34.default.createElement(LogoCalendario, null)
+    }
+  ) : (
+    // Grid de horas y eventos
+    /* @__PURE__ */ import_react34.default.createElement(import_material22.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react34.default.createElement(import_material22.Box, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ import_react34.default.createElement(
+      import_material22.Box,
+      {
+        key: h,
+        height: 60,
+        textAlign: "right",
+        pr: 1,
+        borderColor: "divider"
+      },
+      /* @__PURE__ */ import_react34.default.createElement(import_material22.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs5.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_react34.default.createElement(
+        import_material22.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 = getCellBorderType(hourIdx, dayEvents);
+          return /* @__PURE__ */ import_react34.default.createElement(
+            import_material22.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_react34.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
-var import_react27 = __toESM(require("react"), 1);
-var import_material21 = require("@mui/material");
+var import_react35 = __toESM(require("react"), 1);
+var import_material23 = require("@mui/material");
 var import_dayjs6 = __toESM(require("dayjs"), 1);
-var hours = Array.from({ length: 24 }, (_, i) => i);
-var DayView = ({ events, currentDate, onEventClick }) => {
+var DayView = ({
+  events,
+  currentDate,
+  isLoading,
+  onEventClick,
+  onEventHover,
+  startHour = 0,
+  endHour = 24
+}) => {
+  const hours = Array.from({ length: endHour - startHour + 1 }, (_, i) => startHour + i);
   const getCellBorderType = (cellHour, dayEvents2) => {
     for (const event2 of dayEvents2) {
       const start = event2.start.hour() + event2.start.minute() / 60;
@@ -3025,8 +3832,7 @@ var DayView = ({ events, currentDate, onEventClick }) => {
       const cellStart = cellHour;
       const cellEnd = cellHour + 1;
       if (cellEnd > start && cellStart < end) {
-        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01)
-          return "full";
+        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01) return "full";
         if (Math.abs(cellStart - start) < 0.01) return "start";
         if (Math.abs(cellEnd - end) < 0.01) return "end";
         return "middle";
@@ -3037,21 +3843,16 @@ var DayView = ({ events, currentDate, onEventClick }) => {
   const dayEvents = events.filter(
     (event2) => currentDate.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
   );
-  return /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ import_react27.default.createElement(
-    import_material21.Box,
+  const noEvents = events.length === 0;
+  return /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ import_react35.default.createElement(import_material23.Typography, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ import_react35.default.createElement(import_material23.Typography, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react35.default.createElement(import_material23.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ import_react35.default.createElement(
+    EmptyState,
     {
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      textAlign: "start",
-      gap: 0.5,
-      py: 1,
-      bgcolor: "primary.50"
-    },
-    /* @__PURE__ */ import_react27.default.createElement(import_material21.Typography, { variant: "h6", color: "text.secondary" }, currentDate.format("D")),
-    /* @__PURE__ */ import_react27.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd"))
-  )), /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ import_react27.default.createElement(
-    import_material21.Box,
+      title: "Inicia la gesti\xF3n de las actividades",
+      subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
+      icon: /* @__PURE__ */ import_react35.default.createElement(LogoCalendario, null)
+    }
+  ) : /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ import_react35.default.createElement(
+    import_material23.Box,
     {
       key: h,
       height: 60,
@@ -3061,11 +3862,11 @@ var DayView = ({ events, currentDate, onEventClick }) => {
       borderRight: "1px solid",
       borderColor: "divider"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
-  ))), /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
+    /* @__PURE__ */ import_react35.default.createElement(import_material23.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
+  ))), /* @__PURE__ */ import_react35.default.createElement(import_material23.Box, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
     const borderType = getCellBorderType(hourIdx, dayEvents);
-    return /* @__PURE__ */ import_react27.default.createElement(
-      import_material21.Box,
+    return /* @__PURE__ */ import_react35.default.createElement(
+      import_material23.Box,
       {
         key: hourIdx,
         height: 60,
@@ -3075,20 +3876,26 @@ var DayView = ({ events, currentDate, onEventClick }) => {
       }
     );
   }), dayEvents.map((event2) => {
-    const eventStart = currentDate.isSame(event2.start, "day") ? event2.start : currentDate.startOf("day").hour(0).minute(0);
-    const eventEnd = currentDate.isSame(event2.end, "day") ? event2.end : currentDate.endOf("day").hour(23).minute(59);
-    const startMinutes = eventStart.hour() * 60 + eventStart.minute();
-    const durationMinutes = eventEnd.diff(eventStart, "minute");
-    return /* @__PURE__ */ import_react27.default.createElement(
+    const eventStart = currentDate.isSame(event2.start, "day") ? event2.start : currentDate.startOf("day");
+    const eventEnd = currentDate.isSame(event2.end, "day") ? event2.end : currentDate.endOf("day");
+    const minStart = currentDate.hour(startHour).minute(0);
+    const maxEnd = currentDate.hour(endHour).minute(0);
+    const clampedStart = eventStart.isBefore(minStart) ? minStart : eventStart;
+    const clampedEnd = eventEnd.isAfter(maxEnd) ? maxEnd : eventEnd;
+    const startMinutes = (clampedStart.hour() - startHour) * 60 + clampedStart.minute();
+    const durationMinutes = clampedEnd.diff(clampedStart, "minute");
+    return /* @__PURE__ */ import_react35.default.createElement(
       CalendarEventCard,
       {
         key: `${event2.id}-${currentDate.toString()}`,
         event: event2,
         color: stateColors[event2.state],
-        onClick: () => onEventClick == null ? void 0 : onEventClick(event2),
+        onClick: () => onEventClick == null ? void 0 : onEventClick(event2, currentDate),
+        onHover: onEventHover,
         sx: {
           position: "absolute",
-          top: `${startMinutes + 15}px`,
+          top: `${startMinutes}px`,
+          height: `${durationMinutes}px`,
           left: 4,
           right: 4
         }
@@ -3098,17 +3905,27 @@ var DayView = ({ events, currentDate, onEventClick }) => {
 };
 
 // src/Components/Calendario/Calendar.tsx
+var import_dayjs7 = __toESM(require("dayjs"), 1);
 var Calendar = ({
   events,
   onDayClick,
   onMoreClick,
   onEventClick,
+  onEventHover,
+  onDateChange,
   view: initialView = "month",
   onViewChange,
-  toolbar
+  toolbar,
+  isLoading = false,
+  startHour = 0,
+  // <- valor por defecto
+  endHour = 23
 }) => {
-  const [view, setView] = (0, import_react28.useState)(initialView);
-  const [currentDate, setCurrentDate] = (0, import_react28.useState)((0, import_dayjs7.default)());
+  const [view, setView] = (0, import_react36.useState)(initialView);
+  const [currentDate, setCurrentDate] = (0, import_react36.useState)((0, import_dayjs7.default)());
+  (0, import_react36.useEffect)(() => {
+    onDateChange == null ? void 0 : onDateChange(currentDate);
+  }, []);
   const handleViewChange = (newView) => {
     setView(newView);
     onViewChange == null ? void 0 : onViewChange(newView);
@@ -3116,12 +3933,19 @@ var Calendar = ({
   const handleNavigate = (action) => {
     let newDate = currentDate;
     const unit = view === "month" ? "month" : "day";
-    if (action === "PREV") newDate = currentDate.subtract(1, unit);
-    else if (action === "NEXT") newDate = currentDate.add(1, unit);
-    else if (action === "TODAY") newDate = (0, import_dayjs7.default)();
+    if (action === "PREV") {
+      if (view === "day") newDate = currentDate.subtract(1, "day");
+      if (view === "week") newDate = currentDate.subtract(1, "week");
+      if (view === "month") newDate = currentDate.subtract(1, "month");
+    } else if (action === "NEXT") {
+      if (view === "day") newDate = currentDate.add(1, "day");
+      if (view === "week") newDate = currentDate.add(1, "week");
+      if (view === "month") newDate = currentDate.add(1, "month");
+    } else if (action === "TODAY") newDate = (0, import_dayjs7.default)();
     setCurrentDate(newDate);
+    onDateChange == null ? void 0 : onDateChange(newDate);
   };
-  return /* @__PURE__ */ import_react28.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(import_material24.Box, null, /* @__PURE__ */ import_react36.default.createElement(
     CalendarToolbar,
     {
       labelDate: currentDate,
@@ -3130,40 +3954,417 @@ var Calendar = ({
       onNavigate: handleNavigate
     },
     toolbar
-  ), view === "month" && /* @__PURE__ */ import_react28.default.createElement(
+  ), isLoading ? /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement(import_material24.Box, null, /* @__PURE__ */ import_react36.default.createElement(
+    import_material24.Box,
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "400px"
+    },
+    /* @__PURE__ */ import_react36.default.createElement(import_material24.CircularProgress, { variant: "indeterminate" })
+  ))) : /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, view === "month" && /* @__PURE__ */ import_react36.default.createElement(
     MonthView,
     {
       events,
+      currentDate,
       onDayClick,
       onMoreClick,
       onEventClick,
-      currentDate
+      onEventHover
     }
-  ), view === "week" && /* @__PURE__ */ import_react28.default.createElement(
+  ), view === "week" && /* @__PURE__ */ import_react36.default.createElement(
     WeekView,
     {
       events,
       currentDate,
       onDayClick,
       onMoreClick,
-      onEventClick
+      onEventClick,
+      onEventHover,
+      startHour,
+      endHour
     }
-  ), view === "day" && /* @__PURE__ */ import_react28.default.createElement(
+  ), view === "day" && /* @__PURE__ */ import_react36.default.createElement(
     DayView,
     {
       events,
       currentDate,
-      onEventClick
+      onEventClick,
+      onEventHover,
+      startHour,
+      endHour
     }
-  ));
+  )));
+};
+
+// src/Components/SCTime.tsx
+var import_react37 = __toESM(require("react"), 1);
+var import_material25 = require("@mui/material");
+var import_LocalizationProvider3 = require("@mui/x-date-pickers/LocalizationProvider");
+var import_AdapterDayjs2 = require("@mui/x-date-pickers/AdapterDayjs");
+var import_dayjs8 = __toESM(require("dayjs"), 1);
+var import_es3 = require("dayjs/locale/es");
+var import_x_license_pro3 = require("@mui/x-license-pro");
+var import_AccessTime = __toESM(require("@mui/icons-material/AccessTime"), 1);
+var import_TimeField = require("@mui/x-date-pickers/TimeField");
+var import_DigitalClock = require("@mui/x-date-pickers/DigitalClock");
+var SCTime = ({
+  label = "Hora",
+  required = false,
+  disabled = false,
+  background = "transparent",
+  timeStep = 5,
+  state,
+  setState
+}) => {
+  import_x_license_pro3.LicenseInfo.setLicenseKey(
+    "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
+  );
+  const isTimeEmpty = required && !state;
+  const hasError = isTimeEmpty;
+  const [anchorEl, setAnchorEl] = (0, import_react37.useState)(null);
+  const [isOpenPopover, setIsOpenPopover] = (0, import_react37.useState)(false);
+  const [popoverPlacement, setPopoverPlacement] = (0, import_react37.useState)("bottom");
+  const detectPlacement = (element) => {
+    const rect = element.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const spaceBelow = windowHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const popoverHeight = 300;
+    if (spaceBelow < popoverHeight && spaceAbove > spaceBelow) {
+      setPopoverPlacement("top");
+    } else {
+      setPopoverPlacement("bottom");
+    }
+  };
+  const handleTimeFieldClick = (event2) => {
+    if (!disabled) {
+      const target = event2.currentTarget;
+      setAnchorEl(target);
+      detectPlacement(target);
+      setIsOpenPopover(true);
+    }
+  };
+  const handleTimeChange = (newValue) => {
+    const dayjsValue = newValue ? (0, import_dayjs8.default)(newValue) : null;
+    setState(dayjsValue);
+    setIsOpenPopover(false);
+    setAnchorEl(null);
+  };
+  const handleClose = () => {
+    setIsOpenPopover(false);
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ import_react37.default.createElement(import_LocalizationProvider3.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs }, /* @__PURE__ */ import_react37.default.createElement(import_material25.Box, { sx: { position: "relative", width: "120px" } }, /* @__PURE__ */ import_react37.default.createElement(
+    import_TimeField.TimeField,
+    {
+      label,
+      value: state,
+      disabled,
+      required,
+      error: hasError,
+      onClick: handleTimeFieldClick,
+      slotProps: {
+        textField: {
+          InputProps: {
+            endAdornment: /* @__PURE__ */ import_react37.default.createElement(import_material25.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react37.default.createElement(
+              import_AccessTime.default,
+              {
+                color: disabled ? "disabled" : "action",
+                sx: { cursor: disabled ? "default" : "pointer" },
+                fontSize: "small"
+              }
+            )),
+            sx: {
+              backgroundColor: background,
+              padding: "8px 12px",
+              cursor: disabled ? "default" : "pointer",
+              "& input": {
+                cursor: disabled ? "default" : "pointer"
+              }
+            }
+          }
+        }
+      },
+      sx: {
+        width: "100%",
+        "& .MuiInputBase-input": {
+          cursor: disabled ? "default" : "pointer"
+        },
+        "& .MuiPickersSectionList-root": {
+          padding: "0px !important"
+        }
+      }
+    }
+  ), /* @__PURE__ */ import_react37.default.createElement(
+    import_material25.Popover,
+    {
+      open: isOpenPopover,
+      anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: popoverPlacement === "top" ? "top" : "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: popoverPlacement === "top" ? "bottom" : "top",
+        horizontal: "left"
+      },
+      marginThreshold: 0,
+      disableScrollLock: true,
+      slotProps: {
+        paper: {
+          sx: {
+            boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+            borderRadius: 1,
+            border: "1px solid #e0e0e0",
+            maxHeight: "300px",
+            overflow: "visible"
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ import_react37.default.createElement(import_material25.ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ import_react37.default.createElement(import_material25.Box, { sx: { p: 0 } }, /* @__PURE__ */ import_react37.default.createElement(
+      import_DigitalClock.DigitalClock,
+      {
+        value: state,
+        onChange: handleTimeChange,
+        timeStep,
+        sx: {
+          "& .MuiList-root": {
+            maxHeight: "250px",
+            overflow: "auto"
+          },
+          "& .MuiMenuItem-root": {
+            fontSize: "0.875rem",
+            py: 0.5
+          }
+        }
+      }
+    )))
+  )));
+};
+
+// src/Components/SCCard.tsx
+var import_react38 = __toESM(require("react"), 1);
+var import_material26 = require("@mui/material");
+var import_IconButton = __toESM(require("@mui/material/IconButton"), 1);
+var import_Card = __toESM(require("@mui/material/Card"), 1);
+var import_CardHeader = __toESM(require("@mui/material/CardHeader"), 1);
+var import_CardMedia = __toESM(require("@mui/material/CardMedia"), 1);
+var import_CardContent = __toESM(require("@mui/material/CardContent"), 1);
+var import_CardActions = __toESM(require("@mui/material/CardActions"), 1);
+var import_Collapse = __toESM(require("@mui/material/Collapse"), 1);
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"), 1);
+var Muicon9 = __toESM(require("@mui/icons-material"), 1);
+var SCCard = ({ title, image, iconTitle, actionsTitle, subtitle, content, actions, expand }) => {
+  let iconTitleValidation = "";
+  let IconTitle;
+  const [expanded, setExpanded] = import_react38.default.useState(false);
+  if (iconTitle) {
+    if (Muicon9[iconTitle] == void 0) {
+      if (iconTitle && import_react38.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
+        iconTitleValidation = "image";
+        IconTitle = iconTitle;
+      } else {
+        iconTitleValidation = "icon";
+        IconTitle = iconTitle;
+      }
+    } else {
+      iconTitleValidation = "icon";
+      IconTitle = Muicon9[iconTitle];
+    }
+  }
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+  return /* @__PURE__ */ import_react38.default.createElement(import_Card.default, { sx: { maxWidth: 345 } }, title && /* @__PURE__ */ import_react38.default.createElement(
+    import_CardHeader.default,
+    {
+      avatar: iconTitle ? iconTitleValidation === "image" ? /* @__PURE__ */ import_react38.default.createElement(import_material26.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react38.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react38.default.createElement(import_material26.SvgIcon, { 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__ */ import_react38.default.createElement(import_material26.Button, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, "Expandir") : (expand == null ? void 0 : expand.type) === "icon" && /* @__PURE__ */ import_react38.default.createElement(import_IconButton.default, { onClick: handleExpandClick, sx: { marginRight: "auto" }, size: "small" }, /* @__PURE__ */ import_react38.default.createElement(import_ExpandMore.default, { fontSize: "small" })) : actionsTitle,
+      title,
+      subheader: subtitle,
+      sx: {
+        "& .MuiCardHeader-title": {
+          fontSize: "14px",
+          color: "text.primary"
+        },
+        "& .MuiCardHeader-subheader": {
+          fontSize: "13px",
+          color: "text.secondary"
+        },
+        "& .MuiCardHeader-action": {
+          height: "40px !important",
+          display: "flex",
+          alignItems: "center"
+        }
+      }
+    }
+  ), image && /* @__PURE__ */ import_react38.default.createElement(
+    import_CardMedia.default,
+    {
+      component: "img",
+      height: "194",
+      image
+    }
+  ), content && /* @__PURE__ */ import_react38.default.createElement(import_CardContent.default, { sx: { padding: "8px 16px !important" } }, content), ((expand == null ? void 0 : expand.position) == "bottom" || actions != void 0) && /* @__PURE__ */ import_react38.default.createElement(import_CardActions.default, { disableSpacing: true, sx: { justifyContent: "flex-end" } }, (expand == null ? void 0 : expand.position) === "bottom" ? (expand == null ? void 0 : expand.type) === "text" ? /* @__PURE__ */ import_react38.default.createElement(import_material26.Button, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, "Expandir") : (expand == null ? void 0 : expand.type) === "icon" && /* @__PURE__ */ import_react38.default.createElement(import_IconButton.default, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, /* @__PURE__ */ import_react38.default.createElement(import_ExpandMore.default, null)) : null, actions && actions.length > 0 ? actions.map((action, index) => /* @__PURE__ */ import_react38.default.createElement(
+    import_material26.Button,
+    {
+      key: index,
+      size: "small",
+      color: action.color || "primary",
+      variant: action.variant || "text",
+      onClick: action.fn,
+      disabled: action.disabled || false
+    },
+    action.text
+  )) : ""), expand && /* @__PURE__ */ import_react38.default.createElement(import_Collapse.default, { in: expanded, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ import_react38.default.createElement(import_CardContent.default, { sx: { padding: "8px 16px !important" } }, expand.content)));
+};
+
+// src/Components/SCActivityCalendar.tsx
+var import_react39 = __toESM(require("react"), 1);
+var import_material27 = require("@mui/material");
+var import_Grid28 = __toESM(require("@mui/material/Grid2"), 1);
+var import_AdapterDateFns2 = require("@mui/x-date-pickers/AdapterDateFns");
+var import_LocalizationProvider4 = require("@mui/x-date-pickers/LocalizationProvider");
+var import_StaticDatePicker2 = require("@mui/x-date-pickers/StaticDatePicker");
+var import_locale2 = require("date-fns/locale");
+var import_date_fns2 = require("date-fns");
+var import_KeyboardDoubleArrowDown2 = __toESM(require("@mui/icons-material/KeyboardDoubleArrowDown"), 1);
+var import_KeyboardDoubleArrowUp2 = __toESM(require("@mui/icons-material/KeyboardDoubleArrowUp"), 1);
+var import_ArrowForward = __toESM(require("@mui/icons-material/ArrowForward"), 1);
+var import_LightModeOutlined = __toESM(require("@mui/icons-material/LightModeOutlined"), 1);
+var SCActivityCalendar = ({
+  //informativas
+  //apariencia
+  background,
+  //funcionales
+  setState,
+  state,
+  events,
+  fn,
+  configRangeHour
+}) => {
+  let convertFecha;
+  const [fecha, setFecha] = (0, import_react39.useState)(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react39.useState)();
+  const [stateVal, setstateVal] = import_react39.default.useState(/* @__PURE__ */ new Date());
+  const [openCalendar, setOpenCalendar] = import_react39.default.useState(false);
+  const hoy = /* @__PURE__ */ new Date();
+  const inicioSemana = (0, import_date_fns2.startOfWeek)(fecha, { weekStartsOn: 0 });
+  const diasSemana = Array.from({ length: 7 }, (_, i) => (0, import_date_fns2.addDays)(inicioSemana, i));
+  import_react39.default.useEffect(() => {
+    if (fecha != null) {
+      handleConvertFecha(fecha);
+    }
+  }, [fecha]);
+  const handleConvertFecha = (fecha2) => {
+    if (fecha2) {
+      let day = (fecha2.getDate() < 10 ? "0" : "") + fecha2.getDate();
+      let month = (fecha2.getMonth() + 1 < 10 ? "0" : "") + (fecha2.getMonth() + 1);
+      let year = fecha2.getFullYear();
+      convertFecha = day + "/" + month + "/" + year;
+      setState(convertFecha);
+      setFecha(fecha2);
+    }
+  };
+  const toggleCalendar = (newOpen) => () => {
+    setOpenCalendar(newOpen);
+  };
+  const locale = __spreadProps(__spreadValues({}, import_locale2.es), {
+    options: {
+      weekStartsOn: 0
+      // 0 para domingo, 1 para lunes, etc.
+    }
+  });
+  return /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: import_locale2.es }, openCalendar == false ? /* @__PURE__ */ import_react39.default.createElement(import_material27.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react39.default.createElement(import_material27.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react39.default.createElement(import_Grid28.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 0px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react39.default.createElement(import_Grid28.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react39.default.createElement(import_material27.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react39.default.createElement(import_material27.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns2.format)(dia, "EEEE", { locale: import_locale2.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react39.default.createElement(
+    import_material27.Box,
+    {
+      onClick: () => setFecha(dia),
+      sx: {
+        padding: "10px",
+        textAlign: "center",
+        backgroundColor: (0, import_date_fns2.isSameDay)(dia, fecha) ? "#2063a0" : "transparent",
+        cursor: "pointer",
+        borderRadius: "50%",
+        //border: '1px solid lightgray',
+        position: "relative"
+        //width: '36px',
+        //height: '36px',
+      }
+    },
+    /* @__PURE__ */ import_react39.default.createElement(import_material27.Typography, { sx: { fontSize: "12px !important", color: (0, import_date_fns2.isSameDay)(dia, fecha) ? "white" : "#101840DE" } }, (0, import_date_fns2.format)(dia, "d"))
+  )))), /* @__PURE__ */ import_react39.default.createElement(import_Grid28.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react39.default.createElement(import_material27.IconButton, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ import_react39.default.createElement(import_KeyboardDoubleArrowDown2.default, { color: "action" }))))) : /* @__PURE__ */ import_react39.default.createElement(import_material27.Box, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ import_react39.default.createElement(
+    import_StaticDatePicker2.StaticDatePicker,
+    {
+      orientation: "landscape",
+      openTo: "day",
+      value: fecha,
+      slotProps: { toolbar: { hidden: true }, actionBar: { actions: [] } },
+      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_react39.default.createElement(import_Grid28.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react39.default.createElement(import_material27.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react39.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react39.default.createElement(import_material27.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_react39.default.createElement(
+    import_material27.Box,
+    {
+      key: dayIndex
+    },
+    /* @__PURE__ */ import_react39.default.createElement(import_Grid28.default, { container: true }, /* @__PURE__ */ import_react39.default.createElement(import_material27.Typography, { variant: "subtitle1", sx: { color: (0, import_date_fns2.isSameDay)(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__ */ import_react39.default.createElement(import_material27.Box, { sx: {
+      display: "flex",
+      flexDirection: "column"
+    } }, (() => {
+      const esDomingo = day.getDay() === 0;
+      const eventosDelDia = events.filter(
+        (event2) => new Date(event2.date).toDateString() === day.toDateString()
+      );
+      if (eventosDelDia.length > 0) {
+        return eventosDelDia.map((event2, idx) => /* @__PURE__ */ import_react39.default.createElement(
+          SCListContent,
+          {
+            key: idx,
+            options: [{
+              title: event2.description,
+              subtitle: /* @__PURE__ */ import_react39.default.createElement(import_react39.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_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(import_material27.Typography, null, "Todo el dia"), /* @__PURE__ */ import_react39.default.createElement(import_LightModeOutlined.default, { fontSize: "small" })) : /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(import_material27.Typography, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ import_react39.default.createElement(import_ArrowForward.default, { fontSize: "small" }), /* @__PURE__ */ import_react39.default.createElement(import_material27.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",
+              description: /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(import_material27.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react39.default.createElement(import_material27.Typography, 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
+            }]
+          }
+        ));
+      } else {
+        return /* @__PURE__ */ import_react39.default.createElement(
+          SCListContent,
+          {
+            options: [{
+              title: esDomingo == true ? "No disponible" : "No hay actividades asignadas",
+              iconLeft: esDomingo == true ? "BlockOutlined" : "HandymanOutlined",
+              disable: true
+            }]
+          }
+        );
+      }
+    })())
+  ))));
 };
 
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react29 = __toESM(require("react"), 1);
-var import_icons_material11 = require("@mui/icons-material");
+var import_react40 = __toESM(require("react"), 1);
+var import_icons_material12 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
     styleOverrides: {
@@ -3860,10 +5061,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react29.default.createElement(import_icons_material11.CheckCircleRounded),
-        error: import_react29.default.createElement(import_icons_material11.ErrorRounded),
-        warning: import_react29.default.createElement(import_icons_material11.WarningRounded),
-        info: import_react29.default.createElement(import_icons_material11.InfoRounded)
+        success: import_react40.default.createElement(import_icons_material12.CheckCircleRounded),
+        error: import_react40.default.createElement(import_icons_material12.ErrorRounded),
+        warning: import_react40.default.createElement(import_icons_material12.WarningRounded),
+        info: import_react40.default.createElement(import_icons_material12.InfoRounded)
       }
     },
     variants: [
@@ -4905,24 +6106,29 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
 0 && (module.exports = {
   ADCSincoTheme,
   AdproSincoTheme,
+  Attachment,
   Calendar,
   EmptyState,
   FooterAction,
   MultiSelect,
   PageHeader,
+  SCActivityCalendar,
   SCAutocomplete,
   SCCalendarSwipeable,
+  SCCard,
   SCDataGrid,
   SCDataGridInitial,
   SCDateRange,
   SCDialog,
   SCDrawer,
+  SCListContent,
   SCMenu,
   SCModal,
   SCSelect,
   SCTabs,
   SCTextArea,
   SCTextField,
+  SCTime,
   SCToastNotification,
   SincoTheme,
   ToastProgress,