componentes-sinco 1.0.7 → 1.0.9

package/dist/index.cjs

@@ -68,6 +68,7 @@ __export(src_exports, {
   PageHeader: () => PageHeader,
   SCAutocomplete: () => SCAutocomplete,
   SCCalendarSwipeable: () => SCCalendarSwipeable,
+  SCCard: () => SCCard,
   SCDataGrid: () => SCDataGrid,
   SCDataGridInitial: () => SCDataGridInitial,
   SCDateRange: () => SCDateRange,
@@ -79,6 +80,7 @@ __export(src_exports, {
   SCTabs: () => SCTabs,
   SCTextArea: () => SCTextArea,
   SCTextField: () => SCTextField,
+  SCTime: () => SCTime,
   SCToastNotification: () => SCToastNotification,
   SincoTheme: () => SincoTheme,
   ToastProgress: () => ToastProgress,
@@ -96,10 +98,12 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Components/Drawer/SCDrawer.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_material7 = 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);
@@ -733,11 +737,9 @@ function SCSelect({
   width = "100%",
   size = "small",
   variant = "outlined",
-  deleteType = "button",
+  background = "white",
   required,
   disabled,
-  background,
-  fnAplicar,
   setState,
   state
 }) {
@@ -812,14 +814,20 @@ 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) => {
@@ -851,7 +859,6 @@ function SCAutocomplete({
   state,
   inputChange,
   maxCheck
-  // Agregar el parámetro maxCheck
 }) {
   const labelContent = `<span style="color: red;">* </span>` + label;
   let group = "";
@@ -945,6 +952,7 @@ function SCAutocomplete({
     {
       multiple: typeFormat === "multiselect",
       clearOnEscape: true,
+      noOptionsText: "No se encuentra",
       disabled,
       options: data,
       isOptionEqualToValue: (option, value) => getItemValue(option).value === getItemValue(value).value,
@@ -1188,29 +1196,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_react8 = __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_react8.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_react8.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_react8.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_react8.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_react8.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_react8.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 +1285,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_react9.useRef)(null);
+  const [drawerOpen, setDrawerOpen] = import_react9.default.useState(open);
+  const [toast, setToast] = import_react9.default.useState(null);
+  const [stateChipFilters, setChipFilters] = import_react9.default.useState(false);
+  const [textFilters, setTextFilters] = import_react9.default.useState([]);
+  (0, import_react9.useEffect)(() => {
+    if (chipFilters != void 0) {
+      if (chipFilters.length > 0) {
+        setTextFilters([]);
+        inputValidation();
+      }
+    }
+  }, [chipFilters]);
+  (0, import_react9.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 +1329,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);
           }
         }
       }
+      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 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(
+  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_react9.default.createElement(import_react9.default.Fragment, null, toast && /* @__PURE__ */ import_react9.default.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ import_react9.default.createElement(import_Grid23.default, { container: true, justifyContent: "flex-start", flexWrap: "nowrap", alignItems: "center", sx: { width: "100%" } }, shouldShowChips && /* @__PURE__ */ import_react9.default.createElement(import_material7.Box, { display: "flex", alignItems: "center", sx: { maxWidth: "78%" } }, /* @__PURE__ */ import_react9.default.createElement(import_material7.IconButton, { onClick: () => scroll(-150), size: "small" }, /* @__PURE__ */ import_react9.default.createElement(import_ArrowBackIos.default, { fontSize: "small" })), /* @__PURE__ */ import_react9.default.createElement(
+    import_material7.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_react9.default.createElement(
+      import_material7.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_react9.default.createElement(import_material7.IconButton, { onClick: () => scroll(150), size: "small" }, /* @__PURE__ */ import_react9.default.createElement(import_ArrowForwardIos.default, { fontSize: "small" }))), (buttonDrawer == null ? void 0 : buttonDrawer.type) == "chip" ? /* @__PURE__ */ import_react9.default.createElement(
     import_material7.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_react9.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0,
+      deleteIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react9.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0
     }, (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? { onDelete: () => {
     } } : {}), {
       sx: {
@@ -1285,7 +1511,7 @@ function SCDrawer({
         textTransform: "capitalize"
       }
     })
-  ) : /* @__PURE__ */ import_react8.default.createElement(
+  ) : /* @__PURE__ */ import_react9.default.createElement(
     import_material7.Button,
     {
       "data-testid": "test-buttonDrawer",
@@ -1294,11 +1520,11 @@ 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_react9.default.createElement(ButtonIcon, { fontSize: "small" }) : null,
+      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react9.default.createElement(ButtonIcon, { fontSize: "small" }) : null
     },
     (_b = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _b : ""
-  ), /* @__PURE__ */ import_react8.default.createElement(
+  )), /* @__PURE__ */ import_react9.default.createElement(
     import_material7.Drawer,
     {
       open: drawerOpen,
@@ -1312,15 +1538,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_react9.default.createElement(import_material7.Stack, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react9.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_react9.default.createElement(import_material7.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ import_react9.default.createElement(import_material7.IconButton, { onClick: handleDrawerClose }, /* @__PURE__ */ import_react9.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))), /* @__PURE__ */ import_react9.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) => {
       var _a2, _b2, _c, _d, _e, _f;
-      return /* @__PURE__ */ import_react8.default.createElement(
+      return /* @__PURE__ */ import_react9.default.createElement(
         import_material7.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_react9.default.createElement(import_material7.Stack, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ import_react9.default.createElement(
           SCTextField,
           {
             title: arrayElement.title,
@@ -1346,7 +1572,7 @@ function SCDrawer({
             onBlur: arrayElement.onBlur,
             onKeyDown: arrayElement.onKeyDown
           }
-        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ import_react9.default.createElement(
           SCTextArea,
           {
             title: arrayElement.title,
@@ -1365,7 +1591,7 @@ function SCDrawer({
             state: arrayElement.state || "",
             onBlur: arrayElement.onBlur
           }
-        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ import_react9.default.createElement(
           SCAutocomplete,
           {
             label: arrayElement.label,
@@ -1383,7 +1609,7 @@ function SCDrawer({
             state: arrayElement.state || "",
             inputChange: arrayElement.inputChange
           }
-        ) : arrayElement.type === "select" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "select" ? /* @__PURE__ */ import_react9.default.createElement(
           SCSelect,
           {
             label: arrayElement.label,
@@ -1392,7 +1618,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 +1625,7 @@ function SCDrawer({
             setState: arrayElement.setState,
             state: arrayElement.state || ""
           }
-        ) : arrayElement.type === "dateRange" ? /* @__PURE__ */ import_react8.default.createElement(
+        ) : arrayElement.type === "dateRange" ? /* @__PURE__ */ import_react9.default.createElement(
           SCDateRange,
           {
             labelDateInitial: arrayElement.labelDateInitial,
@@ -1413,7 +1638,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_react9.default.createElement(
       import_Grid23.default,
       {
         sx: { borderTop: 1, borderColor: "#1018403B" },
@@ -1425,7 +1650,7 @@ 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(
+      actionsA.map((btn, index) => /* @__PURE__ */ import_react9.default.createElement(
         import_material7.Button,
         {
           key: index,
@@ -1442,7 +1667,7 @@ function SCDrawer({
 }
 
 // src/Components/FooterAction/FooterAction.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_material8 = require("@mui/material");
 var FooterAction = ({
   leftContent,
@@ -1450,44 +1675,44 @@ var FooterAction = ({
   label,
   variant
 }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     import_material8.AppBar,
     {
       color: "inherit",
       sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
     },
-    /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       import_material8.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_react10.default.createElement(import_material8.Box, { flexGrow: 1 }),
+      label && /* @__PURE__ */ import_react10.default.createElement(import_material8.Typography, { variant: "body2", color: "text.secondary" }, label),
       rightContent
     )
   );
 };
 
 // src/Components/Modal/Helpers/Data.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __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" })
+    icon: /* @__PURE__ */ import_react11.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" })
+    icon: /* @__PURE__ */ import_react11.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" })
+    icon: /* @__PURE__ */ import_react11.default.createElement(import_icons_material5.Warning, { color: "warning", fontSize: "medium" })
   }
 };
 
@@ -1517,7 +1742,7 @@ var getButtonColor = (state) => {
 };
 
 // src/Components/Modal/SCModal.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_material9 = require("@mui/material");
 var import_icons_material7 = require("@mui/icons-material");
 
@@ -1536,34 +1761,31 @@ var SCModal = ({
   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)(
+  const [openModal, setOpenModal] = (0, import_react12.useState)(open != null ? open : false);
+  const handleOpen = import_react12.default.useCallback(() => {
+    setOpenModal((prev) => !prev);
+  }, []);
+  const Icon = (0, import_react12.useMemo)(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
+  const handleClose = (0, import_react12.useCallback)(() => setOpenModal(false), []);
+  const prevAction = (0, import_react12.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(
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
     import_material9.Button,
     {
       "data-testid": "test-buttonModal",
       color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
-      onClick: toggleModal(true),
+      onClick: handleOpen,
       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)
+      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ import_react12.default.createElement(Icon, null),
+      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ import_react12.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(
+  ), /* @__PURE__ */ import_react12.default.createElement(import_material9.Modal, { open: openModal, onClose: handleOpen, sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react12.default.createElement(
     import_material9.Box,
     {
       sx: {
@@ -1577,9 +1799,9 @@ var SCModal = ({
         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(
+    /* @__PURE__ */ import_react12.default.createElement(import_material9.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ import_react12.default.createElement(import_material9.Stack, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ import_react12.default.createElement(import_material9.Box, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ import_react12.default.createElement(import_material9.Typography, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ import_react12.default.createElement(import_material9.IconButton, { onClick: handleOpen, "data-testid": "test-buttonClose" }, /* @__PURE__ */ import_react12.default.createElement(import_icons_material7.Close, { color: "action" }))),
+    /* @__PURE__ */ import_react12.default.createElement(import_material9.Stack, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ import_react12.default.createElement(import_material9.Typography, { variant: "body1" }, description || defaultDescription)),
+    action && /* @__PURE__ */ import_react12.default.createElement(
       import_material9.Stack,
       {
         id: "Action",
@@ -1590,7 +1812,7 @@ var SCModal = ({
         bgcolor: "grey.50",
         sx: { borderRadius: 1 }
       },
-      /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement(
         import_material9.Button,
         {
           color: "inherit",
@@ -1600,7 +1822,7 @@ var SCModal = ({
         },
         capitalize("cancelar")
       ),
-      /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement(
         import_material9.Button,
         {
           "data-testid": "test-aceptar",
@@ -1617,32 +1839,32 @@ var SCModal = ({
 };
 
 // src/Components/MultiSelect/MultiSelect.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_material10 = require("@mui/material");
 var import_icons_material9 = require("@mui/icons-material");
 
 // src/Components/MultiSelect/helpers/useHandlers.tsx
-var import_react12 = require("react");
+var import_react13 = 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_react13.useState)(null);
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const [selectedItems, setSelectedItems] = (0, import_react13.useState)([]);
+  const [filterValue, setFilterValue] = (0, import_react13.useState)("");
+  const handleOpen = (0, import_react13.useCallback)((e) => {
     setAnchorEl(e.currentTarget);
     setOpen(true);
   }, []);
-  const handleClose = (0, import_react12.useCallback)(() => {
+  const handleClose = (0, import_react13.useCallback)(() => {
     setAnchorEl(null);
     setOpen(false);
   }, []);
-  const handleFilterChange = (0, import_react12.useCallback)(
+  const handleFilterChange = (0, import_react13.useCallback)(
     (e) => {
       setFilterValue(e.target.value);
     },
     []
   );
-  const handleCheckboxToggle = (0, import_react12.useCallback)((item) => {
+  const handleCheckboxToggle = (0, import_react13.useCallback)((item) => {
     setSelectedItems(
       (prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
     );
@@ -1669,15 +1891,15 @@ function getIconMultiSelect(name) {
 }
 
 // src/Components/MultiSelect/helpers/useFilteredItems.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
-  const filteredItems = (0, import_react13.useMemo)(
+  const filteredItems = (0, import_react14.useMemo)(
     () => items.filter(
       (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
     ),
     [items, filterValue, getItemLabel]
   );
-  const sortedItems = (0, import_react13.useMemo)(() => {
+  const sortedItems = (0, import_react14.useMemo)(() => {
     return [
       ...filteredItems.filter((item) => selectedItems.includes(item)),
       ...filteredItems.filter((item) => !selectedItems.includes(item))
@@ -1711,16 +1933,16 @@ function MultiSelect({
     handleCheckboxToggle,
     setOpen
   } = useMultiSelectHandlers();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (open !== void 0) {
       setOpen(open);
     }
   }, [open, setOpen]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setSelectedItems([]);
   }, [items, setSelectedItems]);
   const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
-  const Icon = (0, import_react14.useMemo)(() => {
+  const Icon = (0, import_react15.useMemo)(() => {
     var _a2;
     return getIconMultiSelect((_a2 = button == null ? void 0 : button.icon) != null ? _a2 : "FilterListOutlined");
   }, [button == null ? void 0 : button.icon]);
@@ -1734,7 +1956,7 @@ function MultiSelect({
     { text: "Aplicar", fn: () => {
     } }
   ];
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
     import_material10.Button,
     {
       "test-id": "multiselect-button",
@@ -1742,11 +1964,11 @@ function MultiSelect({
       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_react15.default.createElement(Icon, null) : null,
+      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ import_react15.default.createElement(Icon, null) : null
     },
     capitalize(textButton != null ? textButton : "MultiSelect")
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react15.default.createElement(
     import_material10.Popover,
     {
       elevation: 8,
@@ -1755,7 +1977,7 @@ 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(
+    /* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ import_react15.default.createElement(import_material10.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ import_react15.default.createElement(
       import_material10.TextField,
       {
         "data-testid": "multiselect-input",
@@ -1767,18 +1989,18 @@ 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_react15.default.createElement(import_material10.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react15.default.createElement(import_icons_material9.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(
+    ))), /* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ import_react15.default.createElement(import_material10.MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ import_react15.default.createElement(import_material10.ListItemIcon, null, /* @__PURE__ */ import_react15.default.createElement(import_material10.Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ import_react15.default.createElement(
       import_material10.MenuItem,
       {
         key: getItemLabel(item),
         dense,
         onClick: () => handleCheckboxToggle(item)
       },
-      /* @__PURE__ */ import_react14.default.createElement(import_material10.ListItemIcon, null, /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react15.default.createElement(import_material10.ListItemIcon, null, /* @__PURE__ */ import_react15.default.createElement(
         import_material10.Checkbox,
         {
           checked: selectedItems.includes(item),
@@ -1786,9 +2008,9 @@ function MultiSelect({
         }
       )),
       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_react15.default.createElement(import_material10.MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ import_react15.default.createElement(import_material10.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(
+      return /* @__PURE__ */ import_react15.default.createElement(
         import_material10.Button,
         {
           key: index,
@@ -1804,7 +2026,7 @@ function MultiSelect({
 }
 
 // src/Components/PageHeader/PageHeader.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_material11 = require("@mui/material");
 var PageHeader = ({
   title,
@@ -1814,7 +2036,7 @@ var PageHeader = ({
   fixed,
   shadow = true
 }) => {
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     import_material11.Stack,
     {
       "data-testid": "main-container",
@@ -1826,12 +2048,12 @@ 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_react16.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_react16.default.createElement(import_material11.Stack, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
   );
 };
 
 // src/Components/SCCalendarSwipeable.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var import_material12 = require("@mui/material");
 var import_Grid24 = __toESM(require("@mui/material/Grid2"), 1);
 var import_AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
@@ -1850,14 +2072,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_react17.useState)(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react17.useState)();
+  const [stateVal, setstateVal] = import_react17.default.useState(/* @__PURE__ */ new Date());
+  const [openCalendar, setOpenCalendar] = import_react17.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_react17.default.useEffect(() => {
     if (fecha != null) {
       handleConvertFecha(fecha);
     }
@@ -1876,11 +2098,11 @@ 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: {
+  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react17.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(
+  } }, diasSemana.map((dia) => /* @__PURE__ */ import_react17.default.createElement(import_Grid24.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react17.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_react17.default.createElement(
     import_material12.Box,
     {
       onClick: () => setFecha(dia),
@@ -1896,8 +2118,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_react17.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_react17.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react17.default.createElement(import_material12.IconButton, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ import_react17.default.createElement(import_KeyboardDoubleArrowDown.default, null))))) : /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ import_react17.default.createElement(
     import_StaticDatePicker.StaticDatePicker,
     {
       orientation: "landscape",
@@ -1907,17 +2129,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_react17.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react17.default.createElement(import_material12.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react17.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
 };
 
 // src/Components/SCDataGrid.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react18 = __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 +2150,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_react18.default.createElement(
         "div",
         {
           style: {
@@ -1983,7 +2240,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_react18.default.createElement(
           "span",
           {
             style: {
@@ -1996,25 +2253,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_react18.default.createElement(import_KeyboardArrowUp.default, { fontSize: "small", color: "action" }) : /* @__PURE__ */ import_react18.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 +2295,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_react18.useState)(0);
+  const [pageSize, setPageSize] = (0, import_react18.useState)(rows);
+  const [arrayRows, setArrayRows] = (0, import_react18.useState)([]);
+  const [selectionModel, setSelectionModel] = (0, import_react18.useState)([]);
+  (0, import_react18.useEffect)(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
     }
@@ -2091,7 +2355,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_react18.default.createElement(import_react18.default.Fragment, null, data && /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react18.default.createElement(
     import_x_data_grid_pro.DataGridPro,
     {
       apiRef,
@@ -2125,7 +2389,6 @@ var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelec
       },
       sx: {
         maxHeight: maxHeight ? `${maxHeight}px` : "none",
-        //overflow: 'auto',
         "& .MuiDataGrid-filler": {
           display: "none !important"
         },
@@ -2155,14 +2418,14 @@ 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_react18.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_react19 = __toESM(require("react"), 1);
 var import_material13 = require("@mui/material");
 
 // src/assets/ImgEmptyState/create.svg
@@ -2190,7 +2453,7 @@ var DefaultIcon = ({
 }) => {
   const imageUrl = 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_react19.default.createElement("img", { src: imageUrl, alt: state, style: iconSize });
 };
 var EmptyState = ({
   state = "create",
@@ -2199,11 +2462,11 @@ var EmptyState = ({
   subtitle,
   actions,
   containerHeight = "100vh",
-  icon = /* @__PURE__ */ import_react18.default.createElement(DefaultIcon, { state, size })
+  icon = /* @__PURE__ */ import_react19.default.createElement(DefaultIcon, { state, size })
 }) => {
   const titleVariant = size === "small" ? "subtitle2" : "h6";
   const subtitleVariant = size === "small" ? "caption" : "body1";
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_material13.Stack,
     {
       alignItems: "center",
@@ -2212,8 +2475,8 @@ 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(
+    icon && /* @__PURE__ */ import_react19.default.createElement(import_material13.Stack, null, icon),
+    /* @__PURE__ */ import_react19.default.createElement(import_material13.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react19.default.createElement(import_material13.Typography, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ import_react19.default.createElement(
       import_material13.Typography,
       {
         variant: subtitleVariant,
@@ -2221,7 +2484,7 @@ var EmptyState = ({
         color: "text.secondary"
       },
       subtitle
-    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ import_react18.default.createElement(
+    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ import_react19.default.createElement(
       import_material13.Stack,
       {
         direction: "row",
@@ -2231,15 +2494,15 @@ var EmptyState = ({
       },
       actions.map((action, index) => {
         var _a, _b, _c, _d;
-        return /* @__PURE__ */ import_react18.default.createElement(
+        return /* @__PURE__ */ import_react19.default.createElement(
           import_material13.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_react19.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            endIcon: action.icon && action.iconPosition === "right" ? /* @__PURE__ */ import_react19.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
             onClick: action.onClick
           },
           capitalize((_d = action.text) != null ? _d : "action")
@@ -2250,7 +2513,7 @@ var EmptyState = ({
 };
 
 // src/Components/SCDialog.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_material14 = require("@mui/material");
 var import_Grid25 = __toESM(require("@mui/material/Grid2"), 1);
 var import_Close2 = __toESM(require("@mui/icons-material/Close"), 1);
@@ -2260,8 +2523,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_react20.useState)(show);
+  (0, import_react20.useEffect)(() => {
     if (show) {
       handleOpen();
     } else {
@@ -2286,7 +2549,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_react20.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
         iconTitleValidation = "image";
         IconTitle = iconTitle;
       } else {
@@ -2311,8 +2574,8 @@ 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(
+  content = content != null ? content : { component: /* @__PURE__ */ import_react20.default.createElement(import_material14.Box, null, " Aqui va el contenido ") };
+  return /* @__PURE__ */ import_react20.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react20.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_react20.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_react20.default.createElement(ButtonIcon, null) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react20.default.createElement(ButtonIcon, null) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react20.default.createElement(import_material14.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react20.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_react20.default.createElement(import_material14.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react20.default.createElement(
     import_material14.Dialog,
     {
       "data-testid": "dialog-element",
@@ -2326,8 +2589,8 @@ 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(
+    title && /* @__PURE__ */ import_react20.default.createElement(import_material14.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react20.default.createElement(import_Grid25.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react20.default.createElement(import_Grid25.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react20.default.createElement(import_material14.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react20.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react20.default.createElement(import_material14.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react20.default.createElement(import_Grid25.default, null, /* @__PURE__ */ import_react20.default.createElement(import_material14.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react20.default.createElement(import_material14.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react20.default.createElement(import_material14.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react20.default.createElement(import_Close2.default, null)) : "")),
+    /* @__PURE__ */ import_react20.default.createElement(
       import_material14.DialogContent,
       {
         "data-testid": "dialog-content",
@@ -2355,7 +2618,7 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
           }
         }
       },
-      content.url ? /* @__PURE__ */ import_react19.default.createElement(
+      content.url ? /* @__PURE__ */ import_react20.default.createElement(
         "iframe",
         {
           style: { border: "none", minWidth: "100%", minHeight: "100%" },
@@ -2365,7 +2628,7 @@ 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(
+    dialogActions.length > 0 ? /* @__PURE__ */ import_react20.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_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
       import_material14.Button,
       {
         variant: "text",
@@ -2373,11 +2636,11 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
         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_react20.default.createElement(import_material14.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(
+    ), /* @__PURE__ */ import_react20.default.createElement(import_material14.Box, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
+      return /* @__PURE__ */ import_react20.default.createElement(
         import_material14.Button,
         {
           key: index + 1,
@@ -2386,12 +2649,12 @@ 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_react20.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
     }))) : dialogActions.map((boton, index) => {
-      return /* @__PURE__ */ import_react19.default.createElement(
+      return /* @__PURE__ */ import_react20.default.createElement(
         import_material14.Button,
         {
           key: index,
@@ -2400,7 +2663,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_react20.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
         },
         boton.text
       );
@@ -2409,12 +2672,12 @@ var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, di
 };
 
 // src/Components/SCMenu.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var import_material15 = require("@mui/material");
 var import_Grid26 = __toESM(require("@mui/material/Grid2"), 1);
 
 // src/Components/Hooks/useWindowDimensions.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
   return {
@@ -2423,8 +2686,8 @@ function getWindowDimensions() {
   };
 }
 function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = (0, import_react20.useState)(getWindowDimensions());
-  (0, import_react20.useEffect)(() => {
+  const [windowDimensions, setWindowDimensions] = (0, import_react21.useState)(getWindowDimensions());
+  (0, import_react21.useEffect)(() => {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
@@ -2442,12 +2705,12 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
   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_react22.default.useState("1");
+  const [value, setValue] = import_react22.default.useState("1");
+  import_react22.default.useEffect(() => {
     heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
   }, [height]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (defaultOption) {
       handleClickMenusItem(event, void 0);
     }
@@ -2477,7 +2740,7 @@ 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(
+  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(import_Grid26.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react22.default.createElement(import_material15.Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react22.default.createElement(import_material15.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(
     import_material15.MenuItem,
     {
       disabled: disable == true ? true : false,
@@ -2485,26 +2748,26 @@ var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu,
       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_react22.default.createElement(import_material15.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react22.default.createElement(import_material15.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ import_react22.default.createElement(import_Grid26.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react22.default.createElement(import_material15.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react22.default.createElement(import_material15.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react22.default.createElement(import_material15.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ import_react22.default.createElement(import_material15.Divider, null) : "")))), /* @__PURE__ */ import_react22.default.createElement(import_Grid26.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react22.default.createElement(import_material15.Box, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react22.default.createElement(import_material15.Typography, { color: "error" }, "No se ha configurado el componente a visualizar")))));
 };
 
 // src/Components/SCTabs.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var import_material16 = 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 SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
-  const [toast, setToast] = import_react22.default.useState(null);
+  const [toast, setToast] = import_react23.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_react23.default.useState("1");
+  (0, import_react23.useEffect)(() => {
     if (defaultOption) {
       handleChange(event, void 0);
     }
@@ -2554,7 +2817,7 @@ 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(
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react23.default.createElement(import_material16.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react23.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react23.default.createElement(
     import_material16.Tabs,
     {
       "data-testid": "tab-container",
@@ -2568,7 +2831,7 @@ 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(
+    options.map((option) => /* @__PURE__ */ import_react23.default.createElement(
       import_material16.Tab,
       {
         "data-testid": "tab-item",
@@ -2577,7 +2840,7 @@ 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(
+        icon: typeIcon == "badge" ? /* @__PURE__ */ import_react23.default.createElement(
           import_material16.Badge,
           {
             sx: {
@@ -2592,33 +2855,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_react23.default.createElement(import_material16.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_react23.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_react23.default.createElement(import_material16.Typography, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ import_react23.default.createElement(import_material16.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react23.default.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
 };
 
 // src/Components/Calendario/Calendar.tsx
-var import_react28 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var import_material22 = require("@mui/material");
-var import_dayjs7 = __toESM(require("dayjs"), 1);
 
 // src/Components/Calendario/CalendarToolbar.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_icons_material10 = require("@mui/icons-material");
 var import_material17 = 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 +2894,7 @@ var CalendarToolbar = ({
   onNavigate,
   children
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react23.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react24.useState)(null);
   const open = Boolean(anchorEl);
   const handleMenuOpen = (event2) => {
     setAnchorEl(event2.currentTarget);
@@ -2639,23 +2907,25 @@ 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(
+  return /* @__PURE__ */ import_react24.default.createElement(import_material17.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ import_react24.default.createElement(import_material17.Box, null, /* @__PURE__ */ import_react24.default.createElement(
     import_material17.Chip,
     {
       label: "Hoy",
-      icon: /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.LightModeOutlined, { fontSize: "small" }),
+      icon: /* @__PURE__ */ import_react24.default.createElement(import_icons_material10.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(
+  )), /* @__PURE__ */ import_react24.default.createElement(import_material17.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react24.default.createElement(import_material17.IconButton, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ import_react24.default.createElement(import_icons_material10.ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ import_react24.default.createElement(import_material17.IconButton, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ import_react24.default.createElement(import_icons_material10.ChevronRight, { fontSize: "small" })), /* @__PURE__ */ import_react24.default.createElement(import_material17.Typography, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ import_react24.default.createElement(import_material17.IconButton, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ import_react24.default.createElement(import_icons_material10.KeyboardArrowDown, { fontSize: "small" })), /* @__PURE__ */ import_react24.default.createElement(
     import_material17.Menu,
     {
       anchorEl,
@@ -2664,14 +2934,14 @@ 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_react24.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("month") }, "Mes"),
+    /* @__PURE__ */ import_react24.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("week") }, "Semana"),
+    /* @__PURE__ */ import_react24.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("day") }, "D\xEDa")
+  )), children ? /* @__PURE__ */ import_react24.default.createElement(import_material17.Box, null, children) : /* @__PURE__ */ import_react24.default.createElement(import_material17.Box, { width: "24px" }), " ");
 };
 
 // src/Components/Calendario/Views/MonthView.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 var import_material19 = require("@mui/material");
 var import_Add = __toESM(require("@mui/icons-material/Add"), 1);
 var import_dayjs4 = __toESM(require("dayjs"), 1);
@@ -2698,14 +2968,24 @@ 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_react25 = __toESM(require("react"), 1);
 var import_material18 = require("@mui/material");
-var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
-  return /* @__PURE__ */ import_react24.default.createElement(
+var CalendarEventCard = ({ event: event2, color, sx, onClick, onHover }) => {
+  const [anchorEl, setAnchorEl] = import_react25.default.useState(null);
+  const handlePopoverOpen = (event3) => {
+    setAnchorEl(event3.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ import_react25.default.createElement(
     import_material18.Stack,
     {
       direction: "row",
@@ -2713,6 +2993,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
       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,7 +3006,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         cursor: onClick ? "pointer" : "default"
       }, sx)
     },
-    /* @__PURE__ */ import_react24.default.createElement(
+    /* @__PURE__ */ import_react25.default.createElement(
       import_material18.Divider,
       {
         orientation: "vertical",
@@ -2737,7 +3018,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         }
       }
     ),
-    /* @__PURE__ */ import_react24.default.createElement(
+    /* @__PURE__ */ import_react25.default.createElement(
       import_material18.Box,
       {
         px: 1,
@@ -2747,7 +3028,7 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
         display: "flex",
         alignItems: "center"
       },
-      /* @__PURE__ */ import_react24.default.createElement(
+      /* @__PURE__ */ import_react25.default.createElement(
         import_material18.Typography,
         {
           color: "text.primary",
@@ -2757,29 +3038,62 @@ var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
-          }
+          },
+          onMouseEnter: handlePopoverOpen,
+          onMouseLeave: handlePopoverClose
         },
-        capitalize(event2.title)
+        event2.title.charAt(0).toUpperCase() + event2.title.slice(1).toLowerCase()
+      ),
+      /* @__PURE__ */ import_react25.default.createElement(
+        import_material18.Popover,
+        {
+          id: "mouse-over-popover",
+          sx: { pointerEvents: "none" },
+          open,
+          anchorEl,
+          anchorOrigin: {
+            vertical: "top",
+            horizontal: "right"
+          },
+          transformOrigin: {
+            vertical: "bottom",
+            horizontal: "right"
+          },
+          onClose: handlePopoverClose,
+          disableRestoreFocus: true
+        },
+        onHover ? onHover(event2) : " "
       )
     )
   );
 };
 
+// src/assets/Icon Scheduler.svg
+var Icon_Scheduler_default = "./Icon Scheduler-WX62PISD.svg";
+
 // 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_react26.default.useState(false);
+  const [selectedDay, setSelectedDay] = import_react26.default.useState(null);
+  const [selectedEvents, setSelectedEvents] = import_react26.default.useState([]);
+  return /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { minWidth: "1050px" }, /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ import_react26.default.createElement(import_material19.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), isLoading ? /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react26.default.createElement(import_material19.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react26.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_react26.default.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+    }
+  ) : /* @__PURE__ */ import_react26.default.createElement(import_material19.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(
+    return /* @__PURE__ */ import_react26.default.createElement(
       import_material19.Paper,
       {
         key: day.toString(),
@@ -2796,7 +3110,7 @@ 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(
+      /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { p: 1, flexShrink: 0 }, /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ import_react26.default.createElement(
         import_material19.Box,
         {
           sx: {
@@ -2809,7 +3123,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ import_react25.default.createElement(
+        /* @__PURE__ */ import_react26.default.createElement(
           import_material19.Typography,
           {
             variant: "body2",
@@ -2817,7 +3131,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
           },
           day.date()
         )
-      ), dayEvents.length > 2 && /* @__PURE__ */ import_react25.default.createElement(import_material19.Tooltip, { title: "M\xE1s eventos" }, /* @__PURE__ */ import_react25.default.createElement(
+      ), dayEvents.length > 2 && /* @__PURE__ */ import_react26.default.createElement(import_material19.Tooltip, { title: "M\xE1s eventos" }, /* @__PURE__ */ import_react26.default.createElement(
         import_material19.IconButton,
         {
           color: "primary",
@@ -2829,18 +3143,19 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
             setSelectedEvents(dayEvents);
           }
         },
-        /* @__PURE__ */ import_react25.default.createElement(import_Add.default, { fontSize: "small" })
+        /* @__PURE__ */ import_react26.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_react26.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_react26.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(
+      dayEvents.length > 2 && /* @__PURE__ */ import_react26.default.createElement(import_material19.Stack, { justifyContent: "flex-end", px: 1, pb: 0.5, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react26.default.createElement(
         SCDrawer,
         {
           width: "350px",
@@ -2852,7 +3167,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
           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(
+              return /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ import_react26.default.createElement(import_material19.Typography, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ import_react26.default.createElement(import_material19.Box, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ import_react26.default.createElement(
                 CalendarEventCard,
                 {
                   event: first,
@@ -2867,7 +3182,7 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
                     }
                   }
                 }
-              )), /* @__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(
+              )), /* @__PURE__ */ import_react26.default.createElement(import_material19.Divider, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ import_react26.default.createElement(import_material19.Typography, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ import_react26.default.createElement(
                 import_material19.Box,
                 {
                   width: "100%",
@@ -2880,13 +3195,14 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
                   flexDirection: "column",
                   gap: 1.5
                 },
-                rest.map((event2) => /* @__PURE__ */ import_react25.default.createElement(
+                rest.map((event2) => /* @__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),
+                    onHover: onEventHover,
                     sx: {
                       whiteSpace: "normal",
                       "& .MuiTypography-root": {
@@ -2907,15 +3223,26 @@ var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick })
 };
 
 // src/Components/Calendario/Views/WeekView.tsx
-var import_react26 = __toESM(require("react"), 1);
+var import_react27 = __toESM(require("react"), 1);
 var import_material20 = 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 }) => {
+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 startOfWeek2 = currentDate.startOf("week");
   const days = Array.from({ length: 7 }, (_, i) => startOfWeek2.add(i, "day"));
-  const hours2 = Array.from({ length: 24 }, (_, i) => i);
+  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 +3250,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 +3258,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(
+  return /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", bgcolor: "transparent" }, /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { width: 45, bgcolor: "transparent" }), days.map((day) => {
+    const isToday2 = day.format("YYYY-MM-DD") === todayString;
+    return /* @__PURE__ */ import_react27.default.createElement(
       import_material20.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_react27.default.createElement(import_material20.Typography, { variant: "h6", color: "text.primary" }, day.format("D")),
+      /* @__PURE__ */ import_react27.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
     );
-  })));
+  })), isLoading ? /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react27.default.createElement(import_material20.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : !isLoading && noEvents ? /* @__PURE__ */ import_react27.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_react27.default.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+    }
+  ) : (
+    // Grid de horas y eventos
+    /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react27.default.createElement(import_material20.Box, { width: 45, bgcolor: "transparent" }, hours.map((h) => /* @__PURE__ */ import_react27.default.createElement(
+      import_material20.Box,
+      {
+        key: h,
+        height: 60,
+        textAlign: "right",
+        pr: 1,
+        borderColor: "divider"
+      },
+      /* @__PURE__ */ import_react27.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, "[]")
+      ).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_react27.default.createElement(
+        import_material20.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_react27.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(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_react27.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_react28 = __toESM(require("react"), 1);
 var import_material21 = 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 }, (_, i) => startHour + i);
   const getCellBorderType = (cellHour, dayEvents2) => {
     for (const event2 of dayEvents2) {
       const start = event2.start.hour() + event2.start.minute() / 60;
@@ -3025,8 +3381,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,20 +3392,15 @@ 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_react28.default.createElement(import_material21.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { flex: 1, display: "flex", flexDirection: "column", textAlign: "start", gap: 0.5, py: 1, bgcolor: "primary.50" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Typography, { variant: "h6", color: "text.secondary" }, currentDate.format("D")), /* @__PURE__ */ import_react28.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd")))), isLoading ? /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react28.default.createElement(import_material21.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : noEvents ? /* @__PURE__ */ import_react28.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(
+      title: "Inicia la gesti\xF3n de las actividades",
+      subtitle: "Selecciona un mec\xE1nico y as\xEDgnale las actividades a realizar.",
+      icon: /* @__PURE__ */ import_react28.default.createElement("img", { src: Icon_Scheduler_default, alt: "icon_calendario", style: { width: 60, height: 60 } })
+    }
+  ) : /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ import_react28.default.createElement(
     import_material21.Box,
     {
       key: h,
@@ -3061,10 +3411,10 @@ 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_react28.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
+  ))), /* @__PURE__ */ import_react28.default.createElement(import_material21.Box, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
     const borderType = getCellBorderType(hourIdx, dayEvents);
-    return /* @__PURE__ */ import_react27.default.createElement(
+    return /* @__PURE__ */ import_react28.default.createElement(
       import_material21.Box,
       {
         key: hourIdx,
@@ -3075,20 +3425,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_react28.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 +3454,23 @@ var DayView = ({ events, currentDate, onEventClick }) => {
 };
 
 // src/Components/Calendario/Calendar.tsx
+var import_dayjs7 = __toESM(require("dayjs"), 1);
 var Calendar = ({
   events,
   onDayClick,
   onMoreClick,
   onEventClick,
+  onEventHover,
   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_react29.useState)(initialView);
+  const [currentDate, setCurrentDate] = (0, import_react29.useState)((0, import_dayjs7.default)());
   const handleViewChange = (newView) => {
     setView(newView);
     onViewChange == null ? void 0 : onViewChange(newView);
@@ -3116,12 +3478,18 @@ 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);
   };
-  return /* @__PURE__ */ import_react28.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react29.default.createElement(
     CalendarToolbar,
     {
       labelDate: currentDate,
@@ -3130,39 +3498,280 @@ var Calendar = ({
       onNavigate: handleNavigate
     },
     toolbar
-  ), view === "month" && /* @__PURE__ */ import_react28.default.createElement(
+  ), isLoading ? /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react29.default.createElement(
+    import_material22.Box,
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "400px"
+    },
+    /* @__PURE__ */ import_react29.default.createElement(import_material22.CircularProgress, { variant: "indeterminate" })
+  ))) : /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, view === "month" && /* @__PURE__ */ import_react29.default.createElement(
     MonthView,
     {
       events,
+      currentDate,
       onDayClick,
       onMoreClick,
       onEventClick,
-      currentDate
+      onEventHover
     }
-  ), view === "week" && /* @__PURE__ */ import_react28.default.createElement(
+  ), view === "week" && /* @__PURE__ */ import_react29.default.createElement(
     WeekView,
     {
       events,
       currentDate,
       onDayClick,
       onMoreClick,
-      onEventClick
+      onEventClick,
+      onEventHover,
+      startHour,
+      endHour
     }
-  ), view === "day" && /* @__PURE__ */ import_react28.default.createElement(
+  ), view === "day" && /* @__PURE__ */ import_react29.default.createElement(
     DayView,
     {
       events,
       currentDate,
-      onEventClick
+      onEventClick,
+      onEventHover,
+      startHour,
+      endHour
     }
-  ));
+  )));
+};
+
+// src/Components/SCTime.tsx
+var import_react30 = __toESM(require("react"), 1);
+var import_material23 = 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_react30.useState)(null);
+  const [isOpenPopover, setIsOpenPopover] = (0, import_react30.useState)(false);
+  const [popoverPlacement, setPopoverPlacement] = (0, import_react30.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_react30.default.createElement(import_LocalizationProvider3.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs }, /* @__PURE__ */ import_react30.default.createElement(import_material23.Box, { sx: { position: "relative", width: "120px" } }, /* @__PURE__ */ import_react30.default.createElement(
+    import_TimeField.TimeField,
+    {
+      label,
+      value: state,
+      disabled,
+      required,
+      error: hasError,
+      onClick: handleTimeFieldClick,
+      slotProps: {
+        textField: {
+          InputProps: {
+            endAdornment: /* @__PURE__ */ import_react30.default.createElement(import_material23.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react30.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_react30.default.createElement(
+    import_material23.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_react30.default.createElement(import_material23.ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ import_react30.default.createElement(import_material23.Box, { sx: { p: 0 } }, /* @__PURE__ */ import_react30.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_react31 = __toESM(require("react"), 1);
+var import_material24 = 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 Muicon8 = __toESM(require("@mui/icons-material"), 1);
+var SCCard = ({ title, image, iconTitle, actionsTitle, subtitle, content, actions, expand }) => {
+  let iconTitleValidation = "";
+  let IconTitle;
+  const [expanded, setExpanded] = import_react31.default.useState(false);
+  if (iconTitle) {
+    if (Muicon8[iconTitle] == void 0) {
+      if (iconTitle && import_react31.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
+        iconTitleValidation = "image";
+        IconTitle = iconTitle;
+      } else {
+        iconTitleValidation = "icon";
+        IconTitle = iconTitle;
+      }
+    } else {
+      iconTitleValidation = "icon";
+      IconTitle = Muicon8[iconTitle];
+    }
+  }
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+  return /* @__PURE__ */ import_react31.default.createElement(import_Card.default, { sx: { maxWidth: 345 } }, title && /* @__PURE__ */ import_react31.default.createElement(
+    import_CardHeader.default,
+    {
+      avatar: iconTitle ? iconTitleValidation === "image" ? /* @__PURE__ */ import_react31.default.createElement(import_material24.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react31.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react31.default.createElement(import_material24.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_react31.default.createElement(import_material24.Button, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, "Expandir") : (expand == null ? void 0 : expand.type) === "icon" && /* @__PURE__ */ import_react31.default.createElement(import_IconButton.default, { onClick: handleExpandClick, sx: { marginRight: "auto" }, size: "small" }, /* @__PURE__ */ import_react31.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_react31.default.createElement(
+    import_CardMedia.default,
+    {
+      component: "img",
+      height: "194",
+      image
+    }
+  ), content && /* @__PURE__ */ import_react31.default.createElement(import_CardContent.default, { sx: { padding: "8px 16px !important" } }, content), ((expand == null ? void 0 : expand.position) == "bottom" || actions != void 0) && /* @__PURE__ */ import_react31.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_react31.default.createElement(import_material24.Button, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, "Expandir") : (expand == null ? void 0 : expand.type) === "icon" && /* @__PURE__ */ import_react31.default.createElement(import_IconButton.default, { onClick: handleExpandClick, sx: { marginRight: "auto" } }, /* @__PURE__ */ import_react31.default.createElement(import_ExpandMore.default, null)) : null, actions && actions.length > 0 ? actions.map((action, index) => /* @__PURE__ */ import_react31.default.createElement(
+    import_material24.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_react31.default.createElement(import_Collapse.default, { in: expanded, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ import_react31.default.createElement(import_CardContent.default, { sx: { padding: "8px 16px !important" } }, expand.content)));
 };
 
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react29 = __toESM(require("react"), 1);
+var import_react32 = __toESM(require("react"), 1);
 var import_icons_material11 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
@@ -3860,10 +4469,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_react32.default.createElement(import_icons_material11.CheckCircleRounded),
+        error: import_react32.default.createElement(import_icons_material11.ErrorRounded),
+        warning: import_react32.default.createElement(import_icons_material11.WarningRounded),
+        info: import_react32.default.createElement(import_icons_material11.InfoRounded)
       }
     },
     variants: [
@@ -4912,6 +5521,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   PageHeader,
   SCAutocomplete,
   SCCalendarSwipeable,
+  SCCard,
   SCDataGrid,
   SCDataGridInitial,
   SCDateRange,
@@ -4923,6 +5533,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   SCTabs,
   SCTextArea,
   SCTextField,
+  SCTime,
   SCToastNotification,
   SincoTheme,
   ToastProgress,