@m4l/components 9.79.1 → 9.80.0

package/components/datagrids/Datagrid.styles.js

@@ -7,14 +7,14 @@ const d = {
    * Estilos para el contenedor principal del DataGrid.
    * ***************************************************
    */
-  datagridRoot: ({ theme: r }) => ({
+  datagridRoot: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
     container: "container / inline-size",
     background: "transparent",
-    borderRadius: r.vars.size.borderRadius.r1,
+    borderRadius: e.vars.size.borderRadius.r1,
     position: "relative",
-    gap: r.vars.size.baseSpacings.sp3,
+    gap: e.vars.size.baseSpacings.sp3,
     height: "100%",
     width: "100%",
     flex: 1,
@@ -22,47 +22,47 @@ const d = {
     "& .rdg .MuiCheckbox-root": {
       overflow: "visible",
       padding: 0,
-      ...r.generalSettings.isMobile ? {
-        width: r.vars.size.mobile.small.action,
-        height: r.vars.size.mobile.small.action
+      ...e.generalSettings.isMobile ? {
+        width: e.vars.size.mobile.small.action,
+        height: e.vars.size.mobile.small.action
       } : {
-        width: r.vars.size.desktop.small.action,
-        height: r.vars.size.desktop.small.action
+        width: e.vars.size.desktop.small.action,
+        height: e.vars.size.desktop.small.action
       },
       display: "inline-flex",
       justifyContent: "center",
       alignItems: "center",
-      borderRadius: r.size.borderRadius.r1,
+      borderRadius: e.size.borderRadius.r1,
       "&:hover": {
-        backgroundColor: r.vars.palette.default.hoverOpacity
+        backgroundColor: e.vars.palette.default.hoverOpacity
       },
       "&:active": {
-        backgroundColor: r.vars.palette.default.activeOpacity
+        backgroundColor: e.vars.palette.default.activeOpacity
       },
       "&.Mui-checked": {
         "&:hover": {
-          backgroundColor: r.vars.palette.primary.hoverOpacity,
+          backgroundColor: e.vars.palette.primary.hoverOpacity,
           "& ..": {
-            backgroundColor: r.vars.palette.primary.hover
+            backgroundColor: e.vars.palette.primary.hover
           }
         },
         "&:active": {
-          backgroundColor: r.vars.palette.primary.activeOpacity,
+          backgroundColor: e.vars.palette.primary.activeOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: r.vars.palette.primary.active
+            backgroundColor: e.vars.palette.primary.active
           }
         }
       },
       "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${r.vars.palette.primary.focusVisible}`
+        outline: `1px solid ${e.vars.palette.primary.focusVisible}`
       },
       "& > svg": {
-        color: r.vars.palette.text.secondary
+        color: e.vars.palette.text.secondary
       }
     },
     "&.M4LDataGrid-xs": {
       "& .M4LDataGrid-actions": {
-        height: r.vars.size.baseSpacings.sp11,
+        height: e.vars.size.baseSpacings.sp11,
         "& .M4LPager-labelRowsPerPageContainer": {
           "& .M4LTypography-root": {
             display: "none"
@@ -74,33 +74,33 @@ const d = {
       }
     },
     "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
-      top: `${r.vars.size.baseSpacings.sp0} !important`
+      top: `${e.vars.size.baseSpacings.sp0} !important`
     },
     "& .rdg-cell .M4lclassCssSpecificity": {
       fontWeight: 400
     },
     '& [role="row"]:last-of-type': {
       "& .rdg-cell": {
-        boxShadow: `inset 0 0.5px 0 0 ${r.vars.palette?.border.secondary}, inset 0 -0.5px 0 0 ${r.vars.palette?.border.secondary}`
+        boxShadow: `inset 0 0.5px 0 0 ${e.vars.palette?.border.secondary}, inset 0 -0.5px 0 0 ${e.vars.palette?.border.secondary}`
       }
     }
   }),
-  customHeader: ({ ownerState: r }) => ({
-    display: r?.visibleCustomHeader ? "block" : "none"
+  customHeader: ({ ownerState: e }) => ({
+    display: e?.visibleCustomHeader ? "block" : "none"
   }),
   /**
    * Estilos del contenedor de las acciones
    */
-  actionsRoot: ({ theme: r }) => ({
+  actionsRoot: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     background: "transparent",
-    borderRadius: r.vars.size.borderRadius.r1,
-    gap: r.vars.size.baseSpacings.sp1,
+    borderRadius: e.vars.size.borderRadius.r1,
+    gap: e.vars.size.baseSpacings.sp1,
     height: "fit-content",
-    ...r.generalSettings.isMobile && {
-      minHeight: r.vars.size.baseSpacings.sp10
+    ...e.generalSettings.isMobile && {
+      minHeight: e.vars.size.baseSpacings.sp10
     },
     "& .mobile-menu-actions": {
       marginRight: "auto"
@@ -109,83 +109,114 @@ const d = {
   /**
    * Estilos para el contenedor de las acciones ezquierdo
    */
-  containerLeftActions: ({ theme: r }) => ({
+  containerLeftActions: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "row",
-    gap: r.vars.size.baseSpacings["sp0-5"],
+    gap: e.vars.size.baseSpacings["sp0-5"],
     alignItems: "center",
-    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
+    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
   }),
   /**
    * Estilos para el contenedor de las acciones derecho
    */
-  containerRightActions: ({ theme: r }) => ({
+  containerRightActions: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "row",
-    gap: r.vars.size.baseSpacings["sp0-5"],
+    gap: e.vars.size.baseSpacings["sp0-5"],
     alignItems: "center"
   }),
   /**
    *Estilos para el contenedor de la paginación y filas por página
    */
-  controlNavigate: ({ theme: r }) => ({
+  controlNavigate: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    gap: r.vars.size.baseSpacings.sp2,
+    gap: e.vars.size.baseSpacings.sp2,
     flexWrap: "wrap",
     height: "fit-content"
   }),
+  /**
+   * Status bar of the infinite scroll mode, in the place of the pager:
+   * rows counter on the left, loading or error message on the right.
+   */
+  infiniteScrollStatusRoot: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    gap: e.vars.size.baseSpacings.sp2,
+    flexWrap: "wrap",
+    height: "fit-content",
+    // These are the same container rules as the pager root (Pager.styles.ts), so the status bar
+    // takes the same space as the pager it replaces.
+    width: "100%",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    flexShrink: 0,
+    "& .M4LTypography-skeleton": {
+      height: e.vars.size.baseSpacings.sp8
+    }
+  }),
+  /**
+   * Loading or error message of the infinite scroll status bar.
+   */
+  infiniteScrollStatusMessage: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: e.vars.size.baseSpacings.sp2,
+    marginLeft: "auto"
+  }),
   /**
    * container de los botones de acciones
    */
-  actionsConfigContainer: ({ theme: r }) => ({
+  actionsConfigContainer: ({ theme: e }) => ({
     width: "100%",
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-    gap: r.vars.size.baseSpacings.sp3,
+    gap: e.vars.size.baseSpacings.sp3,
     alignItems: "center"
   }),
   /**
    * Estilos para el contenedor principal de RowsCount
    */
-  rowsCountRoot: ({ theme: r }) => ({
+  rowsCountRoot: ({ theme: e }) => ({
     alignItems: "center",
     display: "flex",
-    gap: r.vars.size.baseSpacings.sp2
+    gap: e.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para el label de RowsCount
    */
-  rowsCountLabel: ({ theme: r, ownerState: e }) => ({
-    color: r.vars.palette.text.primary,
+  rowsCountLabel: ({ theme: e, ownerState: r }) => ({
+    color: e.vars.palette.text.primary,
     fontWeight: 400,
     height: "100%",
-    lineHeight: r.vars.size.baseSpacings.sp4,
+    lineHeight: e.vars.size.baseSpacings.sp4,
     fontSize: i(
-      r.generalSettings.isMobile,
-      e?.size || "medium",
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "bodyStandard"
     ).fontSize
   }),
   /**
    * Estilos para el valor de RowsCount
    */
-  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,
+  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,
     paddingRight: "6px",
-    paddingTop: r.vars.size.baseSpacings.sp1,
+    paddingTop: e.vars.size.baseSpacings.sp1,
     fontSize: i(
-      r.generalSettings.isMobile,
-      e?.size || "medium",
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "bodyStandard"
     ).fontSize
   }),
@@ -193,8 +224,8 @@ const d = {
    * Estilos para el contenedor de las columnas
    * de la tabla del modal de configuración de columnas.
    */
-  columnsConfigWrapper: ({ theme: r }) => ({
-    color: r.vars.palette.text.primary,
+  columnsConfigWrapper: ({ theme: e }) => ({
+    color: e.vars.palette.text.primary,
     position: "relative",
     display: "flex",
     flexDirection: "column",
@@ -206,11 +237,11 @@ const d = {
    * de selección de las columnas en
    * el modal de configuración de columnas.
    */
-  columnsConfigSelColumns: ({ theme: r, ownerState: e }) => ({
-    color: r.vars.palette.text.secondary,
+  columnsConfigSelColumns: ({ theme: e, ownerState: r }) => ({
+    color: e.vars.palette.text.secondary,
     ...i(
-      r.generalSettings.isMobile,
-      e?.size || "medium",
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "bodyDens"
     )
   }),
@@ -218,21 +249,21 @@ const d = {
    * Estilos para el contenedor de la tabla
    * en el modal de configuración de columnas.
    */
-  columnsConfigDataGrid: ({ theme: r }) => ({
+  columnsConfigDataGrid: ({ theme: e }) => ({
     position: "relative",
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
     overflow: "auto",
-    gap: r.vars.size.baseSpacings.sp3
+    gap: e.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para el contenedor de los botones
    * de acción en el modal de configuración de columnas.
    */
-  columnsConfigActios: ({ theme: r }) => ({
-    paddingTop: r.vars.size.baseSpacings.sp4,
-    paddingBottom: r.vars.size.baseSpacings.sp2,
+  columnsConfigActios: ({ theme: e }) => ({
+    paddingTop: e.vars.size.baseSpacings.sp4,
+    paddingBottom: e.vars.size.baseSpacings.sp2,
     display: "flex",
     flexDirection: "row"
   }),
@@ -241,26 +272,26 @@ const d = {
    * Estilos el el input editor del DataGrid.
    * *****************************************
    */
-  inputTexEditor: ({ theme: r, ownerState: e }) => ({
+  inputTexEditor: ({ theme: e, ownerState: r }) => ({
     appearance: "none",
     boxSizing: "border-box",
     inlineSize: "100%",
     blockSize: "100%",
-    paddingBlock: r.vars.size.baseSpacings.sp0,
+    paddingBlock: e.vars.size.baseSpacings.sp0,
     verticalAlign: "top",
     textAlign: "right",
     fontFamily: "inherit",
     background: "transparent",
-    border: `1px solid ${r.vars.palette?.border.secondary}`,
-    borderRadius: r.vars.size.borderRadius["r1-5"],
-    ...o(r, e?.size || "medium", "case", (a) => ({
+    border: `1px solid ${e.vars.palette?.border.secondary}`,
+    borderRadius: e.vars.size.borderRadius["r1-5"],
+    ...o(e, r?.size || "medium", "case", (a) => ({
       height: a
     })),
-    padding: r.vars.size.baseSpacings.sp1,
+    padding: e.vars.size.baseSpacings.sp1,
     outline: "none",
     "&:focus": {
       outline: "none",
-      border: `1px solid ${r.vars.palette?.border.secondary}`,
+      border: `1px solid ${e.vars.palette?.border.secondary}`,
       boxShadow: "none"
     },
     "&:hover": {
@@ -279,61 +310,61 @@ const d = {
    * Estilos para el contenedor principal
    * del componente Table.
    */
-  tableContaniner: ({ theme: r }) => ({
+  tableContaniner: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
     position: "relative",
     flexGrow: 1,
     overflow: "hidden",
-    borderRadius: r.vars.size.baseSpacings.sp1,
+    borderRadius: e.vars.size.baseSpacings.sp1,
     border: "none",
-    boxshadow: r.customShadows?.z2,
-    background: r.vars.palette.background.default,
+    boxshadow: e.customShadows?.z2,
+    background: e.vars.palette.background.default,
     "@container main (max-width: 600px)": {
-      top: r.vars.size.baseSpacings.sp11
+      top: e.vars.size.baseSpacings.sp11
     }
   }),
   /**
    * Estilos para el contenedor del dataGrid
    */
-  tableWrapperDataGrid: ({ theme: r, ownerState: e }) => ({
+  tableWrapperDataGrid: ({ theme: e, ownerState: r }) => ({
     position: "relative",
     height: "100%",
     overflow: "hidden",
-    borderRadius: r.vars.size.borderRadius.r2,
-    border: r.vars.size.borderStroke.container,
-    borderColor: r.vars.palette?.border.secondary,
+    borderRadius: e.vars.size.borderRadius.r2,
+    border: e.vars.size.borderStroke.container,
+    borderColor: e.vars.palette?.border.secondary,
     "& .rdg ": {
       scrollBehavior: "smooth",
       display: "grid",
       contain: "content",
       boxSizing: "border-box",
       border: "none",
-      background: r.vars.palette.background.default,
-      gridColumnGap: r.vars.size.baseSpacings.sp0,
-      gridRowGap: r.vars.size.baseSpacings.sp0,
+      background: e.vars.palette.background.default,
+      gridColumnGap: e.vars.size.baseSpacings.sp0,
+      gridRowGap: e.vars.size.baseSpacings.sp0,
       userSelect: "initial",
       height: "100%",
       contentVisibility: "unset",
       overflow: "auto",
-      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,
+      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": t(
-        r.colorSchemes.finalTheme.palette.primary.enabled,
-        r.colorSchemes.finalTheme.palette.action.selectedOpacity
+        e.colorSchemes.finalTheme.palette.primary.enabled,
+        e.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 ${r.vars.palette?.border.secondary}`
+        boxShadow: `inset 0 0.5px 0 0 ${e.vars.palette?.border.secondary}`
       }
     },
     "&.MeasuringCell": {
@@ -350,19 +381,19 @@ const d = {
       display: "contents"
     },
     '& [role="columnheader"]': {
-      paddingTop: r.vars.size.baseSpacings.sp2,
-      paddingBottom: r.vars.size.baseSpacings.sp2,
+      paddingTop: e.vars.size.baseSpacings.sp2,
+      paddingBottom: e.vars.size.baseSpacings.sp2,
       "& .MuiInputBase-input": {
         ...i(
-          r.generalSettings.isMobile,
-          e?.size || "medium",
+          e.generalSettings.isMobile,
+          r?.size || "medium",
           "bodyStandard"
         )
       }
     },
     '& [role="grid"]': {
       '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
-        borderTopRightRadius: r.vars.size.baseSpacings.sp3
+        borderTopRightRadius: e.vars.size.baseSpacings.sp3
       },
       '& [aria-rowindex="2"].rdg-row .rdg-cell': {
         boxShadow: "unset"
@@ -371,28 +402,28 @@ const d = {
     "& .rdg-row": {
       display: "contents",
       '&[aria-selected="true"]': {
-        backgroundColor: r.vars.palette.primary.toneOpacity,
+        backgroundColor: e.vars.palette.primary.toneOpacity,
         "&:hover": {
-          backgroundColor: r.vars.palette.primary.toneOpacity
+          backgroundColor: e.vars.palette.primary.toneOpacity
         }
       },
       "& .rdg-cell": {
-        backgroundColor: r.vars.palette.background.default
+        backgroundColor: e.vars.palette.background.default
       },
       '&[aria-selected="false"] .rdg-cell': {
-        backgroundColor: r.vars.palette.background.default
+        backgroundColor: e.vars.palette.background.default
       },
       "&:nth-of-type(odd)": {
         "& .rdg-cell": {
-          backgroundColor: r.vars.palette.background.default
+          backgroundColor: e.vars.palette.background.default
         }
       },
       '&[aria-selected="true"] .rdg-cell': {
-        backgroundColor: r.vars.palette.primary?.toneOpacity
+        backgroundColor: e.vars.palette.primary?.toneOpacity
       },
       "&:hover": {
         "& .rdg-cell": {
-          backgroundColor: `${r.vars.palette.default.toneOpacity} !important`,
+          backgroundColor: `${e.vars.palette.default.toneOpacity} !important`,
           transition: "background-color 0.1s linear"
         }
       },
@@ -402,7 +433,7 @@ const d = {
       overflow: "clip",
       position: "sticky",
       outline: "none",
-      color: r.vars.palette.text.primary,
+      color: e.vars.palette.text.primary,
       paddingBlock: 0,
       paddingInline: "8px",
       borderInlineEnd: "1px solid var(--rdg-border-color)",
@@ -413,8 +444,8 @@ const d = {
       whiteSpace: "nowrap",
       textOverflow: "ellipsis",
       ...i(
-        r.generalSettings.isMobile,
-        e?.size || "medium",
+        e.generalSettings.isMobile,
+        r?.size || "medium",
         "bodyStandard"
       ),
       lineHeight: "var(--rdg-row-height)!important",
@@ -425,25 +456,25 @@ const d = {
       },
       "& .checkbox-checked": {
         "& .M4LIcon-icon": {
-          backgroundColor: r.vars.palette.primary.enabled
+          backgroundColor: e.vars.palette.primary.enabled
         }
       },
       "& .checkbox-unChecked": {
         "& .M4LIcon-icon": {
-          backgroundColor: r.vars.palette.text.primary
+          backgroundColor: e.vars.palette.text.primary
         }
       },
       "& .rdg-text-editor": {
         textAlign: "inherit",
-        color: r.vars.palette.text.secondary,
-        padding: `${r.vars.size.baseSpacings.sp0} ${r.vars.size.baseSpacings.sp2}`,
-        border: r.vars.size.baseSpacings.sp0,
+        color: e.vars.palette.text.secondary,
+        padding: `${e.vars.size.baseSpacings.sp0} ${e.vars.size.baseSpacings.sp2}`,
+        border: e.vars.size.baseSpacings.sp0,
         borderTop: "0.5px solid",
-        borderBottom: r.vars.size.borderStroke.container,
+        borderBottom: e.vars.size.borderStroke.container,
         borderLeft: "0.5px solid",
         borderRight: "0.5px solid",
-        borderColor: `${r.vars.palette?.border.disabled} !important`,
-        ...r.colorSchemes.finalTheme.typography.body
+        borderColor: `${e.vars.palette?.border.disabled} !important`,
+        ...e.colorSchemes.finalTheme.typography.body
       },
       "&:has(> .M4LRadio-root)": {
         overflow: "visible",
@@ -471,9 +502,9 @@ const d = {
       },
       "&:after": {
         content: '""',
-        borderRight: `${r.vars.size.baseSpacings.sp0} solid ${r.vars.palette.divider}`,
+        borderRight: `${e.vars.size.baseSpacings.sp0} solid ${e.vars.palette.divider}`,
         position: "absolute",
-        right: r.vars.size.baseSpacings.sp0,
+        right: e.vars.size.baseSpacings.sp0,
         height: "100%"
       },
       "& .m4l_icon": {
@@ -484,7 +515,7 @@ const d = {
         top: 0,
         zIndex: 2,
         "&:has(> .MuiCheckbox-root)": {
-          borderTopLeftRadius: r.vars.size.baseSpacings.sp2,
+          borderTopLeftRadius: e.vars.size.baseSpacings.sp2,
           overflow: "visible",
           display: "flex",
           alignItems: "center",
@@ -493,36 +524,36 @@ const d = {
       }
     },
     '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
-      ...r.colorSchemes.finalTheme.typography.bodyDens,
+      ...e.colorSchemes.finalTheme.typography.bodyDens,
       width: "100%",
       display: "-webkit-box !important",
       WebkitBoxOrient: "vertical !important",
-      WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? "1 !important" : e?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
+      WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? "1 !important" : r?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
       overflow: "hidden !important",
       textOverflow: "ellipsis !important",
       wordBreak: "break-word !important",
       whiteSpace: "normal !important",
       ...i(
-        r.generalSettings.isMobile,
-        e?.size || "medium",
+        e.generalSettings.isMobile,
+        r?.size || "medium",
         "bodyDens"
       ),
       lineHeight: "var(--rdg-summary-row-height)!important",
-      color: `${r.vars.palette.text.secondary}`
+      color: `${e.vars.palette.text.secondary}`
     },
     '& .rdg-cell:not([role="columnheader"]):not(:has(> .MuiCheckbox-root))': {
       display: "-webkit-box !important",
       WebkitBoxOrient: "vertical !important",
-      WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? "1 !important" : e?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
+      WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? "1 !important" : r?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
       overflow: "hidden !important",
       textOverflow: "ellipsis !important",
       wordBreak: "break-word !important",
       whiteSpace: "normal !important",
-      lineHeight: e?.currentRowHeightVariant === "compact" ? `${e?.currentRowHeight}px !important` : e?.currentRowHeightVariant === "confortable" ? `${(e?.currentRowHeight ?? 48) / 3}px !important` : `${(e?.currentRowHeight ?? 40) / 2}px !important`
+      lineHeight: r?.currentRowHeightVariant === "compact" ? `${r?.currentRowHeight}px !important` : r?.currentRowHeightVariant === "confortable" ? `${(r?.currentRowHeight ?? 48) / 3}px !important` : `${(r?.currentRowHeight ?? 40) / 2}px !important`
     },
     '& .rdg-cell[role="columnheader"].filter-cell': {
       "& .M4LDataGrid-draggableHeaderRoot": {
-        gap: r.vars.size.baseSpacings.sp3,
+        gap: e.vars.size.baseSpacings.sp3,
         "& .rdg-header-sort-cell": {
           maxHeight: "min-content"
         },
@@ -572,7 +603,7 @@ const d = {
     },
     '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
       textAlign: "right",
-      paddingRight: r.vars.size.baseSpacings.sp3
+      paddingRight: e.vars.size.baseSpacings.sp3
     },
     "& .rdg-row .rdg-cell-frozen-last:after": {
       borderRight: "0px solid transparent"
@@ -589,11 +620,11 @@ const d = {
     },
     "& .rdg-row :last-child:after": {
       borderRight: "0px solid",
-      borderColor: r.vars.palette.background.surface
+      borderColor: e.vars.palette.background.surface
     },
     "& .rdg-header-row": {
       display: "contents",
-      backgroundColor: r.vars.palette.background.base,
+      backgroundColor: e.vars.palette.background.base,
       fontWeight: "bold",
       "& > .rdg-cell": {
         zIndex: 2,
@@ -606,29 +637,29 @@ const d = {
     "& .rdg-header-row .rdg-cell": {
       gridTemplateColumns: "auto",
       boxShadow: "unset!important",
-      borderBottom: r.vars.size.borderStroke.container,
-      borderColor: `${r.vars.palette?.background.surface}!important`,
+      borderBottom: e.vars.size.borderStroke.container,
+      borderColor: `${e.vars.palette?.background.surface}!important`,
       cursor: "pointer",
       "&:hover": {
-        boxShadow: `inset 1px 0 0 0 ${r.vars.palette?.border.default}, inset -1px 0 0 0 ${r.vars.palette?.border.default}!important `
+        boxShadow: `inset 1px 0 0 0 ${e.vars.palette?.border.default}, inset -1px 0 0 0 ${e.vars.palette?.border.default}!important `
       },
       "&[data-resize]": {
         touchAction: "none"
       },
       '& [draggable="true"]': {
-        fontSize: r.typography.body
+        fontSize: e.typography.body
       },
       "&.rdg-cell-frozen-last": {
-        borderColor: r.vars.palette.background.default,
+        borderColor: e.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: r.vars.size.baseSpacings.sp2,
+          right: e.vars.size.baseSpacings.sp2,
           "& .rdg-sort-arrow": {
-            width: r.vars.size.baseSpacings.sp2
+            width: e.vars.size.baseSpacings.sp2
           }
         }
       },
@@ -643,106 +674,106 @@ const d = {
       inlineSize: "10px"
     },
     "& .rdg-header-row :last-child.rdg-cell": {
-      borderTopRightRadius: r.vars.size.baseSpacings.sp0,
+      borderTopRightRadius: e.vars.size.baseSpacings.sp0,
       "&:after": {
-        borderRight: `${r.vars.size.baseSpacings.sp0} solid transparent`
+        borderRight: `${e.vars.size.baseSpacings.sp0} solid transparent`
       }
     },
     "& .filter_cell_div": {
-      paddingLeft: r.vars.size.baseSpacings.sp2,
-      paddingRight: r.vars.size.baseSpacings.sp2
+      paddingLeft: e.vars.size.baseSpacings.sp2,
+      paddingRight: e.vars.size.baseSpacings.sp2
     },
     "& .rdg-header-sort-cell": {
       width: "100%",
       flexGrow: "1",
       alignItems: "center",
-      color: r.vars.palette.text.primary,
+      color: e.vars.palette.text.primary,
       height: "100%"
     }
   }),
   /**
    * Estilos para el wrapper del checkbox en las celdas.
    */
-  checkboxCellWrapper: ({ theme: r }) => ({
+  checkboxCellWrapper: ({ theme: e }) => ({
     "& .checkbox-checked": {
       "& .M4LIcon-icon": {
-        backgroundColor: r.vars.palette.primary.enabled
+        backgroundColor: e.vars.palette.primary.enabled
       }
     },
     "& .checkbox-unChecked": {
       "& .M4LIcon-icon": {
-        backgroundColor: r.vars.palette.text.primary
+        backgroundColor: e.vars.palette.text.primary
       }
     },
     "& .MuiCheckbox-root": {
       overflow: "visible",
       padding: 0,
-      ...r.generalSettings.isMobile ? {
-        width: r.vars.size.mobile.small.action,
-        height: r.vars.size.mobile.small.action
+      ...e.generalSettings.isMobile ? {
+        width: e.vars.size.mobile.small.action,
+        height: e.vars.size.mobile.small.action
       } : {
-        width: r.vars.size.desktop.small.action,
-        height: r.vars.size.desktop.small.action
+        width: e.vars.size.desktop.small.action,
+        height: e.vars.size.desktop.small.action
       },
       display: "inline-flex",
       justifyContent: "center",
       alignItems: "center",
-      borderRadius: r.size.borderRadius.r1,
+      borderRadius: e.size.borderRadius.r1,
       "&:hover": {
-        backgroundColor: r.vars.palette.default.hoverOpacity
+        backgroundColor: e.vars.palette.default.hoverOpacity
       },
       "&:active": {
-        backgroundColor: r.vars.palette.default.activeOpacity
+        backgroundColor: e.vars.palette.default.activeOpacity
       },
       "&.Mui-checked": {
         "&:hover": {
-          backgroundColor: r.vars.palette.primary.hoverOpacity,
+          backgroundColor: e.vars.palette.primary.hoverOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: r.vars.palette.primary.hover
+            backgroundColor: e.vars.palette.primary.hover
           }
         },
         "&:active": {
-          backgroundColor: r.vars.palette.primary.activeOpacity,
+          backgroundColor: e.vars.palette.primary.activeOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: r.vars.palette.primary.active
+            backgroundColor: e.vars.palette.primary.active
           }
         }
       },
       "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${r.vars.palette.primary.focusVisible}`
+        outline: `1px solid ${e.vars.palette.primary.focusVisible}`
       },
       "& > svg": {
-        color: r.vars.palette.text.secondary
+        color: e.vars.palette.text.secondary
       }
     }
   }),
   /**
    * Estilos para el contenedor de toggle de vista cards.
    */
-  containerToggleCards: ({ theme: r }) => ({
+  containerToggleCards: ({ theme: e }) => ({
     display: "grid",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    gap: r.vars.size.baseSpacings.sp3
+    gap: e.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para el botón de toggle de tarjeta.
    */
-  cardToggleCardButton: ({ theme: r, ownerState: e }) => ({
+  cardToggleCardButton: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     cursor: "pointer",
-    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
+    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
   }),
   /**
    * Estilos para el texto del botón de toggle.
    */
-  textToggleCardButton: ({ theme: r, ownerState: e }) => ({
+  textToggleCardButton: ({ theme: e, ownerState: r }) => ({
     "&.M4LTypography-root": {
-      color: e?.isActive ? r.vars.palette.primary.semanticText : r.vars.palette.text.secondary,
+      color: r?.isActive ? e.vars.palette.primary.semanticText : e.vars.palette.text.secondary,
       cursor: "pointer"
     }
   }),
@@ -783,7 +814,7 @@ const d = {
    * 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 }) => ({
+  list: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "start",
@@ -791,49 +822,49 @@ const d = {
     minWidth: 0,
     maxWidth: "none",
     cursor: "pointer",
-    padding: r.vars.size.baseSpacings["sp2-5"],
+    padding: e.vars.size.baseSpacings["sp2-5"],
     gap: "0 !important",
-    borderRadius: r.vars.size.borderRadius.r0,
-    backgroundColor: r.vars.palette.background.default,
+    borderRadius: e.vars.size.borderRadius.r0,
+    backgroundColor: e.vars.palette.background.default,
     overflow: "hidden",
     transition: "all 0.2s ease-in-out",
-    borderBottom: `1px solid ${r.vars.palette.border.disabled} !important`,
+    borderBottom: `1px solid ${e.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`
+      borderColor: `${e.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
+      borderLeft: `2px solid ${e.vars.palette.border.secondary} !important`,
+      backgroundColor: e.vars.palette.background.default,
+      boxShadow: e.vars.customShadows.z1
     },
     "&:active": {
-      backgroundColor: r.vars.palette.background.default
+      backgroundColor: e.vars.palette.background.default
     },
-    ...e?.checked && !e?.selected ? {
-      borderLeft: `2px solid ${r.vars.palette.primary.activeOpacity} !important`,
+    ...r?.checked && !r?.selected ? {
+      borderLeft: `2px solid ${e.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`
+        borderLeft: `2px solid ${e.vars.palette.primary.activeOpacity} !important`
       }
     } : {},
-    ...e?.selected ? {
-      borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`,
+    ...r?.selected ? {
+      borderLeft: `2px solid ${e.vars.palette.primary.selected} !important`,
       "&:hover": {
-        borderLeft: `2px solid ${r.vars.palette.primary.selected} !important`
+        borderLeft: `2px solid ${e.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`
+        borderLeft: `2px solid ${e.vars.palette.primary.selected} !important`
       }
     } : {}
   }),
@@ -841,30 +872,30 @@ const d = {
    * 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 }) => ({
+  listRowVirtualizedItem: ({ ownerState: e }) => ({
     position: "absolute",
     top: 0,
     left: 0,
     width: "100%",
-    transform: `translateY(${r.offsetTop ?? 0}px)`
+    transform: `translateY(${e.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 }) => ({
+  listVirtualContainer: ({ ownerState: e }) => ({
     width: "100%",
     position: "relative",
-    height: `${r.totalSize ?? 0}px`
+    height: `${e.totalSize ?? 0}px`
   }),
   /**
    * Container that holds the total virtualized height for TanStack Virtual in CardsView.
    * This element defines the scrollable area; its height equals the sum of all card heights.
    */
-  cardsVirtualContainer: ({ ownerState: r }) => ({
+  cardsVirtualContainer: ({ ownerState: e }) => ({
     width: "100%",
     position: "relative",
-    height: `${r.totalSize ?? 0}px`
+    height: `${e.totalSize ?? 0}px`
   }),
   /**
    * Wrapper for each virtualized card row (receives style from TanStack Virtual).
@@ -873,40 +904,40 @@ const d = {
    * (matching ContainerFlow) and are configurable via `cardsViewConfig.gap`, which
    * CardsView forwards here AND to the gap-aware column math in `useCardsPerRow`.
    */
-  cardsVirtualRowItem: ({ ownerState: r }) => ({
+  cardsVirtualRowItem: ({ ownerState: e }) => ({
     position: "absolute",
     top: 0,
     left: 0,
     width: "100%",
-    transform: `translateY(${r.offsetTop ?? 0}px)`,
+    transform: `translateY(${e.offsetTop ?? 0}px)`,
     display: "grid",
-    gridTemplateColumns: `repeat(${r.cardsPerRow ?? 1}, 1fr)`,
-    gap: `${r.gap ?? 16}px`,
-    paddingBottom: `${r.gap ?? 16}px`
+    gridTemplateColumns: `repeat(${e.cardsPerRow ?? 1}, 1fr)`,
+    gap: `${e.gap ?? 16}px`,
+    paddingBottom: `${e.gap ?? 16}px`
   }),
   /**
    * Estilos para cada tarjeta individual en CardsView.
    */
-  card: ({ theme: r, ownerState: e }) => ({
+  card: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "start",
-    ...e?.listCard ? { width: "100%", minWidth: 0, maxWidth: "none" } : { minWidth: "280px", maxWidth: "580px" },
+    ...r?.listCard ? { width: "100%", minWidth: 0, maxWidth: "none" } : { minWidth: "280px", maxWidth: "580px" },
     cursor: "pointer",
     // Defaults to sp2-5 (10px); configurable per grid via `cardsViewConfig.padding`
     // (`!== undefined` so an explicit 0 lets a custom render own its full surface).
-    padding: e?.padding !== void 0 ? `${e.padding}px` : r.vars.size.baseSpacings["sp2-5"],
+    padding: r?.padding !== void 0 ? `${r.padding}px` : e.vars.size.baseSpacings["sp2-5"],
     // Configurable via `cardsViewConfig.borderRadius`; when unset the DS Card
     // default (borderRadius.r2 = 8px) shows through.
-    ...e?.borderRadius !== void 0 && {
-      borderRadius: `${e.borderRadius}px`
+    ...r?.borderRadius !== void 0 && {
+      borderRadius: `${r.borderRadius}px`
     },
     gap: "0 !important",
-    ...e?.checked && !e?.selected ? {
-      borderColor: r.vars.palette.primary.activeOpacity
+    ...r?.checked && !r?.selected ? {
+      borderColor: e.vars.palette.primary.activeOpacity
     } : {},
-    ...e?.selected ? {
-      borderColor: r.vars.palette.primary.selected
+    ...r?.selected ? {
+      borderColor: e.vars.palette.primary.selected
     } : {}
   }),
   cardContentWrapper: () => ({
@@ -915,13 +946,13 @@ const d = {
   /**
    * Estilos para el header de la tarjeta.
    */
-  cardHeader: ({ theme: r, ownerState: e }) => ({
+  cardHeader: ({ theme: e, ownerState: r }) => ({
     display: "flex",
-    justifyContent: e?.hasCheckedRows ? "space-between" : "flex-end",
+    justifyContent: r?.hasCheckedRows ? "space-between" : "flex-end",
     alignItems: "center",
     width: "100%",
     height: "24px",
-    gap: r.vars.size.baseSpacings.sp2
+    gap: e.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para la sección izquierda del header de tarjeta
@@ -933,49 +964,49 @@ const d = {
   /**
    * Estilos para la sección derecha del header de tarjeta.
    */
-  cardHeaderRight: ({ theme: r }) => ({
+  cardHeaderRight: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: r.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para el contenido de la tarjeta.
    */
-  cardContent: ({ theme: r }) => ({
+  cardContent: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: r.vars.size.baseSpacings.sp2,
-    padding: r.vars.size.density.compact
+    gap: e.vars.size.baseSpacings.sp2,
+    padding: e.vars.size.density.compact
   }),
   /**
    * Estilos para el contenedor de label y valor de columna.
    */
-  containerLabelValueColumn: ({ theme: r, ownerState: e }) => ({
+  containerLabelValueColumn: ({ theme: e, ownerState: r }) => ({
     display: "flex",
-    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"
+    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"
   }),
   /**
    * Estilos para el wrapper del contenido de columna.
    */
-  contentWrapperColumn: ({ theme: r, ownerState: e }) => ({
-    flex: e?.hasActions ? 1 : "none",
+  contentWrapperColumn: ({ theme: e, ownerState: r }) => ({
+    flex: r?.hasActions ? 1 : "none",
     display: "flex",
     flexDirection: "column",
     alignItems: "start",
-    gap: r.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para el contenedor de detalle de tarjeta.
    */
-  cardDetailContainer: ({ theme: r }) => ({
+  cardDetailContainer: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: r.vars.size.baseSpacings.sp3,
-    padding: r.vars.size.baseSpacings.sp3,
+    gap: e.vars.size.baseSpacings.sp3,
+    padding: e.vars.size.baseSpacings.sp3,
     height: "100%",
     overflow: "auto"
   }),
@@ -990,10 +1021,10 @@ const d = {
   /**
    * Estilos para el wrapper del editor de celda.
    */
-  editorCellWrapper: ({ theme: r, ownerState: e }) => ({
+  editorCellWrapper: ({ theme: e, ownerState: r }) => ({
     overflow: "clip",
     outline: "none",
-    color: r.vars.palette.text.primary,
+    color: e.vars.palette.text.primary,
     paddingBlock: 0,
     alignContent: "center",
     backgroundColor: "inherit",
@@ -1003,11 +1034,11 @@ const d = {
     alignSelf: "stretch",
     boxSizing: "border-box",
     ...i(
-      r.generalSettings.isMobile,
-      e?.size || "medium",
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "bodyStandard"
     ),
-    ...o(r, e?.size || "medium", "base", (a) => ({
+    ...o(e, r?.size || "medium", "base", (a) => ({
       minHeight: a,
       height: 24,
       lineHeight: `${a} !important`
@@ -1015,22 +1046,22 @@ const d = {
     "& input": {
       width: "100%",
       textAlign: "inherit",
-      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"],
+      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"],
       outline: "none",
-      ...r.colorSchemes.finalTheme.typography.body,
-      ...o(r, e?.size || "medium", "case", (a) => ({
+      ...e.colorSchemes.finalTheme.typography.body,
+      ...o(e, r?.size || "medium", "case", (a) => ({
         height: a
       })),
       "&:focus": {
-        border: `1px solid ${r.vars.palette.border.secondary}`,
+        border: `1px solid ${e.vars.palette.border.secondary}`,
         outline: "none",
         boxShadow: "none"
       },
       "&:hover": {
-        border: `1px solid ${r.vars.palette.border.secondary}`,
+        border: `1px solid ${e.vars.palette.border.secondary}`,
         outline: "none"
       }
     }
@@ -1038,50 +1069,50 @@ const d = {
   /**
    * Placeholder editable
    */
-  editablePlaceholder: ({ theme: r }) => ({
+  editablePlaceholder: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: r.vars.size.baseSpacings.sp1
+    gap: e.vars.size.baseSpacings.sp1
   }),
   /**
    * EditLabel
    */
-  editLabel: ({ theme: r, ownerState: e }) => ({
+  editLabel: ({ theme: e, ownerState: r }) => ({
     width: "auto",
     opacity: 1,
     transition: "opacity 0.3s ease",
     ...i(
-      r.generalSettings.isMobile,
-      e?.size || "medium",
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "bodyStandard"
     )
   }),
   /**
    * Botón para mostrar el input en los editores (cards)
    */
-  iconButtonEdit: ({ theme: r }) => ({
+  iconButtonEdit: ({ theme: e }) => ({
     "& .M4LIcon-icon": {
-      backgroundColor: `${r.vars.palette.text.secondary} !important`
+      backgroundColor: `${e.vars.palette.text.secondary} !important`
     }
   }),
   /**
    * Estilos para el header de tarjeta personalizada.
    */
-  customCardHeader: ({ theme: r }) => ({
+  customCardHeader: ({ theme: e }) => ({
     display: "flex",
-    gap: r.vars.size.baseSpacings.sp4,
+    gap: e.vars.size.baseSpacings.sp4,
     alignItems: "center",
-    marginBottom: r.vars.size.baseSpacings.sp2
+    marginBottom: e.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para el avatar de tarjeta personalizada.
    */
-  customCardAvatar: ({ theme: r }) => ({
+  customCardAvatar: ({ theme: e }) => ({
     width: "32px",
     height: "32px",
-    borderRadius: r.vars.size.borderRadius.r3,
-    border: r.vars.size.borderStroke.container,
-    borderColor: r.vars.palette.primary.toneOpacity,
+    borderRadius: e.vars.size.borderRadius.r3,
+    border: e.vars.size.borderStroke.container,
+    borderColor: e.vars.palette.primary.toneOpacity,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -1090,39 +1121,39 @@ const d = {
   /**
    * Estilos para nombre y email en tarjeta personalizada.
    */
-  customCardNameEmail: ({ theme: r }) => ({
+  customCardNameEmail: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: r.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para campo con icono en tarjeta personalizada.
    */
-  customCardFieldWithIcon: ({ theme: r }) => ({
+  customCardFieldWithIcon: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: r.vars.size.baseSpacings.sp3
+    gap: e.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para contenido de campo en tarjeta personalizada.
    */
-  customCardFieldContent: ({ theme: r }) => ({
+  customCardFieldContent: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: r.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para contenedor de icono en tarjeta personalizada.
    */
-  customCardIconContainer: ({ theme: r }) => ({
+  customCardIconContainer: ({ theme: e }) => ({
     width: "24px",
     height: "24px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: r.vars.size.borderRadius.r2,
-    border: r.vars.size.borderStroke.container,
-    borderColor: r.vars.palette.primary.toneOpacity,
+    borderRadius: e.vars.size.borderRadius.r2,
+    border: e.vars.size.borderStroke.container,
+    borderColor: e.vars.palette.primary.toneOpacity,
     flexShrink: 0
   }),
   /**
@@ -1141,17 +1172,17 @@ const d = {
   /**
    * Estilos para el wrapper del input en cabeceras arrastrables
    */
-  draggableWrapperInputBase: ({ theme: r, ownerState: e }) => ({
+  draggableWrapperInputBase: ({ theme: e, ownerState: r }) => ({
     borderTop: "1px solid var(--rdg-border-color)",
     width: "100%",
     display: "flex",
     alignItems: "center",
-    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) => ({
+    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) => ({
       minHeight: a,
       height: a
     }))
@@ -1167,13 +1198,13 @@ const d = {
   /**
    * Estilos para el contenedor del skeleton de carga
    */
-  wrapperSkeleton: ({ theme: r, ownerState: e }) => ({
+  wrapperSkeleton: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     width: "100%",
     height: "100%",
     alignItems: "center",
     "& .MuiSkeleton-root": {
-      ...o(r, e?.size || "medium", "base", (a) => ({
+      ...o(e, r?.size || "medium", "base", (a) => ({
         minHeight: `${a}!important`,
         height: `${a}!important`
       }))
@@ -1192,20 +1223,20 @@ const d = {
   /**
    * Estilos para el contenedor de nombre de columna con icono
    */
-  nameColumnIcon: ({ theme: r }) => ({
+  nameColumnIcon: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: r.vars.size.baseSpacings.sp1,
+    gap: e.vars.size.baseSpacings.sp1,
     position: "relative",
     overflow: "visible"
   }),
   /**
    * Estilos para el nombre de columna con truncado de texto
    */
-  nameColumn: ({ ownerState: r }) => ({
+  nameColumn: ({ ownerState: e }) => ({
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
@@ -1215,10 +1246,10 @@ const d = {
   /**
    * Estilos para el contenedor de icono de columna
    */
-  iconColumn: ({ theme: r }) => ({
+  iconColumn: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: r.vars.size.baseSpacings.sp1
+    gap: e.vars.size.baseSpacings.sp1
   }),
   headerRenderClick: () => ({
     width: "fit-content"
@@ -1226,20 +1257,20 @@ const d = {
   /**
    * Estilos para la lista del menú de opciones
    */
-  menuList: ({ theme: r }) => ({
-    padding: r.vars.size.baseSpacings.sp3,
+  menuList: ({ theme: e }) => ({
+    padding: e.vars.size.baseSpacings.sp3,
     display: "flex",
     flexDirection: "column",
-    gap: r.vars.size.baseSpacings.sp1,
+    gap: e.vars.size.baseSpacings.sp1,
     "& > div": {
-      paddingLeft: r.vars.size.baseSpacings.sp4,
-      paddingRight: r.vars.size.baseSpacings.sp4
+      paddingLeft: e.vars.size.baseSpacings.sp4,
+      paddingRight: e.vars.size.baseSpacings.sp4
     }
   }),
   /**
    * Estilos para el botón de acciones del header
    */
-  buttonHeaderActions: ({ theme: r }) => ({
+  buttonHeaderActions: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -1254,18 +1285,18 @@ const d = {
       "& svg": {
         width: "8px",
         height: "8px",
-        color: r.vars.palette.chips.default.contained.backgroundColorTone
+        color: e.vars.palette.chips.default.contained.backgroundColorTone
       }
     }
   }),
   /**
    * Estilos para el formateador de iconos de columna
    */
-  columnIconFormatter: ({ theme: r }) => ({
+  columnIconFormatter: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: r.vars.size.baseSpacings.sp2,
+    gap: e.vars.size.baseSpacings.sp2,
     minWidth: "max-content",
     overflow: "visible",
     flexWrap: "nowrap"
@@ -1273,22 +1304,22 @@ const d = {
   /**
    * Estilos para el contenedor raíz del renderizador de celdas de grupo por defecto
    */
-  defaultRenderGroupCellRoot: ({ theme: r, ownerState: e }) => ({
+  defaultRenderGroupCellRoot: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     alignItems: "center",
-    gap: r.vars.size.baseSpacings.sp2,
+    gap: e.vars.size.baseSpacings.sp2,
     cursor: "pointer",
     width: "100%",
-    justifyContent: e?.align === "center" ? "center" : e?.align === "right" ? "flex-end" : "flex-start"
+    justifyContent: r?.align === "center" ? "center" : r?.align === "right" ? "flex-end" : "flex-start"
   }),
   /**
    * Estilos para el texto del renderizador de celdas de grupo por defecto
    */
-  defaultRenderGroupCellText: ({ ownerState: r }) => ({
+  defaultRenderGroupCellText: ({ ownerState: e }) => ({
     fontWeight: 600,
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
@@ -1301,7 +1332,7 @@ const d = {
    * manteniendo el comportamiento de truncado con ellipsis.
    * El color se recibe a través de ownerState.cellBackgroundColor
    */
-  cellBackgroundWrapper: ({ ownerState: r }) => ({
+  cellBackgroundWrapper: ({ ownerState: e }) => ({
     // Ocupar toda la celda con margin negativo
     margin: "-8px",
     padding: "8px",
@@ -1311,13 +1342,13 @@ const d = {
     // Mantener el comportamiento de truncado igual que las celdas
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: r?.currentRowHeightVariant === "compact" ? 1 : r?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
     whiteSpace: "normal",
     alignContent: "center",
-    ...r?.cellBackgroundColor ? { backgroundColor: r.cellBackgroundColor } : {}
+    ...e?.cellBackgroundColor ? { backgroundColor: e.cellBackgroundColor } : {}
   })
 };
 export {