componentes-sinco 1.0.3 → 1.0.5

package/dist/index.cjs

@@ -61,16 +61,20 @@ var src_exports = {};
 __export(src_exports, {
   ADCSincoTheme: () => ADCSincoTheme,
   AdproSincoTheme: () => AdproSincoTheme,
+  EmptyState: () => EmptyState,
   FooterAction: () => FooterAction,
+  MultiSelect: () => MultiSelect,
   PageHeader: () => PageHeader,
   SCAutocomplete: () => SCAutocomplete,
   SCCalendarSwipeable: () => SCCalendarSwipeable,
   SCDataGrid: () => SCDataGrid,
+  SCDataGridInitial: () => SCDataGridInitial,
+  SCDateRange: () => SCDateRange,
   SCDialog: () => SCDialog,
   SCDrawer: () => SCDrawer,
   SCMenu: () => SCMenu,
   SCModal: () => SCModal,
-  SCMultiSelect: () => SCMultiSelect,
+  SCSelect: () => SCSelect,
   SCTabs: () => SCTabs,
   SCTextArea: () => SCTextArea,
   SCTextField: () => SCTextField,
@@ -91,9 +95,9 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Components/Drawer/SCDrawer.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_material4 = require("@mui/material");
-var import_Grid22 = __toESM(require("@mui/material/Grid2"), 1);
+var import_react8 = __toESM(require("react"), 1);
+var import_material7 = require("@mui/material");
+var import_Grid23 = __toESM(require("@mui/material/Grid2"), 1);
 var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
 
 // src/Components/Textfield/SCTextField.tsx
@@ -135,12 +139,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);
@@ -169,8 +173,8 @@ var SCTextField = ({
   color,
   background,
   //Funcionales
+  setState,
   state,
-  value,
   onChange,
   onBlur,
   onKeyDown
@@ -221,15 +225,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);
   };
@@ -304,7 +308,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,
@@ -619,8 +623,8 @@ var SCTextArea = ({
   colorTitle,
   background,
   //funcionales
+  setState,
   state,
-  value,
   onBlur
 }) => {
   const [helperCount, setHelperCount] = (0, import_react4.useState)(0);
@@ -628,11 +632,11 @@ var SCTextArea = ({
   const [anchorInfoTitle, setAnchorInfoTitle] = import_react4.default.useState(null);
   const openInfoTitle = Boolean(anchorInfoTitle);
   (0, import_react4.useEffect)(() => {
-    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);
@@ -649,7 +653,7 @@ var SCTextArea = ({
   const handleCloseInfoTitle = () => {
     setAnchorInfoTitle(null);
   };
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { width } }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Grid2, { container: true, sx: { alignItems: "center" }, gap: 0.5 }, iconTitle && IconTitle && /* @__PURE__ */ import_react4.default.createElement(import_material3.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }), title && /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { color: colorTitle || "text.secondary", variant: "subtitle2" }, title), infoTitle ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { width } }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Grid, { container: true, sx: { alignItems: "center" }, gap: 0.5 }, iconTitle && IconTitle && /* @__PURE__ */ import_react4.default.createElement(import_material3.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }), title && /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { color: colorTitle || "text.secondary", variant: "subtitle2" }, title), infoTitle ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
     import_icons_material3.InfoOutlined,
     {
       color: "action",
@@ -694,11 +698,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"
@@ -716,736 +720,776 @@ var SCTextArea = ({
   ))));
 };
 
-// src/Components/Drawer/Helpers/Utils.tsx
+// src/Components/SCSelect.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_material4 = require("@mui/material");
+var import_Select = __toESM(require("@mui/material/Select"), 1);
 var Muicon2 = __toESM(require("@mui/icons-material"), 1);
-var import_icons_material4 = require("@mui/icons-material");
-var getIcon2 = (iconName) => {
-  if (iconName && iconName in Muicon2) {
-    return Muicon2[iconName];
-  }
-  return import_icons_material4.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 style="color: red;">* </span>` + label;
+  const [prevData, setPrevData] = import_react5.default.useState(data);
+  const [error, setError] = import_react5.default.useState(false);
+  (0, import_react5.useEffect)(() => {
+    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]);
+  (0, import_react5.useEffect)(() => {
+    let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
+    if (dataChangeValidation == false) {
+      setState({ hiddenValue: "", textValue: "" });
+      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] = import_react5.default.useState(open);
-  const [toast, setToast] = import_react5.default.useState(null);
-  const handleDrawerClose = () => {
-    setDrawerOpen(false);
-  };
-  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__ */ import_react5.default.createElement(import_react5.default.Fragment, null, toast && /* @__PURE__ */ import_react5.default.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ import_react5.default.createElement(
-    import_material4.Button,
-    {
-      "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__ */ import_react5.default.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__ */ import_react5.default.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__ */ import_react5.default.createElement(
-    import_material4.Drawer,
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, data && /* @__PURE__ */ import_react5.default.createElement(import_material4.Box, { sx: { width } }, /* @__PURE__ */ import_react5.default.createElement(
+    import_material4.FormControl,
     {
-      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__ */ import_react5.default.createElement(import_material4.Stack, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_Grid22.default, { container: true, sx: { backgroundColor: "secondary.main", alignItems: "center", height: "42px", textAlign: "left", padding: "10px 12px 10px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ import_react5.default.createElement(import_material4.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ import_react5.default.createElement(import_material4.IconButton, { onClick: handleDrawerClose }, /* @__PURE__ */ import_react5.default.createElement(import_Close.default, { color: "action", "data-testid": "test-button-close" }))), /* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { 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__ */ import_react5.default.createElement(
-        import_material4.Box,
-        {
-          key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b = arrayElement.label) != null ? _b : ""}${index}`,
-          sx: { width: "100%" }
-        },
-        arrayElement.component ? /* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.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__ */ import_react5.default.createElement(
-      import_Grid22.default,
+    /* @__PURE__ */ import_react5.default.createElement(
+      import_material4.InputLabel,
       {
-        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"
+        error
       },
-      actions.map((btn, index) => /* @__PURE__ */ import_react5.default.createElement(
-        import_material4.Button,
-        {
-          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
-var import_react8 = __toESM(require("react"), 1);
-var import_material5 = require("@mui/material");
-var import_icons_material6 = require("@mui/icons-material");
-
-// src/Components/MultiSelect/helpers/useHandlers.tsx
-var import_react6 = require("react");
-function useMultiSelectHandlers() {
-  const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const [selectedItems, setSelectedItems] = (0, import_react6.useState)([]);
-  const [filterValue, setFilterValue] = (0, import_react6.useState)("");
-  const handleOpen = (0, import_react6.useCallback)((e) => {
-    setAnchorEl(e.currentTarget);
-    setOpen(true);
-  }, []);
-  const handleClose = (0, import_react6.useCallback)(() => {
-    setAnchorEl(null);
-    setOpen(false);
-  }, []);
-  const handleFilterChange = (0, import_react6.useCallback)(
-    (e) => {
-      setFilterValue(e.target.value);
-    },
-    []
-  );
-  const handleCheckboxToggle = (0, import_react6.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
-var MuiIcons2 = __toESM(require("@mui/icons-material"), 1);
-var import_icons_material5 = require("@mui/icons-material");
-function getIconMultiSelect(name) {
-  return name in MuiIcons2 ? MuiIcons2[name] : import_icons_material5.FilterListOutlined;
-}
-
-// src/Components/MultiSelect/helpers/useFilteredItems.tsx
-var import_react7 = require("react");
-function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
-  const filteredItems = (0, import_react7.useMemo)(
-    () => items.filter(
-      (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
+      required ? /* @__PURE__ */ import_react5.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label
     ),
-    [items, filterValue, getItemLabel]
-  );
-  const sortedItems = (0, import_react7.useMemo)(() => {
-    return [
-      ...filteredItems.filter((item) => selectedItems.includes(item)),
-      ...filteredItems.filter((item) => !selectedItems.includes(item))
-    ];
-  }, [filteredItems, selectedItems]);
-  return { filteredItems, sortedItems };
+    /* @__PURE__ */ import_react5.default.createElement(
+      import_Select.default,
+      {
+        value: Array.isArray(state.hiddenValue) ? state.hiddenValue[0] || "" : state.hiddenValue != "-1" ? state.hiddenValue : "",
+        label: required ? /* @__PURE__ */ import_react5.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
+        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__ */ import_react5.default.createElement(import_material4.MenuItem, { key: index, value: getItemValue(option).value }, getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react5.default.createElement(import_material4.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react5.default.createElement(import_material4.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", /* @__PURE__ */ import_react5.default.createElement(import_material4.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }));
+      })
+    )
+  )));
 }
 
-// src/Components/MultiSelect/SCMultiSelect.tsx
-function SCMultiSelect({
-  textButton,
-  button,
-  items,
-  topPanel,
-  actions,
-  dense = false,
-  open,
-  selectAll = false,
-  getItemLabel
+// src/Components/SCAutocomplete.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_material5 = require("@mui/material");
+var import_Grid22 = __toESM(require("@mui/material/Grid2"), 1);
+var import_icons_material4 = require("@mui/icons-material");
+var Muicon3 = __toESM(require("@mui/icons-material"), 1);
+function SCAutocomplete({
+  label = "",
+  data,
+  columnGroup,
+  getItemValue,
+  typeFormat = "normal",
+  checkMassive = false,
+  deleteType = "button",
+  fnAplicar,
+  required,
+  disabled,
+  background,
+  setState,
+  state,
+  inputChange,
+  maxCheck
+  // Agregar el parámetro maxCheck
 }) {
-  var _a, _b;
-  const {
-    anchorEl,
-    open: openMultiselect,
-    selectedItems,
-    filterValue,
-    setSelectedItems,
-    handleOpen,
-    handleClose,
-    handleFilterChange,
-    handleCheckboxToggle,
-    setOpen
-  } = useMultiSelectHandlers();
-  (0, import_react8.useEffect)(() => {
-    if (open !== void 0) {
-      setOpen(open);
+  const labelContent = `<span style="color: red;">* </span>` + label;
+  let group = "";
+  let isSelected = false;
+  const [selectedOptions, setSelectedOptions] = import_react6.default.useState([]);
+  const [prevData, setPrevData] = import_react6.default.useState(data);
+  const [originalData, setOriginalData] = import_react6.default.useState(data);
+  const [inputValue, setInputValue] = import_react6.default.useState("");
+  const [isUserTyping, setIsUserTyping] = import_react6.default.useState(false);
+  (0, import_react6.useEffect)(() => {
+    const dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
+    if (!dataChangeValidation && !isUserTyping) {
+      setState({ hiddenValue: "-1", textValue: "" });
+      setSelectedOptions([]);
+      setOriginalData(data);
+    } else if (!isUserTyping) {
+      setOriginalData(data);
     }
-  }, [open, setOpen]);
-  (0, import_react8.useEffect)(() => {
-    setSelectedItems([]);
-  }, [items, setSelectedItems]);
-  const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
-  const Icon = (0, import_react8.useMemo)(() => {
-    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__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
-    import_material5.Button,
-    {
-      "test-id": "multiselect-button",
-      color: (_a = button == null ? void 0 : button.color) != null ? _a : "primary",
-      onClick: handleOpen,
-      variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
-      size: "small",
-      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ import_react8.default.createElement(Icon, null) : null,
-      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ import_react8.default.createElement(Icon, null) : null
-    },
-    capitalize(textButton != null ? textButton : "MultiSelect")
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    import_material5.Popover,
-    {
-      elevation: 8,
-      anchorEl,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      open: openMultiselect,
-      onClose: () => setOpen(false)
-    },
-    /* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ import_react8.default.createElement(import_material5.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ import_react8.default.createElement(
-      import_material5.TextField,
-      {
-        "data-testid": "multiselect-input",
-        fullWidth: true,
-        size: "small",
-        variant: "outlined",
-        placeholder: "Buscar",
-        value: filterValue,
-        onChange: handleFilterChange,
-        slotProps: {
-          input: {
-            endAdornment: /* @__PURE__ */ import_react8.default.createElement(import_material5.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react8.default.createElement(import_icons_material6.SearchOutlined, { fontSize: "small" }))
-          }
-        }
+    setPrevData(data);
+  }, [data, isUserTyping]);
+  (0, import_react6.useEffect)(() => {
+    if (typeFormat == "multiselect") {
+      if (state.hiddenValue != "-1" && Array.isArray(state.hiddenValue)) {
+        const newSelectedOptions = originalData.filter(
+          (item) => state.hiddenValue.includes(getItemValue(item).value)
+        );
+        setSelectedOptions(newSelectedOptions);
       }
-    ))), /* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ import_react8.default.createElement(import_material5.MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ import_react8.default.createElement(import_material5.ListItemIcon, null, /* @__PURE__ */ import_react8.default.createElement(import_material5.Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ import_react8.default.createElement(
-      import_material5.MenuItem,
-      {
-        key: getItemLabel(item),
-        dense,
-        onClick: () => handleCheckboxToggle(item)
-      },
-      /* @__PURE__ */ import_react8.default.createElement(import_material5.ListItemIcon, null, /* @__PURE__ */ import_react8.default.createElement(
-        import_material5.Checkbox,
-        {
-          checked: selectedItems.includes(item),
-          color: "primary"
-        }
-      )),
-      getItemLabel(item)
-    )) : /* @__PURE__ */ import_react8.default.createElement(import_material5.MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
-      var _a2;
-      return /* @__PURE__ */ import_react8.default.createElement(
-        import_material5.Button,
-        {
-          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
-var import_react9 = __toESM(require("react"), 1);
-var import_material6 = require("@mui/material");
-var import_Grid23 = __toESM(require("@mui/material/Grid2"), 1);
-var import_Close2 = __toESM(require("@mui/icons-material/Close"), 1);
-var Muicon3 = __toESM(require("@mui/icons-material"), 1);
-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] = (0, import_react9.useState)(show);
-  (0, import_react9.useEffect)(() => {
-    if (show) {
-      handleOpen();
     }
-  }, [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];
+  }, [state.hiddenValue, originalData, typeFormat]);
+  (0, import_react6.useEffect)(() => {
+    if (inputValue === "") {
+      setIsUserTyping(false);
     }
-  }
-  if (iconTitle) {
-    if (Muicon3[iconTitle] == void 0) {
-      if (iconTitle && import_react9.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
-        iconTitleValidation = "image";
-        IconTitle = iconTitle;
+  }, [inputValue]);
+  data.map(function(option) {
+    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([]);
+    setInputValue("");
+    setIsUserTyping(false);
+  };
+  const handleCheckAll = (event2) => {
+    if (event2.target.checked) {
+      const itemsToSelect = maxCheck ? data.slice(0, maxCheck) : data;
+      setSelectedOptions(itemsToSelect);
+      setState({
+        hiddenValue: itemsToSelect.map((item) => getItemValue(item).value),
+        textValue: itemsToSelect.map((item) => getItemValue(item).text)
+      });
     } else {
-      iconTitleValidation = "icon";
-      IconTitle = Muicon3[iconTitle];
+      setSelectedOptions([]);
+      setState({ hiddenValue: "-1", textValue: "" });
+      setInputValue("");
+      setIsUserTyping(false);
     }
-  }
-  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") {
+      if (maxCheck && value.length > maxCheck) {
+        value = value.slice(0, maxCheck);
+      }
+      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__ */ import_react9.default.createElement(import_material6.Box, null, " Aqui va el contenido ") };
-  return /* @__PURE__ */ import_react9.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react9.default.createElement(import_material6.Tooltip, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react9.default.createElement(import_material6.Button, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" || !(buttonDialog == null ? void 0 : buttonDialog.iconPosition) ? /* @__PURE__ */ import_react9.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react9.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react9.default.createElement(import_material6.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react9.default.createElement(import_material6.SvgIcon, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ import_react9.default.createElement(import_material6.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react9.default.createElement(
-    import_material6.Dialog,
+  const selectedValue = typeFormat === "multiselect" ? selectedOptions : originalData.find(
+    (item) => getItemValue(item).value === state.hiddenValue
+  ) || null;
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, data && /* @__PURE__ */ import_react6.default.createElement(
+    import_material5.Autocomplete,
     {
-      open: open || false,
-      onClose: disableClose ? void 0 : handleClose,
-      maxWidth: "xl",
+      multiple: typeFormat === "multiselect",
+      clearOnEscape: true,
+      disabled,
+      options: data,
+      isOptionEqualToValue: (option, value) => getItemValue(option).value === getItemValue(value).value,
+      onInputChange: (event2, value) => {
+        setInputValue(value);
+        setIsUserTyping(value.length > 0);
+        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%"
+      },
+      limitTags: 2,
+      renderTags: (value, getTagProps) => {
+        const limit = 2;
+        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, value.slice(0, limit).map((option, index) => {
+          const _a = getTagProps({ index }), { key } = _a, chipProps = __objRest(_a, ["key"]);
+          return /* @__PURE__ */ import_react6.default.createElement(
+            import_material5.Chip,
+            __spreadProps(__spreadValues({
+              key,
+              color: "default",
+              size: "small",
+              variant: "filled",
+              label: getItemValue(option).text
+            }, chipProps), {
+              style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+            })
+          );
+        }), value.length > limit && /* @__PURE__ */ import_react6.default.createElement(import_material5.Box, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
+      },
+      renderOption: (props, option) => {
+        const _a = props, { key } = _a, optionProps = __objRest(_a, ["key"]);
+        let isValid;
+        let isDisabled = false;
+        if (typeFormat == "multiselect") {
+          isSelected = selectedOptions.some(
+            (selected) => getItemValue(selected).value === getItemValue(option).value
+          );
+          if (maxCheck && selectedOptions.length >= maxCheck && !isSelected) {
+            isDisabled = true;
+          }
         }
-      }
-    },
-    title && /* @__PURE__ */ import_react9.default.createElement(import_material6.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, id: "dialog-title" }, /* @__PURE__ */ import_react9.default.createElement(import_Grid23.default, { container: true, size: 12, sx: { justifyContent: "space-between" } }, /* @__PURE__ */ import_react9.default.createElement(import_Grid23.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react9.default.createElement(import_material6.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react9.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react9.default.createElement(import_material6.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react9.default.createElement(import_Grid23.default, null, /* @__PURE__ */ import_react9.default.createElement(import_material6.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react9.default.createElement(import_material6.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react9.default.createElement(import_material6.IconButton, { onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react9.default.createElement(import_Close2.default, null)) : "")),
-    /* @__PURE__ */ import_react9.default.createElement(
-      import_material6.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"
+        if (columnGroup) {
+          isValid = group == option[columnGroup];
+          group = option[columnGroup];
         }
+        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ import_react6.default.createElement(import_material5.Typography, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ import_react6.default.createElement(
+          import_material5.MenuItem,
+          __spreadProps(__spreadValues({}, optionProps), {
+            disabled: isDisabled,
+            style: {
+              background: typeFormat != "multiselect" ? state.hiddenValue == getItemValue(option).value ? "#dfe6ec" : "white" : "white",
+              padding: "7px 16px",
+              opacity: isDisabled ? 0.5 : 1
+            }
+          }),
+          typeFormat != "multiselect" && getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react6.default.createElement(import_material5.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react6.default.createElement(import_material5.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "",
+          typeFormat == "multiselect" ? /* @__PURE__ */ import_react6.default.createElement(
+            import_material5.Checkbox,
+            {
+              checked: isSelected,
+              disabled: isDisabled,
+              value: getItemValue(option).text,
+              color: "primary"
+            }
+          ) : "",
+          /* @__PURE__ */ import_react6.default.createElement(import_material5.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }),
+          getItemValue(option).component != void 0 ? getItemValue(option).component : ""
+        )));
+      },
+      renderInput: (params) => /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
+        import_material5.TextField,
+        __spreadProps(__spreadValues({}, params), {
+          label: required ? /* @__PURE__ */ import_react6.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
+          placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
+          InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+            endAdornment: /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, deleteType == "icon" && (state.hiddenValue.toString() != "-1" && state.hiddenValue.toString() != "") ? /* @__PURE__ */ import_react6.default.createElement(import_material5.IconButton, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.Clear, { fontSize: "small" })) : "", /* @__PURE__ */ import_react6.default.createElement(import_material5.InputAdornment, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
+          })
+        })
+      )),
+      slotProps: {
+        listbox: {
+          component: import_react6.default.forwardRef(function ListboxComponent(props, ref) {
+            return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
+              import_material5.Box,
+              __spreadProps(__spreadValues({
+                ref
+              }, props), {
+                sx: __spreadValues({
+                  position: "relative",
+                  paddingBottom: "56px",
+                  backgroundColor: "white"
+                }, props.sx)
+              }),
+              checkMassive && typeFormat == "multiselect" ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_material5.FormControlLabel, { control: /* @__PURE__ */ import_react6.default.createElement(import_material5.Checkbox, { checked: allSelected, indeterminate: selectedOptions.length > 0 && selectedOptions.length < data.length, onChange: handleCheckAll, color: "primary" }), label: "Todos los items", sx: { marginLeft: "0px !important", marginRight: "0px !important", padding: "7px 16px" } }), /* @__PURE__ */ import_react6.default.createElement(import_material5.Divider, null)) : "",
+              props.children,
+              deleteType == "button" || fnAplicar ? /* @__PURE__ */ import_react6.default.createElement(
+                import_Grid22.default,
+                {
+                  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__ */ import_react6.default.createElement(
+                  import_material5.Button,
+                  {
+                    variant: "text",
+                    color: "primary",
+                    size: "small",
+                    onClick: (event2) => {
+                      event2.stopPropagation();
+                      cleanOptions(event2);
+                    }
+                  },
+                  "Limpiar"
+                ) : "",
+                fnAplicar && /* @__PURE__ */ import_react6.default.createElement(
+                  import_material5.Button,
+                  {
+                    variant: "contained",
+                    color: "primary",
+                    size: "small",
+                    onClick: fnAplicar
+                  },
+                  "Aplicar"
+                )
+              ) : ""
+            ));
+          })
+        }
+      }
+    }
+  ));
+}
+
+// src/Components/SCDateRange.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_material6 = require("@mui/material");
+var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var import_AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var import_DateRangePicker = require("@mui/x-date-pickers-pro/DateRangePicker");
+var import_MultiInputDateRangeField = require("@mui/x-date-pickers-pro/MultiInputDateRangeField");
+var import_dayjs = __toESM(require("dayjs"), 1);
+var import_es = require("dayjs/locale/es");
+var import_x_license_pro = require("@mui/x-license-pro");
+var import_Event = __toESM(require("@mui/icons-material/Event"), 1);
+var SCDateRange = ({
+  labelDateInitial = "Fecha inicial",
+  labelDateFinal = "Fecha final",
+  required = false,
+  disabled = false,
+  background = "transparent",
+  state,
+  setState
+}) => {
+  import_x_license_pro.LicenseInfo.setLicenseKey(
+    "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
+  );
+  const isStartEmpty = required && !state[0];
+  const isEndEmpty = required && !state[1];
+  const hasError = isStartEmpty || isEndEmpty;
+  const handleDateChange = (newValue) => {
+    const convertedValue = [
+      newValue[0] ? (0, import_dayjs.default)(newValue[0]) : null,
+      newValue[1] ? (0, import_dayjs.default)(newValue[1]) : null
+    ];
+    setState(convertedValue);
+  };
+  return /* @__PURE__ */ import_react7.default.createElement(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDayjs.AdapterDayjs, adapterLocale: "es" }, /* @__PURE__ */ import_react7.default.createElement(import_material6.Box, { sx: { width: "100%" } }, /* @__PURE__ */ import_react7.default.createElement(
+    import_DateRangePicker.DateRangePicker,
+    {
+      value: state,
+      onChange: handleDateChange,
+      disabled,
+      slots: {
+        field: import_MultiInputDateRangeField.MultiInputDateRangeField
       },
-      content.url ? /* @__PURE__ */ import_react9.default.createElement(
-        "iframe",
-        {
-          style: { border: "none", minWidth: "100%", minHeight: "100%" },
-          id: "inlineFrameExample",
-          title: "Inline Frame Example",
-          src: content.url
+      slotProps: {
+        field: {
+          slotProps: {
+            textField: ({ position }) => ({
+              label: position === "start" ? labelDateInitial : labelDateFinal,
+              size: "small",
+              variant: "outlined",
+              required,
+              error: position === "start" ? isStartEmpty : isEndEmpty,
+              InputProps: {
+                endAdornment: /* @__PURE__ */ import_react7.default.createElement(import_material6.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react7.default.createElement(
+                  import_Event.default,
+                  {
+                    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__ */ import_react9.default.createElement(import_material6.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px" } }, dialogActions.map((boton) => /* @__PURE__ */ import_react9.default.createElement(
-      import_material6.Button,
-      {
-        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
-var import_react11 = __toESM(require("react"), 1);
-var import_material7 = require("@mui/material");
-var import_Grid24 = __toESM(require("@mui/material/Grid2"), 1);
-
-// src/Components/Hooks/useWindowDimensions.ts
-var import_react10 = require("react");
-function getWindowDimensions() {
-  const { innerWidth: width, innerHeight: height } = window;
-  return {
-    width,
-    height
-  };
-}
-function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = (0, import_react10.useState)(getWindowDimensions());
-  (0, import_react10.useEffect)(() => {
-    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
 var Muicon4 = __toESM(require("@mui/icons-material"), 1);
-var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu, widthPage }) => {
-  const { height, width } = useWindowDimensions();
-  const menuSize = widthMenu ? parseInt(widthMenu) : 284;
-  const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
-  const widthContainer = menuSize + pageSize;
-  let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
-  const [selectedIndex, setSelectedIndex] = import_react11.default.useState("1");
-  const [value, setValue] = import_react11.default.useState("1");
-  import_react11.default.useEffect(() => {
-    heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
-  }, [height]);
-  import_react11.default.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 = Muicon4[option == null ? void 0 : option.iconLeft];
-      } else {
-        option;
+var getIcon2 = (iconName) => {
+  if (iconName && iconName in Muicon4) {
+    return Muicon4[iconName];
+  }
+  return null;
+};
+
+// 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].state) == 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__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(import_Grid24.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.Paper, { sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react11.default.createElement(import_material7.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
-    import_material7.MenuItem,
-    {
-      disabled: disable == true ? true : false,
-      key: index,
-      selected: String(index + 1) === selectedIndex,
-      onClick: (event2) => handleClickMenusItem(event2, index)
-    },
-    option.iconLeft ? /* @__PURE__ */ import_react11.default.createElement(import_material7.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
-    /* @__PURE__ */ import_react11.default.createElement(import_Grid24.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react11.default.createElement(import_material7.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
-  ), option.divider == true ? /* @__PURE__ */ import_react11.default.createElement(import_material7.Divider, null) : "")))), /* @__PURE__ */ import_react11.default.createElement(import_Grid24.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react11.default.createElement(import_material7.Box, { sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react11.default.createElement(import_material7.Typography, { 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
-var import_react12 = __toESM(require("react"), 1);
-var import_material8 = require("@mui/material");
-var import_TabPanel = __toESM(require("@mui/lab/TabPanel"), 1);
-var import_TabContext = __toESM(require("@mui/lab/TabContext"), 1);
-var Muicon5 = __toESM(require("@mui/icons-material"), 1);
-var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
-  const [toast, setToast] = import_react12.default.useState(null);
-  let i = 0;
-  let j = 0;
-  let k = 0;
-  let l = 0;
-  let validateTypeIcon = true;
-  const [value, setValue] = import_react12.default.useState("1");
-  (0, import_react12.useEffect)(() => {
-    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;
+// src/Components/Drawer/SCDrawer.tsx
+function SCDrawer({
+  //informativas
+  title,
+  arrayElements = [],
+  actions,
+  buttonDrawer,
+  //Apariencia
+  colorTitle,
+  anchor = "left",
+  width,
+  //Funcionales
+  open
+}) {
+  var _a, _b;
+  const [drawerOpen, setDrawerOpen] = import_react8.default.useState(open);
+  const [toast, setToast] = import_react8.default.useState(null);
+  const handleDrawerClose = () => {
+    setDrawerOpen(false);
+  };
+  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 = () => {
+    arrayElements.forEach((element, index) => {
+      if (element.setState) {
+        if (element.type === "textField" || element.type === "textArea") {
+          element.setState("");
+        } else if (element.type === "dateRange") {
+          element.setState([null, null]);
         } 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;
+          if (element.type == "autocomplete" && element.typeFormat == "multiselect") {
+            element.setState({ hiddenValue: [], textValue: [] });
+          } else {
+            element.setState({ hiddenValue: "-1", textValue: "" });
+          }
         }
       }
-    }
-  });
-  const handleChange = (event2, newValue) => {
-    if (defaultOption && newValue == void 0) {
-      setValue(defaultOption);
-    } else if (newValue != void 0) {
-      setValue(newValue);
-    }
+    });
   };
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react12.default.createElement(import_material8.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react12.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react12.default.createElement(
-    import_material8.Tabs,
+  const actionsA = actions == false ? false : actions != void 0 ? actions : [{ text: "Aplicar filtros", fn: inputValidation }, { text: "Limpiar filtros", fn: clean }];
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, toast && /* @__PURE__ */ import_react8.default.createElement(SCToastNotification, __spreadValues({}, toast)), (buttonDrawer == null ? void 0 : buttonDrawer.type) == "chip" ? /* @__PURE__ */ import_react8.default.createElement(
+    import_material7.Chip,
+    __spreadProps(__spreadValues({
+      onClick: toggleDrawer(true),
+      color: buttonDrawer == null ? void 0 : buttonDrawer.color,
+      variant: (buttonDrawer == null ? void 0 : buttonDrawer.variant) == "contained" ? "filled" : "outlined",
+      label: (_a = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _a : "",
+      icon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0,
+      deleteIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : void 0
+    }, (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? { onDelete: () => {
+    } } : {}), {
+      sx: {
+        "& .MuiChip-icon": {
+          color: "inherit"
+        },
+        textTransform: "capitalize"
+      }
+    })
+  ) : /* @__PURE__ */ import_react8.default.createElement(
+    import_material7.Button,
     {
-      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)) && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : null,
+      endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" && ButtonIcon ? /* @__PURE__ */ import_react8.default.createElement(ButtonIcon, { fontSize: "small" }) : null
     },
-    options.map((option) => /* @__PURE__ */ import_react12.default.createElement(
-      import_material8.Tab,
-      {
-        value: String(i = i + 1),
-        key: j = j + 1,
-        label: option.name || "",
-        disabled: option.disabled || false,
-        iconPosition: iconPosition || "end",
-        icon: typeIcon == "badge" ? /* @__PURE__ */ import_react12.default.createElement(
-          import_material8.Badge,
+    (_b = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _b : ""
+  ), /* @__PURE__ */ import_react8.default.createElement(
+    import_material7.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"
+        }
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(import_material7.Stack, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react8.default.createElement(import_Grid23.default, { container: true, sx: { backgroundColor: "primary.50", alignItems: "center", height: "42px", textAlign: "left", padding: "8px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ import_react8.default.createElement(import_material7.IconButton, { onClick: handleDrawerClose }, /* @__PURE__ */ import_react8.default.createElement(import_Close.default, { "data-testid": "test-button-close", sx: { color: "text.primary" } }))), /* @__PURE__ */ import_react8.default.createElement(import_material7.Stack, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
+      var _a2, _b2, _c, _d, _e, _f;
+      return /* @__PURE__ */ import_react8.default.createElement(
+        import_material7.Box,
+        {
+          key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b2 = arrayElement.label) != null ? _b2 : ""}${index}`,
+          sx: { width: "100%" }
+        },
+        arrayElement.component ? /* @__PURE__ */ import_react8.default.createElement(import_material7.Stack, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ import_react8.default.createElement(
+          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__ */ import_react8.default.createElement(
+          SCTextArea,
           {
-            sx: {
-              width: "20px",
-              height: "20px",
-              "& .MuiBadge-badge": {
-                top: "10px",
-                right: "10px"
-              }
-            },
-            variant: "standard",
-            badgeContent: option.iconOrBadge,
-            color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
+            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
           }
-        ) : typeIcon == "icon" ? /* @__PURE__ */ import_react12.default.createElement(import_material8.SvgIcon, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
-        sx: { "& .MuiTab-icon": { margin: "0px !important" }, padding: "10px 16px", gap: "4px" }
-      }
-    ))
-  ), children, options.map((option) => /* @__PURE__ */ import_react12.default.createElement(
-    import_TabPanel.default,
-    {
-      key: k = k + 1,
-      value: String(l = l + 1),
-      sx: { padding: "16px" }
-    },
-    option.page ? option.page : /* @__PURE__ */ import_react12.default.createElement(import_material8.Typography, null, "No se ha configurado el componente a visualizar ")
-  )))) : /* @__PURE__ */ import_react12.default.createElement(import_material8.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react12.default.createElement(SCToastNotification, __spreadValues({}, toast))));
-};
+        ) : arrayElement.type === "autocomplete" ? /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.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__ */ import_react8.default.createElement(
+          SCDateRange,
+          {
+            labelDateInitial: arrayElement.labelDateInitial,
+            labelDateFinal: arrayElement.labelDateFinal,
+            required: arrayElement.required,
+            disabled: arrayElement.disabled,
+            background: arrayElement.background,
+            state: arrayElement.state || [],
+            setState: arrayElement.setState
+          }
+        ) : null
+      );
+    })), actionsA != void 0 && actionsA != false ? Array.isArray(actionsA) && (actionsA == null ? void 0 : actionsA.length) > 0 ? /* @__PURE__ */ import_react8.default.createElement(
+      import_Grid23.default,
+      {
+        sx: { borderTop: 1, borderColor: "#1018403B" },
+        container: true,
+        gap: 2,
+        padding: "8px 12px",
+        height: "42px",
+        alignItems: "center",
+        justifyContent: actionsA.length > 1 ? "space-between" : !anchor && anchor != "right" ? "flex-end" : "flex-start",
+        flexDirection: anchor != "right" ? "row-reverse" : "row"
+      },
+      actionsA.map((btn, index) => /* @__PURE__ */ import_react8.default.createElement(
+        import_material7.Button,
+        {
+          key: index,
+          variant: index === 0 || actionsA.length < 2 ? "contained" : "text",
+          color: "primary",
+          onClick: btn.fn,
+          disabled: btn.disabled || false,
+          size: "small"
+        },
+        btn.text
+      ))
+    ) : "" : "")
+  ));
+}
 
 // src/Components/FooterAction/FooterAction.tsx
-var import_react13 = __toESM(require("react"), 1);
-var import_material9 = require("@mui/material");
+var import_react9 = __toESM(require("react"), 1);
+var import_material8 = require("@mui/material");
 var FooterAction = ({
   leftContent,
   rightContent,
   label,
   variant
 }) => {
-  return /* @__PURE__ */ import_react13.default.createElement(
-    import_material9.AppBar,
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_material8.AppBar,
     {
       color: "inherit",
       sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
     },
-    /* @__PURE__ */ import_react13.default.createElement(
-      import_material9.Toolbar,
+    /* @__PURE__ */ import_react9.default.createElement(
+      import_material8.Toolbar,
       {
         id: "footer-toolbar",
         sx: { gap: 1.5, minHeight: "50px !important" }
       },
       leftContent,
-      /* @__PURE__ */ import_react13.default.createElement(import_material9.Box, { flexGrow: 1 }),
-      label && /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "body2", color: "text.secondary" }, label),
+      /* @__PURE__ */ import_react9.default.createElement(import_material8.Box, { flexGrow: 1 }),
+      label && /* @__PURE__ */ import_react9.default.createElement(import_material8.Typography, { variant: "body2", color: "text.secondary" }, label),
       rightContent
     )
   );
 };
 
 // src/Components/Modal/Helpers/Data.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_icons_material7 = require("@mui/icons-material");
+var import_react10 = __toESM(require("react"), 1);
+var import_icons_material5 = require("@mui/icons-material");
 var modalStateConfig = {
   info: {
     color: "info",
     defaultDescription: "Se [sincronizar\xE1n] los datos trabajados en modo offline y se [subir\xE1n] a los servidores.",
-    icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Info, { color: "info", fontSize: "medium" })
+    icon: /* @__PURE__ */ import_react10.default.createElement(import_icons_material5.Info, { color: "info", fontSize: "medium" })
   },
   delete: {
     color: "delete",
     defaultDescription: "[Elemento espec\xEDfico] [dejar\xE1 de existir en todos los lugares donde est\xE9 en uso]. Esta acci\xF3n es irreversible.",
-    icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Info, { color: "error", fontSize: "medium" })
+    icon: /* @__PURE__ */ import_react10.default.createElement(import_icons_material5.Info, { color: "error", fontSize: "medium" })
   },
   warning: {
     color: "warning",
     defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
-    icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Warning, { color: "warning", fontSize: "medium" })
+    icon: /* @__PURE__ */ import_react10.default.createElement(import_icons_material5.Warning, { color: "warning", fontSize: "medium" })
   }
 };
 
 // src/Components/Modal/Helpers/Utils.tsx
-var MuiIcons3 = __toESM(require("@mui/icons-material"), 1);
-var import_icons_material8 = require("@mui/icons-material");
+var MuiIcons2 = __toESM(require("@mui/icons-material"), 1);
+var import_icons_material6 = require("@mui/icons-material");
 var getIconComponent2 = (iconName) => {
-  return iconName && MuiIcons3[iconName] ? MuiIcons3[iconName] : import_icons_material8.FilterListOutlined;
+  return iconName && MuiIcons2[iconName] ? MuiIcons2[iconName] : import_icons_material6.FilterListOutlined;
 };
 var getModalColor = (state) => {
   var _a;
@@ -1467,9 +1511,16 @@ var getButtonColor = (state) => {
 };
 
 // src/Components/Modal/SCModal.tsx
-var import_react15 = __toESM(require("react"), 1);
-var import_material10 = require("@mui/material");
-var import_icons_material9 = require("@mui/icons-material");
+var import_react11 = __toESM(require("react"), 1);
+var import_material9 = require("@mui/material");
+var import_icons_material7 = require("@mui/icons-material");
+
+// src/generales/capitalize.tsx
+function capitalize(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+// src/Components/Modal/SCModal.tsx
 var SCModal = ({
   buttonModal,
   state = "info",
@@ -1479,35 +1530,35 @@ var SCModal = ({
   action
 }) => {
   var _a, _b, _c, _d, _e;
-  const [openModal, setOpenModal] = (0, import_react15.useState)(open != null ? open : false);
-  (0, import_react15.useEffect)(() => {
+  const [openModal, setOpenModal] = (0, import_react11.useState)(open != null ? open : false);
+  (0, import_react11.useEffect)(() => {
     if (open !== void 0) {
       setOpenModal(open);
     }
   }, [open]);
-  const Icon = (0, import_react15.useMemo)(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
-  const handleClose = (0, import_react15.useCallback)(() => setOpenModal(false), []);
+  const Icon = (0, import_react11.useMemo)(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
+  const handleClose = (0, import_react11.useCallback)(() => setOpenModal(false), []);
   const toggleModal = (newOpen) => () => setOpenModal(newOpen);
-  const prevAction = (0, import_react15.useMemo)(
+  const prevAction = (0, import_react11.useMemo)(
     () => action != null ? action : [{ text: "Cancelar", fn: handleClose }, { text: "Consultar", fn: () => {
     } }],
     [action, handleClose]
   );
   const { icon, defaultDescription } = modalStateConfig[state];
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
-    import_material10.Button,
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
+    import_material9.Button,
     {
       "data-testid": "test-buttonModal",
       color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
       onClick: toggleModal(true),
       variant: (_b = buttonModal == null ? void 0 : buttonModal.variant) != null ? _b : "text",
       size: (_c = buttonModal == null ? void 0 : buttonModal.size) != null ? _c : "small",
-      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ import_react15.default.createElement(Icon, null),
-      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ import_react15.default.createElement(Icon, null)
+      startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ import_react11.default.createElement(Icon, null),
+      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ import_react11.default.createElement(Icon, null)
     },
     capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
-  ), /* @__PURE__ */ import_react15.default.createElement(import_material10.Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react15.default.createElement(
-    import_material10.Box,
+  ), /* @__PURE__ */ import_react11.default.createElement(import_material9.Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react11.default.createElement(
+    import_material9.Box,
     {
       sx: {
         position: "absolute",
@@ -1520,10 +1571,10 @@ var SCModal = ({
         boxShadow: 24
       }
     },
-    /* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ import_react15.default.createElement(import_material10.Box, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ import_react15.default.createElement(import_material10.Typography, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ import_react15.default.createElement(import_material10.IconButton, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ import_react15.default.createElement(import_icons_material9.Close, { color: "action" }))),
-    /* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ import_react15.default.createElement(import_material10.Typography, { variant: "body1" }, description || defaultDescription)),
-    action && /* @__PURE__ */ import_react15.default.createElement(
-      import_material10.Stack,
+    /* @__PURE__ */ import_react11.default.createElement(import_material9.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Stack, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Box, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ import_react11.default.createElement(import_material9.Typography, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ import_react11.default.createElement(import_material9.IconButton, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ import_react11.default.createElement(import_icons_material7.Close, { color: "action" }))),
+    /* @__PURE__ */ import_react11.default.createElement(import_material9.Stack, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Typography, { variant: "body1" }, description || defaultDescription)),
+    action && /* @__PURE__ */ import_react11.default.createElement(
+      import_material9.Stack,
       {
         id: "Action",
         direction: "row",
@@ -1533,8 +1584,8 @@ var SCModal = ({
         bgcolor: "grey.50",
         sx: { borderRadius: 1 }
       },
-      /* @__PURE__ */ import_react15.default.createElement(
-        import_material10.Button,
+      /* @__PURE__ */ import_react11.default.createElement(
+        import_material9.Button,
         {
           color: "inherit",
           variant: "text",
@@ -1543,8 +1594,8 @@ var SCModal = ({
         },
         capitalize("cancelar")
       ),
-      /* @__PURE__ */ import_react15.default.createElement(
-        import_material10.Button,
+      /* @__PURE__ */ import_react11.default.createElement(
+        import_material9.Button,
         {
           "data-testid": "test-aceptar",
           color: getButtonColor(state),
@@ -1553,14 +1604,201 @@ var SCModal = ({
           disabled: false,
           size: "small"
         },
-        capitalize(action[0].text)
-      )
-    )
-  )));
-};
+        capitalize(action[0].text)
+      )
+    )
+  )));
+};
+
+// src/Components/MultiSelect/MultiSelect.tsx
+var import_react14 = __toESM(require("react"), 1);
+var import_material10 = require("@mui/material");
+var import_icons_material9 = require("@mui/icons-material");
+
+// src/Components/MultiSelect/helpers/useHandlers.tsx
+var import_react12 = require("react");
+function useMultiSelectHandlers() {
+  const [anchorEl, setAnchorEl] = (0, import_react12.useState)(null);
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [selectedItems, setSelectedItems] = (0, import_react12.useState)([]);
+  const [filterValue, setFilterValue] = (0, import_react12.useState)("");
+  const handleOpen = (0, import_react12.useCallback)((e) => {
+    setAnchorEl(e.currentTarget);
+    setOpen(true);
+  }, []);
+  const handleClose = (0, import_react12.useCallback)(() => {
+    setAnchorEl(null);
+    setOpen(false);
+  }, []);
+  const handleFilterChange = (0, import_react12.useCallback)(
+    (e) => {
+      setFilterValue(e.target.value);
+    },
+    []
+  );
+  const handleCheckboxToggle = (0, import_react12.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
+var MuiIcons3 = __toESM(require("@mui/icons-material"), 1);
+var import_icons_material8 = require("@mui/icons-material");
+function getIconMultiSelect(name) {
+  return name in MuiIcons3 ? MuiIcons3[name] : import_icons_material8.FilterListOutlined;
+}
+
+// src/Components/MultiSelect/helpers/useFilteredItems.tsx
+var import_react13 = require("react");
+function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
+  const filteredItems = (0, import_react13.useMemo)(
+    () => items.filter(
+      (item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
+    ),
+    [items, filterValue, getItemLabel]
+  );
+  const sortedItems = (0, import_react13.useMemo)(() => {
+    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();
+  (0, import_react14.useEffect)(() => {
+    if (open !== void 0) {
+      setOpen(open);
+    }
+  }, [open, setOpen]);
+  (0, import_react14.useEffect)(() => {
+    setSelectedItems([]);
+  }, [items, setSelectedItems]);
+  const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
+  const Icon = (0, import_react14.useMemo)(() => {
+    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__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+    import_material10.Button,
+    {
+      "test-id": "multiselect-button",
+      color: (_a = button == null ? void 0 : button.color) != null ? _a : "primary",
+      onClick: handleOpen,
+      variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
+      size: "small",
+      startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ import_react14.default.createElement(Icon, null) : null,
+      endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ import_react14.default.createElement(Icon, null) : null
+    },
+    capitalize(textButton != null ? textButton : "MultiSelect")
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    import_material10.Popover,
+    {
+      elevation: 8,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      open: openMultiselect,
+      onClose: () => setOpen(false)
+    },
+    /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ import_react14.default.createElement(import_material10.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ import_react14.default.createElement(
+      import_material10.TextField,
+      {
+        "data-testid": "multiselect-input",
+        fullWidth: true,
+        size: "small",
+        variant: "outlined",
+        placeholder: "Buscar",
+        value: filterValue,
+        onChange: handleFilterChange,
+        slotProps: {
+          input: {
+            endAdornment: /* @__PURE__ */ import_react14.default.createElement(import_material10.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react14.default.createElement(import_icons_material9.SearchOutlined, { fontSize: "small" }))
+          }
+        }
+      }
+    ))), /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ import_react14.default.createElement(import_material10.MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ import_react14.default.createElement(import_material10.ListItemIcon, null, /* @__PURE__ */ import_react14.default.createElement(import_material10.Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ import_react14.default.createElement(
+      import_material10.MenuItem,
+      {
+        key: getItemLabel(item),
+        dense,
+        onClick: () => handleCheckboxToggle(item)
+      },
+      /* @__PURE__ */ import_react14.default.createElement(import_material10.ListItemIcon, null, /* @__PURE__ */ import_react14.default.createElement(
+        import_material10.Checkbox,
+        {
+          checked: selectedItems.includes(item),
+          color: "primary"
+        }
+      )),
+      getItemLabel(item)
+    )) : /* @__PURE__ */ import_react14.default.createElement(import_material10.MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
+      var _a2;
+      return /* @__PURE__ */ import_react14.default.createElement(
+        import_material10.Button,
+        {
+          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/PageHeader/PageHeader.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_material11 = require("@mui/material");
 var PageHeader = ({
   title,
@@ -1570,7 +1808,7 @@ var PageHeader = ({
   fixed,
   shadow = true
 }) => {
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(
     import_material11.Stack,
     {
       "data-testid": "main-container",
@@ -1582,16 +1820,16 @@ var PageHeader = ({
       zIndex: 10,
       sx: { boxShadow: shadow ? (theme) => theme.shadows[1] : "none" }
     },
-    /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
+    /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ import_react15.default.createElement(import_material11.Typography, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ import_react15.default.createElement(import_material11.Typography, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ import_react15.default.createElement(import_material11.Stack, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
   );
 };
 
 // src/Components/SCCalendarSwipeable.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_material12 = require("@mui/material");
-var import_Grid25 = __toESM(require("@mui/material/Grid2"), 1);
+var import_Grid24 = __toESM(require("@mui/material/Grid2"), 1);
 var import_AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
-var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var import_LocalizationProvider2 = require("@mui/x-date-pickers/LocalizationProvider");
 var import_StaticDatePicker = require("@mui/x-date-pickers/StaticDatePicker");
 var import_locale = require("date-fns/locale");
 var import_date_fns = require("date-fns");
@@ -1606,14 +1844,14 @@ var SCCalendarSwipeable = ({
   state
 }) => {
   let convertFecha;
-  const [fecha, setFecha] = (0, import_react17.useState)(/* @__PURE__ */ new Date());
-  const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react17.useState)();
-  const [stateVal, setstateVal] = import_react17.default.useState(/* @__PURE__ */ new Date());
-  const [openCalendar, setOpenCalendar] = import_react17.default.useState(false);
+  const [fecha, setFecha] = (0, import_react16.useState)(/* @__PURE__ */ new Date());
+  const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react16.useState)();
+  const [stateVal, setstateVal] = import_react16.default.useState(/* @__PURE__ */ new Date());
+  const [openCalendar, setOpenCalendar] = import_react16.default.useState(false);
   const hoy = /* @__PURE__ */ new Date();
   const inicioSemana = (0, import_date_fns.startOfWeek)(fecha, { weekStartsOn: 0 });
   const diasSemana = Array.from({ length: 7 }, (_, i) => (0, import_date_fns.addDays)(inicioSemana, i));
-  import_react17.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     if (fecha != null) {
       handleConvertFecha(fecha);
     }
@@ -1632,11 +1870,11 @@ var SCCalendarSwipeable = ({
     setOpenCalendar(newOpen);
   };
   const locale = __spreadValues({}, import_locale.es);
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { container: true, gap: 0.5, sx: {
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react16.default.createElement(import_Grid24.default, { container: true, gap: 0.5, sx: {
     justifyContent: "space-between",
     padding: "12px 0px",
     background: "transparent"
-  } }, diasSemana.map((dia) => /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react17.default.createElement(
+  } }, diasSemana.map((dia) => /* @__PURE__ */ import_react16.default.createElement(import_Grid24.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react16.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react16.default.createElement(
     import_material12.Box,
     {
       onClick: () => setFecha(dia),
@@ -1652,8 +1890,8 @@ var SCCalendarSwipeable = ({
         //height: '36px',
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: (0, import_date_fns.isSameDay)(dia, fecha) ? "white" : "#101840DE" } }, (0, import_date_fns.format)(dia, "d"))
-  )))), /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react17.default.createElement(import_material12.IconButton, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ import_react17.default.createElement(import_KeyboardDoubleArrowDown.default, null))))) : /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: (0, import_date_fns.isSameDay)(dia, fecha) ? "white" : "#101840DE" } }, (0, import_date_fns.format)(dia, "d"))
+  )))), /* @__PURE__ */ import_react16.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react16.default.createElement(import_material12.IconButton, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ import_react16.default.createElement(import_KeyboardDoubleArrowDown.default, null))))) : /* @__PURE__ */ import_react16.default.createElement(import_material12.Box, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ import_react16.default.createElement(
     import_StaticDatePicker.StaticDatePicker,
     {
       orientation: "landscape",
@@ -1663,107 +1901,157 @@ var SCCalendarSwipeable = ({
       sx: { fontSize: "12px !important", height: "300px !important", background: background ? background : "white", "& .MuiDayCalendar-header": { justifyContent: "space-between" }, "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" }, "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" }, "& .MuiPickersDay-root": { fontSize: "12px !important" }, "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" } },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react17.default.createElement(import_material12.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react17.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
+  ), /* @__PURE__ */ import_react16.default.createElement(import_Grid24.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react16.default.createElement(import_material12.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react16.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
 };
 
 // src/Components/SCDataGrid.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var import_x_data_grid_pro = require("@mui/x-data-grid-pro");
-var import_x_license_pro = require("@mui/x-license-pro");
-var import_styles = require("@mui/styles");
-var useStyles = (0, import_styles.makeStyles)({
-  root: {
-    "& .MuiDataGrid-filler": {
-      display: "none !important"
-    },
-    "& .MuiDataGrid-footerContainer": {
-      minHeight: "26px !important",
-      height: "26px !important"
-    },
-    "& .MuiTablePagination-toolbar": {
-      minHeight: "25px !important",
-      height: "25px !important"
-    },
-    "& .MuiTablePagination-actions .MuiIconButton-root": {
-      padding: "0px !important"
-    },
-    "&.MuiDataGrid-root": {
-      "--DataGrid-topContainerHeight": "0px !important"
-      /* Cambia este valor según tus necesidades */
-    },
-    "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
-      "--height": "0px !important",
-      "minHeight": "0px !important",
-      "maxHeight": "0px !important"
-    },
-    "& .MuiDataGrid-cell": {
-      padding: "0 !important"
-    }
-  }
-});
-var SCDataGrid = (_a) => {
-  var _b = _a, { data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath } = _b, props = __objRest(_b, ["data", "columns", "rowsTable", "checkboxSelection", "width", "height", "maxHeight", "density", "agrupacion", "groupingColDef", "getTreeDataPath"]);
-  const apiRef = (0, import_x_data_grid_pro.useGridApiRef)();
-  const classes = useStyles();
-  import_x_license_pro.LicenseInfo.setLicenseKey(
+var import_x_license_pro2 = require("@mui/x-license-pro");
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"), 1);
+var import_KeyboardArrowUp = __toESM(require("@mui/icons-material/KeyboardArrowUp"), 1);
+var import_styles = require("@mui/material/styles");
+var SCDataGridInitial = ({ data, columns, groupColumns, rowsTable, checkboxSelection, width, maxHeight, density }) => {
+  import_x_license_pro2.LicenseInfo.setLicenseKey(
     "77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
   );
-  let validationTreeData = getTreeDataPath ? true : false;
-  let paginalion = 10;
-  let valor = 80;
-  let alto = 345;
-  let estilot = "compact";
-  let tamanoEncabezado = density == "compact" ? 24 : density == "standard" ? 36 : density == "comfortable" ? 52 : 24;
-  let tamanoCelda = density == "compact" ? 22 : density == "standard" ? 28 : density == "comfortable" ? 48 : 22;
-  let dataConvert = [];
-  const [groupDataLenght, setGroupDataLengh] = (0, import_react18.useState)(0);
-  checkboxSelection = checkboxSelection || false;
-  const rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
-  width = width || "100%";
-  density = density || "compact";
-  agrupacion = agrupacion || false;
-  groupingColDef = groupingColDef || {};
-  getTreeDataPath = getTreeDataPath || void 0;
-  const [pageSize, setPageSize] = (0, import_react18.useState)(rows);
-  const [arrayRows, setArrayRows] = (0, import_react18.useState)([]);
-  const [heightTable, setHeightTable] = (0, import_react18.useState)(height || 0);
-  (0, import_react18.useEffect)(() => {
+  const theme = (0, import_styles.useTheme)();
+  const apiRef = (0, import_x_data_grid_pro.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();
+      const maxDepth = groupColumns ? groupColumns.length - 2 : 0;
+      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__ */ import_react17.default.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.type === "group" ? theme.palette.grey[100 + (maxDepth - params.rowNode.depth) * 100] : "#FFFFFF",
+            fontWeight: params.rowNode.type == "group" ? "400" : "300"
+          }
+        },
+        params.rowNode.type === "group" && /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement(import_KeyboardArrowUp.default, { fontSize: "small", color: "action" }) : /* @__PURE__ */ import_react17.default.createElement(import_KeyboardArrowDown.default, { 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.toString()) : data.length < 10 ? parseInt(data.length.toString()) : 10;
+  let validationGroupingColDef = groupingColDefs || {};
+  const [groupDataLenght, setGroupDataLengh] = (0, import_react17.useState)(0);
+  const [pageSize, setPageSize] = (0, import_react17.useState)(rows);
+  const [arrayRows, setArrayRows] = (0, import_react17.useState)([]);
+  const [selectionModel, setSelectionModel] = (0, import_react17.useState)([]);
+  (0, import_react17.useEffect)(() => {
     if ((data == null ? void 0 : data.length) > 0) {
       dataConvertRows(data, void 0);
-      if (validationTreeData) {
-        countGroupedElements(data, getTreeDataPath);
-      }
     }
   }, [data]);
-  (0, import_react18.useEffect)(() => {
-    if (groupDataLenght > 0 && validationTreeData == true) {
-      setHeightTable(heightTable ? heightTable : groupDataLenght * tamanoCelda + tamanoEncabezado + 27);
-    } else if (groupDataLenght <= 0 && validationTreeData == false) {
-      setHeightTable(heightTable ? heightTable : rows * tamanoCelda + tamanoEncabezado + 27);
-    }
-  }, [groupDataLenght]);
   const dataConvertRows = (data2, columnId) => {
-    let dataConvert2 = [];
+    let dataConvert = [];
     if ((data2 == null ? void 0 : data2.length) > 0) {
       const dataKeys = Object.keys(data2[0]);
       data2.map((item) => {
         const newKeys = {};
         let i = 0;
-        let id = dataConvert2.length + 1;
+        let id = dataConvert.length + 1;
         for (i = 0; i < dataKeys.length; i++) {
           newKeys[dataKeys[i]] = item[dataKeys[i]];
         }
         newKeys.id = columnId ? item[columnId] : id;
-        dataConvert2 = [...dataConvert2, newKeys];
+        dataConvert = [...dataConvert, newKeys];
       });
     }
-    setArrayRows(dataConvert2);
+    setArrayRows(dataConvert);
   };
-  const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
-  const [selectionModel, setSelectionModel] = (0, import_react18.useState)([]);
   const handleSelectionChange = (newSelection) => {
-    console.log(data);
-    console.log(arrayRows);
     if (groupDataLenght > 0 && validationTreeData == true) {
       let numberGrouped = 0;
       let idsRowSelectBefore = [];
@@ -1797,41 +2085,27 @@ var SCDataGrid = (_a) => {
       setSelectionModel([...newSelection]);
     }
   };
-  const countGroupedElements = (row, getTreeDataPath2) => {
-    const groupedCounts = {};
-    data.forEach((row2) => {
-      const path = getTreeDataPath2(row2) || [];
-      const key = path[0];
-      if (!groupedCounts[key]) {
-        groupedCounts[key] = 0;
-      }
-      groupedCounts[key]++;
-    });
-    setGroupDataLengh(Object.keys(groupedCounts).length);
-    return groupedCounts;
-  };
-  const virtualScrollerHeight = validationTreeData ? groupDataLenght * tamanoCelda + 10 : rows * tamanoCelda;
-  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, heightTable > 0 ? /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", flexDirection: "column", width, maxHeight } }, /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, data && /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement("div", { style: { width: width || "100%", maxHeight: maxHeight ? `${maxHeight}px` : "none" } }, /* @__PURE__ */ import_react17.default.createElement(
     import_x_data_grid_pro.DataGridPro,
-    __spreadProps(__spreadValues({
-      apiRef
-    }, props), {
+    {
+      apiRef,
+      rowHeight: styleRowHeight,
       rows: arrayRows,
       columns,
-      density,
+      density: styleDensity,
       treeData: validationTreeData,
-      getTreeDataPath,
-      groupingColDef: validationTreeData == true ? groupingColDef : false,
+      getTreeDataPath: validationTreeData == true ? getTreeDataPaths : void 0,
+      groupingColDef: validationTreeData == true ? validationGroupingColDef : void 0,
       pagination: true,
       initialState: {
         pagination: { paginationModel: { pageSize: rows } }
       },
-      checkboxSelection,
+      checkboxSelection: validationCheckboxSelection,
       rowSelectionModel: selectionModel,
       onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
       isRowSelectable,
       disableRowSelectionOnClick: true,
-      className: classes.root,
+      hideFooter: validationTreeData == true ? true : false,
       localeText: {
         noRowsLabel: "No hay filas",
         columnMenuLabel: "Men\xFA de columna",
@@ -1842,234 +2116,497 @@ var SCDataGrid = (_a) => {
           labelRowsPerPage: "Filas por p\xE1gina:",
           labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
         }
+      },
+      sx: {
+        maxHeight: maxHeight ? `${maxHeight}px` : "none",
+        //overflow: 'auto',
+        "& .MuiDataGrid-filler": {
+          display: "none !important"
+        },
+        "& .MuiDataGrid-footerContainer": {
+          minHeight: "26px !important",
+          height: "26px !important"
+        },
+        "& .MuiTablePagination-toolbar": {
+          minHeight: "25px !important",
+          height: "25px !important"
+        },
+        "& .MuiTablePagination-actions .MuiIconButton-root": {
+          padding: "0px !important"
+        },
+        "&.MuiDataGrid-root": {
+          [`--DataGrid-topContainerHeight`]: `${styleTopContainerHeight} !important`
+        },
+        "MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
+          "--height": "0px !important",
+          "minHeight": "0px !important",
+          "maxHeight": "0px !important"
+        },
+        "& .MuiDataGrid-cell": {
+          padding: "0 !important",
+          background: "white"
+        }
       }
-    })
-  ))) : "");
+    }
+  ))));
 };
+var SCDataGrid = import_react17.default.memo(SCDataGridInitial, (prevProps, nextProps) => {
+  const isEqual = prevProps.data === nextProps.data && prevProps.columns === nextProps.columns && prevProps.groupColumns === nextProps.groupColumns && prevProps.rowsTable === nextProps.rowsTable && prevProps.checkboxSelection === nextProps.checkboxSelection && prevProps.width === nextProps.width && prevProps.maxHeight === nextProps.maxHeight && prevProps.density === nextProps.density;
+  return isEqual;
+});
 
-// src/Components/SCAutocomplete.tsx
-var import_react19 = __toESM(require("react"), 1);
+// src/Components/EmptyState/EmptyState.tsx
+var import_react18 = __toESM(require("react"), 1);
 var import_material13 = require("@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__ */ import_react18.default.createElement("img", { src: imageUrl, alt: state, style: iconSize });
+};
+var EmptyState = ({
+  state = "create",
+  size = "large",
+  title,
+  subtitle,
+  actions,
+  containerHeight = "100vh",
+  icon = /* @__PURE__ */ import_react18.default.createElement(DefaultIcon, { state, size })
+}) => {
+  const titleVariant = size === "small" ? "subtitle2" : "h6";
+  const subtitleVariant = size === "small" ? "caption" : "body1";
+  return /* @__PURE__ */ import_react18.default.createElement(
+    import_material13.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      spacing: 2,
+      height: containerHeight,
+      "data-testid": "empty-state-container"
+    },
+    icon && /* @__PURE__ */ import_react18.default.createElement(import_material13.Stack, null, icon),
+    /* @__PURE__ */ import_react18.default.createElement(import_material13.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react18.default.createElement(import_material13.Typography, { color: "text.primary", variant: titleVariant, textAlign: "center" }, title), subtitle && /* @__PURE__ */ import_react18.default.createElement(
+      import_material13.Typography,
+      {
+        variant: subtitleVariant,
+        textAlign: "center",
+        color: "text.secondary"
+      },
+      subtitle
+    ), actions && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ import_react18.default.createElement(
+      import_material13.Stack,
+      {
+        direction: "row",
+        spacing: 2,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      actions.map((action, index) => {
+        var _a, _b, _c, _d;
+        return /* @__PURE__ */ import_react18.default.createElement(
+          import_material13.Button,
+          {
+            key: index,
+            color: (_a = action.color) != null ? _a : "primary",
+            variant: (_b = action.variant) != null ? _b : "text",
+            size: (_c = action.size) != null ? _c : "small",
+            startIcon: action.icon && action.iconPosition === "left" ? /* @__PURE__ */ import_react18.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            endIcon: action.icon && action.iconPosition === "right" ? /* @__PURE__ */ import_react18.default.createElement("img", { src: action.icon, alt: "icon" }) : void 0,
+            onClick: action.onClick
+          },
+          capitalize((_d = action.text) != null ? _d : "action")
+        );
+      })
+    ))
+  );
+};
+
+// src/Components/SCDialog.tsx
+var import_react19 = __toESM(require("react"), 1);
+var import_material14 = require("@mui/material");
+var import_Grid25 = __toESM(require("@mui/material/Grid2"), 1);
+var import_Close2 = __toESM(require("@mui/icons-material/Close"), 1);
+var Muicon5 = __toESM(require("@mui/icons-material"), 1);
+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] = (0, import_react19.useState)(show);
+  (0, import_react19.useEffect)(() => {
+    if (show) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [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];
+    }
+  }
+  actions == null ? void 0 : actions.map(function(option, index, array) {
+    if (option == null ? void 0 : option.icon) {
+      if ((option == null ? void 0 : option.icon.type) == void 0) {
+        option.icon = Muicon5[option == null ? void 0 : option.icon];
+      } else {
+        option;
+      }
+    }
+  });
+  if (iconTitle) {
+    if (Muicon5[iconTitle] == void 0) {
+      if (iconTitle && import_react19.default.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);
+    if (setShow) {
+      setShow(true);
+    }
+  };
+  const handleClose = () => {
+    setOpen(false);
+    if (setShow) {
+      setShow(false);
+    }
+  };
+  const dialogActions = actions != null ? actions : [{ text: "Cerrar", fn: handleClose }];
+  content = content != null ? content : { component: /* @__PURE__ */ import_react19.default.createElement(import_material14.Box, null, " Aqui va el contenido ") };
+  return /* @__PURE__ */ import_react19.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react19.default.createElement(import_material14.Tooltip, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react19.default.createElement(import_material14.Button, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" ? /* @__PURE__ */ import_react19.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "" : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) != void 0 ? (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react19.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "" : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react19.default.createElement(import_material14.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ import_react19.default.createElement(import_material14.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react19.default.createElement(
+    import_material14.Dialog,
+    {
+      "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__ */ import_react19.default.createElement(import_material14.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, "data-testid": "dialog-icon-title" }, /* @__PURE__ */ import_react19.default.createElement(import_Grid25.default, { container: true, size: 12, sx: { justifyContent: "space-between", flexWrap: "nowrap" } }, /* @__PURE__ */ import_react19.default.createElement(import_Grid25.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react19.default.createElement(import_material14.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react19.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react19.default.createElement(import_Grid25.default, null, /* @__PURE__ */ import_react19.default.createElement(import_material14.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react19.default.createElement(import_material14.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react19.default.createElement(import_material14.IconButton, { "data-testid": "close-dialog-button", onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react19.default.createElement(import_Close2.default, null)) : "")),
+    /* @__PURE__ */ import_react19.default.createElement(
+      import_material14.DialogContent,
+      {
+        "data-testid": "dialog-content",
+        dividers: dividers ? dividers : false,
+        sx: {
+          m: 0,
+          padding: "12px 16px 8px 16px",
+          background: background ? background : "white",
+          height: !heightContent ? { xs: "60vh", sm: "70vh", md: "508px" } : heightContent,
+          width: () => {
+            switch (widthContent) {
+              case "extra-small":
+                return { xs: "48vw", md: "33vw" };
+              case "small":
+                return { xs: "54vw", md: "39vw" };
+              case "medium":
+                return { xs: "64vw", md: "56vw" };
+              case "large":
+                return { xs: "74vw", md: "78vw" };
+              case "extra-large":
+                return { xs: "84vw", md: "93vw" };
+              default:
+                return { xs: "64vw", md: "56vw" };
+            }
+          }
+        }
+      },
+      content.url ? /* @__PURE__ */ import_react19.default.createElement(
+        "iframe",
+        {
+          style: { border: "none", minWidth: "100%", minHeight: "100%" },
+          id: "inlineFrameExample",
+          title: "Inline Frame Example",
+          src: content.url
+        }
+      ) : content.component
+    ),
+    dialogActions.length > 0 ? /* @__PURE__ */ import_react19.default.createElement(import_material14.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px", justifyContent: dialogActions.length >= 3 ? "space-between" : "flex-end" } }, dialogActions.length >= 3 ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
+      import_material14.Button,
+      {
+        variant: "text",
+        color: dialogActions[0].color || "primary",
+        size: "small",
+        onClick: dialogActions[0].fn,
+        disabled: dialogActions[0].disabled || false,
+        startIcon: dialogActions[0].icon ? /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: dialogActions[0].icon }) : void 0
+      },
+      dialogActions[0].text
+    ), /* @__PURE__ */ import_react19.default.createElement(import_material14.Box, { sx: { display: "flex", gap: 1 } }, dialogActions.slice(1).map((boton, index) => {
+      return /* @__PURE__ */ import_react19.default.createElement(
+        import_material14.Button,
+        {
+          key: index + 1,
+          variant: index === dialogActions.length - 2 ? "contained" : "text",
+          color: boton.color || "primary",
+          size: "small",
+          onClick: boton.fn,
+          disabled: boton.disabled || false,
+          startIcon: boton.icon ? /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
+        },
+        boton.text
+      );
+    }))) : dialogActions.map((boton, index) => {
+      return /* @__PURE__ */ import_react19.default.createElement(
+        import_material14.Button,
+        {
+          key: index,
+          variant: index === dialogActions.length - 1 ? "contained" : "text",
+          color: boton.color || "primary",
+          size: "small",
+          onClick: boton.fn,
+          disabled: boton.disabled || false,
+          startIcon: boton.icon ? /* @__PURE__ */ import_react19.default.createElement(import_material14.SvgIcon, { fontSize: "small", component: boton.icon }) : void 0
+        },
+        boton.text
+      );
+    })) : ""
+  )));
+};
+
+// src/Components/SCMenu.tsx
+var import_react21 = __toESM(require("react"), 1);
+var import_material15 = require("@mui/material");
 var import_Grid26 = __toESM(require("@mui/material/Grid2"), 1);
-var import_icons_material10 = require("@mui/icons-material");
+
+// src/Components/Hooks/useWindowDimensions.ts
+var import_react20 = require("react");
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = (0, import_react20.useState)(getWindowDimensions());
+  (0, import_react20.useEffect)(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+}
+
+// src/Components/SCMenu.tsx
 var Muicon6 = __toESM(require("@mui/icons-material"), 1);
-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] = import_react19.default.useState([]);
-  const [prevData, setPrevData] = import_react19.default.useState(data);
-  (0, import_react19.useEffect)(() => {
-    let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
-    if (dataChangeValidation == false) {
-      setState({ hiddenValue: "-1", textValue: "" });
-      setSelectedOptions([]);
-      setPrevData(data);
+var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu, widthPage }) => {
+  const { height, width } = useWindowDimensions();
+  const menuSize = widthMenu ? parseInt(widthMenu) : 284;
+  const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
+  const widthContainer = menuSize + pageSize;
+  let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
+  const [selectedIndex, setSelectedIndex] = import_react21.default.useState("1");
+  const [value, setValue] = import_react21.default.useState("1");
+  import_react21.default.useEffect(() => {
+    heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
+  }, [height]);
+  import_react21.default.useEffect(() => {
+    if (defaultOption) {
+      handleClickMenusItem(event, void 0);
     }
-  }, [data]);
-  (0, import_react19.useEffect)(() => {
-    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
-        ));
+  }, [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];
+    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 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 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));
     }
   };
-  const selectedValue = type === "multiselect" ? data.filter(
-    (item) => state.hiddenValue.includes(getItemValue(item).value)
-  ) : data.find(
-    (item) => getItemValue(item).value === state.hiddenValue
-  ) || null;
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, data && /* @__PURE__ */ import_react19.default.createElement(
-    import_material13.Autocomplete,
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(import_Grid26.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.Paper, { "data-testid": "menu-content", sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react21.default.createElement(import_material15.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
+    import_material15.MenuItem,
     {
-      multiple: type === "multiselect",
-      clearOnEscape: true,
-      disabled,
-      options: data,
-      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__ */ import_react19.default.createElement(import_react19.default.Fragment, null, value.slice(0, limit).map((option, index) => /* @__PURE__ */ import_react19.default.createElement(
-          import_material13.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__ */ import_react19.default.createElement(import_material13.Box, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
-      },
-      renderOption: (props, option) => {
-        const _a = props, { key } = _a, optionProps = __objRest(_a, ["key"]);
-        let isValid;
-        if (type == "multiselect") {
-          isSelected = selectedOptions.some(
-            (selected) => getItemValue(selected).value === getItemValue(option).value
-          );
-        }
-        if (columnGroup) {
-          isValid = group == option[columnGroup];
-          group = option[columnGroup];
+      disabled: disable == true ? true : false,
+      key: index,
+      selected: String(index + 1) === selectedIndex,
+      onClick: (event2) => handleClickMenusItem(event2, index)
+    },
+    option.iconLeft ? /* @__PURE__ */ import_react21.default.createElement(import_material15.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
+    /* @__PURE__ */ import_react21.default.createElement(import_Grid26.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react21.default.createElement(import_material15.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react21.default.createElement(import_material15.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
+  ), option.divider == true ? /* @__PURE__ */ import_react21.default.createElement(import_material15.Divider, null) : "")))), /* @__PURE__ */ import_react21.default.createElement(import_Grid26.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react21.default.createElement(import_material15.Box, { "data-testid": "menu-page-content", sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react21.default.createElement(import_material15.Typography, { color: "error" }, "No se ha configurado el componente a visualizar")))));
+};
+
+// src/Components/SCTabs.tsx
+var import_react22 = __toESM(require("react"), 1);
+var import_material16 = require("@mui/material");
+var import_TabPanel = __toESM(require("@mui/lab/TabPanel"), 1);
+var import_TabContext = __toESM(require("@mui/lab/TabContext"), 1);
+var Muicon7 = __toESM(require("@mui/icons-material"), 1);
+var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
+  const [toast, setToast] = import_react22.default.useState(null);
+  let i = 0;
+  let j = 0;
+  let k = 0;
+  let l = 0;
+  let validateTypeIcon = true;
+  const [value, setValue] = import_react22.default.useState("1");
+  (0, import_react22.useEffect)(() => {
+    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;
         }
-        return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ import_react19.default.createElement(import_material13.Typography, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ import_react19.default.createElement(import_material13.MenuItem, __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__ */ import_react19.default.createElement(import_material13.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react19.default.createElement(import_material13.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", type == "multiselect" ? /* @__PURE__ */ import_react19.default.createElement(import_material13.Checkbox, { checked: isSelected, value: getItemValue(option).text, color: "primary" }) : "", /* @__PURE__ */ import_react19.default.createElement(import_material13.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }))));
-      },
-      renderInput: (params) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
-        import_material13.TextField,
-        __spreadProps(__spreadValues({}, params), {
-          label: required ? /* @__PURE__ */ import_react19.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
-          placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
-          InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-            endAdornment: /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, deleteType == "icon" && state.hiddenValue != "-1" ? /* @__PURE__ */ import_react19.default.createElement(import_material13.IconButton, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ import_react19.default.createElement(import_icons_material10.Clear, { fontSize: "small" })) : "", /* @__PURE__ */ import_react19.default.createElement(import_material13.InputAdornment, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ import_react19.default.createElement(import_icons_material10.Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
-          })
-        })
-      )),
-      slotProps: {
-        listbox: {
-          component: import_react19.default.forwardRef(function ListboxComponent(props, ref) {
-            return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
-              import_material13.Box,
-              __spreadProps(__spreadValues({
-                ref
-              }, props), {
-                sx: __spreadValues({
-                  position: "relative",
-                  paddingBottom: "56px",
-                  backgroundColor: "white"
-                }, props.sx)
-              }),
-              checkMassive && type == "multiselect" ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(import_material13.FormControlLabel, { control: /* @__PURE__ */ import_react19.default.createElement(import_material13.Checkbox, { 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__ */ import_react19.default.createElement(import_material13.Divider, null)) : "",
-              props.children,
-              deleteType == "button" || fnAplicar ? /* @__PURE__ */ import_react19.default.createElement(
-                import_Grid26.default,
-                {
-                  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__ */ import_react19.default.createElement(
-                  import_material13.Button,
-                  {
-                    variant: "text",
-                    color: "primary",
-                    size: "small",
-                    onClick: (event2) => {
-                      event2.stopPropagation();
-                      cleanOptions(event2);
-                    }
-                  },
-                  "Limpiar"
-                ) : "",
-                fnAplicar && /* @__PURE__ */ import_react19.default.createElement(
-                  import_material13.Button,
-                  {
-                    variant: "contained",
-                    color: "primary",
-                    size: "small",
-                    onClick: fnAplicar
-                  },
-                  "Aplicar"
-                )
-              ) : ""
-            ));
-          })
+      } 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 handleChange = (event2, newValue) => {
+    if (defaultOption && newValue == void 0) {
+      setValue(defaultOption);
+    } else if (newValue != void 0) {
+      setValue(newValue);
+    }
+  };
+  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react22.default.createElement(import_material16.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react22.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react22.default.createElement(
+    import_material16.Tabs,
+    {
+      "data-testid": "tab-container",
+      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 || "" }
+    },
+    options.map((option) => /* @__PURE__ */ import_react22.default.createElement(
+      import_material16.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__ */ import_react22.default.createElement(
+          import_material16.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__ */ import_react22.default.createElement(import_material16.SvgIcon, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
+        sx: { "& .MuiTab-icon": { margin: "0px !important" }, padding: "10px 16px", gap: "4px" }
+      }
+    ))
+  ), children, options.map((option) => /* @__PURE__ */ import_react22.default.createElement(
+    import_TabPanel.default,
+    {
+      key: k = k + 1,
+      value: String(l = l + 1),
+      sx: { padding: "16px" }
+    },
+    option.page ? option.page : /* @__PURE__ */ import_react22.default.createElement(import_material16.Typography, null, "No se ha configurado el componente a visualizar ")
+  )))) : /* @__PURE__ */ import_react22.default.createElement(import_material16.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react22.default.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
+};
 
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react20 = __toESM(require("react"), 1);
-var import_icons_material11 = require("@mui/icons-material");
+var import_react23 = __toESM(require("react"), 1);
+var import_icons_material10 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
     styleOverrides: {
@@ -2428,7 +2965,7 @@ var components = {
   MuiBackdrop: {
     styleOverrides: {
       root: {
-        backgroundColor: "#00000047"
+        backgroundColor: "transparent"
       }
     }
   },
@@ -2766,10 +3303,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react20.default.createElement(import_icons_material11.CheckCircleRounded),
-        error: import_react20.default.createElement(import_icons_material11.ErrorRounded),
-        warning: import_react20.default.createElement(import_icons_material11.WarningRounded),
-        info: import_react20.default.createElement(import_icons_material11.InfoRounded)
+        success: import_react23.default.createElement(import_icons_material10.CheckCircleRounded),
+        error: import_react23.default.createElement(import_icons_material10.ErrorRounded),
+        warning: import_react23.default.createElement(import_icons_material10.WarningRounded),
+        info: import_react23.default.createElement(import_icons_material10.InfoRounded)
       }
     },
     variants: [
@@ -3606,86 +4143,9 @@ 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
-var breakpoints = createBreakpoints({
+var import_system = require("@mui/system");
+var breakpoints = (0, import_system.createBreakpoints)({
   values: {
     xs: 0,
     sm: 600,
@@ -3888,16 +4348,20 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
 0 && (module.exports = {
   ADCSincoTheme,
   AdproSincoTheme,
+  EmptyState,
   FooterAction,
+  MultiSelect,
   PageHeader,
   SCAutocomplete,
   SCCalendarSwipeable,
   SCDataGrid,
+  SCDataGridInitial,
+  SCDateRange,
   SCDialog,
   SCDrawer,
   SCMenu,
   SCModal,
-  SCMultiSelect,
+  SCSelect,
   SCTabs,
   SCTextArea,
   SCTextField,
@@ -3915,14 +4379,4 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   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.cjs.map