componentes-sinco 1.0.1-rc.7 → 1.0.1-rc.8

package/dist/index.cjs

@@ -63,7 +63,9 @@ __export(index_exports, {
   AdproSincoTheme: () => AdproSincoTheme,
   FooterAction: () => FooterAction,
   PageHeader: () => PageHeader,
+  SCAutocomplete: () => SCAutocomplete,
   SCCalendarSwipeable: () => SCCalendarSwipeable,
+  SCDataGrid: () => SCDataGrid,
   SCDialog: () => SCDialog,
   SCDrawer: () => SCDrawer,
   SCMenu: () => SCMenu,
@@ -1280,11 +1282,13 @@ 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, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
+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) {
@@ -1292,11 +1296,40 @@ var SCTabs = ({ options, defaultOption, background, iconPosition, colorTab, orie
     }
   }, [defaultOption]);
   options.map(function(option) {
-    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;
+    const optionsLength = options.length;
+    if (option == null ? void 0 : option.iconOrBadge) {
+      if (typeIcon == "icon") {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == true) {
+          validateTypeIcon = true;
+          option.iconOrBadge = Muicon5[option == null ? void 0 : option.iconOrBadge];
+        } else {
+          validateTypeIcon = false;
+          setTimeout(() => {
+            setToast({
+              type: "error",
+              title: "Componente SCTabs",
+              subtitle: "En Option todos los iconOrBadge deben ser iconos de MUI, por favor verificar.",
+              time: 50
+            });
+          }, 10);
+          return;
+        }
+      } else if (typeIcon == "badge") {
+        if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == false) {
+          validateTypeIcon = true;
+          option;
+        } else {
+          validateTypeIcon = false;
+          setTimeout(() => {
+            setToast({
+              type: "error",
+              title: "Componente SCTabs",
+              subtitle: "En Option todos los iconOrBadge deben ser numeros para el badge, por favor verificar.",
+              time: 10
+            });
+          }, 10);
+          return;
+        }
       }
     }
   });
@@ -1307,7 +1340,7 @@ var SCTabs = ({ options, defaultOption, background, iconPosition, colorTab, orie
       setValue(newValue);
     }
   };
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__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(
+  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,
     {
       value,
@@ -1328,7 +1361,7 @@ var SCTabs = ({ options, defaultOption, background, iconPosition, colorTab, orie
         label: option.name || "",
         disabled: option.disabled || false,
         iconPosition: iconPosition || "end",
-        icon: option.badge ? /* @__PURE__ */ import_react12.default.createElement(
+        icon: typeIcon == "badge" ? /* @__PURE__ */ import_react12.default.createElement(
           import_material8.Badge,
           {
             sx: {
@@ -1340,10 +1373,10 @@ var SCTabs = ({ options, defaultOption, background, iconPosition, colorTab, orie
               }
             },
             variant: "standard",
-            badgeContent: option.badge,
+            badgeContent: option.iconOrBadge,
             color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
           }
-        ) : option.icon ? /* @__PURE__ */ import_react12.default.createElement(import_material8.SvgIcon, { fontSize: "small", component: option.icon, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
+        ) : 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" }
       }
     ))
@@ -1355,12 +1388,12 @@ var SCTabs = ({ options, defaultOption, background, iconPosition, colorTab, orie
       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))));
 };
 
 // src/Components/FooterAction/FooterAction.tsx
-var import_material9 = require("@mui/material");
 var import_react13 = __toESM(require("react"), 1);
+var import_material9 = require("@mui/material");
 var FooterAction = ({
   leftContent,
   rightContent,
@@ -1387,51 +1420,24 @@ var FooterAction = ({
   );
 };
 
-// src/Components/PageHeader/PageHeader.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_material10 = require("@mui/material");
-var PageHeader = ({
-  title,
-  subtitle,
-  actions,
-  buttonBack,
-  fixed,
-  shadow = true
-}) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
-    import_material10.Stack,
-    {
-      "data-testid": "main-container",
-      justifyContent: "center",
-      height: 48,
-      position: fixed ? "fixed" : "relative",
-      width: fixed ? "100%" : "inherit",
-      bgcolor: "background.paper",
-      zIndex: 10,
-      sx: { boxShadow: shadow ? (theme) => theme.shadows[1] : "none" }
-    },
-    /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ import_react14.default.createElement(import_material10.Typography, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ import_react14.default.createElement(import_material10.Typography, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
-  );
-};
-
 // src/Components/Modal/Helpers/Data.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 var import_icons_material7 = 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_react15.default.createElement(import_icons_material7.Info, { color: "info", fontSize: "medium" })
+    icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.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_react15.default.createElement(import_icons_material7.Info, { color: "error", fontSize: "medium" })
+    icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Info, { color: "error", fontSize: "medium" })
   },
   warning: {
     color: "warning",
     defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
-    icon: /* @__PURE__ */ import_react15.default.createElement(import_icons_material7.Warning, { color: "warning", fontSize: "medium" })
+    icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Warning, { color: "warning", fontSize: "medium" })
   }
 };
 
@@ -1461,8 +1467,8 @@ var getButtonColor = (state) => {
 };
 
 // src/Components/Modal/SCModal.tsx
-var import_react16 = __toESM(require("react"), 1);
-var import_material11 = require("@mui/material");
+var import_react15 = __toESM(require("react"), 1);
+var import_material10 = require("@mui/material");
 var import_icons_material9 = require("@mui/icons-material");
 var SCModal = ({
   buttonModal,
@@ -1473,35 +1479,35 @@ var SCModal = ({
   action
 }) => {
   var _a, _b, _c, _d, _e;
-  const [openModal, setOpenModal] = (0, import_react16.useState)(open != null ? open : false);
-  (0, import_react16.useEffect)(() => {
+  const [openModal, setOpenModal] = (0, import_react15.useState)(open != null ? open : false);
+  (0, import_react15.useEffect)(() => {
     if (open !== void 0) {
       setOpenModal(open);
     }
   }, [open]);
-  const Icon = (0, import_react16.useMemo)(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
-  const handleClose = (0, import_react16.useCallback)(() => setOpenModal(false), []);
+  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 toggleModal = (newOpen) => () => setOpenModal(newOpen);
-  const prevAction = (0, import_react16.useMemo)(
+  const prevAction = (0, import_react15.useMemo)(
     () => action != null ? action : [{ text: "Cancelar", fn: handleClose }, { text: "Consultar", fn: () => {
     } }],
     [action, handleClose]
   );
   const { icon, defaultDescription } = modalStateConfig[state];
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(
-    import_material11.Button,
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
+    import_material10.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_react16.default.createElement(Icon, null),
-      endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ import_react16.default.createElement(Icon, null)
+      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)
     },
     capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
-  ), /* @__PURE__ */ import_react16.default.createElement(import_material11.Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react16.default.createElement(
-    import_material11.Box,
+  ), /* @__PURE__ */ import_react15.default.createElement(import_material10.Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react15.default.createElement(
+    import_material10.Box,
     {
       sx: {
         position: "absolute",
@@ -1514,10 +1520,10 @@ var SCModal = ({
         boxShadow: 24
       }
     },
-    /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Box, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ import_react16.default.createElement(import_material11.IconButton, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ import_react16.default.createElement(import_icons_material9.Close, { color: "action" }))),
-    /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { variant: "body1" }, description || defaultDescription)),
-    action && /* @__PURE__ */ import_react16.default.createElement(
-      import_material11.Stack,
+    /* @__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,
       {
         id: "Action",
         direction: "row",
@@ -1527,8 +1533,8 @@ var SCModal = ({
         bgcolor: "grey.50",
         sx: { borderRadius: 1 }
       },
-      /* @__PURE__ */ import_react16.default.createElement(
-        import_material11.Button,
+      /* @__PURE__ */ import_react15.default.createElement(
+        import_material10.Button,
         {
           color: "inherit",
           variant: "text",
@@ -1537,8 +1543,8 @@ var SCModal = ({
         },
         capitalize("cancelar")
       ),
-      /* @__PURE__ */ import_react16.default.createElement(
-        import_material11.Button,
+      /* @__PURE__ */ import_react15.default.createElement(
+        import_material10.Button,
         {
           "data-testid": "test-aceptar",
           color: getButtonColor(state),
@@ -1553,6 +1559,33 @@ var SCModal = ({
   )));
 };
 
+// src/Components/PageHeader/PageHeader.tsx
+var import_react16 = __toESM(require("react"), 1);
+var import_material11 = require("@mui/material");
+var PageHeader = ({
+  title,
+  subtitle,
+  actions,
+  buttonBack,
+  fixed,
+  shadow = true
+}) => {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    import_material11.Stack,
+    {
+      "data-testid": "main-container",
+      justifyContent: "center",
+      height: 48,
+      position: fixed ? "fixed" : "relative",
+      width: fixed ? "100%" : "inherit",
+      bgcolor: "background.paper",
+      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))
+  );
+};
+
 // src/Components/SCCalendarSwipeable.tsx
 var import_react17 = __toESM(require("react"), 1);
 var import_material12 = require("@mui/material");
@@ -1598,13 +1631,8 @@ var SCCalendarSwipeable = ({
   const toggleCalendar = (newOpen) => () => {
     setOpenCalendar(newOpen);
   };
-  const locale = __spreadProps(__spreadValues({}, import_locale.es), {
-    options: {
-      weekStartsOn: 0
-      // 0 para domingo, 1 para lunes, etc.
-    }
-  });
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns }, openCalendar == false ? /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { 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: {
+  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: {
     justifyContent: "space-between",
     padding: "12px 0px",
     background: "transparent"
@@ -1625,7 +1653,7 @@ var SCCalendarSwipeable = ({
       }
     },
     /* @__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, { 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_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(
     import_StaticDatePicker.StaticDatePicker,
     {
       orientation: "landscape",
@@ -1635,15 +1663,413 @@ 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, { onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react17.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
+  ), /* @__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))))));
 };
 
+// src/Components/SCDataGrid.tsx
+var import_react18 = __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(
+    "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)(() => {
+    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 = [];
+    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;
+        for (i = 0; i < dataKeys.length; i++) {
+          newKeys[dataKeys[i]] = item[dataKeys[i]];
+        }
+        newKeys.id = columnId ? item[columnId] : id;
+        dataConvert2 = [...dataConvert2, newKeys];
+      });
+    }
+    setArrayRows(dataConvert2);
+  };
+  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 = [];
+      let idRowSelect = [];
+      for (let i = 0; i < newSelection.length; i++) {
+        if (typeof newSelection[i] === "string") {
+          if (newSelection[i].includes("auto-generated-row-null")) {
+            numberGrouped = i;
+          }
+        } else {
+          idsRowSelectBefore.push(newSelection[i]);
+        }
+      }
+      arrayRows.forEach((array) => {
+        if (typeof newSelection[numberGrouped] === "string") {
+          if (newSelection[numberGrouped].includes(array.name)) {
+            idRowSelect.push(array.id);
+          }
+        }
+      });
+      if (idRowSelect !== null) {
+        const soloEnArr1 = idsRowSelectBefore.filter((elemento) => !idRowSelect.includes(elemento));
+        const hasCommonElements = idsRowSelectBefore.some((element) => idRowSelect.includes(element));
+        if (hasCommonElements == true) {
+          setSelectionModel([...soloEnArr1]);
+        } else {
+          setSelectionModel([...idsRowSelectBefore, ...idRowSelect]);
+        }
+      }
+    } else {
+      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(
+    import_x_data_grid_pro.DataGridPro,
+    __spreadProps(__spreadValues({
+      apiRef
+    }, props), {
+      rows: arrayRows,
+      columns,
+      density,
+      treeData: validationTreeData,
+      getTreeDataPath,
+      groupingColDef: validationTreeData == true ? groupingColDef : false,
+      pagination: true,
+      initialState: {
+        pagination: { paginationModel: { pageSize: rows } }
+      },
+      checkboxSelection,
+      rowSelectionModel: selectionModel,
+      onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
+      isRowSelectable,
+      disableRowSelectionOnClick: true,
+      className: classes.root,
+      localeText: {
+        noRowsLabel: "No hay filas",
+        columnMenuLabel: "Men\xFA de columna",
+        footerTotalRows: "Filas Totales:",
+        footerRowSelected: (count) => `${count.toLocaleString()} fila(s) seleccionada(s)`,
+        // Ejemplo de traducción dinámica
+        MuiTablePagination: {
+          labelRowsPerPage: "Filas por p\xE1gina:",
+          labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
+        }
+      }
+    })
+  ))) : "");
+};
+
+// src/Components/SCAutocomplete.tsx
+var import_react19 = __toESM(require("react"), 1);
+var import_material13 = require("@mui/material");
+var import_Grid26 = __toESM(require("@mui/material/Grid2"), 1);
+var import_icons_material10 = require("@mui/icons-material");
+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);
+    }
+  }, [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
+        ));
+      }
+    }
+  }, [state.hiddenValue]);
+  data.map(function(option, index, array) {
+    if (option == null ? void 0 : option.icon) {
+      if ((option == null ? void 0 : option.icon.type) == void 0) {
+        option.icon = Muicon6[option == null ? void 0 : option.icon];
+      } else {
+        option;
+      }
+    }
+  });
+  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 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,
+    {
+      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];
+        }
+        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"
+                )
+              ) : ""
+            ));
+          })
+        }
+      }
+    }
+  ));
+}
+
 // src/Theme/index.ts
-var import_styles2 = require("@mui/material/styles");
+var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react18 = __toESM(require("react"), 1);
-var import_icons_material10 = require("@mui/icons-material");
+var import_react20 = __toESM(require("react"), 1);
+var import_icons_material11 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
     styleOverrides: {
@@ -2340,10 +2766,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react18.default.createElement(import_icons_material10.CheckCircleRounded),
-        error: import_react18.default.createElement(import_icons_material10.ErrorRounded),
-        warning: import_react18.default.createElement(import_icons_material10.WarningRounded),
-        info: import_react18.default.createElement(import_icons_material10.InfoRounded)
+        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)
       }
     },
     variants: [
@@ -2595,9 +3021,6 @@ var components = {
     }
   },
   MuiSvgIcon: {
-    defaultProps: {
-      color: "action"
-    },
     styleOverrides: {
       fontSizeLarge: {
         width: 35,
@@ -3287,7 +3710,7 @@ var import_Typography = require("@mui/material/Typography");
 var import_Radio = require("@mui/material/Radio");
 var import_Chip = require("@mui/material/Chip");
 var import_Checkbox = require("@mui/material/Checkbox");
-var import_styles = require("@mui/material/styles");
+var import_styles2 = require("@mui/material/styles");
 
 // src/Theme/typography.ts
 var typography = {
@@ -3458,16 +3881,18 @@ var ADCTheme = __spreadValues({
 }, BasicTheme);
 
 // src/Theme/index.ts
-var SincoTheme = (0, import_styles2.createTheme)(__spreadValues({}, ERPTheme));
-var AdproSincoTheme = (0, import_styles2.createTheme)(__spreadValues({}, ADPROTheme));
-var ADCSincoTheme = (0, import_styles2.createTheme)(__spreadValues({}, ADCTheme));
+var SincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ERPTheme));
+var AdproSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADPROTheme));
+var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ADCSincoTheme,
   AdproSincoTheme,
   FooterAction,
   PageHeader,
+  SCAutocomplete,
   SCCalendarSwipeable,
+  SCDataGrid,
   SCDialog,
   SCDrawer,
   SCMenu,