@m4l/components 9.4.45 → 9.4.46

package/components/datagrids/Datagrid.styles.js

@@ -1,4 +1,4 @@
-import { alpha as s } from "@mui/material";
+import { alpha as t } from "@mui/material";
 import { getTypographyStyles as i } from "../../utils/getTypographyStyles.js";
 import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
 const d = {
@@ -7,14 +7,14 @@ const d = {
    * Estilos para el contenedor principal del DataGrid.
    * ***************************************************
    */
-  datagridRoot: ({ theme: e }) => ({
+  datagridRoot: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
     container: "container / inline-size",
     background: "transparent",
-    borderRadius: e.vars.size.borderRadius.r1,
+    borderRadius: r.vars.size.borderRadius.r1,
     position: "relative",
-    gap: e.vars.size.baseSpacings.sp3,
+    gap: r.vars.size.baseSpacings.sp3,
     height: "100%",
     width: "100%",
     flex: 1,
@@ -22,47 +22,47 @@ const d = {
     "& .rdg .MuiCheckbox-root": {
       overflow: "visible",
       padding: 0,
-      ...e.generalSettings.isMobile ? {
-        width: e.vars.size.mobile.small.action,
-        height: e.vars.size.mobile.small.action
+      ...r.generalSettings.isMobile ? {
+        width: r.vars.size.mobile.small.action,
+        height: r.vars.size.mobile.small.action
       } : {
-        width: e.vars.size.desktop.small.action,
-        height: e.vars.size.desktop.small.action
+        width: r.vars.size.desktop.small.action,
+        height: r.vars.size.desktop.small.action
       },
       display: "inline-flex",
       justifyContent: "center",
       alignItems: "center",
-      borderRadius: e.size.borderRadius.r1,
+      borderRadius: r.size.borderRadius.r1,
       "&:hover": {
-        backgroundColor: e.vars.palette.default.hoverOpacity
+        backgroundColor: r.vars.palette.default.hoverOpacity
       },
       "&:active": {
-        backgroundColor: e.vars.palette.default.activeOpacity
+        backgroundColor: r.vars.palette.default.activeOpacity
       },
       "&.Mui-checked": {
         "&:hover": {
-          backgroundColor: e.vars.palette.primary.hoverOpacity,
+          backgroundColor: r.vars.palette.primary.hoverOpacity,
           "& ..": {
-            backgroundColor: e.vars.palette.primary.hover
+            backgroundColor: r.vars.palette.primary.hover
           }
         },
         "&:active": {
-          backgroundColor: e.vars.palette.primary.activeOpacity,
+          backgroundColor: r.vars.palette.primary.activeOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: e.vars.palette.primary.active
+            backgroundColor: r.vars.palette.primary.active
           }
         }
       },
       "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${e.vars.palette.primary.focusVisible}`
+        outline: `1px solid ${r.vars.palette.primary.focusVisible}`
       },
       "& > svg": {
-        color: e.vars.palette.text.secondary
+        color: r.vars.palette.text.secondary
       }
     },
     "&.M4LDataGrid-xs": {
       "& .M4LDataGrid-actions": {
-        height: e.vars.size.baseSpacings.sp11,
+        height: r.vars.size.baseSpacings.sp11,
         "& .M4LPager-labelRowsPerPageContainer": {
           "& .M4LTypography-root": {
             display: "none"
@@ -74,33 +74,33 @@ const d = {
       }
     },
     "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
-      top: `${e.vars.size.baseSpacings.sp0} !important`
+      top: `${r.vars.size.baseSpacings.sp0} !important`
     },
     "&& .M4lclassCssSpecificity": {
       fontWeight: 400
     },
     '& [role="row"]:last-of-type': {
       "& .rdg-cell": {
-        boxShadow: `inset 0 0.5px 0 0 ${e.vars.palette?.border.secondary}, inset 0 -0.5px 0 0 ${e.vars.palette?.border.secondary}`
+        boxShadow: `inset 0 0.5px 0 0 ${r.vars.palette?.border.secondary}, inset 0 -0.5px 0 0 ${r.vars.palette?.border.secondary}`
       }
     }
   }),
-  customHeader: ({ ownerState: e }) => ({
-    display: e?.visibleCustomHeader ? "block" : "none"
+  customHeader: ({ ownerState: r }) => ({
+    display: r?.visibleCustomHeader ? "block" : "none"
   }),
   /**
    * Estilos del contenedor de las acciones
    */
-  actionsRoot: ({ theme: e }) => ({
+  actionsRoot: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     background: "transparent",
-    borderRadius: e.vars.size.borderRadius.r1,
-    gap: e.vars.size.baseSpacings.sp1,
+    borderRadius: r.vars.size.borderRadius.r1,
+    gap: r.vars.size.baseSpacings.sp1,
     height: "fit-content",
-    ...e.generalSettings.isMobile && {
-      minHeight: e.vars.size.baseSpacings.sp10
+    ...r.generalSettings.isMobile && {
+      minHeight: r.vars.size.baseSpacings.sp10
     },
     "& .mobile-menu-actions": {
       marginRight: "auto"
@@ -109,83 +109,83 @@ const d = {
   /**
    * Estilos para el contenedor de las acciones ezquierdo
    */
-  containerLeftActions: ({ theme: e }) => ({
+  containerLeftActions: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "row",
-    gap: e.vars.size.baseSpacings["sp0-5"],
+    gap: r.vars.size.baseSpacings["sp0-5"],
     alignItems: "center",
-    borderRadius: e.vars.size.borderRadius.r2,
-    border: e.vars.size.borderStroke.container,
-    borderColor: e.vars.palette?.border.disabled,
-    padding: e.vars.size.baseSpacings.sp1,
-    boxShadow: e.vars.customShadows?.z1
+    borderRadius: r.vars.size.borderRadius.r2,
+    border: r.vars.size.borderStroke.container,
+    borderColor: r.vars.palette?.border.disabled,
+    padding: r.vars.size.baseSpacings.sp1,
+    boxShadow: r.vars.customShadows?.z1
   }),
   /**
    * Estilos para el contenedor de las acciones derecho
    */
-  containerRightActions: ({ theme: e }) => ({
+  containerRightActions: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "row",
-    gap: e.vars.size.baseSpacings["sp0-5"],
+    gap: r.vars.size.baseSpacings["sp0-5"],
     alignItems: "center"
   }),
   /**
    *Estilos para el contenedor de la paginación y filas por página
    */
-  controlNavigate: ({ theme: e }) => ({
+  controlNavigate: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    gap: e.vars.size.baseSpacings.sp2,
+    gap: r.vars.size.baseSpacings.sp2,
     flexWrap: "wrap",
     height: "fit-content"
   }),
   /**
    * container de los botones de acciones
    */
-  actionsConfigContainer: ({ theme: e }) => ({
+  actionsConfigContainer: ({ theme: r }) => ({
     width: "100%",
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-    gap: e.vars.size.baseSpacings.sp3,
+    gap: r.vars.size.baseSpacings.sp3,
     alignItems: "center"
   }),
   /**
    * Estilos para el contenedor principal de RowsCount
    */
-  rowsCountRoot: ({ theme: e }) => ({
+  rowsCountRoot: ({ theme: r }) => ({
     alignItems: "center",
     display: "flex",
-    gap: e.vars.size.baseSpacings.sp2
+    gap: r.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para el label de RowsCount
    */
-  rowsCountLabel: ({ theme: e, ownerState: r }) => ({
-    color: e.vars.palette.text.primary,
+  rowsCountLabel: ({ theme: r, ownerState: e }) => ({
+    color: r.vars.palette.text.primary,
     fontWeight: 400,
     height: "100%",
-    lineHeight: e.vars.size.baseSpacings.sp4,
+    lineHeight: r.vars.size.baseSpacings.sp4,
     fontSize: i(
-      e.generalSettings.isMobile,
-      r?.size || "medium",
+      r.generalSettings.isMobile,
+      e?.size || "medium",
       "body"
     ).fontSize
   }),
   /**
    * Estilos para el valor de RowsCount
    */
-  rowsCountValue: ({ theme: e, ownerState: r }) => ({
-    background: e.vars.palette.background.default,
-    borderRadius: e.vars.size.baseSpacings.sp1,
-    paddingBottom: e.vars.size.baseSpacings["sp0-5"],
-    paddingLeft: e.vars.size.baseSpacings.sp1,
+  rowsCountValue: ({ theme: r, ownerState: e }) => ({
+    background: r.vars.palette.background.default,
+    borderRadius: r.vars.size.baseSpacings.sp1,
+    paddingBottom: r.vars.size.baseSpacings["sp0-5"],
+    paddingLeft: r.vars.size.baseSpacings.sp1,
     paddingRight: "6px",
-    paddingTop: e.vars.size.baseSpacings.sp1,
+    paddingTop: r.vars.size.baseSpacings.sp1,
     fontSize: i(
-      e.generalSettings.isMobile,
-      r?.size || "medium",
+      r.generalSettings.isMobile,
+      e?.size || "medium",
       "body"
     ).fontSize
   }),
@@ -193,8 +193,8 @@ const d = {
    * Estilos para el contenedor de las columnas
    * de la tabla del modal de configuración de columnas.
    */
-  columnsConfigWrapper: ({ theme: e }) => ({
-    color: e.vars.palette.text.primary,
+  columnsConfigWrapper: ({ theme: r }) => ({
+    color: r.vars.palette.text.primary,
     position: "relative",
     display: "flex",
     flexDirection: "column",
@@ -206,11 +206,11 @@ const d = {
    * de selección de las columnas en
    * el modal de configuración de columnas.
    */
-  columnsConfigSelColumns: ({ theme: e, ownerState: r }) => ({
-    color: e.vars.palette.text.secondary,
+  columnsConfigSelColumns: ({ theme: r, ownerState: e }) => ({
+    color: r.vars.palette.text.secondary,
     ...i(
-      e.generalSettings.isMobile,
-      r?.size || "medium",
+      r.generalSettings.isMobile,
+      e?.size || "medium",
       "bodyDens"
     )
   }),
@@ -218,21 +218,21 @@ const d = {
    * Estilos para el contenedor de la tabla
    * en el modal de configuración de columnas.
    */
-  columnsConfigDataGrid: ({ theme: e }) => ({
+  columnsConfigDataGrid: ({ theme: r }) => ({
     position: "relative",
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
     overflow: "auto",
-    gap: e.vars.size.baseSpacings.sp3
+    gap: r.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para el contenedor de los botones
    * de acción en el modal de configuración de columnas.
    */
-  columnsConfigActios: ({ theme: e }) => ({
-    paddingTop: e.vars.size.baseSpacings.sp4,
-    paddingBottom: e.vars.size.baseSpacings.sp2,
+  columnsConfigActios: ({ theme: r }) => ({
+    paddingTop: r.vars.size.baseSpacings.sp4,
+    paddingBottom: r.vars.size.baseSpacings.sp2,
     display: "flex",
     flexDirection: "row"
   }),
@@ -241,26 +241,26 @@ const d = {
    * Estilos el el input editor del DataGrid.
    * *****************************************
    */
-  inputTexEditor: ({ theme: e, ownerState: r }) => ({
+  inputTexEditor: ({ theme: r, ownerState: e }) => ({
     appearance: "none",
     boxSizing: "border-box",
     inlineSize: "100%",
     blockSize: "100%",
-    paddingBlock: e.vars.size.baseSpacings.sp0,
+    paddingBlock: r.vars.size.baseSpacings.sp0,
     verticalAlign: "top",
     textAlign: "right",
     fontFamily: "inherit",
     background: "transparent",
-    border: `1px solid ${e.vars.palette?.border.secondary}`,
-    borderRadius: e.vars.size.borderRadius["r1-5"],
-    ...o(e, r?.size || "medium", "case", (a) => ({
+    border: `1px solid ${r.vars.palette?.border.secondary}`,
+    borderRadius: r.vars.size.borderRadius["r1-5"],
+    ...o(r, e?.size || "medium", "case", (a) => ({
       height: a
     })),
-    padding: e.vars.size.baseSpacings.sp1,
+    padding: r.vars.size.baseSpacings.sp1,
     outline: "none",
     "&:focus": {
       outline: "none",
-      border: `1px solid ${e.vars.palette?.border.secondary}`,
+      border: `1px solid ${r.vars.palette?.border.secondary}`,
       boxShadow: "none"
     },
     "&:hover": {
@@ -279,61 +279,61 @@ const d = {
    * Estilos para el contenedor principal
    * del componente Table.
    */
-  tableContaniner: ({ theme: e }) => ({
+  tableContaniner: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
     position: "relative",
     flexGrow: 1,
     overflow: "hidden",
-    borderRadius: e.vars.size.baseSpacings.sp1,
+    borderRadius: r.vars.size.baseSpacings.sp1,
     border: "none",
-    boxshadow: e.customShadows?.z2,
-    background: e.vars.palette.background.default,
+    boxshadow: r.customShadows?.z2,
+    background: r.vars.palette.background.default,
     "@container main (max-width: 600px)": {
-      top: e.vars.size.baseSpacings.sp11
+      top: r.vars.size.baseSpacings.sp11
     }
   }),
   /**
    * Estilos para el contenedor del dataGrid
    */
-  tableWrapperDataGrid: ({ theme: e, ownerState: r }) => ({
+  tableWrapperDataGrid: ({ theme: r, ownerState: e }) => ({
     position: "relative",
     height: "100%",
     overflow: "hidden",
-    borderRadius: e.vars.size.borderRadius.r2,
-    border: e.vars.size.borderStroke.container,
-    borderColor: e.vars.palette?.border.secondary,
+    borderRadius: r.vars.size.borderRadius.r2,
+    border: r.vars.size.borderStroke.container,
+    borderColor: r.vars.palette?.border.secondary,
     "& .rdg ": {
       scrollBehavior: "smooth",
       display: "grid",
       contain: "content",
       boxSizing: "border-box",
       border: "none",
-      background: e.vars.palette.background.default,
-      gridColumnGap: e.vars.size.baseSpacings.sp0,
-      gridRowGap: e.vars.size.baseSpacings.sp0,
+      background: r.vars.palette.background.default,
+      gridColumnGap: r.vars.size.baseSpacings.sp0,
+      gridRowGap: r.vars.size.baseSpacings.sp0,
       userSelect: "initial",
       height: "100%",
       contentVisibility: "unset",
       overflow: "auto",
-      padding: e.vars.size.baseSpacings.sp0,
-      "--rdg-grid-inline-size": e.vars.size.baseSpacings.sp0,
-      "--rdg-header-background-color": e.vars.palette.primary.opacity,
-      "--rdg-row-selected-background-color": e.vars.palette.primary.opacity,
-      "--rdg-row-hover-background-color": e.vars.palette.primary.opacity,
-      "--rdg-background-color": e.vars.palette.background.default,
-      "--rdg-selection-color": e.vars.palette.primary.focusVisible,
-      "--row-selected-hover-background-color": e.vars.palette.primary.toneOpacity,
-      "--rdg-checkbox-color": e.vars.palette.primary.enabled,
-      "--rdg-checkbox-focus-color": s(
-        e.colorSchemes.finalTheme.palette.primary.enabled,
-        e.colorSchemes.finalTheme.palette.action.selectedOpacity
+      padding: r.vars.size.baseSpacings.sp0,
+      "--rdg-grid-inline-size": r.vars.size.baseSpacings.sp0,
+      "--rdg-header-background-color": r.vars.palette.primary.opacity,
+      "--rdg-row-selected-background-color": r.vars.palette.primary.opacity,
+      "--rdg-row-hover-background-color": r.vars.palette.primary.opacity,
+      "--rdg-background-color": r.vars.palette.background.default,
+      "--rdg-selection-color": r.vars.palette.primary.focusVisible,
+      "--row-selected-hover-background-color": r.vars.palette.primary.toneOpacity,
+      "--rdg-checkbox-color": r.vars.palette.primary.enabled,
+      "--rdg-checkbox-focus-color": t(
+        r.colorSchemes.finalTheme.palette.primary.enabled,
+        r.colorSchemes.finalTheme.palette.action.selectedOpacity
       ),
       "--rdg-row-header-height": "var(--rdg-row-height)",
       "--rdg-border-color": "none",
       "&:last-child .rdg-cell": {
         border: "unset!important",
-        boxShadow: `inset 0 0.5px 0 0 ${e.vars.palette?.border.secondary}`
+        boxShadow: `inset 0 0.5px 0 0 ${r.vars.palette?.border.secondary}`
       }
     },
     "&.MeasuringCell": {
@@ -350,19 +350,19 @@ const d = {
       display: "contents"
     },
     '& [role="columnheader"]': {
-      paddingTop: e.vars.size.baseSpacings.sp2,
-      paddingBottom: e.vars.size.baseSpacings.sp2,
+      paddingTop: r.vars.size.baseSpacings.sp2,
+      paddingBottom: r.vars.size.baseSpacings.sp2,
       "& .MuiInputBase-input": {
         ...i(
-          e.generalSettings.isMobile,
-          r?.size || "medium",
+          r.generalSettings.isMobile,
+          e?.size || "medium",
           "body"
         )
       }
     },
     '& [role="grid"]': {
       '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
-        borderTopRightRadius: e.vars.size.baseSpacings.sp3
+        borderTopRightRadius: r.vars.size.baseSpacings.sp3
       },
       '& [aria-rowindex="2"].rdg-row .rdg-cell': {
         boxShadow: "unset"
@@ -371,28 +371,28 @@ const d = {
     "& .rdg-row": {
       display: "contents",
       '&[aria-selected="true"]': {
-        backgroundColor: e.vars.palette.primary.toneOpacity,
+        backgroundColor: r.vars.palette.primary.toneOpacity,
         "&:hover": {
-          backgroundColor: e.vars.palette.primary.toneOpacity
+          backgroundColor: r.vars.palette.primary.toneOpacity
         }
       },
       "& .rdg-cell": {
-        backgroundColor: e.vars.palette.background.default
+        backgroundColor: r.vars.palette.background.default
       },
       '&[aria-selected="false"] .rdg-cell': {
-        backgroundColor: e.vars.palette.background.default
+        backgroundColor: r.vars.palette.background.default
       },
       "&:nth-of-type(odd)": {
         "& .rdg-cell": {
-          backgroundColor: e.vars.palette.background.default
+          backgroundColor: r.vars.palette.background.default
         }
       },
       '&[aria-selected="true"] .rdg-cell': {
-        backgroundColor: e.vars.palette.primary?.toneOpacity
+        backgroundColor: r.vars.palette.primary?.toneOpacity
       },
       "&:hover": {
         "& .rdg-cell": {
-          backgroundColor: `${e.vars.palette.default.toneOpacity} !important`,
+          backgroundColor: `${r.vars.palette.default.toneOpacity} !important`,
           transition: "background-color 0.1s linear"
         }
       },
@@ -402,7 +402,7 @@ const d = {
       overflow: "clip",
       position: "sticky",
       outline: "none",
-      color: e.vars.palette.text.primary,
+      color: r.vars.palette.text.primary,
       paddingBlock: 0,
       paddingInline: "8px",
       borderInlineEnd: "1px solid var(--rdg-border-color)",
@@ -413,8 +413,8 @@ const d = {
       whiteSpace: "nowrap",
       textOverflow: "ellipsis",
       ...i(
-        e.generalSettings.isMobile,
-        r?.size || "medium",
+        r.generalSettings.isMobile,
+        e?.size || "medium",
         "body"
       ),
       lineHeight: "var(--rdg-row-height)!important",
@@ -425,25 +425,25 @@ const d = {
       },
       "& .checkbox-checked": {
         "& .M4LIcon-icon": {
-          backgroundColor: e.vars.palette.primary.enabled
+          backgroundColor: r.vars.palette.primary.enabled
         }
       },
       "& .checkbox-unChecked": {
         "& .M4LIcon-icon": {
-          backgroundColor: e.vars.palette.text.primary
+          backgroundColor: r.vars.palette.text.primary
         }
       },
       "& .rdg-text-editor": {
         textAlign: "inherit",
-        color: e.vars.palette.text.secondary,
-        padding: `${e.vars.size.baseSpacings.sp0} ${e.vars.size.baseSpacings.sp2}`,
-        border: e.vars.size.baseSpacings.sp0,
+        color: r.vars.palette.text.secondary,
+        padding: `${r.vars.size.baseSpacings.sp0} ${r.vars.size.baseSpacings.sp2}`,
+        border: r.vars.size.baseSpacings.sp0,
         borderTop: "0.5px solid",
-        borderBottom: e.vars.size.borderStroke.container,
+        borderBottom: r.vars.size.borderStroke.container,
         borderLeft: "0.5px solid",
         borderRight: "0.5px solid",
-        borderColor: `${e.vars.palette?.border.disabled} !important`,
-        ...e.colorSchemes.finalTheme.typography.body
+        borderColor: `${r.vars.palette?.border.disabled} !important`,
+        ...r.colorSchemes.finalTheme.typography.body
       },
       "&:has(> .M4LRadio-root)": {
         overflow: "visible",
@@ -471,9 +471,9 @@ const d = {
       },
       "&:after": {
         content: '""',
-        borderRight: `${e.vars.size.baseSpacings.sp0} solid ${e.vars.palette.divider}`,
+        borderRight: `${r.vars.size.baseSpacings.sp0} solid ${r.vars.palette.divider}`,
         position: "absolute",
-        right: e.vars.size.baseSpacings.sp0,
+        right: r.vars.size.baseSpacings.sp0,
         height: "100%"
       },
       "& .m4l_icon": {
@@ -484,7 +484,7 @@ const d = {
         top: 0,
         zIndex: 2,
         "&:has(> .MuiCheckbox-root)": {
-          borderTopLeftRadius: e.vars.size.baseSpacings.sp2,
+          borderTopLeftRadius: r.vars.size.baseSpacings.sp2,
           overflow: "visible",
           display: "flex",
           alignItems: "center",
@@ -493,36 +493,36 @@ const d = {
       }
     },
     '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
-      ...e.colorSchemes.finalTheme.typography.bodyDens,
+      ...r.colorSchemes.finalTheme.typography.bodyDens,
       width: "100%",
       display: "-webkit-box !important",
       WebkitBoxOrient: "vertical !important",
-      WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? "1 !important" : r?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
+      WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? "1 !important" : e?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
       overflow: "hidden !important",
       textOverflow: "ellipsis !important",
       wordBreak: "break-word !important",
       whiteSpace: "normal !important",
       ...i(
-        e.generalSettings.isMobile,
-        r?.size || "medium",
+        r.generalSettings.isMobile,
+        e?.size || "medium",
         "bodyDens"
       ),
       lineHeight: "var(--rdg-summary-row-height)!important",
-      color: `${e.vars.palette.text.secondary}`
+      color: `${r.vars.palette.text.secondary}`
     },
     '& .rdg-cell:not([role="columnheader"]):not(:has(> .MuiCheckbox-root))': {
       display: "-webkit-box !important",
       WebkitBoxOrient: "vertical !important",
-      WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? "1 !important" : r?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
+      WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? "1 !important" : e?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
       overflow: "hidden !important",
       textOverflow: "ellipsis !important",
       wordBreak: "break-word !important",
       whiteSpace: "normal !important",
-      lineHeight: r?.currentRowHeightVariant === "compact" ? `${r?.currentRowHeight}px !important` : r?.currentRowHeightVariant === "confortable" ? `${(r?.currentRowHeight ?? 48) / 3}px !important` : `${(r?.currentRowHeight ?? 40) / 2}px !important`
+      lineHeight: e?.currentRowHeightVariant === "compact" ? `${e?.currentRowHeight}px !important` : e?.currentRowHeightVariant === "confortable" ? `${(e?.currentRowHeight ?? 48) / 3}px !important` : `${(e?.currentRowHeight ?? 40) / 2}px !important`
     },
     '& .rdg-cell[role="columnheader"].filter-cell': {
       "& .M4LDataGrid-draggableHeaderRoot": {
-        gap: e.vars.size.baseSpacings.sp3,
+        gap: r.vars.size.baseSpacings.sp3,
         "& .rdg-header-sort-cell": {
           maxHeight: "min-content"
         },
@@ -572,7 +572,7 @@ const d = {
     },
     '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
       textAlign: "right",
-      paddingRight: e.vars.size.baseSpacings.sp3
+      paddingRight: r.vars.size.baseSpacings.sp3
     },
     "& .rdg-row .rdg-cell-frozen-last:after": {
       borderRight: "0px solid transparent"
@@ -589,11 +589,11 @@ const d = {
     },
     "& .rdg-row :last-child:after": {
       borderRight: "0px solid",
-      borderColor: e.vars.palette.background.surface
+      borderColor: r.vars.palette.background.surface
     },
     "& .rdg-header-row": {
       display: "contents",
-      backgroundColor: e.vars.palette.background.base,
+      backgroundColor: r.vars.palette.background.base,
       fontWeight: "bold",
       "& > .rdg-cell": {
         zIndex: 2,
@@ -606,29 +606,29 @@ const d = {
     "& .rdg-header-row .rdg-cell": {
       gridTemplateColumns: "auto",
       boxShadow: "unset!important",
-      borderBottom: e.vars.size.borderStroke.container,
-      borderColor: `${e.vars.palette?.background.surface}!important`,
+      borderBottom: r.vars.size.borderStroke.container,
+      borderColor: `${r.vars.palette?.background.surface}!important`,
       cursor: "pointer",
       "&:hover": {
-        boxShadow: `inset 1px 0 0 0 ${e.vars.palette?.border.default}, inset -1px 0 0 0 ${e.vars.palette?.border.default}!important `
+        boxShadow: `inset 1px 0 0 0 ${r.vars.palette?.border.default}, inset -1px 0 0 0 ${r.vars.palette?.border.default}!important `
       },
       "&[data-resize]": {
         touchAction: "none"
       },
       '& [draggable="true"]': {
-        fontSize: e.typography.body
+        fontSize: r.typography.body
       },
       "&.rdg-cell-frozen-last": {
-        borderColor: e.vars.palette.background.default,
+        borderColor: r.vars.palette.background.default,
         boxShadow: "var(--rdg-frozen-cell-box-shadow)"
       },
       "& .rdg-header-sort-cell": {
         "& .rdg-header-sort-name + span": {
           position: "absolute",
           margin: "auto",
-          right: e.vars.size.baseSpacings.sp2,
+          right: r.vars.size.baseSpacings.sp2,
           "& .rdg-sort-arrow": {
-            width: e.vars.size.baseSpacings.sp2
+            width: r.vars.size.baseSpacings.sp2
           }
         }
       },
@@ -643,107 +643,106 @@ const d = {
       inlineSize: "10px"
     },
     "& .rdg-header-row :last-child.rdg-cell": {
-      borderTopRightRadius: e.vars.size.baseSpacings.sp0,
+      borderTopRightRadius: r.vars.size.baseSpacings.sp0,
       "&:after": {
-        borderRight: `${e.vars.size.baseSpacings.sp0} solid transparent`
+        borderRight: `${r.vars.size.baseSpacings.sp0} solid transparent`
       }
     },
     "& .filter_cell_div": {
-      paddingLeft: e.vars.size.baseSpacings.sp2,
-      paddingRight: e.vars.size.baseSpacings.sp2
+      paddingLeft: r.vars.size.baseSpacings.sp2,
+      paddingRight: r.vars.size.baseSpacings.sp2
     },
     "& .rdg-header-sort-cell": {
       width: "100%",
       flexGrow: "1",
       alignItems: "center",
-      color: e.vars.palette.text.primary,
+      color: r.vars.palette.text.primary,
       height: "100%"
     }
   }),
   /**
    * Estilos para el wrapper del checkbox en las celdas.
    */
-  checkboxCellWrapper: ({ theme: e }) => ({
+  checkboxCellWrapper: ({ theme: r }) => ({
     "& .checkbox-checked": {
       "& .M4LIcon-icon": {
-        backgroundColor: e.vars.palette.primary.enabled
+        backgroundColor: r.vars.palette.primary.enabled
       }
     },
     "& .checkbox-unChecked": {
       "& .M4LIcon-icon": {
-        backgroundColor: e.vars.palette.text.primary
+        backgroundColor: r.vars.palette.text.primary
       }
     },
     "& .MuiCheckbox-root": {
       overflow: "visible",
       padding: 0,
-      ...e.generalSettings.isMobile ? {
-        width: e.vars.size.mobile.small.action,
-        height: e.vars.size.mobile.small.action
+      ...r.generalSettings.isMobile ? {
+        width: r.vars.size.mobile.small.action,
+        height: r.vars.size.mobile.small.action
       } : {
-        width: e.vars.size.desktop.small.action,
-        height: e.vars.size.desktop.small.action
+        width: r.vars.size.desktop.small.action,
+        height: r.vars.size.desktop.small.action
       },
       display: "inline-flex",
       justifyContent: "center",
       alignItems: "center",
-      borderRadius: e.size.borderRadius.r1,
+      borderRadius: r.size.borderRadius.r1,
       "&:hover": {
-        backgroundColor: e.vars.palette.default.hoverOpacity
+        backgroundColor: r.vars.palette.default.hoverOpacity
       },
       "&:active": {
-        backgroundColor: e.vars.palette.default.activeOpacity
+        backgroundColor: r.vars.palette.default.activeOpacity
       },
       "&.Mui-checked": {
         "&:hover": {
-          backgroundColor: e.vars.palette.primary.hoverOpacity,
+          backgroundColor: r.vars.palette.primary.hoverOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: e.vars.palette.primary.hover
+            backgroundColor: r.vars.palette.primary.hover
           }
         },
         "&:active": {
-          backgroundColor: e.vars.palette.primary.activeOpacity,
+          backgroundColor: r.vars.palette.primary.activeOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: e.vars.palette.primary.active
+            backgroundColor: r.vars.palette.primary.active
           }
         }
       },
       "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${e.vars.palette.primary.focusVisible}`
+        outline: `1px solid ${r.vars.palette.primary.focusVisible}`
       },
       "& > svg": {
-        color: e.vars.palette.text.secondary
+        color: r.vars.palette.text.secondary
       }
     }
   }),
   /**
    * Estilos para el contenedor de toggle de vista cards.
    */
-  containerToggleCards: ({ theme: e }) => ({
+  containerToggleCards: ({ theme: r }) => ({
     display: "grid",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    gap: e.vars.size.baseSpacings.sp3,
-    padding: e.vars.size.baseSpacings.sp3
+    gap: r.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para el botón de toggle de tarjeta.
    */
-  cardToggleCardButton: ({ theme: e, ownerState: r }) => ({
+  cardToggleCardButton: ({ theme: r, ownerState: e }) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     cursor: "pointer",
-    height: e.vars.size.baseSpacings.sp14,
-    width: e.vars.size.baseSpacings.sp14,
-    gap: e.vars.size.baseSpacings.sp2,
-    borderColor: r?.isActive ? e.vars.palette.primary.toneOpacity : e.vars.palette.border.disabled
+    height: r.vars.size.baseSpacings.sp14,
+    width: r.vars.size.baseSpacings.sp14,
+    gap: r.vars.size.baseSpacings.sp2,
+    borderColor: e?.isActive ? r.vars.palette.primary.toneOpacity : r.vars.palette.border.disabled
   }),
   /**
    * Estilos para el texto del botón de toggle.
    */
-  textToggleCardButton: ({ theme: e, ownerState: r }) => ({
+  textToggleCardButton: ({ theme: r, ownerState: e }) => ({
     "&.M4LTypography-root": {
-      color: r?.isActive ? e.vars.palette.primary.semanticText : e.vars.palette.text.secondary,
+      color: e?.isActive ? r.vars.palette.primary.semanticText : r.vars.palette.text.secondary,
       cursor: "pointer"
     }
   }),
@@ -760,23 +759,110 @@ const d = {
       alignItems: "start"
     }
   }),
+  /**
+   * List view container (independent from cards; virtualized list).
+   */
+  listContainer: () => ({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minHeight: 0,
+    overflow: "auto"
+  }),
+  /**
+   * List view row wrapper. Same visual style as card (outlined): background, border radius, border, hover/active.
+   * List is full-width (one row per line); card gets variant="outlined" from Card component.
+   */
+  list: ({ theme: r, ownerState: e }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    width: "100%",
+    minWidth: 0,
+    maxWidth: "none",
+    cursor: "pointer",
+    padding: r.vars.size.baseSpacings["sp2-5"],
+    gap: "0 !important",
+    borderRadius: r.vars.size.borderRadius.r0,
+    backgroundColor: r.vars.palette.background.default,
+    overflow: "hidden",
+    transition: "all 0.2s ease-in-out",
+    borderBottom: `1px solid ${r.vars.palette.border.disabled} !important`,
+    borderLeft: "2px solid transparent !important",
+    border: "0px solid transparent",
+    // When the checkbox (or any inner control) receives focus,
+    // Card applies a focus-within border color to ALL sides.
+    // For ListView ("CustomList" behavior), only the left edge must be highlighted.
+    "&:focus-visible, &:focus-within": {
+      borderColor: `${r.vars.palette.border.disabled} !important`
+    },
+    "&:hover": {
+      zIndex: 1,
+      borderLeft: `2px solid ${r.vars.palette.border.secondary} !important`,
+      backgroundColor: r.vars.palette.background.default,
+      boxShadow: r.vars.customShadows.z1
+    },
+    "&:active": {
+      backgroundColor: r.vars.palette.background.default
+    },
+    ...e?.checked && !e?.selected ? {
+      borderLeft: `2px solid ${r.vars.palette.primary.activeOpacity} !important`,
+      border: "0px solid transparent",
+      "&:focus-visible, &:focus-within, &:hover": {
+        // Card's focus-within sets `border` on ALL sides with `!important`.
+        // For CustomList (ListView checkeable), only the left edge must be highlighted.
+        border: "0px solid transparent !important",
+        borderLeft: `2px solid ${r.vars.palette.primary.activeOpacity} !important`
+      }
+    } : {},
+    ...e?.selected ? {
+      borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`,
+      "&:hover": {
+        borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`
+      },
+      "&:focus-visible, &:focus-within": {
+        // Same reasoning as the checkeable state: override Card's focus border.
+        border: "0px solid transparent !important",
+        borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`
+      }
+    } : {}
+  }),
+  /**
+   * Wrapper for each virtualized list row (receives style from FixedSizeList).
+   * Same as card slot usage: no extra layout; only forwards the style.
+   */
+  listRowVirtualizedItem: ({ ownerState: r }) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    transform: `translateY(${r.offsetTop ?? 0}px)`
+  }),
+  /**
+   * Container that holds the total virtualized height for TanStack Virtual.
+   * This element defines the scrollable area; its height equals the sum of all row heights.
+   */
+  listVirtualContainer: ({ ownerState: r }) => ({
+    width: "100%",
+    position: "relative",
+    height: `${r.totalSize ?? 0}px`
+  }),
   /**
    * Estilos para cada tarjeta individual en CardsView.
    */
-  card: ({ theme: e, ownerState: r }) => ({
+  card: ({ theme: r, ownerState: e }) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "start",
-    minWidth: "280px",
-    maxWidth: "580px",
+    ...e?.listCard ? { width: "100%", minWidth: 0, maxWidth: "none" } : { minWidth: "280px", maxWidth: "580px" },
     cursor: "pointer",
-    padding: e.vars.size.baseSpacings["sp2-5"],
+    padding: r.vars.size.baseSpacings["sp2-5"],
     gap: "0 !important",
-    ...r?.checked && !r?.selected ? {
-      borderColor: e.vars.palette.primary.activeOpacity
+    ...e?.checked && !e?.selected ? {
+      borderColor: r.vars.palette.primary.activeOpacity
     } : {},
-    ...r?.selected ? {
-      borderColor: e.vars.palette.primary.selected
+    ...e?.selected ? {
+      borderColor: r.vars.palette.primary.selected
     } : {}
   }),
   cardContentWrapper: () => ({
@@ -785,13 +871,13 @@ const d = {
   /**
    * Estilos para el header de la tarjeta.
    */
-  cardHeader: ({ theme: e, ownerState: r }) => ({
+  cardHeader: ({ theme: r, ownerState: e }) => ({
     display: "flex",
-    justifyContent: r?.hasCheckedRows ? "space-between" : "flex-end",
+    justifyContent: e?.hasCheckedRows ? "space-between" : "flex-end",
     alignItems: "center",
     width: "100%",
     height: "24px",
-    gap: e.vars.size.baseSpacings.sp2
+    gap: r.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para la sección izquierda del header de tarjeta.
@@ -803,49 +889,49 @@ const d = {
   /**
    * Estilos para la sección derecha del header de tarjeta.
    */
-  cardHeaderRight: ({ theme: e }) => ({
+  cardHeaderRight: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings["sp0-5"]
+    gap: r.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para el contenido de la tarjeta.
    */
-  cardContent: ({ theme: e }) => ({
+  cardContent: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: e.vars.size.baseSpacings.sp2,
-    padding: e.vars.size.density.compact
+    gap: r.vars.size.baseSpacings.sp2,
+    padding: r.vars.size.density.compact
   }),
   /**
    * Estilos para el contenedor de label y valor de columna.
    */
-  containerLabelValueColumn: ({ theme: e, ownerState: r }) => ({
+  containerLabelValueColumn: ({ theme: r, ownerState: e }) => ({
     display: "flex",
-    flexDirection: r?.hasActions ? "row" : "column",
-    justifyContent: r?.hasActions ? "space-between" : "flex-start",
-    alignItems: r?.hasActions ? "center" : "start",
-    gap: e.vars.size.baseSpacings["sp0-5"],
-    width: r?.hasActions ? "100%" : "auto"
+    flexDirection: e?.hasActions ? "row" : "column",
+    justifyContent: e?.hasActions ? "space-between" : "flex-start",
+    alignItems: e?.hasActions ? "center" : "start",
+    gap: r.vars.size.baseSpacings["sp0-5"],
+    width: e?.hasActions ? "100%" : "auto"
   }),
   /**
    * Estilos para el wrapper del contenido de columna.
    */
-  contentWrapperColumn: ({ theme: e, ownerState: r }) => ({
-    flex: r?.hasActions ? 1 : "none",
+  contentWrapperColumn: ({ theme: r, ownerState: e }) => ({
+    flex: e?.hasActions ? 1 : "none",
     display: "flex",
     flexDirection: "column",
     alignItems: "start",
-    gap: e.vars.size.baseSpacings["sp0-5"]
+    gap: r.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para el contenedor de detalle de tarjeta.
    */
-  cardDetailContainer: ({ theme: e }) => ({
+  cardDetailContainer: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: e.vars.size.baseSpacings.sp3,
-    padding: e.vars.size.baseSpacings.sp3,
+    gap: r.vars.size.baseSpacings.sp3,
+    padding: r.vars.size.baseSpacings.sp3,
     height: "100%",
     overflow: "auto"
   }),
@@ -860,10 +946,10 @@ const d = {
   /**
    * Estilos para el wrapper del editor de celda.
    */
-  editorCellWrapper: ({ theme: e, ownerState: r }) => ({
+  editorCellWrapper: ({ theme: r, ownerState: e }) => ({
     overflow: "clip",
     outline: "none",
-    color: e.vars.palette.text.primary,
+    color: r.vars.palette.text.primary,
     paddingBlock: 0,
     alignContent: "center",
     backgroundColor: "inherit",
@@ -873,11 +959,11 @@ const d = {
     alignSelf: "stretch",
     boxSizing: "border-box",
     ...i(
-      e.generalSettings.isMobile,
-      r?.size || "medium",
+      r.generalSettings.isMobile,
+      e?.size || "medium",
       "body"
     ),
-    ...o(e, r?.size || "medium", "base", (a) => ({
+    ...o(r, e?.size || "medium", "base", (a) => ({
       minHeight: a,
       height: 24,
       lineHeight: `${a} !important`
@@ -885,22 +971,22 @@ const d = {
     "& input": {
       width: "100%",
       textAlign: "inherit",
-      color: e.vars.palette.text.secondary,
-      padding: `${e.vars.size.baseSpacings.sp0} ${e.vars.size.baseSpacings.sp1}`,
-      border: `1px solid ${e.vars.palette.border.secondary}`,
-      borderRadius: e.vars.size.borderRadius["r1-5"],
+      color: r.vars.palette.text.secondary,
+      padding: `${r.vars.size.baseSpacings.sp0} ${r.vars.size.baseSpacings.sp1}`,
+      border: `1px solid ${r.vars.palette.border.secondary}`,
+      borderRadius: r.vars.size.borderRadius["r1-5"],
       outline: "none",
-      ...e.colorSchemes.finalTheme.typography.body,
-      ...o(e, r?.size || "medium", "case", (a) => ({
+      ...r.colorSchemes.finalTheme.typography.body,
+      ...o(r, e?.size || "medium", "case", (a) => ({
         height: a
       })),
       "&:focus": {
-        border: `1px solid ${e.vars.palette.border.secondary}`,
+        border: `1px solid ${r.vars.palette.border.secondary}`,
         outline: "none",
         boxShadow: "none"
       },
       "&:hover": {
-        border: `1px solid ${e.vars.palette.border.secondary}`,
+        border: `1px solid ${r.vars.palette.border.secondary}`,
         outline: "none"
       }
     }
@@ -908,50 +994,50 @@ const d = {
   /**
    * Placeholder editable
    */
-  editablePlaceholder: ({ theme: e }) => ({
+  editablePlaceholder: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings.sp1
+    gap: r.vars.size.baseSpacings.sp1
   }),
   /**
    * EditLabel
    */
-  editLabel: ({ theme: e, ownerState: r }) => ({
+  editLabel: ({ theme: r, ownerState: e }) => ({
     width: "auto",
     opacity: 1,
     transition: "opacity 0.3s ease",
     ...i(
-      e.generalSettings.isMobile,
-      r?.size || "medium",
+      r.generalSettings.isMobile,
+      e?.size || "medium",
       "body"
     )
   }),
   /**
    * Botón para mostrar el input en los editores (cards)
    */
-  iconButtonEdit: ({ theme: e }) => ({
+  iconButtonEdit: ({ theme: r }) => ({
     "& .M4LIcon-icon": {
-      backgroundColor: `${e.vars.palette.text.secondary} !important`
+      backgroundColor: `${r.vars.palette.text.secondary} !important`
     }
   }),
   /**
    * Estilos para el header de tarjeta personalizada.
    */
-  customCardHeader: ({ theme: e }) => ({
+  customCardHeader: ({ theme: r }) => ({
     display: "flex",
-    gap: e.vars.size.baseSpacings.sp4,
+    gap: r.vars.size.baseSpacings.sp4,
     alignItems: "center",
-    marginBottom: e.vars.size.baseSpacings.sp2
+    marginBottom: r.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para el avatar de tarjeta personalizada.
    */
-  customCardAvatar: ({ theme: e }) => ({
+  customCardAvatar: ({ theme: r }) => ({
     width: "32px",
     height: "32px",
-    borderRadius: e.vars.size.borderRadius.r3,
-    border: e.vars.size.borderStroke.container,
-    borderColor: e.vars.palette.primary.toneOpacity,
+    borderRadius: r.vars.size.borderRadius.r3,
+    border: r.vars.size.borderStroke.container,
+    borderColor: r.vars.palette.primary.toneOpacity,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -960,39 +1046,39 @@ const d = {
   /**
    * Estilos para nombre y email en tarjeta personalizada.
    */
-  customCardNameEmail: ({ theme: e }) => ({
+  customCardNameEmail: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: e.vars.size.baseSpacings["sp0-5"]
+    gap: r.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para campo con icono en tarjeta personalizada.
    */
-  customCardFieldWithIcon: ({ theme: e }) => ({
+  customCardFieldWithIcon: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings.sp3
+    gap: r.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para contenido de campo en tarjeta personalizada.
    */
-  customCardFieldContent: ({ theme: e }) => ({
+  customCardFieldContent: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: e.vars.size.baseSpacings["sp0-5"]
+    gap: r.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para contenedor de icono en tarjeta personalizada.
    */
-  customCardIconContainer: ({ theme: e }) => ({
+  customCardIconContainer: ({ theme: r }) => ({
     width: "24px",
     height: "24px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: e.vars.size.borderRadius.r2,
-    border: e.vars.size.borderStroke.container,
-    borderColor: e.vars.palette.primary.toneOpacity,
+    borderRadius: r.vars.size.borderRadius.r2,
+    border: r.vars.size.borderStroke.container,
+    borderColor: r.vars.palette.primary.toneOpacity,
     flexShrink: 0
   }),
   /**
@@ -1011,17 +1097,17 @@ const d = {
   /**
    * Estilos para el wrapper del input en cabeceras arrastrables
    */
-  draggableWrapperInputBase: ({ theme: e, ownerState: r }) => ({
+  draggableWrapperInputBase: ({ theme: r, ownerState: e }) => ({
     borderTop: "1px solid var(--rdg-border-color)",
     width: "100%",
     display: "flex",
     alignItems: "center",
-    backgroundColor: e.vars.palette.default.enabled,
-    padding: e.vars.size.baseSpacings.sp1,
-    marginBottom: e.vars.size.baseSpacings.sp2,
-    gap: e.vars.size.baseSpacings.sp1,
-    borderRadius: e.vars.size.borderRadius.r1,
-    ...o(e, r?.size || "medium", "action", (a) => ({
+    backgroundColor: r.vars.palette.default.enabled,
+    padding: r.vars.size.baseSpacings.sp1,
+    marginBottom: r.vars.size.baseSpacings.sp2,
+    gap: r.vars.size.baseSpacings.sp1,
+    borderRadius: r.vars.size.borderRadius.r1,
+    ...o(r, e?.size || "medium", "action", (a) => ({
       minHeight: a,
       height: a
     }))
@@ -1037,13 +1123,13 @@ const d = {
   /**
    * Estilos para el contenedor del skeleton de carga
    */
-  wrapperSkeleton: ({ theme: e, ownerState: r }) => ({
+  wrapperSkeleton: ({ theme: r, ownerState: e }) => ({
     display: "flex",
     width: "100%",
     height: "100%",
     alignItems: "center",
     "& .MuiSkeleton-root": {
-      ...o(e, r?.size || "medium", "base", (a) => ({
+      ...o(r, e?.size || "medium", "base", (a) => ({
         minHeight: `${a}!important`,
         height: `${a}!important`
       }))
@@ -1062,20 +1148,20 @@ const d = {
   /**
    * Estilos para el contenedor de nombre de columna con icono
    */
-  nameColumnIcon: ({ theme: e }) => ({
+  nameColumnIcon: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings.sp1,
+    gap: r.vars.size.baseSpacings.sp1,
     position: "relative",
     overflow: "visible"
   }),
   /**
    * Estilos para el nombre de columna con truncado de texto
    */
-  nameColumn: ({ ownerState: e }) => ({
+  nameColumn: ({ ownerState: r }) => ({
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
@@ -1085,10 +1171,10 @@ const d = {
   /**
    * Estilos para el contenedor de icono de columna
    */
-  iconColumn: ({ theme: e }) => ({
+  iconColumn: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings.sp1
+    gap: r.vars.size.baseSpacings.sp1
   }),
   headerRenderClick: () => ({
     width: "fit-content"
@@ -1096,20 +1182,20 @@ const d = {
   /**
    * Estilos para la lista del menú de opciones
    */
-  menuList: ({ theme: e }) => ({
-    padding: e.vars.size.baseSpacings.sp3,
+  menuList: ({ theme: r }) => ({
+    padding: r.vars.size.baseSpacings.sp3,
     display: "flex",
     flexDirection: "column",
-    gap: e.vars.size.baseSpacings.sp1,
+    gap: r.vars.size.baseSpacings.sp1,
     "& > div": {
-      paddingLeft: e.vars.size.baseSpacings.sp4,
-      paddingRight: e.vars.size.baseSpacings.sp4
+      paddingLeft: r.vars.size.baseSpacings.sp4,
+      paddingRight: r.vars.size.baseSpacings.sp4
     }
   }),
   /**
    * Estilos para el botón de acciones del header
    */
-  buttonHeaderActions: ({ theme: e }) => ({
+  buttonHeaderActions: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -1124,18 +1210,18 @@ const d = {
       "& svg": {
         width: "8px",
         height: "8px",
-        color: e.vars.palette.chips.default.contained.backgroundColorTone
+        color: r.vars.palette.chips.default.contained.backgroundColorTone
       }
     }
   }),
   /**
    * Estilos para el formateador de iconos de columna
    */
-  columnIconFormatter: ({ theme: e }) => ({
+  columnIconFormatter: ({ theme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: e.vars.size.baseSpacings.sp2,
+    gap: r.vars.size.baseSpacings.sp2,
     minWidth: "max-content",
     overflow: "visible",
     flexWrap: "nowrap"
@@ -1143,22 +1229,22 @@ const d = {
   /**
    * Estilos para el contenedor raíz del renderizador de celdas de grupo por defecto
    */
-  defaultRenderGroupCellRoot: ({ theme: e, ownerState: r }) => ({
+  defaultRenderGroupCellRoot: ({ theme: r, ownerState: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: e.vars.size.baseSpacings.sp2,
+    gap: r.vars.size.baseSpacings.sp2,
     cursor: "pointer",
     width: "100%",
-    justifyContent: r?.align === "center" ? "center" : r?.align === "right" ? "flex-end" : "flex-start"
+    justifyContent: e?.align === "center" ? "center" : e?.align === "right" ? "flex-end" : "flex-start"
   }),
   /**
    * Estilos para el texto del renderizador de celdas de grupo por defecto
    */
-  defaultRenderGroupCellText: ({ ownerState: e }) => ({
+  defaultRenderGroupCellText: ({ ownerState: r }) => ({
     fontWeight: 600,
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
@@ -1171,7 +1257,7 @@ const d = {
    * manteniendo el comportamiento de truncado con ellipsis.
    * El color se recibe a través de ownerState.cellBackgroundColor
    */
-  cellBackgroundWrapper: ({ ownerState: e }) => ({
+  cellBackgroundWrapper: ({ ownerState: r }) => ({
     // Ocupar toda la celda con margin negativo
     margin: "-8px",
     padding: "8px",
@@ -1181,13 +1267,13 @@ const d = {
     // Mantener el comportamiento de truncado igual que las celdas
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
     whiteSpace: "normal",
     alignContent: "center",
-    ...e?.cellBackgroundColor ? { backgroundColor: e.cellBackgroundColor } : {}
+    ...r?.cellBackgroundColor ? { backgroundColor: r.cellBackgroundColor } : {}
   })
 };
 export {