componentes-sinco 1.0.2-rc.8 → 1.0.3-rc.1

package/dist/index.js

@@ -31,9 +31,9 @@ var __objRest = (source, exclude) => {
 };
 
 // src/Components/Drawer/SCDrawer.tsx
-import React4 from "react";
-import { Box as Box4, Drawer, Typography as Typography4, IconButton as IconButton3, Button as Button2, Stack as Stack3 } from "@mui/material";
-import Grid3 from "@mui/material/Grid2";
+import React7 from "react";
+import { Box as Box7, Drawer, Typography as Typography7, IconButton as IconButton5, Button as Button4, Stack as Stack3 } from "@mui/material";
+import Grid4 from "@mui/material/Grid2";
 import CloseIcon from "@mui/icons-material/Close";
 
 // src/Components/Textfield/SCTextField.tsx
@@ -75,12 +75,12 @@ function validateKeyDown(event2, format2) {
 
 // src/Components/Textfield/Helpers/validateOnBlur.tsx
 var validateOnBlurField = ({
-  value,
+  state,
   required = false,
   setError,
   onBlur
 }) => (event2) => {
-  const isError = !value.trim() && required;
+  const isError = !state.trim() && required;
   setError(isError);
   if (onBlur) {
     onBlur(event2);
@@ -109,8 +109,8 @@ var SCTextField = ({
   color,
   background,
   //Funcionales
+  setState,
   state,
-  value,
   onChange,
   onBlur,
   onKeyDown
@@ -161,15 +161,15 @@ var SCTextField = ({
   const handleInputChange = (event2) => {
     let valueMax = maxLength ? maxLength + 1 : 50;
     if (event2.target.value.length < valueMax) {
-      if (state) {
-        state(event2.target.value);
+      if (setState) {
+        setState(event2.target.value);
       }
       if (onChange) {
         onChange(event2);
       }
     }
   };
-  const handleBlur = validateOnBlurField({ value, required, setError, onBlur });
+  const handleBlur = validateOnBlurField({ state, required, setError, onBlur });
   const handleOpenInfoTitle = (event2) => {
     setAnchorInfoTitle(event2.currentTarget);
   };
@@ -244,7 +244,7 @@ var SCTextField = ({
       {
         size: size ? size : "medium",
         fullWidth: true,
-        value,
+        value: state,
         error,
         id: label == null ? void 0 : label.replace(/\s+/g, ""),
         disabled: disabled != null ? disabled : false,
@@ -540,7 +540,7 @@ function getIcon(name) {
 
 // src/Components/TextArea/SCTextArea.tsx
 import React3, { useEffect as useEffect4, useState as useState4 } from "react";
-import { Typography as Typography3, Stack as Stack2, TextField, Box as Box3, Popover as Popover2, Tooltip as Tooltip2, SvgIcon as SvgIcon2, Grid2 } from "@mui/material";
+import { Typography as Typography3, Stack as Stack2, TextField, Box as Box3, Popover as Popover2, Tooltip as Tooltip2, SvgIcon as SvgIcon2, Grid as Grid2 } from "@mui/material";
 import { InfoOutlined as InfoOutlined2 } from "@mui/icons-material";
 var SCTextArea = ({
   //informativas
@@ -559,8 +559,8 @@ var SCTextArea = ({
   colorTitle,
   background,
   //funcionales
+  setState,
   state,
-  value,
   onBlur
 }) => {
   const [helperCount, setHelperCount] = useState4(0);
@@ -568,11 +568,11 @@ var SCTextArea = ({
   const [anchorInfoTitle, setAnchorInfoTitle] = React3.useState(null);
   const openInfoTitle = Boolean(anchorInfoTitle);
   useEffect4(() => {
-    setHelperCount(value == null ? void 0 : value.length);
-  }, [value]);
+    setHelperCount(state == null ? void 0 : state.length);
+  }, [state]);
   const IconTitle = getIcon(iconTitle);
   const handleBlur = (event2) => {
-    if (required && value.trim() === "") {
+    if (required && state.trim() === "") {
       setStateError(true);
       setTimeout(() => {
         setStateError(false);
@@ -634,11 +634,11 @@ var SCTextArea = ({
       multiline: true,
       disabled,
       rows,
-      value,
+      value: state,
       onBlur: handleBlur,
       onChange: (e) => {
-        if (state) {
-          state(e.target.value.substring(0, maxLength));
+        if (setState) {
+          setState(e.target.value.substring(0, maxLength));
         }
       },
       autoComplete: "off"
@@ -656,683 +656,669 @@ var SCTextArea = ({
   ))));
 };
 
-// src/Components/Drawer/Helpers/Utils.tsx
+// src/Components/SCSelect.tsx
+import React4, { useEffect as useEffect5 } from "react";
+import { InputLabel as InputLabel2, FormControl as FormControl2, MenuItem, SvgIcon as SvgIcon3, ListItemIcon, ListItemText, Box as Box4 } from "@mui/material";
+import Select from "@mui/material/Select";
 import * as Muicon2 from "@mui/icons-material";
-import { FilterListOutlined } from "@mui/icons-material";
-var getIcon2 = (iconName) => {
-  if (iconName && iconName in Muicon2) {
-    return Muicon2[iconName];
-  }
-  return FilterListOutlined;
-};
-var cleanInputs = (arrayElements) => {
-  var _a, _b;
-  for (let i = 0; i < arrayElements.length; i++) {
-    if (arrayElements[i].component === void 0) {
-      (_b = (_a = arrayElements[i]).state) == null ? void 0 : _b.call(_a, "");
+function SCSelect({
+  label = "",
+  data,
+  getItemValue,
+  width = "100%",
+  size = "small",
+  variant = "outlined",
+  deleteType = "button",
+  required,
+  disabled,
+  background,
+  fnAplicar,
+  setState,
+  state
+}) {
+  const labelContent = `<span class="red-asterisk">* </span>` + label;
+  let group = "";
+  let isSelected = false;
+  const [selectedOptions, setSelectedOptions] = React4.useState([]);
+  const [prevData, setPrevData] = React4.useState(data);
+  const [error, setError] = React4.useState(false);
+  useEffect5(() => {
+    if (error) {
+      setTimeout(() => {
+        setError(false);
+      }, 1e3);
     }
-  }
-};
-
-// src/Components/Drawer/Helpers/validateInput.tsx
-var validateInputs = (arrayElements, onError, onSuccess) => {
-  var _a;
-  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].value) == null ? void 0 : _a.trim()) !== "") {
-        filledValues++;
+  }, [error]);
+  useEffect5(() => {
+    let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
+    if (dataChangeValidation == false) {
+      setState({ hiddenValue: "", textValue: "" });
+      setSelectedOptions([]);
+      setPrevData(data);
+    }
+  }, [data]);
+  data.map(function(option, index, array) {
+    if (option == null ? void 0 : option.icon) {
+      if ((option == null ? void 0 : option.icon.type) == void 0) {
+        option.icon = Muicon2[option == null ? void 0 : option.icon];
+      } else {
+        option;
       }
     }
-  }
-  if (requiredValues === filledValues) {
-    onSuccess();
-  } else {
-    onError({
-      type: "error",
-      title: "Algunos campos son requeridos",
-      time: 10
-    });
-  }
-};
-
-// src/generales/capitalize.tsx
-function capitalize(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1);
-}
-
-// src/Components/Drawer/SCDrawer.tsx
-var SCDrawer = ({
-  //informativas
-  title,
-  arrayElements = [],
-  actions,
-  buttonDrawer,
-  //Apariencia
-  colorTitle,
-  anchor = "left",
-  width,
-  //Funcionales
-  open
-}) => {
-  var _a;
-  const [drawerOpen, setDrawerOpen] = React4.useState(open);
-  const [toast, setToast] = React4.useState(null);
-  const handleDrawerClose = () => {
-    setDrawerOpen(false);
+  });
+  const cleanOptions = (event2) => {
+    setState({ hiddenValue: "", textValue: "" });
+    setSelectedOptions([]);
   };
-  const toggleDrawer = (newOpen) => () => {
-    setDrawerOpen(newOpen);
+  const handleBlur = () => {
+    const currentValue = Array.isArray(state.hiddenValue) ? state.hiddenValue[0] : state.hiddenValue;
+    const isError = !currentValue && !!required;
+    setError(Boolean(isError));
   };
-  const ButtonIcon = getIcon2(buttonDrawer == null ? void 0 : buttonDrawer.icon);
-  const setToastWithDelay = (toastContent) => {
-    setToast(null);
-    setTimeout(() => {
-      setToast(toastContent);
-    }, 10);
+  const handleChange = (event2) => {
+    const selectedValue = event2.target.value;
+    if (selectedValue) {
+      const selectedOption = data.find((item) => getItemValue(item).value === selectedValue);
+      if (selectedOption) {
+        const itemValue = getItemValue(selectedOption);
+        setState({
+          hiddenValue: itemValue.value,
+          textValue: itemValue.text
+        });
+      }
+    }
   };
-  const inputValidation = () => validateInputs(arrayElements, setToastWithDelay, handleDrawerClose);
-  const clean = () => cleanInputs(arrayElements);
-  actions = actions != null ? actions : [{ text: "Limpiar", fn: clean }, { text: "Consultar", fn: inputValidation }];
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, toast && /* @__PURE__ */ React4.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ React4.createElement(
-    Button2,
-    {
-      "data-testid": "test-buttonDrawer",
-      sx: { textTransform: "capitalize" },
-      color: buttonDrawer == null ? void 0 : buttonDrawer.color,
-      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) ? /* @__PURE__ */ React4.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null,
-      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" ? /* @__PURE__ */ React4.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null
-    },
-    capitalize((_a = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _a : "Drawer")
-  ), /* @__PURE__ */ React4.createElement(
-    Drawer,
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, data && /* @__PURE__ */ React4.createElement(Box4, { sx: { width } }, /* @__PURE__ */ React4.createElement(
+    FormControl2,
     {
-      open: drawerOpen,
-      onClose: toggleDrawer(false),
-      anchor: anchor != null ? anchor : "left",
-      sx: {
-        "& .MuiDrawer-paper": {
-          width: width != null ? width : "450px",
-          boxSizing: "border-box",
-          borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px"
-        }
-      }
+      fullWidth: true,
+      size: size ? size : "medium",
+      variant
     },
-    /* @__PURE__ */ React4.createElement(Stack3, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ React4.createElement(Grid3, { container: true, sx: { backgroundColor: "secondary.main", alignItems: "center", height: "42px", textAlign: "left", padding: "10px 12px 10px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ React4.createElement(Typography4, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ React4.createElement(IconButton3, { onClick: handleDrawerClose }, /* @__PURE__ */ React4.createElement(CloseIcon, { color: "action", "data-testid": "test-button-close" }))), /* @__PURE__ */ React4.createElement(Stack3, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "12px 16px 12px 16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
-      var _a2, _b;
-      return /* @__PURE__ */ React4.createElement(
-        Box4,
-        {
-          key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b = arrayElement.label) != null ? _b : ""}${index}`,
-          sx: { width: "100%" }
-        },
-        arrayElement.component ? /* @__PURE__ */ React4.createElement(Stack3, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ React4.createElement(
-          SCTextField,
-          {
-            title: arrayElement.title,
-            iconTitle: arrayElement.iconTitle,
-            infoTitle: arrayElement.infoTitle,
-            label: arrayElement.label,
-            placeholder: arrayElement.placeholder,
-            infoElement: arrayElement.infoElement,
-            iconInputStart: arrayElement.iconInputStart,
-            iconInputEnd: arrayElement.iconInputEnd,
-            maxLength: arrayElement.maxLength,
-            variant: arrayElement.variant,
-            format: arrayElement.format,
-            disabled: arrayElement.disabled,
-            required: arrayElement.required,
-            size: arrayElement.size,
-            width: arrayElement.width,
-            color: arrayElement.color,
-            background: arrayElement.background,
-            state: arrayElement.state,
-            value: arrayElement.value || "",
-            onChange: arrayElement.onChange,
-            onBlur: arrayElement.onBlur,
-            onKeyDown: arrayElement.onKeyDown
-          }
-        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ React4.createElement(
-          SCTextArea,
-          {
-            title: arrayElement.title,
-            iconTitle: arrayElement.iconTitle,
-            infoTitle: arrayElement.infoTitle,
-            label: arrayElement.label,
-            placeholder: arrayElement.placeholder,
-            maxLength: arrayElement.maxLength,
-            variant: arrayElement.variant,
-            disabled: arrayElement.disabled,
-            required: arrayElement.required,
-            width: arrayElement.width,
-            rows: arrayElement.rows,
-            background: arrayElement.background,
-            state: arrayElement.state,
-            value: arrayElement.value || "",
-            onBlur: arrayElement.onBlur
-          }
-        ) : null
-      );
-    })), actions != void 0 && actions.length > 0 ? /* @__PURE__ */ React4.createElement(
-      Grid3,
+    /* @__PURE__ */ React4.createElement(
+      InputLabel2,
       {
-        container: true,
-        bgcolor: "background.default",
-        gap: 2,
-        padding: "9px 16px 9px 16px",
-        height: "42px",
-        alignItems: "center",
-        justifyContent: actions.length > 1 ? "space-between" : !anchor && anchor != "right" ? "flex-end" : "flex-start",
-        flexDirection: anchor != "right" ? "row-reverse" : "row"
+        required: required && label !== "" ? true : false,
+        error
       },
-      actions.map((btn, index) => /* @__PURE__ */ React4.createElement(
-        Button2,
-        {
-          key: index,
-          variant: index === 0 || actions && actions.length < 2 ? "contained" : "text",
-          color: "primary",
-          onClick: btn.fn,
-          disabled: btn.disabled || false,
-          size: "small"
-        },
-        btn.text
-      ))
-    ) : "")
-  ));
-};
-
-// src/Components/MultiSelect/SCMultiSelect.tsx
-import React5, { useEffect as useEffect5, useMemo as useMemo2 } from "react";
-import { Button as Button3, Checkbox, FormControl as FormControl2, InputAdornment as InputAdornment2, ListItemIcon, MenuItem, Popover as Popover3, Stack as Stack4, TextField as TextField2 } from "@mui/material";
-import { SearchOutlined } from "@mui/icons-material";
-
-// src/Components/MultiSelect/helpers/useHandlers.tsx
-import { useCallback, useState as useState5 } from "react";
-function useMultiSelectHandlers() {
-  const [anchorEl, setAnchorEl] = useState5(null);
-  const [open, setOpen] = useState5(false);
-  const [selectedItems, setSelectedItems] = useState5([]);
-  const [filterValue, setFilterValue] = useState5("");
-  const handleOpen = useCallback((e) => {
-    setAnchorEl(e.currentTarget);
-    setOpen(true);
-  }, []);
-  const handleClose = useCallback(() => {
-    setAnchorEl(null);
-    setOpen(false);
-  }, []);
-  const handleFilterChange = useCallback(
-    (e) => {
-      setFilterValue(e.target.value);
-    },
-    []
-  );
-  const handleCheckboxToggle = useCallback((item) => {
-    setSelectedItems(
-      (prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
-    );
-  }, []);
-  return {
-    anchorEl,
-    open,
-    selectedItems,
-    filterValue,
-    setSelectedItems,
-    handleOpen,
-    handleClose,
-    handleFilterChange,
-    handleCheckboxToggle,
-    setOpen
-  };
-}
-
-// src/Components/MultiSelect/helpers/Utils.tsx
-import * as MuiIcons2 from "@mui/icons-material";
-import { FilterListOutlined as FilterListOutlined2 } from "@mui/icons-material";
-function getIconMultiSelect(name) {
-  return name in MuiIcons2 ? MuiIcons2[name] : FilterListOutlined2;
+      label ? label : ""
+    ),
+    /* @__PURE__ */ React4.createElement(
+      Select,
+      {
+        value: Array.isArray(state.hiddenValue) ? state.hiddenValue[0] || "" : state.hiddenValue != "-1" ? state.hiddenValue : "",
+        label: label ? label : "",
+        onChange: handleChange,
+        onBlur: handleBlur,
+        variant,
+        disabled: disabled || false,
+        error,
+        MenuProps: {
+          PaperProps: {
+            sx: {
+              left: "0px !important"
+            }
+          },
+          sx: {
+            "& .MuiPaper-root": {
+              left: "0px !important"
+            }
+          }
+        }
+      },
+      data.map((option, index) => {
+        return /* @__PURE__ */ React4.createElement(MenuItem, { key: index, value: getItemValue(option).value }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ React4.createElement(ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ React4.createElement(SvgIcon3, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ React4.createElement(ListItemText, { primary: getItemValue(option).text, color: "text.primary" }));
+      })
+    )
+  )));
 }
 
-// src/Components/MultiSelect/helpers/useFilteredItems.tsx
-import { useMemo } from "react";
-function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
-  const filteredItems = useMemo(
-    () => items.filter(
-      (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
-    ),
-    [items, filterValue, getItemLabel]
-  );
-  const sortedItems = useMemo(() => {
-    return [
-      ...filteredItems.filter((item) => selectedItems.includes(item)),
-      ...filteredItems.filter((item) => !selectedItems.includes(item))
-    ];
-  }, [filteredItems, selectedItems]);
-  return { filteredItems, sortedItems };
-}
-
-// src/Components/MultiSelect/SCMultiSelect.tsx
-function SCMultiSelect({
-  textButton,
-  button,
-  items,
-  topPanel,
-  actions,
-  dense = false,
-  open,
-  selectAll = false,
-  getItemLabel
-}) {
-  var _a, _b;
-  const {
-    anchorEl,
-    open: openMultiselect,
-    selectedItems,
-    filterValue,
-    setSelectedItems,
-    handleOpen,
-    handleClose,
-    handleFilterChange,
-    handleCheckboxToggle,
-    setOpen
-  } = useMultiSelectHandlers();
-  useEffect5(() => {
-    if (open !== void 0) {
-      setOpen(open);
-    }
-  }, [open, setOpen]);
-  useEffect5(() => {
-    setSelectedItems([]);
-  }, [items, setSelectedItems]);
-  const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
-  const Icon = useMemo2(() => {
-    var _a2;
-    return getIconMultiSelect((_a2 = button == null ? void 0 : button.icon) != null ? _a2 : "FilterListOutlined");
-  }, [button == null ? void 0 : button.icon]);
-  const handleSelectAll = () => {
-    const allSelected2 = selectedItems.length === filteredItems.length;
-    setSelectedItems(allSelected2 ? [] : filteredItems);
-  };
-  const allSelected = filteredItems.length > 0 && selectedItems.length === filteredItems.length;
-  const resolvedActions = actions != null ? actions : [
-    { text: "Limpiar", fn: handleClose },
-    { text: "Aplicar", fn: () => {
-    } }
-  ];
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
-    Button3,
-    {
-      "test-id": "multiselect-button",
-      color: (_a = button == null ? void 0 : button.color) != null ? _a : "primary",
-      onClick: handleOpen,
-      variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
-      size: "small",
-      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ React5.createElement(Icon, null) : null,
-      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ React5.createElement(Icon, null) : null
-    },
-    capitalize(textButton != null ? textButton : "MultiSelect")
-  ), /* @__PURE__ */ React5.createElement(
-    Popover3,
-    {
-      elevation: 8,
-      anchorEl,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      open: openMultiselect,
-      onClose: () => setOpen(false)
-    },
-    /* @__PURE__ */ React5.createElement(Stack4, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ React5.createElement(Stack4, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ React5.createElement(FormControl2, { fullWidth: true, size: "small" }, /* @__PURE__ */ React5.createElement(
-      TextField2,
-      {
-        "data-testid": "multiselect-input",
-        fullWidth: true,
-        size: "small",
-        variant: "outlined",
-        placeholder: "Buscar",
-        value: filterValue,
-        onChange: handleFilterChange,
-        slotProps: {
-          input: {
-            endAdornment: /* @__PURE__ */ React5.createElement(InputAdornment2, { position: "end" }, /* @__PURE__ */ React5.createElement(SearchOutlined, { fontSize: "small" }))
-          }
-        }
-      }
-    ))), /* @__PURE__ */ React5.createElement(Stack4, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ React5.createElement(MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ React5.createElement(ListItemIcon, null, /* @__PURE__ */ React5.createElement(Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ React5.createElement(
-      MenuItem,
-      {
-        key: getItemLabel(item),
-        dense,
-        onClick: () => handleCheckboxToggle(item)
-      },
-      /* @__PURE__ */ React5.createElement(ListItemIcon, null, /* @__PURE__ */ React5.createElement(
-        Checkbox,
-        {
-          checked: selectedItems.includes(item),
-          color: "primary"
-        }
-      )),
-      getItemLabel(item)
-    )) : /* @__PURE__ */ React5.createElement(MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ React5.createElement(Stack4, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
-      var _a2;
-      return /* @__PURE__ */ React5.createElement(
-        Button3,
-        {
-          key: index,
-          variant: index === 0 || resolvedActions.length < 2 ? "text" : "contained",
-          onClick: button2.fn,
-          disabled: (_a2 = button2.disabled) != null ? _a2 : false,
-          size: "small"
-        },
-        capitalize(button2.text)
-      );
-    })))
-  ));
-}
-
-// src/Components/SCDialog.tsx
-import React6, { useEffect as useEffect6, useState as useState6 } from "react";
-import { Button as Button4, Typography as Typography5, Modal, Dialog, DialogActions, DialogContent, DialogTitle, IconButton as IconButton4, Tooltip as Tooltip3, Box as Box5, SvgIcon as SvgIcon3 } from "@mui/material";
-import Grid4 from "@mui/material/Grid2";
-import CloseIcon2 from "@mui/icons-material/Close";
+// src/Components/SCAutocomplete.tsx
+import React5, { useEffect as useEffect6 } from "react";
+import { Autocomplete, Checkbox, InputAdornment as InputAdornment3, MenuItem as MenuItem2, TextField as TextField3, Typography as Typography5, SvgIcon as SvgIcon4, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Divider as Divider3, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Chip, Box as Box5, Button as Button3 } from "@mui/material";
+import Grid3 from "@mui/material/Grid2";
+import { Search, Clear } from "@mui/icons-material";
 import * as Muicon3 from "@mui/icons-material";
-var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, setShow, show }) => {
-  let i = 0;
-  let iconTitleValidation = "";
-  let IconTitle;
-  let ButtonIcon;
-  const [open, setOpen] = useState6(show);
+function SCAutocomplete({
+  label = "",
+  data,
+  columnGroup,
+  getItemValue,
+  typeFormat = "normal",
+  checkMassive = false,
+  deleteType = "button",
+  fnAplicar,
+  required,
+  disabled,
+  background,
+  setState,
+  state,
+  inputChange
+}) {
+  const labelContent = `<span class="red-asterisk">* </span>` + label;
+  let group = "";
+  let isSelected = false;
+  const [selectedOptions, setSelectedOptions] = React5.useState([]);
+  const [prevData, setPrevData] = React5.useState(data);
   useEffect6(() => {
-    if (show) {
-      handleOpen();
+    let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
+    if (dataChangeValidation == false) {
+      setState({ hiddenValue: "-1", textValue: "" });
+      setSelectedOptions([]);
+      setPrevData(data);
     }
-  }, [show]);
-  if ((buttonDialog == null ? void 0 : buttonDialog.icon) != void 0) {
-    if (Muicon3[buttonDialog == null ? void 0 : buttonDialog.icon] == void 0) {
-      ButtonIcon = buttonDialog == null ? void 0 : buttonDialog.icon;
-    } else {
-      ButtonIcon = Muicon3[buttonDialog == null ? void 0 : buttonDialog.icon];
+  }, [data]);
+  useEffect6(() => {
+    if (typeFormat == "multiselect") {
+      if (state.hiddenValue != "-1") {
+        setSelectedOptions(data.filter(
+          (item) => Array.isArray(state.hiddenValue) ? state.hiddenValue.includes(getItemValue(item).value) : getItemValue(item).value === state.hiddenValue
+        ));
+      }
     }
-  }
-  if (iconTitle) {
-    if (Muicon3[iconTitle] == void 0) {
-      if (iconTitle && React6.isValidElement(iconTitle) && iconTitle.type == void 0) {
-        iconTitleValidation = "image";
-        IconTitle = iconTitle;
+  }, [state.hiddenValue]);
+  data.map(function(option, index, array) {
+    if (option == null ? void 0 : option.icon) {
+      if ((option == null ? void 0 : option.icon.type) == void 0) {
+        option.icon = Muicon3[option == null ? void 0 : option.icon];
       } else {
-        iconTitleValidation = "icon";
-        IconTitle = iconTitle;
+        option;
       }
+    }
+  });
+  const cleanOptions = (event2) => {
+    setState({ hiddenValue: "-1", textValue: "" });
+    setSelectedOptions([]);
+  };
+  const handleCheckAll = (event2) => {
+    if (event2.target.checked) {
+      setSelectedOptions(data);
+      setState({
+        hiddenValue: data.map((item) => getItemValue(item).value),
+        textValue: data.map((item) => getItemValue(item).text)
+      });
     } else {
-      iconTitleValidation = "icon";
-      IconTitle = Muicon3[iconTitle];
+      setSelectedOptions([]);
+      setState({ hiddenValue: "-1", textValue: "" });
     }
-  }
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => {
-    setOpen(false);
-    if (setShow) {
-      setShow(false);
+  };
+  const allSelected = data.length > 0 && selectedOptions.length === data.length;
+  const handleChange = (event2, value) => {
+    if (typeFormat === "multiselect") {
+      const ids = value.map((v) => getItemValue ? getItemValue(v).value : "");
+      const texts = value.map((v) => getItemValue ? getItemValue(v).text : "");
+      setSelectedOptions(value);
+      setState({
+        hiddenValue: ids,
+        textValue: texts
+      });
+    } else {
+      setState({
+        hiddenValue: getItemValue(value).value,
+        textValue: getItemValue(value).text
+      });
     }
   };
-  const dialogActions = actions != null ? actions : [{ text: "Cerrar", fn: handleClose }];
-  content = content != null ? content : { component: /* @__PURE__ */ React6.createElement(Box5, null, " Aqui va el contenido ") };
-  return /* @__PURE__ */ React6.createElement("div", null, buttonDialog ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React6.createElement(Tooltip3, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React6.createElement(Button4, { 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) == "left" || !(buttonDialog == null ? void 0 : buttonDialog.iconPosition) ? /* @__PURE__ */ React6.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ React6.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React6.createElement(IconButton4, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React6.createElement(SvgIcon3, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React6.createElement(Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React6.createElement(
-    Dialog,
+  const selectedValue = typeFormat === "multiselect" ? data.filter(
+    (item) => state.hiddenValue.includes(getItemValue(item).value)
+  ) : data.find(
+    (item) => getItemValue(item).value === state.hiddenValue
+  ) || null;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, data && /* @__PURE__ */ React5.createElement(
+    Autocomplete,
     {
-      open: open || false,
-      onClose: disableClose ? void 0 : handleClose,
-      maxWidth: "xl",
+      multiple: typeFormat === "multiselect",
+      clearOnEscape: true,
+      disabled,
+      options: data,
+      onInputChange: (event2, value) => {
+        if (inputChange) {
+          inputChange(value);
+        }
+      },
+      onChange: handleChange,
+      getOptionLabel: (option) => getItemValue(option).text,
+      value: selectedValue,
       sx: {
-        width: "100% !important",
-        "& .MuiBackdrop-root": {
-          backdropFilter: "blur(0px) !important"
+        background: background || "transparent",
+        width: "100%",
+        maxWidth: "100%",
+        "& .MuiAutocomplete-tag": {
+          maxWidth: 120,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        "& .MuiAutocomplete-inputRoot": {
+          flexWrap: "nowrap !important",
+          overflowX: "auto"
         }
-      }
-    },
-    title && /* @__PURE__ */ React6.createElement(DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, id: "dialog-title" }, /* @__PURE__ */ React6.createElement(Grid4, { container: true, size: 12, sx: { justifyContent: "space-between" } }, /* @__PURE__ */ React6.createElement(Grid4, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ React6.createElement(Box5, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React6.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React6.createElement(SvgIcon3, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ React6.createElement(Grid4, null, /* @__PURE__ */ React6.createElement(Typography5, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ React6.createElement(Typography5, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ React6.createElement(IconButton4, { onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ React6.createElement(CloseIcon2, null)) : "")),
-    /* @__PURE__ */ React6.createElement(
-      DialogContent,
-      {
-        dividers: dividers ? dividers : false,
-        sx: {
-          m: 0,
-          padding: "12px 16px 8px 16px",
-          background: background ? background : "white",
-          height: !heightContent ? "508px" : heightContent,
-          width: widthContent == "extra-small" ? "444px" : widthContent == "small" ? "600px" : widthContent == "medium" ? "900px" : widthContent == "large" ? "1200px" : widthContent == "extra-large" ? "1536px" : "900px"
+      },
+      limitTags: 2,
+      renderTags: (value, getTagProps) => {
+        const limit = 2;
+        return /* @__PURE__ */ React5.createElement(React5.Fragment, null, value.slice(0, limit).map((option, index) => /* @__PURE__ */ React5.createElement(
+          Chip,
+          __spreadProps(__spreadValues({
+            color: "default",
+            size: "small",
+            variant: "filled",
+            label: getItemValue(option).text
+          }, getTagProps({ index })), {
+            style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+          })
+        )), value.length > limit && /* @__PURE__ */ React5.createElement(Box5, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
+      },
+      renderOption: (props, option) => {
+        const _a = props, { key } = _a, optionProps = __objRest(_a, ["key"]);
+        let isValid;
+        if (typeFormat == "multiselect") {
+          isSelected = selectedOptions.some(
+            (selected) => getItemValue(selected).value === getItemValue(option).value
+          );
         }
+        if (columnGroup) {
+          isValid = group == option[columnGroup];
+          group = option[columnGroup];
+        }
+        return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(React5.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ React5.createElement(Typography5, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ React5.createElement(MenuItem2, __spreadProps(__spreadValues({}, optionProps), { style: { background: typeFormat != "multiselect" ? state.hiddenValue == getItemValue(option).value ? "#dfe6ec" : "white" : "white", padding: "7px 16px" } }), typeFormat != "multiselect" && getItemValue(option).icon != void 0 ? /* @__PURE__ */ React5.createElement(ListItemIcon2, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ React5.createElement(SvgIcon4, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", typeFormat == "multiselect" ? /* @__PURE__ */ React5.createElement(Checkbox, { checked: isSelected, value: getItemValue(option).text, color: "primary" }) : "", /* @__PURE__ */ React5.createElement(ListItemText2, { primary: getItemValue(option).text, color: "text.primary" }))));
       },
-      content.url ? /* @__PURE__ */ React6.createElement(
-        "iframe",
-        {
-          style: { border: "none", minWidth: "100%", minHeight: "100%" },
-          id: "inlineFrameExample",
-          title: "Inline Frame Example",
-          src: content.url
+      renderInput: (params) => /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+        TextField3,
+        __spreadProps(__spreadValues({}, params), {
+          label: required ? /* @__PURE__ */ React5.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
+          placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
+          InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+            endAdornment: /* @__PURE__ */ React5.createElement(React5.Fragment, null, deleteType == "icon" && state.hiddenValue != "-1" ? /* @__PURE__ */ React5.createElement(IconButton4, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ React5.createElement(Clear, { fontSize: "small" })) : "", /* @__PURE__ */ React5.createElement(InputAdornment3, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ React5.createElement(Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
+          })
+        })
+      )),
+      slotProps: {
+        listbox: {
+          component: React5.forwardRef(function ListboxComponent(props, ref) {
+            return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+              Box5,
+              __spreadProps(__spreadValues({
+                ref
+              }, props), {
+                sx: __spreadValues({
+                  position: "relative",
+                  paddingBottom: "56px",
+                  backgroundColor: "white"
+                }, props.sx)
+              }),
+              checkMassive && typeFormat == "multiselect" ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(FormControlLabel2, { control: /* @__PURE__ */ React5.createElement(Checkbox, { checked: allSelected, indeterminate: selectedOptions.length > 0 && selectedOptions.length < data.length, onChange: handleCheckAll, color: "primary" }), label: "Todos los items", sx: { marginLeft: "0px !important", marginRight: "0px !important", padding: "7px 16px" } }), /* @__PURE__ */ React5.createElement(Divider3, null)) : "",
+              props.children,
+              deleteType == "button" || fnAplicar ? /* @__PURE__ */ React5.createElement(
+                Grid3,
+                {
+                  container: true,
+                  sx: {
+                    position: "sticky",
+                    bottom: -8,
+                    left: 0,
+                    width: "100%",
+                    backgroundColor: "grey.50",
+                    padding: "8px 16px",
+                    textAlign: "left",
+                    justifyContent: "space-between"
+                  }
+                },
+                deleteType == "button" ? /* @__PURE__ */ React5.createElement(
+                  Button3,
+                  {
+                    variant: "text",
+                    color: "primary",
+                    size: "small",
+                    onClick: (event2) => {
+                      event2.stopPropagation();
+                      cleanOptions(event2);
+                    }
+                  },
+                  "Limpiar"
+                ) : "",
+                fnAplicar && /* @__PURE__ */ React5.createElement(
+                  Button3,
+                  {
+                    variant: "contained",
+                    color: "primary",
+                    size: "small",
+                    onClick: fnAplicar
+                  },
+                  "Aplicar"
+                )
+              ) : ""
+            ));
+          })
+        }
+      }
+    }
+  ));
+}
+
+// src/Components/SCDateRange.tsx
+import React6 from "react";
+import { Box as Box6, InputAdornment as InputAdornment4 } from "@mui/material";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateRangePicker } from "@mui/x-date-pickers-pro/DateRangePicker";
+import { MultiInputDateRangeField } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
+import dayjs from "dayjs";
+import "dayjs/locale/es";
+import { LicenseInfo } from "@mui/x-license-pro";
+import EventIcon from "@mui/icons-material/Event";
+var SCDateRange = ({
+  labelDateInitial = "Fecha inicial",
+  labelDateFinal = "Fecha final",
+  required = false,
+  disabled = false,
+  background = "transparent",
+  state,
+  setState
+}) => {
+  LicenseInfo.setLicenseKey(
+    "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
+  );
+  const isStartEmpty = required && !state[0];
+  const isEndEmpty = required && !state[1];
+  const hasError = isStartEmpty || isEndEmpty;
+  const handleDateChange = (newValue) => {
+    const convertedValue = [
+      newValue[0] ? dayjs(newValue[0]) : null,
+      newValue[1] ? dayjs(newValue[1]) : null
+    ];
+    setState(convertedValue);
+  };
+  return /* @__PURE__ */ React6.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: "es" }, /* @__PURE__ */ React6.createElement(Box6, { sx: { width: "100%" } }, /* @__PURE__ */ React6.createElement(
+    DateRangePicker,
+    {
+      value: state,
+      onChange: handleDateChange,
+      disabled,
+      slots: {
+        field: MultiInputDateRangeField
+      },
+      slotProps: {
+        field: {
+          slotProps: {
+            textField: ({ position }) => ({
+              label: position === "start" ? labelDateInitial : labelDateFinal,
+              size: "small",
+              variant: "outlined",
+              required,
+              error: position === "start" ? isStartEmpty : isEndEmpty,
+              InputProps: {
+                endAdornment: /* @__PURE__ */ React6.createElement(InputAdornment4, { position: "end" }, /* @__PURE__ */ React6.createElement(
+                  EventIcon,
+                  {
+                    color: hasError ? "error" : "action",
+                    fontSize: "small"
+                  }
+                ))
+              },
+              sx: {
+                mr: position === "start" ? 1 : 0,
+                "& .MuiOutlinedInput-root": {
+                  backgroundColor: background === "transparent" ? "transparent" : background
+                },
+                "& .MuiInputLabel-asterisk": {
+                  color: "error.main"
+                },
+                background: background != null ? background : "transparent"
+              }
+            })
+          }
         }
-      ) : content.component
-    ),
-    dialogActions.length > 0 ? /* @__PURE__ */ React6.createElement(DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px" } }, dialogActions.map((boton) => /* @__PURE__ */ React6.createElement(
-      Button4,
-      {
-        key: i = i + 1,
-        autoFocus: true,
-        variant: i == 1 || dialogActions.length < 2 ? "contained" : "text",
-        color: "primary",
-        size: "small",
-        onClick: boton.fn,
-        disabled: boton.disabled || false
       },
-      boton.text
-    ))) : ""
+      sx: {
+        display: "flex",
+        gap: 1,
+        width: "100%"
+      }
+    }
   )));
 };
 
-// src/Components/SCMenu.tsx
-import React7 from "react";
-import { Box as Box6, Typography as Typography6, Paper, Divider as Divider2, MenuList, MenuItem as MenuItem2, ListItemIcon as ListItemIcon2, SvgIcon as SvgIcon4 } from "@mui/material";
-import Grid5 from "@mui/material/Grid2";
-
-// src/Components/Hooks/useWindowDimensions.ts
-import { useState as useState7, useEffect as useEffect7 } from "react";
-function getWindowDimensions() {
-  const { innerWidth: width, innerHeight: height } = window;
-  return {
-    width,
-    height
-  };
-}
-function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState7(getWindowDimensions());
-  useEffect7(() => {
-    function handleResize() {
-      setWindowDimensions(getWindowDimensions());
-    }
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return windowDimensions;
-}
-
-// src/Components/SCMenu.tsx
+// src/Components/Drawer/Helpers/Utils.tsx
 import * as Muicon4 from "@mui/icons-material";
-var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu, widthPage }) => {
-  const { height, width } = useWindowDimensions();
-  const menuSize = widthMenu ? parseInt(widthMenu) : 284;
-  const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
-  const widthContainer = menuSize + pageSize;
-  let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
-  const [selectedIndex, setSelectedIndex] = React7.useState("1");
-  const [value, setValue] = React7.useState("1");
-  React7.useEffect(() => {
-    heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
-  }, [height]);
-  React7.useEffect(() => {
-    if (defaultOption) {
-      handleClickMenusItem(event, void 0);
+import { FilterListOutlined } from "@mui/icons-material";
+var getIcon2 = (iconName) => {
+  if (iconName && iconName in Muicon4) {
+    return Muicon4[iconName];
+  }
+  return FilterListOutlined;
+};
+var cleanInputs = (arrayElements) => {
+  var _a, _b;
+  for (let i = 0; i < arrayElements.length; i++) {
+    if (arrayElements[i].component === void 0) {
+      (_b = (_a = arrayElements[i]).state) == null ? void 0 : _b.call(_a, "");
     }
-  }, [defaultOption]);
-  options.map(function(option, index, array) {
-    if (option == null ? void 0 : option.iconLeft) {
-      if ((option == null ? void 0 : option.iconLeft.type) == void 0) {
-        option.iconLeft = Muicon4[option == null ? void 0 : option.iconLeft];
-      } else {
-        option;
+  }
+};
+
+// src/Components/Drawer/Helpers/validateInput.tsx
+var validateInputs = (arrayElements, onError, onSuccess) => {
+  var _a;
+  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 (option == null ? void 0 : option.iconRight) {
-      if ((option == null ? void 0 : option.iconRight.type) == void 0) {
-        option.iconRight = Muicon4[option == null ? void 0 : option.iconRight];
-      } else {
-        option;
+      if (arrayElements[i].required && ((_a = arrayElements[i].value) == null ? void 0 : _a.trim()) !== "") {
+        filledValues++;
       }
     }
-  });
-  const handleClickMenusItem = (event2, index) => {
-    if (defaultOption && index == void 0) {
-      setSelectedIndex(defaultOption);
-      setValue(defaultOption);
-    } else if (index != void 0) {
-      setSelectedIndex(String(index + 1));
-      setValue(String(index + 1));
-    }
-  };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Grid5, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ React7.createElement(Paper, { sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ React7.createElement(MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
-    MenuItem2,
-    {
-      disabled: disable == true ? true : false,
-      key: index,
-      selected: String(index + 1) === selectedIndex,
-      onClick: (event2) => handleClickMenusItem(event2, index)
-    },
-    option.iconLeft ? /* @__PURE__ */ React7.createElement(ListItemIcon2, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React7.createElement(SvgIcon4, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ React7.createElement(Grid5, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ React7.createElement(Typography6, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ React7.createElement(ListItemIcon2, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React7.createElement(SvgIcon4, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
-  ), option.divider == true ? /* @__PURE__ */ React7.createElement(Divider2, null) : "")))), /* @__PURE__ */ React7.createElement(Grid5, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ React7.createElement(Box6, { sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ React7.createElement(Typography6, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+  }
+  if (requiredValues === filledValues) {
+    onSuccess();
+  } else {
+    onError({
+      type: "error",
+      title: "Algunos campos son requeridos",
+      time: 10
+    });
+  }
 };
 
-// src/Components/SCTabs.tsx
-import React8, { useEffect as useEffect8 } from "react";
-import { Typography as Typography7, Box as Box7, SvgIcon as SvgIcon5, Tab, Tabs, Badge } from "@mui/material";
-import TabPanel from "@mui/lab/TabPanel";
-import TabContext from "@mui/lab/TabContext";
-import * as Muicon5 from "@mui/icons-material";
-var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
-  const [toast, setToast] = React8.useState(null);
-  let i = 0;
-  let j = 0;
-  let k = 0;
-  let l = 0;
-  let validateTypeIcon = true;
-  const [value, setValue] = React8.useState("1");
-  useEffect8(() => {
-    if (defaultOption) {
-      handleChange(event, void 0);
-    }
-  }, [defaultOption]);
-  options.map(function(option) {
-    const optionsLength = options.length;
-    if (option == null ? void 0 : option.iconOrBadge) {
-      if (typeIcon == "icon") {
-        if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == true) {
-          validateTypeIcon = true;
-          option.iconOrBadge = Muicon5[option == null ? void 0 : option.iconOrBadge];
-        } else {
-          validateTypeIcon = false;
-          setTimeout(() => {
-            setToast({
-              type: "error",
-              title: "Componente SCTabs",
-              subtitle: "En Option todos los iconOrBadge deben ser iconos de MUI, por favor verificar.",
-              time: 50
-            });
-          }, 10);
-          return;
-        }
-      } else if (typeIcon == "badge") {
-        if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == false) {
-          validateTypeIcon = true;
-          option;
-        } else {
-          validateTypeIcon = false;
-          setTimeout(() => {
-            setToast({
-              type: "error",
-              title: "Componente SCTabs",
-              subtitle: "En Option todos los iconOrBadge deben ser numeros para el badge, por favor verificar.",
-              time: 10
-            });
-          }, 10);
-          return;
-        }
-      }
-    }
-  });
-  const handleChange = (event2, newValue) => {
-    if (defaultOption && newValue == void 0) {
-      setValue(defaultOption);
-    } else if (newValue != void 0) {
-      setValue(newValue);
-    }
+// src/generales/capitalize.tsx
+function capitalize(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+// src/Components/Drawer/SCDrawer.tsx
+function SCDrawer({
+  //informativas
+  title,
+  arrayElements = [],
+  actions,
+  buttonDrawer,
+  //Apariencia
+  colorTitle,
+  anchor = "left",
+  width,
+  //Funcionales
+  open
+}) {
+  var _a;
+  const [drawerOpen, setDrawerOpen] = React7.useState(open);
+  const [toast, setToast] = React7.useState(null);
+  const handleDrawerClose = () => {
+    setDrawerOpen(false);
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ React8.createElement(Box7, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ React8.createElement(TabContext, { value }, /* @__PURE__ */ React8.createElement(
-    Tabs,
+  const toggleDrawer = (newOpen) => () => {
+    setDrawerOpen(newOpen);
+  };
+  const ButtonIcon = getIcon2(buttonDrawer == null ? void 0 : buttonDrawer.icon);
+  const setToastWithDelay = (toastContent) => {
+    setToast(null);
+    setTimeout(() => {
+      setToast(toastContent);
+    }, 10);
+  };
+  const inputValidation = () => validateInputs(arrayElements, setToastWithDelay, handleDrawerClose);
+  const clean = () => cleanInputs(arrayElements);
+  actions = actions != null ? actions : [{ text: "Aplicar filtros", fn: inputValidation }, { text: "Limpiar filtros", fn: clean }];
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, toast && /* @__PURE__ */ React7.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ React7.createElement(
+    Button4,
     {
-      value,
-      onChange: handleChange,
-      variant: variant ? orientation == "vertical" && variant == "fullWidth" ? "standard" : variant : "standard",
-      scrollButtons: scrollButtons == false ? false : true,
-      visibleScrollbar: scrollButtons == false ? true : false,
-      textColor: colorTab,
-      indicatorColor: colorTab,
-      orientation: orientation || "horizontal",
-      sx: { borderBottom: orientation == "vertical" ? 0 : 1, borderRight: orientation == "vertical" ? 1 : 0, borderColor: "divider", background: background || "" }
+      "data-testid": "test-buttonDrawer",
+      sx: { textTransform: "capitalize" },
+      color: buttonDrawer == null ? void 0 : buttonDrawer.color,
+      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) ? /* @__PURE__ */ React7.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null,
+      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" ? /* @__PURE__ */ React7.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null
     },
-    options.map((option) => /* @__PURE__ */ React8.createElement(
-      Tab,
-      {
-        value: String(i = i + 1),
-        key: j = j + 1,
-        label: option.name || "",
-        disabled: option.disabled || false,
-        iconPosition: iconPosition || "end",
-        icon: typeIcon == "badge" ? /* @__PURE__ */ React8.createElement(
-          Badge,
-          {
-            sx: {
-              width: "20px",
-              height: "20px",
-              "& .MuiBadge-badge": {
-                top: "10px",
-                right: "10px"
-              }
-            },
-            variant: "standard",
-            badgeContent: option.iconOrBadge,
-            color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
-          }
-        ) : typeIcon == "icon" ? /* @__PURE__ */ React8.createElement(SvgIcon5, { 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" }
+    capitalize((_a = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _a : "Drawer")
+  ), /* @__PURE__ */ React7.createElement(
+    Drawer,
+    {
+      open: drawerOpen,
+      onClose: toggleDrawer(false),
+      anchor: anchor != null ? anchor : "left",
+      sx: {
+        "& .MuiDrawer-paper": {
+          width: width != null ? width : "450px",
+          boxSizing: "border-box",
+          borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px"
+        }
       }
-    ))
-  ), children, options.map((option) => /* @__PURE__ */ React8.createElement(
-    TabPanel,
-    {
-      key: k = k + 1,
-      value: String(l = l + 1),
-      sx: { padding: "16px" }
     },
-    option.page ? option.page : /* @__PURE__ */ React8.createElement(Typography7, null, "No se ha configurado el componente a visualizar ")
-  )))) : /* @__PURE__ */ React8.createElement(Box7, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React8.createElement(SCToastNotification, __spreadValues({}, toast))));
-};
+    /* @__PURE__ */ React7.createElement(Stack3, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ React7.createElement(Grid4, { container: true, sx: { backgroundColor: "primary.50", alignItems: "center", height: "42px", textAlign: "left", padding: "8px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ React7.createElement(IconButton5, { onClick: handleDrawerClose }, /* @__PURE__ */ React7.createElement(CloseIcon, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))), /* @__PURE__ */ React7.createElement(Stack3, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
+      var _a2, _b, _c, _d, _e, _f;
+      return /* @__PURE__ */ React7.createElement(
+        Box7,
+        {
+          key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b = arrayElement.label) != null ? _b : ""}${index}`,
+          sx: { width: "100%" }
+        },
+        arrayElement.component ? /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ React7.createElement(
+          SCTextField,
+          {
+            title: arrayElement.title,
+            iconTitle: arrayElement.iconTitle,
+            infoTitle: arrayElement.infoTitle,
+            label: arrayElement.label,
+            placeholder: arrayElement.placeholder,
+            infoElement: arrayElement.infoElement,
+            iconInputStart: arrayElement.iconInputStart,
+            iconInputEnd: arrayElement.iconInputEnd,
+            maxLength: arrayElement.maxLength,
+            variant: arrayElement.variant,
+            format: arrayElement.format,
+            disabled: arrayElement.disabled,
+            required: arrayElement.required,
+            size: arrayElement.size,
+            width: arrayElement.width,
+            color: arrayElement.color,
+            background: arrayElement.background,
+            setState: arrayElement.setState,
+            state: arrayElement.state || "",
+            onChange: arrayElement.onChange,
+            onBlur: arrayElement.onBlur,
+            onKeyDown: arrayElement.onKeyDown
+          }
+        ) : arrayElement.type === "textArea" ? /* @__PURE__ */ React7.createElement(
+          SCTextArea,
+          {
+            title: arrayElement.title,
+            iconTitle: arrayElement.iconTitle,
+            infoTitle: arrayElement.infoTitle,
+            label: arrayElement.label,
+            placeholder: arrayElement.placeholder,
+            maxLength: arrayElement.maxLength,
+            variant: arrayElement.variant,
+            disabled: arrayElement.disabled,
+            required: arrayElement.required,
+            width: arrayElement.width,
+            rows: arrayElement.rows,
+            background: arrayElement.background,
+            setState: arrayElement.setState,
+            state: arrayElement.state || "",
+            onBlur: arrayElement.onBlur
+          }
+        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ React7.createElement(
+          SCAutocomplete,
+          {
+            label: arrayElement.label,
+            data: (_c = arrayElement.data) != null ? _c : [],
+            columnGroup: arrayElement.columnGroup,
+            getItemValue: (_d = arrayElement.getItemValue) != null ? _d : () => ({ text: "", value: "" }),
+            typeFormat: arrayElement.typeFormat,
+            checkMassive: arrayElement.checkMassive,
+            deleteType: arrayElement.deleteType,
+            required: arrayElement.required,
+            disabled: arrayElement.disabled,
+            background: arrayElement.background,
+            fnAplicar: arrayElement.fnAplicar,
+            setState: arrayElement.setState,
+            state: arrayElement.state || "",
+            inputChange: arrayElement.inputChange
+          }
+        ) : arrayElement.type === "select" ? /* @__PURE__ */ React7.createElement(
+          SCSelect,
+          {
+            label: arrayElement.label,
+            data: (_e = arrayElement.data) != null ? _e : [],
+            getItemValue: (_f = arrayElement.getItemValue) != null ? _f : () => ({ text: "", value: "" }),
+            width: arrayElement.width,
+            size: arrayElement.size,
+            variant: arrayElement.variant,
+            deleteType: arrayElement.deleteType,
+            required: arrayElement.required,
+            disabled: arrayElement.disabled,
+            background: arrayElement.background,
+            fnAplicar: arrayElement.fnAplicar,
+            setState: arrayElement.setState,
+            state: arrayElement.state || ""
+          }
+        ) : arrayElement.type === "dateRange" ? /* @__PURE__ */ React7.createElement(
+          SCDateRange,
+          {
+            labelDateInitial: arrayElement.labelDateInitial,
+            labelDateFinal: arrayElement.labelDateFinal,
+            required: arrayElement.required,
+            disabled: arrayElement.disabled,
+            background: arrayElement.background,
+            state: arrayElement.state || [],
+            setState: arrayElement.setState
+          }
+        ) : null
+      );
+    })), actions != void 0 && actions.length > 0 ? /* @__PURE__ */ React7.createElement(
+      Grid4,
+      {
+        sx: { borderTop: 1, borderColor: "#1018403B" },
+        container: true,
+        gap: 2,
+        padding: "8px 12px",
+        height: "42px",
+        alignItems: "center",
+        justifyContent: actions.length > 1 ? "space-between" : !anchor && anchor != "right" ? "flex-end" : "flex-start",
+        flexDirection: anchor != "right" ? "row-reverse" : "row"
+      },
+      actions.map((btn, index) => /* @__PURE__ */ React7.createElement(
+        Button4,
+        {
+          key: index,
+          variant: index === 0 || actions && actions.length < 2 ? "contained" : "text",
+          color: "primary",
+          onClick: btn.fn,
+          disabled: btn.disabled || false,
+          size: "small"
+        },
+        btn.text
+      ))
+    ) : "")
+  ));
+}
 
 // src/Components/FooterAction/FooterAction.tsx
-import React9 from "react";
+import React8 from "react";
 import { AppBar, Toolbar, Box as Box8, Typography as Typography8 } from "@mui/material";
 var FooterAction = ({
   leftContent,
@@ -1340,52 +1326,52 @@ var FooterAction = ({
   label,
   variant
 }) => {
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React8.createElement(
     AppBar,
     {
       color: "inherit",
       sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React8.createElement(
       Toolbar,
       {
         id: "footer-toolbar",
         sx: { gap: 1.5, minHeight: "50px !important" }
       },
       leftContent,
-      /* @__PURE__ */ React9.createElement(Box8, { flexGrow: 1 }),
-      label && /* @__PURE__ */ React9.createElement(Typography8, { variant: "body2", color: "text.secondary" }, label),
+      /* @__PURE__ */ React8.createElement(Box8, { flexGrow: 1 }),
+      label && /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, label),
       rightContent
     )
   );
 };
 
 // src/Components/Modal/Helpers/Data.tsx
-import React10 from "react";
+import React9 from "react";
 import { Info, Warning } from "@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__ */ React10.createElement(Info, { color: "info", fontSize: "medium" })
+    icon: /* @__PURE__ */ React9.createElement(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__ */ React10.createElement(Info, { color: "error", fontSize: "medium" })
+    icon: /* @__PURE__ */ React9.createElement(Info, { color: "error", fontSize: "medium" })
   },
   warning: {
     color: "warning",
     defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
-    icon: /* @__PURE__ */ React10.createElement(Warning, { color: "warning", fontSize: "medium" })
+    icon: /* @__PURE__ */ React9.createElement(Warning, { color: "warning", fontSize: "medium" })
   }
 };
 
 // src/Components/Modal/Helpers/Utils.tsx
-import * as MuiIcons3 from "@mui/icons-material";
-import { FilterListOutlined as FilterListOutlined3 } from "@mui/icons-material";
+import * as MuiIcons2 from "@mui/icons-material";
+import { FilterListOutlined as FilterListOutlined2 } from "@mui/icons-material";
 var getIconComponent2 = (iconName) => {
-  return iconName && MuiIcons3[iconName] ? MuiIcons3[iconName] : FilterListOutlined3;
+  return iconName && MuiIcons2[iconName] ? MuiIcons2[iconName] : FilterListOutlined2;
 };
 var getModalColor = (state) => {
   var _a;
@@ -1407,8 +1393,8 @@ var getButtonColor = (state) => {
 };
 
 // src/Components/Modal/SCModal.tsx
-import React11, { useCallback as useCallback2, useEffect as useEffect9, useMemo as useMemo3, useState as useState8 } from "react";
-import { Modal as Modal3, Box as Box9, Typography as Typography9, IconButton as IconButton6, Button as Button6, Stack as Stack5 } from "@mui/material";
+import React10, { useCallback, useEffect as useEffect7, useMemo, useState as useState5 } from "react";
+import { Modal, Box as Box9, Typography as Typography9, IconButton as IconButton6, Button as Button5, Stack as Stack4 } from "@mui/material";
 import { Close as Close2 } from "@mui/icons-material";
 var SCModal = ({
   buttonModal,
@@ -1419,34 +1405,34 @@ var SCModal = ({
   action
 }) => {
   var _a, _b, _c, _d, _e;
-  const [openModal, setOpenModal] = useState8(open != null ? open : false);
-  useEffect9(() => {
+  const [openModal, setOpenModal] = useState5(open != null ? open : false);
+  useEffect7(() => {
     if (open !== void 0) {
       setOpenModal(open);
     }
   }, [open]);
-  const Icon = useMemo3(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
-  const handleClose = useCallback2(() => setOpenModal(false), []);
+  const Icon = useMemo(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
+  const handleClose = useCallback(() => setOpenModal(false), []);
   const toggleModal = (newOpen) => () => setOpenModal(newOpen);
-  const prevAction = useMemo3(
+  const prevAction = useMemo(
     () => action != null ? action : [{ text: "Cancelar", fn: handleClose }, { text: "Consultar", fn: () => {
     } }],
     [action, handleClose]
   );
   const { icon, defaultDescription } = modalStateConfig[state];
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
-    Button6,
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    Button5,
     {
       "data-testid": "test-buttonModal",
       color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
       onClick: toggleModal(true),
       variant: (_b = buttonModal == null ? void 0 : buttonModal.variant) != null ? _b : "text",
       size: (_c = buttonModal == null ? void 0 : buttonModal.size) != null ? _c : "small",
-      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ React11.createElement(Icon, null),
-      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ React11.createElement(Icon, null)
+      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ React10.createElement(Icon, null),
+      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ React10.createElement(Icon, null)
     },
     capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
-  ), /* @__PURE__ */ React11.createElement(Modal3, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React10.createElement(Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ React10.createElement(
     Box9,
     {
       sx: {
@@ -1460,10 +1446,10 @@ var SCModal = ({
         boxShadow: 24
       }
     },
-    /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ React11.createElement(Box9, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ React11.createElement(Typography9, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ React11.createElement(IconButton6, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ React11.createElement(Close2, { color: "action" }))),
-    /* @__PURE__ */ React11.createElement(Stack5, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ React11.createElement(Typography9, { variant: "body1" }, description || defaultDescription)),
-    action && /* @__PURE__ */ React11.createElement(
-      Stack5,
+    /* @__PURE__ */ React10.createElement(Stack4, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React10.createElement(Stack4, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ React10.createElement(Box9, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ React10.createElement(Typography9, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ React10.createElement(IconButton6, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ React10.createElement(Close2, { color: "action" }))),
+    /* @__PURE__ */ React10.createElement(Stack4, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ React10.createElement(Typography9, { variant: "body1" }, description || defaultDescription)),
+    action && /* @__PURE__ */ React10.createElement(
+      Stack4,
       {
         id: "Action",
         direction: "row",
@@ -1473,8 +1459,8 @@ var SCModal = ({
         bgcolor: "grey.50",
         sx: { borderRadius: 1 }
       },
-      /* @__PURE__ */ React11.createElement(
-        Button6,
+      /* @__PURE__ */ React10.createElement(
+        Button5,
         {
           color: "inherit",
           variant: "text",
@@ -1483,21 +1469,208 @@ var SCModal = ({
         },
         capitalize("cancelar")
       ),
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React10.createElement(
+        Button5,
+        {
+          "data-testid": "test-aceptar",
+          color: getButtonColor(state),
+          variant: "contained",
+          onClick: (_e = action[0]) == null ? void 0 : _e.fn,
+          disabled: false,
+          size: "small"
+        },
+        capitalize(action[0].text)
+      )
+    )
+  )));
+};
+
+// src/Components/MultiSelect/MultiSelect.tsx
+import React11, { useEffect as useEffect8, useMemo as useMemo3 } from "react";
+import { Button as Button6, Checkbox as Checkbox2, FormControl as FormControl3, InputAdornment as InputAdornment5, ListItemIcon as ListItemIcon3, MenuItem as MenuItem3, Popover as Popover3, Stack as Stack5, TextField as TextField4 } from "@mui/material";
+import { SearchOutlined } from "@mui/icons-material";
+
+// src/Components/MultiSelect/helpers/useHandlers.tsx
+import { useCallback as useCallback2, useState as useState6 } from "react";
+function useMultiSelectHandlers() {
+  const [anchorEl, setAnchorEl] = useState6(null);
+  const [open, setOpen] = useState6(false);
+  const [selectedItems, setSelectedItems] = useState6([]);
+  const [filterValue, setFilterValue] = useState6("");
+  const handleOpen = useCallback2((e) => {
+    setAnchorEl(e.currentTarget);
+    setOpen(true);
+  }, []);
+  const handleClose = useCallback2(() => {
+    setAnchorEl(null);
+    setOpen(false);
+  }, []);
+  const handleFilterChange = useCallback2(
+    (e) => {
+      setFilterValue(e.target.value);
+    },
+    []
+  );
+  const handleCheckboxToggle = useCallback2((item) => {
+    setSelectedItems(
+      (prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
+    );
+  }, []);
+  return {
+    anchorEl,
+    open,
+    selectedItems,
+    filterValue,
+    setSelectedItems,
+    handleOpen,
+    handleClose,
+    handleFilterChange,
+    handleCheckboxToggle,
+    setOpen
+  };
+}
+
+// src/Components/MultiSelect/helpers/Utils.tsx
+import * as MuiIcons3 from "@mui/icons-material";
+import { FilterListOutlined as FilterListOutlined3 } from "@mui/icons-material";
+function getIconMultiSelect(name) {
+  return name in MuiIcons3 ? MuiIcons3[name] : FilterListOutlined3;
+}
+
+// src/Components/MultiSelect/helpers/useFilteredItems.tsx
+import { useMemo as useMemo2 } from "react";
+function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
+  const filteredItems = useMemo2(
+    () => items.filter(
+      (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
+    ),
+    [items, filterValue, getItemLabel]
+  );
+  const sortedItems = useMemo2(() => {
+    return [
+      ...filteredItems.filter((item) => selectedItems.includes(item)),
+      ...filteredItems.filter((item) => !selectedItems.includes(item))
+    ];
+  }, [filteredItems, selectedItems]);
+  return { filteredItems, sortedItems };
+}
+
+// src/Components/MultiSelect/MultiSelect.tsx
+function MultiSelect({
+  textButton,
+  button,
+  items,
+  topPanel,
+  actions,
+  dense = false,
+  open,
+  selectAll = false,
+  getItemLabel
+}) {
+  var _a, _b;
+  const {
+    anchorEl,
+    open: openMultiselect,
+    selectedItems,
+    filterValue,
+    setSelectedItems,
+    handleOpen,
+    handleClose,
+    handleFilterChange,
+    handleCheckboxToggle,
+    setOpen
+  } = useMultiSelectHandlers();
+  useEffect8(() => {
+    if (open !== void 0) {
+      setOpen(open);
+    }
+  }, [open, setOpen]);
+  useEffect8(() => {
+    setSelectedItems([]);
+  }, [items, setSelectedItems]);
+  const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
+  const Icon = useMemo3(() => {
+    var _a2;
+    return getIconMultiSelect((_a2 = button == null ? void 0 : button.icon) != null ? _a2 : "FilterListOutlined");
+  }, [button == null ? void 0 : button.icon]);
+  const handleSelectAll = () => {
+    const allSelected2 = selectedItems.length === filteredItems.length;
+    setSelectedItems(allSelected2 ? [] : filteredItems);
+  };
+  const allSelected = filteredItems.length > 0 && selectedItems.length === filteredItems.length;
+  const resolvedActions = actions != null ? actions : [
+    { text: "Limpiar", fn: handleClose },
+    { text: "Aplicar", fn: () => {
+    } }
+  ];
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    Button6,
+    {
+      "test-id": "multiselect-button",
+      color: (_a = button == null ? void 0 : button.color) != null ? _a : "primary",
+      onClick: handleOpen,
+      variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
+      size: "small",
+      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ React11.createElement(Icon, null) : null,
+      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ React11.createElement(Icon, null) : null
+    },
+    capitalize(textButton != null ? textButton : "MultiSelect")
+  ), /* @__PURE__ */ React11.createElement(
+    Popover3,
+    {
+      elevation: 8,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      open: openMultiselect,
+      onClose: () => setOpen(false)
+    },
+    /* @__PURE__ */ React11.createElement(Stack5, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ React11.createElement(Stack5, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ React11.createElement(FormControl3, { fullWidth: true, size: "small" }, /* @__PURE__ */ React11.createElement(
+      TextField4,
+      {
+        "data-testid": "multiselect-input",
+        fullWidth: true,
+        size: "small",
+        variant: "outlined",
+        placeholder: "Buscar",
+        value: filterValue,
+        onChange: handleFilterChange,
+        slotProps: {
+          input: {
+            endAdornment: /* @__PURE__ */ React11.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React11.createElement(SearchOutlined, { fontSize: "small" }))
+          }
+        }
+      }
+    ))), /* @__PURE__ */ React11.createElement(Stack5, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ React11.createElement(MenuItem3, { dense, onClick: handleSelectAll }, /* @__PURE__ */ React11.createElement(ListItemIcon3, null, /* @__PURE__ */ React11.createElement(Checkbox2, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ React11.createElement(
+      MenuItem3,
+      {
+        key: getItemLabel(item),
+        dense,
+        onClick: () => handleCheckboxToggle(item)
+      },
+      /* @__PURE__ */ React11.createElement(ListItemIcon3, null, /* @__PURE__ */ React11.createElement(
+        Checkbox2,
+        {
+          checked: selectedItems.includes(item),
+          color: "primary"
+        }
+      )),
+      getItemLabel(item)
+    )) : /* @__PURE__ */ React11.createElement(MenuItem3, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ React11.createElement(Stack5, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
+      var _a2;
+      return /* @__PURE__ */ React11.createElement(
         Button6,
         {
-          "data-testid": "test-aceptar",
-          color: getButtonColor(state),
-          variant: "contained",
-          onClick: (_e = action[0]) == null ? void 0 : _e.fn,
-          disabled: false,
+          key: index,
+          variant: index === 0 || resolvedActions.length < 2 ? "text" : "contained",
+          onClick: button2.fn,
+          disabled: (_a2 = button2.disabled) != null ? _a2 : false,
           size: "small"
         },
-        capitalize(action[0].text)
-      )
-    )
-  )));
-};
+        capitalize(button2.text)
+      );
+    })))
+  ));
+}
 
 // src/Components/PageHeader/PageHeader.tsx
 import React12 from "react";
@@ -1527,11 +1700,11 @@ var PageHeader = ({
 };
 
 // src/Components/SCCalendarSwipeable.tsx
-import React13, { useState as useState9 } from "react";
+import React13, { useState as useState7 } from "react";
 import { Typography as Typography11, IconButton as IconButton7, Box as Box10 } from "@mui/material";
-import Grid6 from "@mui/material/Grid2";
+import Grid5 from "@mui/material/Grid2";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { LocalizationProvider as LocalizationProvider2 } from "@mui/x-date-pickers/LocalizationProvider";
 import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
 import { es } from "date-fns/locale";
 import { format, startOfWeek, addDays, isSameDay } from "date-fns";
@@ -1546,8 +1719,8 @@ var SCCalendarSwipeable = ({
   state
 }) => {
   let convertFecha;
-  const [fecha, setFecha] = useState9(/* @__PURE__ */ new Date());
-  const [fechaSeleccionada, setFechaSeleccionada] = useState9();
+  const [fecha, setFecha] = useState7(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = useState7();
   const [stateVal, setstateVal] = React13.useState(/* @__PURE__ */ new Date());
   const [openCalendar, setOpenCalendar] = React13.useState(false);
   const hoy = /* @__PURE__ */ new Date();
@@ -1572,11 +1745,11 @@ var SCCalendarSwipeable = ({
     setOpenCalendar(newOpen);
   };
   const locale = __spreadValues({}, es);
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React13.createElement(Box10, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React13.createElement(Grid6, { container: true, gap: 0.5, sx: {
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(LocalizationProvider2, { dateAdapter: AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ React13.createElement(Box10, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ React13.createElement(Grid5, { container: true, gap: 0.5, sx: {
     justifyContent: "space-between",
     padding: "12px 0px",
     background: "transparent"
-  } }, diasSemana.map((dia) => /* @__PURE__ */ React13.createElement(Grid6, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React13.createElement(Typography11, { sx: { fontSize: "12px !important", color: "#10184099" } }, format(dia, "EEEE", { locale: es }).charAt(0).toUpperCase())), /* @__PURE__ */ React13.createElement(
+  } }, diasSemana.map((dia) => /* @__PURE__ */ React13.createElement(Grid5, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React13.createElement(Typography11, { sx: { fontSize: "12px !important", color: "#10184099" } }, format(dia, "EEEE", { locale: es }).charAt(0).toUpperCase())), /* @__PURE__ */ React13.createElement(
     Box10,
     {
       onClick: () => setFecha(dia),
@@ -1593,7 +1766,7 @@ var SCCalendarSwipeable = ({
       }
     },
     /* @__PURE__ */ React13.createElement(Typography11, { sx: { fontSize: "12px !important", color: isSameDay(dia, fecha) ? "white" : "#101840DE" } }, format(dia, "d"))
-  )))), /* @__PURE__ */ React13.createElement(Grid6, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowDownIcon, null))))) : /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React13.createElement(
+  )))), /* @__PURE__ */ React13.createElement(Grid5, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowDownIcon, null))))) : /* @__PURE__ */ React13.createElement(Box10, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ React13.createElement(
     StaticDatePicker,
     {
       orientation: "landscape",
@@ -1603,29 +1776,132 @@ 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__ */ React13.createElement(Grid6, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowUpIcon, null))))));
+  ), /* @__PURE__ */ React13.createElement(Grid5, { container: true, justifyContent: "center" }, /* @__PURE__ */ React13.createElement(IconButton7, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ React13.createElement(KeyboardDoubleArrowUpIcon, null))))));
 };
 
 // src/Components/SCDataGrid.tsx
-import React14, { useEffect as useEffect11, useState as useState10 } from "react";
+import React14, { useEffect as useEffect10, useState as useState8 } from "react";
 import { DataGridPro, useGridApiRef } from "@mui/x-data-grid-pro";
-import { LicenseInfo } from "@mui/x-license-pro";
-var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeight, density, groupingColDef, getTreeDataPath }) => {
-  const apiRef = useGridApiRef();
-  LicenseInfo.setLicenseKey(
+import { LicenseInfo as LicenseInfo2 } from "@mui/x-license-pro";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) => {
+  LicenseInfo2.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
-  let validationTreeData = getTreeDataPath ? true : false;
+  const apiRef = useGridApiRef();
+  const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
+  function generateRandomId() {
+    return Math.floor(Math.random() * 1e6);
+  }
+  const getTreeDataPaths = (row) => {
+    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()}`
+    ];
+  };
+  const groupingColDefs = {
+    field: "grouping",
+    headerName: groupColumns != void 0 ? groupColumns[groupColumns.length - 1].split("[").length == 2 ? groupColumns[groupColumns.length - 1].split("[")[0].trim() : "Agrupador" : "",
+    renderCell: (params) => {
+      var _a;
+      let label = params.value.toString().includes("/") ? params.value.split("/")[0].toString() : params.value.toString();
+      if (groupColumns != void 0) {
+        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]);
+          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();
+          const groupedDataLength2 = arrayRows.filter(
+            (r) => r[fieldGrouping1] === labelGrouping1 && r[fieldGrouping2] === label
+          ).length;
+          label = `${labelGrouping2} (${groupedDataLength2})`;
+        } else {
+          label = label;
+        }
+      }
+      return /* @__PURE__ */ React14.createElement(
+        "div",
+        {
+          style: {
+            width: "100%",
+            boxSizing: "border-box",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            color: "#101840DE",
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: params.rowNode.depth == 0 ? "5px" : params.rowNode.depth == 1 ? "15px" : "25px",
+            backgroundColor: params.rowNode.depth == 0 ? "#DCDEE0" : groupColumns.length > 2 && params.rowNode.depth == 1 ? "#EAEBEC" : "#FFFFFF",
+            fontWeight: params.rowNode.type == "group" ? "400" : "300"
+          }
+        },
+        params.rowNode.type === "group" && /* @__PURE__ */ React14.createElement(
+          "span",
+          {
+            style: {
+              cursor: "pointer",
+              marginRight: 8,
+              userSelect: "none"
+            },
+            onClick: (e) => {
+              e.stopPropagation();
+              params.api.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
+            }
+          },
+          params.rowNode.childrenExpanded ? /* @__PURE__ */ React14.createElement(KeyboardArrowUpIcon, { fontSize: "small", color: "action" }) : /* @__PURE__ */ React14.createElement(KeyboardArrowDownIcon, { fontSize: "small", color: "action" })
+        ),
+        label
+      );
+    },
+    colSpan: (params) => {
+      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;
+      let agrupado1 = false;
+      let agrupado2 = false;
+      if (fieldGrouping1 != void 0) {
+        agrupado1 = arrayRows.some(
+          (row) => String(row[fieldGrouping1]) === value
+        );
+      }
+      if (fieldGrouping2 != void 0) {
+        agrupado2 = arrayRows.some(
+          (row) => String(row[fieldGrouping2]) === value
+        );
+      }
+      if (agrupado1 || agrupado2) {
+        return columns.length + 1;
+      } else {
+        return 1;
+      }
+    }
+  };
+  let validationTreeData = groupColumns ? true : false;
   let validationCheckboxSelection = checkboxSelection || false;
   let styleDensity = density || "compact";
   let styleTopContainerHeight = styleDensity === "compact" ? "26px" : styleDensity === "standard" ? "38px" : styleDensity === "comfortable" ? "60px" : "27px";
   let styleRowHeight = density == "compact" ? 32 : density == "standard" ? 28 : density == "comfortable" ? 36 : 32;
-  let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
-  let validationGroupingColDef = groupingColDef || {};
-  const [groupDataLenght, setGroupDataLengh] = useState10(0);
-  const [pageSize, setPageSize] = useState10(rows);
-  const [arrayRows, setArrayRows] = useState10([]);
-  useEffect11(() => {
+  let rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length.toString()) : data.length < 10 ? parseInt(data.length.toString()) : 10;
+  let validationGroupingColDef = groupingColDefs || {};
+  const [groupDataLenght, setGroupDataLengh] = useState8(0);
+  const [pageSize, setPageSize] = useState8(rows);
+  const [arrayRows, setArrayRows] = useState8([]);
+  const [selectionModel, setSelectionModel] = useState8([]);
+  useEffect10(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
     }
@@ -1647,8 +1923,6 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
     }
     setArrayRows(dataConvert);
   };
-  const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
-  const [selectionModel, setSelectionModel] = useState10([]);
   const handleSelectionChange = (newSelection) => {
     console.log(data);
     console.log(arrayRows);
@@ -1685,7 +1959,7 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
       setSelectionModel([...newSelection]);
     }
   };
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, data && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { width: width || "100%", maxHeight } }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, data && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ React14.createElement(
     DataGridPro,
     {
       apiRef,
@@ -1694,8 +1968,8 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
       columns,
       density: styleDensity,
       treeData: validationTreeData,
-      getTreeDataPath,
-      groupingColDef: validationTreeData == true ? validationGroupingColDef : false,
+      getTreeDataPath: validationTreeData == true ? getTreeDataPaths : void 0,
+      groupingColDef: validationTreeData == true ? validationGroupingColDef : void 0,
       pagination: true,
       initialState: {
         pagination: { paginationModel: { pageSize: rows } }
@@ -1718,6 +1992,8 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
         }
       },
       sx: {
+        maxHeight: maxHeight ? `${maxHeight}px` : "none",
+        //overflow: 'auto',
         "& .MuiDataGrid-filler": {
           display: "none !important"
         },
@@ -1741,235 +2017,411 @@ var SCDataGrid = ({ data, columns, rowsTable, checkboxSelection, width, maxHeigh
           "maxHeight": "0px !important"
         },
         "& .MuiDataGrid-cell": {
-          padding: "0 !important"
+          padding: "0 !important",
+          background: "white"
         }
       }
     }
   ))));
 };
+var SCDataGrid = React14.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;
+  return isEqual;
+});
 
-// src/Components/SCAutocomplete.tsx
-import React15, { useEffect as useEffect12 } from "react";
-import { Autocomplete, Checkbox as Checkbox2, InputAdornment as InputAdornment3, MenuItem as MenuItem3, TextField as TextField3, Typography as Typography12, SvgIcon as SvgIcon7, ListItemIcon as ListItemIcon3, ListItemText, Divider as Divider3, FormControlLabel, IconButton as IconButton8, Chip, Box as Box11, Button as Button8 } from "@mui/material";
+// src/Components/EmptyState/EmptyState.tsx
+import React15 from "react";
+import { Button as Button8, Stack as Stack7, Typography as Typography12 } from "@mui/material";
+
+// src/assets/ImgEmptyState/create.svg
+var create_default = "./create-KZGO2OZA.svg";
+
+// src/assets/ImgEmptyState/error.svg
+var error_default = "./error-RUCZUXDN.svg";
+
+// src/assets/ImgEmptyState/empty.svg
+var empty_default = "./empty-3NEKE7WO.svg";
+
+// src/assets/ImgEmptyState/search.svg
+var search_default = "./search-OKSCVF2W.svg";
+
+// src/Components/EmptyState/EmptyState.tsx
+var EmptyStateImageUrls = {
+  create: create_default,
+  error: error_default,
+  noResult: empty_default,
+  search: search_default
+};
+var DefaultIcon = ({
+  state = "create",
+  size = "large"
+}) => {
+  const imageUrl = EmptyStateImageUrls[state];
+  const iconSize = size === "small" ? { width: "40px", height: "40px" } : { width: "60px", height: "60px" };
+  return /* @__PURE__ */ React15.createElement("img", { src: imageUrl, alt: state, style: iconSize });
+};
+var EmptyState = ({
+  state = "create",
+  size = "large",
+  title,
+  subtitle,
+  actions,
+  containerHeight = "100vh",
+  icon = /* @__PURE__ */ React15.createElement(DefaultIcon, { state, size })
+}) => {
+  const titleVariant = size === "small" ? "subtitle2" : "h6";
+  const subtitleVariant = size === "small" ? "caption" : "body1";
+  return /* @__PURE__ */ React15.createElement(
+    Stack7,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      spacing: 2,
+      height: containerHeight,
+      "data-testid": "empty-state-container"
+    },
+    icon && /* @__PURE__ */ React15.createElement(Stack7, null, icon),
+    /* @__PURE__ */ React15.createElement(Stack7, { gap: 0.5 }, /* @__PURE__ */ React15.createElement(Typography12, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ React15.createElement(
+      Typography12,
+      {
+        variant: subtitleVariant,
+        textAlign: "center",
+        color: "text.secondary"
+      },
+      subtitle
+    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ React15.createElement(
+      Stack7,
+      {
+        direction: "row",
+        spacing: 2,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      actions.map((action, index) => {
+        var _a, _b, _c, _d;
+        return /* @__PURE__ */ React15.createElement(
+          Button8,
+          {
+            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__ */ React15.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            endIcon: action.icon && action.iconPosition === "right" ? /* @__PURE__ */ React15.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            onClick: action.onClick
+          },
+          capitalize((_d = action.text) != null ? _d : "action")
+        );
+      })
+    ))
+  );
+};
+
+// src/Components/SCDialog.tsx
+import React16, { useEffect as useEffect11, useState as useState9 } from "react";
+import { Button as Button9, Typography as Typography13, Modal as Modal2, Dialog, DialogActions, DialogContent, DialogTitle, IconButton as IconButton8, Tooltip as Tooltip3, Box as Box11, SvgIcon as SvgIcon5 } from "@mui/material";
+import Grid6 from "@mui/material/Grid2";
+import CloseIcon2 from "@mui/icons-material/Close";
+import * as Muicon5 from "@mui/icons-material";
+var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, setShow, show }) => {
+  let i = 0;
+  let iconTitleValidation = "";
+  let IconTitle;
+  let ButtonIcon;
+  const [open, setOpen] = useState9(show);
+  useEffect11(() => {
+    if (show) {
+      handleOpen();
+    }
+  }, [show]);
+  if ((buttonDialog == null ? void 0 : buttonDialog.icon) != void 0) {
+    if (Muicon5[buttonDialog == null ? void 0 : buttonDialog.icon] == void 0) {
+      ButtonIcon = buttonDialog == null ? void 0 : buttonDialog.icon;
+    } else {
+      ButtonIcon = Muicon5[buttonDialog == null ? void 0 : buttonDialog.icon];
+    }
+  }
+  if (iconTitle) {
+    if (Muicon5[iconTitle] == void 0) {
+      if (iconTitle && React16.isValidElement(iconTitle) && iconTitle.type == void 0) {
+        iconTitleValidation = "image";
+        IconTitle = iconTitle;
+      } else {
+        iconTitleValidation = "icon";
+        IconTitle = iconTitle;
+      }
+    } else {
+      iconTitleValidation = "icon";
+      IconTitle = Muicon5[iconTitle];
+    }
+  }
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => {
+    setOpen(false);
+    if (setShow) {
+      setShow(false);
+    }
+  };
+  const dialogActions = actions != null ? actions : [{ text: "Cerrar", fn: handleClose }];
+  content = content != null ? content : { component: /* @__PURE__ */ React16.createElement(Box11, null, " Aqui va el contenido ") };
+  return /* @__PURE__ */ React16.createElement("div", null, buttonDialog ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ React16.createElement(Tooltip3, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ React16.createElement(Button9, { 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__ */ React16.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__ */ React16.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ React16.createElement(IconButton8, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ React16.createElement(SvgIcon5, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ React16.createElement(Modal2, { open: open || false, onClose: handleClose }, /* @__PURE__ */ React16.createElement(
+    Dialog,
+    {
+      "data-testid": "dialog-element",
+      open: open || false,
+      onClose: disableClose ? void 0 : handleClose,
+      maxWidth: "xl",
+      sx: {
+        width: "100% !important",
+        "& .MuiBackdrop-root": {
+          backdropFilter: "blur(0px) !important"
+        }
+      }
+    },
+    title && /* @__PURE__ */ React16.createElement(DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ React16.createElement(Grid6, { container: true, size: 12, sx: { justifyContent: "space-between" } }, /* @__PURE__ */ React16.createElement(Grid6, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ React16.createElement(Box11, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ React16.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ React16.createElement(SvgIcon5, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ React16.createElement(Grid6, null, /* @__PURE__ */ React16.createElement(Typography13, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ React16.createElement(Typography13, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ React16.createElement(IconButton8, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ React16.createElement(CloseIcon2, null)) : "")),
+    /* @__PURE__ */ React16.createElement(
+      DialogContent,
+      {
+        "data-testid": "dialog-content",
+        dividers: dividers ? dividers : false,
+        sx: {
+          m: 0,
+          padding: "12px 16px 8px 16px",
+          background: background ? background : "white",
+          height: !heightContent ? "508px" : heightContent,
+          width: widthContent == "extra-small" ? "444px" : widthContent == "small" ? "600px" : widthContent == "medium" ? "900px" : widthContent == "large" ? "1200px" : widthContent == "extra-large" ? "1536px" : "900px"
+        }
+      },
+      content.url ? /* @__PURE__ */ React16.createElement(
+        "iframe",
+        {
+          style: { border: "none", minWidth: "100%", minHeight: "100%" },
+          id: "inlineFrameExample",
+          title: "Inline Frame Example",
+          src: content.url
+        }
+      ) : content.component
+    ),
+    dialogActions.length > 0 ? /* @__PURE__ */ React16.createElement(DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px" } }, dialogActions.map((boton) => /* @__PURE__ */ React16.createElement(
+      Button9,
+      {
+        key: i = i + 1,
+        autoFocus: true,
+        variant: i == 1 || dialogActions.length < 2 ? "contained" : "text",
+        color: "primary",
+        size: "small",
+        onClick: boton.fn,
+        disabled: boton.disabled || false
+      },
+      boton.text
+    ))) : ""
+  )));
+};
+
+// src/Components/SCMenu.tsx
+import React17 from "react";
+import { Box as Box12, Typography as Typography14, Paper, Divider as Divider4, MenuList, MenuItem as MenuItem4, ListItemIcon as ListItemIcon4, SvgIcon as SvgIcon6 } from "@mui/material";
 import Grid7 from "@mui/material/Grid2";
-import { Search, Clear } from "@mui/icons-material";
-import * as Muicon6 from "@mui/icons-material";
-function SCAutocomplete({
-  label = "",
-  data,
-  columnGroup,
-  getItemValue,
-  type = "normal",
-  checkMassive = false,
-  deleteType = "button",
-  fnAplicar,
-  required,
-  disabled,
-  background,
-  setState,
-  state
-}) {
-  const labelContent = `<span class="red-asterisk">* </span>` + label;
-  let group = "";
-  let isSelected = false;
-  const [selectedOptions, setSelectedOptions] = React15.useState([]);
-  const [prevData, setPrevData] = React15.useState(data);
+
+// src/Components/Hooks/useWindowDimensions.ts
+import { useState as useState10, useEffect as useEffect12 } from "react";
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState10(getWindowDimensions());
   useEffect12(() => {
-    let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
-    if (dataChangeValidation == false) {
-      setState({ hiddenValue: "-1", textValue: "" });
-      setSelectedOptions([]);
-      setPrevData(data);
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
     }
-  }, [data]);
-  useEffect12(() => {
-    if (type == "multiselect") {
-      if (state.hiddenValue != "-1") {
-        setSelectedOptions(data.filter(
-          (item) => Array.isArray(state.hiddenValue) ? state.hiddenValue.includes(getItemValue(item).value) : getItemValue(item).value === state.hiddenValue
-        ));
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+}
+
+// src/Components/SCMenu.tsx
+import * as Muicon6 from "@mui/icons-material";
+var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu, widthPage }) => {
+  const { height, width } = useWindowDimensions();
+  const menuSize = widthMenu ? parseInt(widthMenu) : 284;
+  const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
+  const widthContainer = menuSize + pageSize;
+  let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
+  const [selectedIndex, setSelectedIndex] = React17.useState("1");
+  const [value, setValue] = React17.useState("1");
+  React17.useEffect(() => {
+    heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
+  }, [height]);
+  React17.useEffect(() => {
+    if (defaultOption) {
+      handleClickMenusItem(event, void 0);
+    }
+  }, [defaultOption]);
+  options.map(function(option, index, array) {
+    if (option == null ? void 0 : option.iconLeft) {
+      if ((option == null ? void 0 : option.iconLeft.type) == void 0) {
+        option.iconLeft = Muicon6[option == null ? void 0 : option.iconLeft];
+      } else {
+        option;
       }
     }
-  }, [state.hiddenValue]);
-  data.map(function(option, index, array) {
-    if (option == null ? void 0 : option.icon) {
-      if ((option == null ? void 0 : option.icon.type) == void 0) {
-        option.icon = Muicon6[option == null ? void 0 : option.icon];
-      } else {
-        option;
+    if (option == null ? void 0 : option.iconRight) {
+      if ((option == null ? void 0 : option.iconRight.type) == void 0) {
+        option.iconRight = Muicon6[option == null ? void 0 : option.iconRight];
+      } else {
+        option;
+      }
+    }
+  });
+  const handleClickMenusItem = (event2, index) => {
+    if (defaultOption && index == void 0) {
+      setSelectedIndex(defaultOption);
+      setValue(defaultOption);
+    } else if (index != void 0) {
+      setSelectedIndex(String(index + 1));
+      setValue(String(index + 1));
+    }
+  };
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Grid7, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ React17.createElement(Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ React17.createElement(MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+    MenuItem4,
+    {
+      disabled: disable == true ? true : false,
+      key: index,
+      selected: String(index + 1) === selectedIndex,
+      onClick: (event2) => handleClickMenusItem(event2, index)
+    },
+    option.iconLeft ? /* @__PURE__ */ React17.createElement(ListItemIcon4, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React17.createElement(SvgIcon6, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ React17.createElement(Grid7, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ React17.createElement(Typography14, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ React17.createElement(ListItemIcon4, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ React17.createElement(SvgIcon6, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ React17.createElement(Divider4, null) : "")))), /* @__PURE__ */ React17.createElement(Grid7, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ React17.createElement(Box12, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ React17.createElement(Typography14, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+};
+
+// src/Components/SCTabs.tsx
+import React18, { useEffect as useEffect13 } from "react";
+import { Typography as Typography15, Box as Box13, SvgIcon as SvgIcon7, Tab, Tabs, Badge } from "@mui/material";
+import TabPanel from "@mui/lab/TabPanel";
+import TabContext from "@mui/lab/TabContext";
+import * as Muicon7 from "@mui/icons-material";
+var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
+  const [toast, setToast] = React18.useState(null);
+  let i = 0;
+  let j = 0;
+  let k = 0;
+  let l = 0;
+  let validateTypeIcon = true;
+  const [value, setValue] = React18.useState("1");
+  useEffect13(() => {
+    if (defaultOption) {
+      handleChange(event, void 0);
+    }
+  }, [defaultOption]);
+  options.map(function(option) {
+    const optionsLength = options.length;
+    if (option == null ? void 0 : option.iconOrBadge) {
+      if (typeIcon == "icon") {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon7 == true) {
+          validateTypeIcon = true;
+          option.iconOrBadge = Muicon7[option == null ? void 0 : option.iconOrBadge];
+        } else {
+          validateTypeIcon = false;
+          setTimeout(() => {
+            setToast({
+              type: "error",
+              title: "Componente SCTabs",
+              subtitle: "En Option todos los iconOrBadge deben ser iconos de MUI, por favor verificar.",
+              time: 50
+            });
+          }, 10);
+          return;
+        }
+      } else if (typeIcon == "badge") {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon7 == false) {
+          validateTypeIcon = true;
+          option;
+        } else {
+          validateTypeIcon = false;
+          setTimeout(() => {
+            setToast({
+              type: "error",
+              title: "Componente SCTabs",
+              subtitle: "En Option todos los iconOrBadge deben ser numeros para el badge, por favor verificar.",
+              time: 10
+            });
+          }, 10);
+          return;
+        }
       }
     }
   });
-  const cleanOptions = (event2) => {
-    setState({ hiddenValue: "-1", textValue: "" });
-    setSelectedOptions([]);
-  };
-  const handleCheckAll = (event2) => {
-    if (event2.target.checked) {
-      setSelectedOptions(data);
-      setState({
-        hiddenValue: data.map((item) => getItemValue(item).value),
-        textValue: data.map((item) => getItemValue(item).text)
-      });
-    } else {
-      setSelectedOptions([]);
-      setState({ hiddenValue: "-1", textValue: "" });
-    }
-  };
-  const allSelected = data.length > 0 && selectedOptions.length === data.length;
-  const handleChange = (event2, value) => {
-    if (type === "multiselect") {
-      const ids = value.map((v) => getItemValue ? getItemValue(v).value : "");
-      const texts = value.map((v) => getItemValue ? getItemValue(v).text : "");
-      setSelectedOptions(value);
-      setState({
-        hiddenValue: ids,
-        textValue: texts
-      });
-    } else {
-      setState({
-        hiddenValue: getItemValue(value).value,
-        textValue: getItemValue(value).text
-      });
+  const handleChange = (event2, newValue) => {
+    if (defaultOption && newValue == void 0) {
+      setValue(defaultOption);
+    } else if (newValue != void 0) {
+      setValue(newValue);
     }
   };
-  const selectedValue = type === "multiselect" ? data.filter(
-    (item) => state.hiddenValue.includes(getItemValue(item).value)
-  ) : data.find(
-    (item) => getItemValue(item).value === state.hiddenValue
-  ) || null;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, data && /* @__PURE__ */ React15.createElement(
-    Autocomplete,
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ React18.createElement(Box13, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ React18.createElement(TabContext, { value }, /* @__PURE__ */ React18.createElement(
+    Tabs,
     {
-      multiple: type === "multiselect",
-      clearOnEscape: true,
-      disabled,
-      options: data,
+      "data-testid": "tab-container",
+      value,
       onChange: handleChange,
-      getOptionLabel: (option) => getItemValue(option).text,
-      value: selectedValue,
-      sx: {
-        background: background || "transparent",
-        width: "100%",
-        maxWidth: "100%",
-        "& .MuiAutocomplete-tag": {
-          maxWidth: 120,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        "& .MuiAutocomplete-inputRoot": {
-          flexWrap: "nowrap !important",
-          overflowX: "auto"
-        }
-      },
-      limitTags: 2,
-      renderTags: (value, getTagProps) => {
-        const limit = 2;
-        return /* @__PURE__ */ React15.createElement(React15.Fragment, null, value.slice(0, limit).map((option, index) => /* @__PURE__ */ React15.createElement(
-          Chip,
-          __spreadProps(__spreadValues({
-            color: "default",
-            size: "small",
-            variant: "filled",
-            label: getItemValue(option).text
-          }, getTagProps({ index })), {
-            style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
-          })
-        )), value.length > limit && /* @__PURE__ */ React15.createElement(Box11, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
-      },
-      renderOption: (props, option) => {
-        const _a = props, { key } = _a, optionProps = __objRest(_a, ["key"]);
-        let isValid;
-        if (type == "multiselect") {
-          isSelected = selectedOptions.some(
-            (selected) => getItemValue(selected).value === getItemValue(option).value
-          );
-        }
-        if (columnGroup) {
-          isValid = group == option[columnGroup];
-          group = option[columnGroup];
-        }
-        return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(React15.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ React15.createElement(Typography12, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ React15.createElement(MenuItem3, __spreadProps(__spreadValues({}, optionProps), { style: { background: type != "multiselect" ? state.hiddenValue == getItemValue(option).value ? "#dfe6ec" : "white" : "white", padding: "7px 16px" } }), type != "multiselect" && getItemValue(option).icon != void 0 ? /* @__PURE__ */ React15.createElement(ListItemIcon3, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ React15.createElement(SvgIcon7, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", type == "multiselect" ? /* @__PURE__ */ React15.createElement(Checkbox2, { checked: isSelected, value: getItemValue(option).text, color: "primary" }) : "", /* @__PURE__ */ React15.createElement(ListItemText, { primary: getItemValue(option).text, color: "text.primary" }))));
-      },
-      renderInput: (params) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-        TextField3,
-        __spreadProps(__spreadValues({}, params), {
-          label: required ? /* @__PURE__ */ React15.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
-          placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
-          InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-            endAdornment: /* @__PURE__ */ React15.createElement(React15.Fragment, null, deleteType == "icon" && state.hiddenValue != "-1" ? /* @__PURE__ */ React15.createElement(IconButton8, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ React15.createElement(Clear, { fontSize: "small" })) : "", /* @__PURE__ */ React15.createElement(InputAdornment3, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ React15.createElement(Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
-          })
-        })
-      )),
-      slotProps: {
-        listbox: {
-          component: React15.forwardRef(function ListboxComponent(props, ref) {
-            return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
-              Box11,
-              __spreadProps(__spreadValues({
-                ref
-              }, props), {
-                sx: __spreadValues({
-                  position: "relative",
-                  paddingBottom: "56px",
-                  backgroundColor: "white"
-                }, props.sx)
-              }),
-              checkMassive && type == "multiselect" ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(FormControlLabel, { control: /* @__PURE__ */ React15.createElement(Checkbox2, { checked: allSelected, indeterminate: selectedOptions.length > 0 && selectedOptions.length < data.length, onChange: handleCheckAll, color: "primary" }), label: "Todos los item", sx: { marginLeft: "0px !important", marginRight: "0px !important", padding: "7px 16px" } }), /* @__PURE__ */ React15.createElement(Divider3, null)) : "",
-              props.children,
-              deleteType == "button" || fnAplicar ? /* @__PURE__ */ React15.createElement(
-                Grid7,
-                {
-                  container: true,
-                  sx: {
-                    position: "sticky",
-                    bottom: -8,
-                    left: 0,
-                    width: "100%",
-                    backgroundColor: "grey.50",
-                    padding: "8px 16px",
-                    textAlign: "left",
-                    justifyContent: "space-between"
-                  }
-                },
-                deleteType == "button" ? /* @__PURE__ */ React15.createElement(
-                  Button8,
-                  {
-                    variant: "text",
-                    color: "primary",
-                    size: "small",
-                    onClick: (event2) => {
-                      event2.stopPropagation();
-                      cleanOptions(event2);
-                    }
-                  },
-                  "Limpiar"
-                ) : "",
-                fnAplicar && /* @__PURE__ */ React15.createElement(
-                  Button8,
-                  {
-                    variant: "contained",
-                    color: "primary",
-                    size: "small",
-                    onClick: fnAplicar
-                  },
-                  "Aplicar"
-                )
-              ) : ""
-            ));
-          })
-        }
+      variant: variant ? orientation == "vertical" && variant == "fullWidth" ? "standard" : variant : "standard",
+      scrollButtons: scrollButtons == false ? false : true,
+      visibleScrollbar: scrollButtons == false ? true : false,
+      textColor: colorTab,
+      indicatorColor: colorTab,
+      orientation: orientation || "horizontal",
+      sx: { borderBottom: orientation == "vertical" ? 0 : 1, borderRight: orientation == "vertical" ? 1 : 0, borderColor: "divider", background: background || "" }
+    },
+    options.map((option) => /* @__PURE__ */ React18.createElement(
+      Tab,
+      {
+        "data-testid": "tab-item",
+        value: String(i = i + 1),
+        key: j = j + 1,
+        label: option.name || "",
+        disabled: option.disabled || false,
+        iconPosition: iconPosition || "end",
+        icon: typeIcon == "badge" ? /* @__PURE__ */ React18.createElement(
+          Badge,
+          {
+            sx: {
+              width: "20px",
+              height: "20px",
+              "& .MuiBadge-badge": {
+                top: "10px",
+                right: "10px"
+              }
+            },
+            variant: "standard",
+            badgeContent: option.iconOrBadge,
+            color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
+          }
+        ) : typeIcon == "icon" ? /* @__PURE__ */ React18.createElement(SvgIcon7, { 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__ */ React18.createElement(
+    TabPanel,
+    {
+      key: k = k + 1,
+      value: String(l = l + 1),
+      sx: { padding: "16px" }
+    },
+    option.page ? option.page : /* @__PURE__ */ React18.createElement(Typography15, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ React18.createElement(Box13, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React18.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
+};
 
 // src/Theme/index.ts
 import { createTheme } from "@mui/material/styles";
 
 // src/Theme/components.ts
-import React16 from "react";
+import React19 from "react";
 import {
   InfoRounded as InfoRounded2,
   CheckCircleRounded as CheckCircleRounded2,
@@ -2334,7 +2786,7 @@ var components = {
   MuiBackdrop: {
     styleOverrides: {
       root: {
-        backgroundColor: "#00000047"
+        backgroundColor: "transparent"
       }
     }
   },
@@ -2672,10 +3124,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: React16.createElement(CheckCircleRounded2),
-        error: React16.createElement(ErrorRounded2),
-        warning: React16.createElement(WarningRounded2),
-        info: React16.createElement(InfoRounded2)
+        success: React19.createElement(CheckCircleRounded2),
+        error: React19.createElement(ErrorRounded2),
+        warning: React19.createElement(WarningRounded2),
+        info: React19.createElement(InfoRounded2)
       }
     },
     variants: [
@@ -3512,85 +3964,8 @@ var paletteADC = __spreadValues({
   }
 }, BasicPalette);
 
-// node_modules/@mui/system/esm/createBreakpoints/createBreakpoints.js
-var sortBreakpointsValues = (values) => {
-  const breakpointsAsArray = Object.keys(values).map((key) => ({
-    key,
-    val: values[key]
-  })) || [];
-  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
-  return breakpointsAsArray.reduce((acc, obj) => {
-    return __spreadProps(__spreadValues({}, acc), {
-      [obj.key]: obj.val
-    });
-  }, {});
-};
-function createBreakpoints(breakpoints2) {
-  const _a = breakpoints2, {
-    values: values = {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536
-      // large screen
-    },
-    unit = "px",
-    step = 5
-  } = _a, other = __objRest(_a, [
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    "values",
-    "unit",
-    "step"
-  ]);
-  const sortedValues = sortBreakpointsValues(values);
-  const keys = Object.keys(sortedValues);
-  function up(key) {
-    const value = typeof values[key] === "number" ? values[key] : key;
-    return `@media (min-width:${value}${unit})`;
-  }
-  function down(key) {
-    const value = typeof values[key] === "number" ? values[key] : key;
-    return `@media (max-width:${value - step / 100}${unit})`;
-  }
-  function between(start, end) {
-    const endIndex = keys.indexOf(end);
-    return `@media (min-width:${typeof values[start] === "number" ? values[start] : start}${unit}) and (max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === "number" ? values[keys[endIndex]] : end) - step / 100}${unit})`;
-  }
-  function only(key) {
-    if (keys.indexOf(key) + 1 < keys.length) {
-      return between(key, keys[keys.indexOf(key) + 1]);
-    }
-    return up(key);
-  }
-  function not(key) {
-    const keyIndex = keys.indexOf(key);
-    if (keyIndex === 0) {
-      return up(keys[1]);
-    }
-    if (keyIndex === keys.length - 1) {
-      return down(keys[keyIndex]);
-    }
-    return between(key, keys[keys.indexOf(key) + 1]).replace("@media", "@media not all and");
-  }
-  return __spreadValues({
-    keys,
-    values: sortedValues,
-    up,
-    down,
-    between,
-    only,
-    not,
-    unit
-  }, other);
-}
-
 // src/Theme/breakpoints.ts
+import { createBreakpoints } from "@mui/system";
 var breakpoints = createBreakpoints({
   values: {
     xs: 0,
@@ -3793,16 +4168,20 @@ var ADCSincoTheme = createTheme(__spreadValues({}, ADCTheme));
 export {
   ADCSincoTheme,
   AdproSincoTheme,
+  EmptyState,
   FooterAction,
+  MultiSelect,
   PageHeader,
   SCAutocomplete,
   SCCalendarSwipeable,
   SCDataGrid,
+  SCDataGridInitial,
+  SCDateRange,
   SCDialog,
   SCDrawer,
   SCMenu,
   SCModal,
-  SCMultiSelect,
+  SCSelect,
   SCTabs,
   SCTextArea,
   SCTextField,
@@ -3820,14 +4199,4 @@ export {
   useMultiSelectHandlers,
   useProgress
 };
-/*! Bundled license information:
-
-@mui/system/esm/index.js:
-  (**
-   * @mui/system v7.1.1
-   *
-   * @license MIT
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
-*/
+//# sourceMappingURL=index.js.map