@m4l/components 9.4.28 → 9.4.29-beta.1

package/components/datagrids/Datagrid.styles.js

@@ -1,20 +1,20 @@
-import { alpha } from "@mui/material";
-import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
-const dataGridStyles = {
+import { alpha as s } from "@mui/material";
+import { getTypographyStyles as i } from "../../utils/getTypographyStyles.js";
+import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
+const d = {
   /**
    * ***************************************************
    * Estilos para el contenedor principal del DataGrid.
    * ***************************************************
    */
-  datagridRoot: ({ theme }) => ({
+  datagridRoot: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
     container: "container / inline-size",
     background: "transparent",
-    borderRadius: theme.vars.size.borderRadius.r1,
+    borderRadius: e.vars.size.borderRadius.r1,
     position: "relative",
-    gap: theme.vars.size.baseSpacings.sp3,
+    gap: e.vars.size.baseSpacings.sp3,
     height: "100%",
     width: "100%",
     flex: 1,
@@ -22,47 +22,47 @@ const dataGridStyles = {
     "& .rdg .MuiCheckbox-root": {
       overflow: "visible",
       padding: 0,
-      ...theme.generalSettings.isMobile ? {
-        width: theme.vars.size.mobile.small.action,
-        height: theme.vars.size.mobile.small.action
+      ...e.generalSettings.isMobile ? {
+        width: e.vars.size.mobile.small.action,
+        height: e.vars.size.mobile.small.action
       } : {
-        width: theme.vars.size.desktop.small.action,
-        height: theme.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: theme.size.borderRadius.r1,
+      borderRadius: e.size.borderRadius.r1,
       "&:hover": {
-        backgroundColor: theme.vars.palette.default.hoverOpacity
+        backgroundColor: e.vars.palette.default.hoverOpacity
       },
       "&:active": {
-        backgroundColor: theme.vars.palette.default.activeOpacity
+        backgroundColor: e.vars.palette.default.activeOpacity
       },
       "&.Mui-checked": {
         "&:hover": {
-          backgroundColor: theme.vars.palette.primary.hoverOpacity,
+          backgroundColor: e.vars.palette.primary.hoverOpacity,
           "& ..": {
-            backgroundColor: theme.vars.palette.primary.hover
+            backgroundColor: e.vars.palette.primary.hover
           }
         },
         "&:active": {
-          backgroundColor: theme.vars.palette.primary.activeOpacity,
+          backgroundColor: e.vars.palette.primary.activeOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.active
+            backgroundColor: e.vars.palette.primary.active
           }
         }
       },
       "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
+        outline: `1px solid ${e.vars.palette.primary.focusVisible}`
       },
       "& > svg": {
-        color: theme.vars.palette.text.secondary
+        color: e.vars.palette.text.secondary
       }
     },
-    [`&.M4LDataGrid-xs`]: {
+    "&.M4LDataGrid-xs": {
       "& .M4LDataGrid-actions": {
-        height: theme.vars.size.baseSpacings.sp11,
+        height: e.vars.size.baseSpacings.sp11,
         "& .M4LPager-labelRowsPerPageContainer": {
           "& .M4LTypography-root": {
             display: "none"
@@ -74,33 +74,33 @@ const dataGridStyles = {
       }
     },
     "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
-      top: `${theme.vars.size.baseSpacings.sp0} !important`
+      top: `${e.vars.size.baseSpacings.sp0} !important`
     },
     "&& .M4lclassCssSpecificity": {
       fontWeight: 400
     },
     '& [role="row"]:last-of-type': {
       "& .rdg-cell": {
-        boxShadow: `inset 0 0.5px 0 0 ${theme.vars.palette?.border.secondary}, inset 0 -0.5px 0 0 ${theme.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 }) => ({
-    display: ownerState?.visibleCustomHeader ? "block" : "none"
+  customHeader: ({ ownerState: e }) => ({
+    display: e?.visibleCustomHeader ? "block" : "none"
   }),
   /**
    * Estilos del contenedor de las acciones
    */
-  actionsRoot: ({ theme }) => ({
+  actionsRoot: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     background: "transparent",
-    borderRadius: theme.vars.size.borderRadius.r1,
-    gap: theme.vars.size.baseSpacings.sp1,
+    borderRadius: e.vars.size.borderRadius.r1,
+    gap: e.vars.size.baseSpacings.sp1,
     height: "fit-content",
-    ...theme.generalSettings.isMobile && {
-      minHeight: theme.vars.size.baseSpacings.sp10
+    ...e.generalSettings.isMobile && {
+      minHeight: e.vars.size.baseSpacings.sp10
     },
     "& .mobile-menu-actions": {
       marginRight: "auto"
@@ -109,83 +109,83 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor de las acciones ezquierdo
    */
-  containerLeftActions: ({ theme }) => ({
+  containerLeftActions: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "row",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
+    gap: e.vars.size.baseSpacings["sp0-5"],
     alignItems: "center",
-    borderRadius: theme.vars.size.borderRadius.r2,
-    border: theme.vars.size.borderStroke.container,
-    borderColor: theme.vars.palette?.border.disabled,
-    padding: theme.vars.size.baseSpacings.sp1,
-    boxShadow: theme.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 }) => ({
+  containerRightActions: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "row",
-    gap: theme.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 }) => ({
+  controlNavigate: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    gap: theme.vars.size.baseSpacings.sp2,
+    gap: e.vars.size.baseSpacings.sp2,
     flexWrap: "wrap",
     height: "fit-content"
   }),
   /**
    * container de los botones de acciones
    */
-  actionsConfigContainer: ({ theme }) => ({
+  actionsConfigContainer: ({ theme: e }) => ({
     width: "100%",
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-    gap: theme.vars.size.baseSpacings.sp3,
+    gap: e.vars.size.baseSpacings.sp3,
     alignItems: "center"
   }),
   /**
    * Estilos para el contenedor principal de RowsCount
    */
-  rowsCountRoot: ({ theme }) => ({
+  rowsCountRoot: ({ theme: e }) => ({
     alignItems: "center",
     display: "flex",
-    gap: theme.vars.size.baseSpacings.sp2
+    gap: e.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para el label de RowsCount
    */
-  rowsCountLabel: ({ theme, ownerState }) => ({
-    color: theme.vars.palette.text.primary,
+  rowsCountLabel: ({ theme: e, ownerState: r }) => ({
+    color: e.vars.palette.text.primary,
     fontWeight: 400,
     height: "100%",
-    lineHeight: theme.vars.size.baseSpacings.sp4,
-    fontSize: getTypographyStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
+    lineHeight: e.vars.size.baseSpacings.sp4,
+    fontSize: i(
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "body"
     ).fontSize
   }),
   /**
    * Estilos para el valor de RowsCount
    */
-  rowsCountValue: ({ theme, ownerState }) => ({
-    background: theme.vars.palette.background.default,
-    borderRadius: theme.vars.size.baseSpacings.sp1,
-    paddingBottom: theme.vars.size.baseSpacings["sp0-5"],
-    paddingLeft: theme.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: theme.vars.size.baseSpacings.sp1,
-    fontSize: getTypographyStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
+    paddingTop: e.vars.size.baseSpacings.sp1,
+    fontSize: i(
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "body"
     ).fontSize
   }),
@@ -193,8 +193,8 @@ const dataGridStyles = {
    * Estilos para el contenedor de las columnas
    * de la tabla del modal de configuración de columnas.
    */
-  columnsConfigWrapper: ({ theme }) => ({
-    color: theme.vars.palette.text.primary,
+  columnsConfigWrapper: ({ theme: e }) => ({
+    color: e.vars.palette.text.primary,
     position: "relative",
     display: "flex",
     flexDirection: "column",
@@ -206,11 +206,11 @@ const dataGridStyles = {
    * de selección de las columnas en
    * el modal de configuración de columnas.
    */
-  columnsConfigSelColumns: ({ theme, ownerState }) => ({
-    color: theme.vars.palette.text.secondary,
-    ...getTypographyStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
+  columnsConfigSelColumns: ({ theme: e, ownerState: r }) => ({
+    color: e.vars.palette.text.secondary,
+    ...i(
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "bodyDens"
     )
   }),
@@ -218,21 +218,21 @@ const dataGridStyles = {
    * Estilos para el contenedor de la tabla
    * en el modal de configuración de columnas.
    */
-  columnsConfigDataGrid: ({ theme }) => ({
+  columnsConfigDataGrid: ({ theme: e }) => ({
     position: "relative",
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
     overflow: "auto",
-    gap: theme.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 }) => ({
-    paddingTop: theme.vars.size.baseSpacings.sp4,
-    paddingBottom: theme.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 +241,26 @@ const dataGridStyles = {
    * Estilos el el input editor del DataGrid.
    * *****************************************
    */
-  inputTexEditor: ({ theme, ownerState }) => ({
+  inputTexEditor: ({ theme: e, ownerState: r }) => ({
     appearance: "none",
     boxSizing: "border-box",
     inlineSize: "100%",
     blockSize: "100%",
-    paddingBlock: theme.vars.size.baseSpacings.sp0,
+    paddingBlock: e.vars.size.baseSpacings.sp0,
     verticalAlign: "top",
     textAlign: "right",
     fontFamily: "inherit",
     background: "transparent",
-    border: `1px solid ${theme.vars.palette?.border.secondary}`,
-    borderRadius: theme.vars.size.borderRadius["r1-5"],
-    ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
-      height: size
+    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: theme.vars.size.baseSpacings.sp1,
+    padding: e.vars.size.baseSpacings.sp1,
     outline: "none",
     "&:focus": {
       outline: "none",
-      border: `1px solid ${theme.vars.palette?.border.secondary}`,
+      border: `1px solid ${e.vars.palette?.border.secondary}`,
       boxShadow: "none"
     },
     "&:hover": {
@@ -279,473 +279,471 @@ const dataGridStyles = {
    * Estilos para el contenedor principal
    * del componente Table.
    */
-  tableContaniner: ({ theme }) => ({
+  tableContaniner: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
     position: "relative",
     flexGrow: 1,
     overflow: "hidden",
-    borderRadius: theme.vars.size.baseSpacings.sp1,
+    borderRadius: e.vars.size.baseSpacings.sp1,
     border: "none",
-    boxshadow: theme.customShadows?.z2,
-    background: theme.vars.palette.background.default,
-    ["@container main (max-width: 600px)"]: {
-      top: theme.vars.size.baseSpacings.sp11
+    boxshadow: e.customShadows?.z2,
+    background: e.vars.palette.background.default,
+    "@container main (max-width: 600px)": {
+      top: e.vars.size.baseSpacings.sp11
     }
   }),
   /**
    * Estilos para el contenedor del dataGrid
    */
-  tableWrapperDataGrid: ({ theme, ownerState }) => {
-    return {
-      position: "relative",
+  tableWrapperDataGrid: ({ theme: e, ownerState: r }) => ({
+    position: "relative",
+    height: "100%",
+    overflow: "hidden",
+    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: e.vars.palette.background.default,
+      gridColumnGap: e.vars.size.baseSpacings.sp0,
+      gridRowGap: e.vars.size.baseSpacings.sp0,
+      userSelect: "initial",
       height: "100%",
-      overflow: "hidden",
-      borderRadius: theme.vars.size.borderRadius.r2,
-      border: theme.vars.size.borderStroke.container,
-      borderColor: theme.vars.palette?.border.secondary,
-      "& .rdg ": {
-        scrollBehavior: "smooth",
-        display: "grid",
-        contain: "content",
-        boxSizing: "border-box",
-        border: "none",
-        background: theme.vars.palette.background.default,
-        gridColumnGap: theme.vars.size.baseSpacings.sp0,
-        gridRowGap: theme.vars.size.baseSpacings.sp0,
-        userSelect: "initial",
-        height: "100%",
-        contentVisibility: "unset",
-        overflow: "auto",
-        padding: theme.vars.size.baseSpacings.sp0,
-        "--rdg-grid-inline-size": theme.vars.size.baseSpacings.sp0,
-        "--rdg-header-background-color": theme.vars.palette.primary.opacity,
-        "--rdg-row-selected-background-color": theme.vars.palette.primary.opacity,
-        "--rdg-row-hover-background-color": theme.vars.palette.primary.opacity,
-        "--rdg-background-color": theme.vars.palette.background.default,
-        "--rdg-selection-color": theme.vars.palette.primary.focusVisible,
-        "--row-selected-hover-background-color": theme.vars.palette.primary.toneOpacity,
-        "--rdg-checkbox-color": theme.vars.palette.primary.enabled,
-        "--rdg-checkbox-focus-color": alpha(
-          theme.colorSchemes.finalTheme.palette.primary.enabled,
-          theme.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 ${theme.vars.palette?.border.secondary}`
-        }
+      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
+      ),
+      "--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}`
+      }
+    },
+    "&.MeasuringCell": {
+      contain: "strict",
+      gridRow: "1",
+      visibility: "hidden"
+    },
+    "&::before": {
+      content: "''",
+      gridColumn: "1/-1",
+      gridRow: "1/-1"
+    },
+    '& [role="row"], & .rdg-row, & .rdg-header-row, & .rdg-summary-row': {
+      display: "contents"
+    },
+    '& [role="columnheader"]': {
+      paddingTop: e.vars.size.baseSpacings.sp2,
+      paddingBottom: e.vars.size.baseSpacings.sp2,
+      "& .MuiInputBase-input": {
+        ...i(
+          e.generalSettings.isMobile,
+          r?.size || "medium",
+          "body"
+        )
+      }
+    },
+    '& [role="grid"]': {
+      '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
+        borderTopRightRadius: e.vars.size.baseSpacings.sp3
       },
-      "&.MeasuringCell": {
-        contain: "strict",
-        gridRow: "1",
-        visibility: "hidden"
+      '& [aria-rowindex="2"].rdg-row .rdg-cell': {
+        boxShadow: "unset"
+      }
+    },
+    "& .rdg-row": {
+      display: "contents",
+      '&[aria-selected="true"]': {
+        backgroundColor: e.vars.palette.primary.toneOpacity,
+        "&:hover": {
+          backgroundColor: e.vars.palette.primary.toneOpacity
+        }
       },
-      "&::before": {
-        content: "''",
-        gridColumn: "1/-1",
-        gridRow: "1/-1"
+      "& .rdg-cell": {
+        backgroundColor: e.vars.palette.background.default
       },
-      '& [role="row"], & .rdg-row, & .rdg-header-row, & .rdg-summary-row': {
-        display: "contents"
+      '&[aria-selected="false"] .rdg-cell': {
+        backgroundColor: e.vars.palette.background.default
       },
-      '& [role="columnheader"]': {
-        paddingTop: theme.vars.size.baseSpacings.sp2,
-        paddingBottom: theme.vars.size.baseSpacings.sp2,
-        "& .MuiInputBase-input": {
-          ...getTypographyStyles(
-            theme.generalSettings.isMobile,
-            ownerState?.size || "medium",
-            "body"
-          )
+      "&:nth-of-type(odd)": {
+        "& .rdg-cell": {
+          backgroundColor: e.vars.palette.background.default
         }
       },
-      '& [role="grid"]': {
-        '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
-          borderTopRightRadius: theme.vars.size.baseSpacings.sp3
-        },
-        '& [aria-rowindex="2"].rdg-row .rdg-cell': {
-          boxShadow: `unset`
-        }
+      '&[aria-selected="true"] .rdg-cell': {
+        backgroundColor: e.vars.palette.primary?.toneOpacity
       },
-      "& .rdg-row": {
-        display: "contents",
-        '&[aria-selected="true"]': {
-          backgroundColor: theme.vars.palette.primary.toneOpacity,
-          "&:hover": {
-            backgroundColor: theme.vars.palette.primary.toneOpacity
-          }
-        },
+      "&:hover": {
         "& .rdg-cell": {
-          backgroundColor: theme.vars.palette.background.default
-        },
-        '&[aria-selected="false"] .rdg-cell': {
-          backgroundColor: theme.vars.palette.background.default
-        },
-        "&:nth-of-type(odd)": {
-          "& .rdg-cell": {
-            backgroundColor: theme.vars.palette.background.default
-          }
-        },
-        '&[aria-selected="true"] .rdg-cell': {
-          backgroundColor: theme.vars.palette.primary?.toneOpacity
-        },
-        "&:hover": {
-          "& .rdg-cell": {
-            backgroundColor: `${theme.vars.palette.default.toneOpacity} !important`,
-            transition: "background-color 0.1s linear"
-          }
-        },
-        backgroundColor: "transparent"
-      },
-      "& .rdg-cell": {
-        overflow: "clip",
-        position: "sticky",
-        outline: "none",
-        color: theme.vars.palette.text.primary,
-        paddingBlock: 0,
-        paddingInline: "8px",
-        borderInlineEnd: "1px solid var(--rdg-border-color)",
-        borderBlockEnd: "1px solid var(--rdg-border-color)",
-        gridRowStart: "var(--rdg-grid-row-start)",
-        alignContent: "center",
-        backgroundColor: "inherit",
-        whiteSpace: "nowrap",
-        textOverflow: "ellipsis",
-        ...getTypographyStyles(
-          theme.generalSettings.isMobile,
-          ownerState?.size || "medium",
-          "body"
-        ),
-        lineHeight: "var(--rdg-row-height)!important",
-        '&[aria-selected="true"]': {},
-        "&:has(> .MuiCheckbox-root)": {
-          overflow: "visible",
-          paddingInline: 0
-        },
-        "& .checkbox-checked": {
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.enabled
-          }
-        },
-        "& .checkbox-unChecked": {
-          "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.text.primary
-          }
-        },
-        "& .rdg-text-editor": {
-          textAlign: "inherit",
-          color: theme.vars.palette.text.secondary,
-          padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
-          border: theme.vars.size.baseSpacings.sp0,
-          borderTop: "0.5px solid",
-          borderBottom: theme.vars.size.borderStroke.container,
-          borderLeft: "0.5px solid",
-          borderRight: "0.5px solid",
-          borderColor: `${theme.vars.palette?.border.disabled} !important`,
-          ...theme.colorSchemes.finalTheme.typography.body
-        },
-        "&:has(> .M4LRadio-root)": {
-          overflow: "visible",
-          paddingInline: 0
-        },
-        "&.rdg-cell-frozen": {
-          display: "flex",
-          boxShadow: "unset",
-          position: "sticky !important",
-          zIndex: 1
-        },
-        '&.rdg-cell-frozen:not([role="columnheader"])': {
-          position: "sticky !important",
-          zIndex: 1
-        },
-        '&:has(> .MuiCheckbox-root):not([role="columnheader"])': {
-          overflow: "visible",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        '&[role="columnheader"]:has(> .MuiCheckbox-root)': {
-          justifyContent: "center",
-          alignItems: "center"
-        },
-        "&:after": {
-          content: `""`,
-          borderRight: `${theme.vars.size.baseSpacings.sp0} solid ${theme.vars.palette.divider}`,
-          position: "absolute",
-          right: theme.vars.size.baseSpacings.sp0,
-          height: "100%"
-        },
-        "& .m4l_icon": {
-          height: "100%"
-        },
-        '&[role="columnheader"]': {
-          position: "sticky",
-          top: 0,
-          zIndex: 2,
-          "&:has(> .MuiCheckbox-root)": {
-            borderTopLeftRadius: theme.vars.size.baseSpacings.sp2,
-            overflow: "visible",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }
+          backgroundColor: `${e.vars.palette.default.toneOpacity} !important`,
+          transition: "background-color 0.1s linear"
         }
       },
-      '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
-        ...theme.colorSchemes.finalTheme.typography.bodyDens,
-        width: "100%",
-        display: "-webkit-box !important",
-        WebkitBoxOrient: "vertical !important",
-        WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? "1 !important" : ownerState?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
-        overflow: "hidden !important",
-        textOverflow: "ellipsis !important",
-        wordBreak: "break-word !important",
-        whiteSpace: "normal !important",
-        ...getTypographyStyles(
-          theme.generalSettings.isMobile,
-          ownerState?.size || "medium",
-          "bodyDens"
-        ),
-        lineHeight: "var(--rdg-summary-row-height)!important",
-        color: `${theme.vars.palette.text.secondary}`
-      },
-      '& .rdg-cell:not([role="columnheader"]):not(:has(> .MuiCheckbox-root))': {
-        display: "-webkit-box !important",
-        WebkitBoxOrient: "vertical !important",
-        WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? "1 !important" : ownerState?.currentRowHeightVariant === "confortable" ? "3 !important" : "2 !important",
-        overflow: "hidden !important",
-        textOverflow: "ellipsis !important",
-        wordBreak: "break-word !important",
-        whiteSpace: "normal !important",
-        lineHeight: ownerState?.currentRowHeightVariant === "compact" ? `${ownerState?.currentRowHeight}px !important` : ownerState?.currentRowHeightVariant === "confortable" ? `${(ownerState?.currentRowHeight ?? 48) / 3}px !important` : `${(ownerState?.currentRowHeight ?? 40) / 2}px !important`
+      backgroundColor: "transparent"
+    },
+    "& .rdg-cell": {
+      overflow: "clip",
+      position: "sticky",
+      outline: "none",
+      color: e.vars.palette.text.primary,
+      paddingBlock: 0,
+      paddingInline: "8px",
+      borderInlineEnd: "1px solid var(--rdg-border-color)",
+      borderBlockEnd: "1px solid var(--rdg-border-color)",
+      gridRowStart: "var(--rdg-grid-row-start)",
+      alignContent: "center",
+      backgroundColor: "inherit",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      ...i(
+        e.generalSettings.isMobile,
+        r?.size || "medium",
+        "body"
+      ),
+      lineHeight: "var(--rdg-row-height)!important",
+      '&[aria-selected="true"]': {},
+      "&:has(> .MuiCheckbox-root)": {
+        overflow: "visible",
+        paddingInline: 0
       },
-      '& .rdg-cell[role="columnheader"].filter-cell': {
-        "& .M4LDataGrid-draggableHeaderRoot": {
-          gap: theme.vars.size.baseSpacings.sp3,
-          "& .rdg-header-sort-cell": {
-            maxHeight: "min-content"
-          },
-          "& .rdg-header-sort-name": {
-            lineHeight: "1!important"
-          }
+      "& .checkbox-checked": {
+        "& .M4LIcon-icon": {
+          backgroundColor: e.vars.palette.primary.enabled
         }
       },
-      '& .rdg-cell[role="columnheader"] [draggable="true"]': {
-        fontWeight: 600
-      },
-      "&&& [aria-selected=true]": {},
-      "& .rdg-cell.rdg-cell-align-left": {
-        textAlign: "start",
-        justifyContent: "center",
-        alignContent: "center",
-        alignItems: "center",
-        '&:not([role="columnheader"])': {
-          "& > div:first-of-type": {
-            marginRight: "auto"
-          }
+      "& .checkbox-unChecked": {
+        "& .M4LIcon-icon": {
+          backgroundColor: e.vars.palette.text.primary
         }
       },
-      "& .rdg-cell.rdg-cell-align-center": {
-        textAlign: "center",
-        alignContent: "center",
-        '&:not([role="columnheader"])': {
-          "& > div:first-of-type": {
-            margin: "0 auto"
-          }
-        }
+      "& .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,
+        borderTop: "0.5px solid",
+        borderBottom: e.vars.size.borderStroke.container,
+        borderLeft: "0.5px solid",
+        borderRight: "0.5px solid",
+        borderColor: `${e.vars.palette?.border.disabled} !important`,
+        ...e.colorSchemes.finalTheme.typography.body
       },
-      "& .rdg-cell.rdg-cell-align-right": {
-        textAlign: "right",
-        alignContent: "center",
-        '&:not([role="columnheader"])': {
-          "& > div:first-of-type": {
-            marginLeft: "auto"
-          }
-        }
+      "&:has(> .M4LRadio-root)": {
+        overflow: "visible",
+        paddingInline: 0
       },
-      '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
-        textAlign: "start"
-      },
-      '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
-        textAlign: "center"
+      "&.rdg-cell-frozen": {
+        display: "flex",
+        boxShadow: "unset",
+        position: "sticky !important",
+        zIndex: 1
       },
-      '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
-        textAlign: "right",
-        paddingRight: theme.vars.size.baseSpacings.sp3
+      '&.rdg-cell-frozen:not([role="columnheader"])': {
+        position: "sticky !important",
+        zIndex: 1
       },
-      "& .rdg-row .rdg-cell-frozen-last:after": {
-        borderRight: `0px solid transparent`
+      '&:has(> .MuiCheckbox-root):not([role="columnheader"])': {
+        overflow: "visible",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
       },
-      "& .rdg-row .rdg-cell-frozen": {
-        position: "sticky !important",
-        zIndex: 1,
-        left: "var(--rdg-cell-left, 0)"
+      '&[role="columnheader"]:has(> .MuiCheckbox-root)': {
+        justifyContent: "center",
+        alignItems: "center"
       },
-      "& .rdg-row .rdg-cell-frozen-last": {
-        position: "sticky !important",
-        zIndex: 1,
-        left: "var(--rdg-cell-left, 0)"
+      "&:after": {
+        content: '""',
+        borderRight: `${e.vars.size.baseSpacings.sp0} solid ${e.vars.palette.divider}`,
+        position: "absolute",
+        right: e.vars.size.baseSpacings.sp0,
+        height: "100%"
       },
-      "& .rdg-row :last-child:after": {
-        borderRight: `0px solid`,
-        borderColor: theme.vars.palette.background.surface
+      "& .m4l_icon": {
+        height: "100%"
       },
-      "& .rdg-header-row": {
-        display: "contents",
-        backgroundColor: theme.vars.palette.background.base,
-        fontWeight: "bold",
-        "& > .rdg-cell": {
-          zIndex: 2,
-          position: "sticky"
-        },
-        "& > .rdg-cell.rdg-cell-frozen": {
-          zIndex: 3
+      '&[role="columnheader"]': {
+        position: "sticky",
+        top: 0,
+        zIndex: 2,
+        "&:has(> .MuiCheckbox-root)": {
+          borderTopLeftRadius: e.vars.size.baseSpacings.sp2,
+          overflow: "visible",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
         }
-      },
-      "& .rdg-header-row .rdg-cell": {
-        gridTemplateColumns: "auto",
-        boxShadow: "unset!important",
-        borderBottom: theme.vars.size.borderStroke.container,
-        borderColor: `${theme.vars.palette?.background.surface}!important`,
-        cursor: "pointer",
-        "&:hover": {
-          boxShadow: `inset 1px 0 0 0 ${theme.vars.palette?.border.default}, inset -1px 0 0 0 ${theme.vars.palette?.border.default}!important `
-        },
-        "&[data-resize]": {
-          touchAction: "none"
-        },
-        '& [draggable="true"]': {
-          fontSize: theme.typography.body
-        },
-        "&.rdg-cell-frozen-last": {
-          borderColor: theme.vars.palette.background.default,
-          boxShadow: "var(--rdg-frozen-cell-box-shadow)"
-        },
+      }
+    },
+    '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
+      ...e.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",
+      overflow: "hidden !important",
+      textOverflow: "ellipsis !important",
+      wordBreak: "break-word !important",
+      whiteSpace: "normal !important",
+      ...i(
+        e.generalSettings.isMobile,
+        r?.size || "medium",
+        "bodyDens"
+      ),
+      lineHeight: "var(--rdg-summary-row-height)!important",
+      color: `${e.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",
+      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`
+    },
+    '& .rdg-cell[role="columnheader"].filter-cell': {
+      "& .M4LDataGrid-draggableHeaderRoot": {
+        gap: e.vars.size.baseSpacings.sp3,
         "& .rdg-header-sort-cell": {
-          "& .rdg-header-sort-name + span": {
-            position: "absolute",
-            margin: "auto",
-            right: theme.vars.size.baseSpacings.sp2,
-            "& .rdg-sort-arrow": {
-              width: theme.vars.size.baseSpacings.sp2
-            }
-          }
+          maxHeight: "min-content"
         },
-        "& .rdg-sort-arrow": {}
+        "& .rdg-header-sort-name": {
+          lineHeight: "1!important"
+        }
+      }
+    },
+    '& .rdg-cell[role="columnheader"] [draggable="true"]': {
+      fontWeight: 600
+    },
+    "&&& [aria-selected=true]": {},
+    "& .rdg-cell.rdg-cell-align-left": {
+      textAlign: "start",
+      justifyContent: "center",
+      alignContent: "center",
+      alignItems: "center",
+      '&:not([role="columnheader"])': {
+        "& > div:first-of-type": {
+          marginRight: "auto"
+        }
+      }
+    },
+    "& .rdg-cell.rdg-cell-align-center": {
+      textAlign: "center",
+      alignContent: "center",
+      '&:not([role="columnheader"])': {
+        "& > div:first-of-type": {
+          margin: "0 auto"
+        }
+      }
+    },
+    "& .rdg-cell.rdg-cell-align-right": {
+      textAlign: "right",
+      alignContent: "center",
+      '&:not([role="columnheader"])': {
+        "& > div:first-of-type": {
+          marginLeft: "auto"
+        }
+      }
+    },
+    '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
+      textAlign: "start"
+    },
+    '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
+      textAlign: "center"
+    },
+    '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
+      textAlign: "right",
+      paddingRight: e.vars.size.baseSpacings.sp3
+    },
+    "& .rdg-row .rdg-cell-frozen-last:after": {
+      borderRight: "0px solid transparent"
+    },
+    "& .rdg-row .rdg-cell-frozen": {
+      position: "sticky !important",
+      zIndex: 1,
+      left: "var(--rdg-cell-left, 0)"
+    },
+    "& .rdg-row .rdg-cell-frozen-last": {
+      position: "sticky !important",
+      zIndex: 1,
+      left: "var(--rdg-cell-left, 0)"
+    },
+    "& .rdg-row :last-child:after": {
+      borderRight: "0px solid",
+      borderColor: e.vars.palette.background.surface
+    },
+    "& .rdg-header-row": {
+      display: "contents",
+      backgroundColor: e.vars.palette.background.base,
+      fontWeight: "bold",
+      "& > .rdg-cell": {
+        zIndex: 2,
+        position: "sticky"
       },
-      '& [class*="r1y6ywlx"]': {
-        cursor: "col-resize",
-        position: "absolute",
-        insetBlockStart: 0,
-        insetInlineEnd: 0,
-        insetBlockEnd: 0,
-        inlineSize: "10px"
+      "& > .rdg-cell.rdg-cell-frozen": {
+        zIndex: 3
+      }
+    },
+    "& .rdg-header-row .rdg-cell": {
+      gridTemplateColumns: "auto",
+      boxShadow: "unset!important",
+      borderBottom: e.vars.size.borderStroke.container,
+      borderColor: `${e.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 `
       },
-      "& .rdg-header-row :last-child.rdg-cell": {
-        borderTopRightRadius: theme.vars.size.baseSpacings.sp0,
-        "&:after": {
-          borderRight: `${theme.vars.size.baseSpacings.sp0} solid transparent`
-        }
+      "&[data-resize]": {
+        touchAction: "none"
+      },
+      '& [draggable="true"]': {
+        fontSize: e.typography.body
       },
-      "& .filter_cell_div": {
-        paddingLeft: theme.vars.size.baseSpacings.sp2,
-        paddingRight: theme.vars.size.baseSpacings.sp2
+      "&.rdg-cell-frozen-last": {
+        borderColor: e.vars.palette.background.default,
+        boxShadow: "var(--rdg-frozen-cell-box-shadow)"
       },
       "& .rdg-header-sort-cell": {
-        width: "100%",
-        flexGrow: "1",
-        alignItems: "center",
-        color: theme.vars.palette.text.primary,
-        height: "100%"
+        "& .rdg-header-sort-name + span": {
+          position: "absolute",
+          margin: "auto",
+          right: e.vars.size.baseSpacings.sp2,
+          "& .rdg-sort-arrow": {
+            width: e.vars.size.baseSpacings.sp2
+          }
+        }
+      },
+      "& .rdg-sort-arrow": {}
+    },
+    '& [class*="r1y6ywlx"]': {
+      cursor: "col-resize",
+      position: "absolute",
+      insetBlockStart: 0,
+      insetInlineEnd: 0,
+      insetBlockEnd: 0,
+      inlineSize: "10px"
+    },
+    "& .rdg-header-row :last-child.rdg-cell": {
+      borderTopRightRadius: e.vars.size.baseSpacings.sp0,
+      "&:after": {
+        borderRight: `${e.vars.size.baseSpacings.sp0} solid transparent`
       }
-    };
-  },
+    },
+    "& .filter_cell_div": {
+      paddingLeft: e.vars.size.baseSpacings.sp2,
+      paddingRight: e.vars.size.baseSpacings.sp2
+    },
+    "& .rdg-header-sort-cell": {
+      width: "100%",
+      flexGrow: "1",
+      alignItems: "center",
+      color: e.vars.palette.text.primary,
+      height: "100%"
+    }
+  }),
   /**
    * Estilos para el wrapper del checkbox en las celdas.
    */
-  checkboxCellWrapper: ({ theme }) => ({
+  checkboxCellWrapper: ({ theme: e }) => ({
     "& .checkbox-checked": {
       "& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.primary.enabled
+        backgroundColor: e.vars.palette.primary.enabled
       }
     },
     "& .checkbox-unChecked": {
       "& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.text.primary
+        backgroundColor: e.vars.palette.text.primary
       }
     },
     "& .MuiCheckbox-root": {
       overflow: "visible",
       padding: 0,
-      ...theme.generalSettings.isMobile ? {
-        width: theme.vars.size.mobile.small.action,
-        height: theme.vars.size.mobile.small.action
+      ...e.generalSettings.isMobile ? {
+        width: e.vars.size.mobile.small.action,
+        height: e.vars.size.mobile.small.action
       } : {
-        width: theme.vars.size.desktop.small.action,
-        height: theme.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: theme.size.borderRadius.r1,
+      borderRadius: e.size.borderRadius.r1,
       "&:hover": {
-        backgroundColor: theme.vars.palette.default.hoverOpacity
+        backgroundColor: e.vars.palette.default.hoverOpacity
       },
       "&:active": {
-        backgroundColor: theme.vars.palette.default.activeOpacity
+        backgroundColor: e.vars.palette.default.activeOpacity
       },
       "&.Mui-checked": {
         "&:hover": {
-          backgroundColor: theme.vars.palette.primary.hoverOpacity,
+          backgroundColor: e.vars.palette.primary.hoverOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.hover
+            backgroundColor: e.vars.palette.primary.hover
           }
         },
         "&:active": {
-          backgroundColor: theme.vars.palette.primary.activeOpacity,
+          backgroundColor: e.vars.palette.primary.activeOpacity,
           "& .M4LIcon-icon": {
-            backgroundColor: theme.vars.palette.primary.active
+            backgroundColor: e.vars.palette.primary.active
           }
         }
       },
       "&.Mui-focusVisible, &:focus-visible": {
-        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
+        outline: `1px solid ${e.vars.palette.primary.focusVisible}`
       },
       "& > svg": {
-        color: theme.vars.palette.text.secondary
+        color: e.vars.palette.text.secondary
       }
     }
   }),
   /**
    * Estilos para el contenedor de toggle de vista cards.
    */
-  containerToggleCards: ({ theme }) => ({
+  containerToggleCards: ({ theme: e }) => ({
     display: "grid",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    gap: theme.vars.size.baseSpacings.sp3,
-    padding: theme.vars.size.baseSpacings.sp3
+    gap: e.vars.size.baseSpacings.sp3,
+    padding: e.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para el botón de toggle de tarjeta.
    */
-  cardToggleCardButton: ({ theme, ownerState }) => ({
+  cardToggleCardButton: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     cursor: "pointer",
-    height: theme.vars.size.baseSpacings.sp14,
-    width: theme.vars.size.baseSpacings.sp14,
-    gap: theme.vars.size.baseSpacings.sp2,
-    borderColor: ownerState?.isActive ? theme.vars.palette.primary.toneOpacity : theme.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, ownerState }) => ({
+  textToggleCardButton: ({ theme: e, ownerState: r }) => ({
     "&.M4LTypography-root": {
-      color: ownerState?.isActive ? theme.vars.palette.primary.semanticText : theme.vars.palette.text.secondary,
+      color: r?.isActive ? e.vars.palette.primary.semanticText : e.vars.palette.text.secondary,
       cursor: "pointer"
     }
   }),
@@ -765,20 +763,20 @@ const dataGridStyles = {
   /**
    * Estilos para cada tarjeta individual en CardsView.
    */
-  card: ({ theme, ownerState }) => ({
+  card: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "start",
     minWidth: "280px",
     maxWidth: "580px",
     cursor: "pointer",
-    padding: theme.vars.size.baseSpacings["sp2-5"],
+    padding: e.vars.size.baseSpacings["sp2-5"],
     gap: "0 !important",
-    ...ownerState?.checked && !ownerState?.selected ? {
-      borderColor: theme.vars.palette.primary.activeOpacity
+    ...r?.checked && !r?.selected ? {
+      borderColor: e.vars.palette.primary.activeOpacity
     } : {},
-    ...ownerState?.selected ? {
-      borderColor: theme.vars.palette.primary.selected
+    ...r?.selected ? {
+      borderColor: e.vars.palette.primary.selected
     } : {}
   }),
   cardContentWrapper: () => ({
@@ -787,13 +785,13 @@ const dataGridStyles = {
   /**
    * Estilos para el header de la tarjeta.
    */
-  cardHeader: ({ theme, ownerState }) => ({
+  cardHeader: ({ theme: e, ownerState: r }) => ({
     display: "flex",
-    justifyContent: ownerState?.hasCheckedRows ? "space-between" : "flex-end",
+    justifyContent: r?.hasCheckedRows ? "space-between" : "flex-end",
     alignItems: "center",
     width: "100%",
     height: "24px",
-    gap: theme.vars.size.baseSpacings.sp2
+    gap: e.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para la sección izquierda del header de tarjeta.
@@ -805,49 +803,49 @@ const dataGridStyles = {
   /**
    * Estilos para la sección derecha del header de tarjeta.
    */
-  cardHeaderRight: ({ theme }) => ({
+  cardHeaderRight: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para el contenido de la tarjeta.
    */
-  cardContent: ({ theme }) => ({
+  cardContent: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp2,
-    padding: theme.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, ownerState }) => ({
+  containerLabelValueColumn: ({ theme: e, ownerState: r }) => ({
     display: "flex",
-    flexDirection: ownerState?.hasActions ? "row" : "column",
-    justifyContent: ownerState?.hasActions ? "space-between" : "flex-start",
-    alignItems: ownerState?.hasActions ? "center" : "start",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
-    width: ownerState?.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, ownerState }) => ({
-    flex: ownerState?.hasActions ? 1 : "none",
+  contentWrapperColumn: ({ theme: e, ownerState: r }) => ({
+    flex: r?.hasActions ? 1 : "none",
     display: "flex",
     flexDirection: "column",
     alignItems: "start",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para el contenedor de detalle de tarjeta.
    */
-  cardDetailContainer: ({ theme }) => ({
+  cardDetailContainer: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp3,
-    padding: theme.vars.size.baseSpacings.sp3,
+    gap: e.vars.size.baseSpacings.sp3,
+    padding: e.vars.size.baseSpacings.sp3,
     height: "100%",
     overflow: "auto"
   }),
@@ -862,10 +860,10 @@ const dataGridStyles = {
   /**
    * Estilos para el wrapper del editor de celda.
    */
-  editorCellWrapper: ({ theme, ownerState }) => ({
+  editorCellWrapper: ({ theme: e, ownerState: r }) => ({
     overflow: "clip",
     outline: "none",
-    color: theme.vars.palette.text.primary,
+    color: e.vars.palette.text.primary,
     paddingBlock: 0,
     alignContent: "center",
     backgroundColor: "inherit",
@@ -874,35 +872,35 @@ const dataGridStyles = {
     inlineSize: "100%",
     alignSelf: "stretch",
     boxSizing: "border-box",
-    ...getTypographyStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
+    ...i(
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "body"
     ),
-    ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
-      minHeight: size,
+    ...o(e, r?.size || "medium", "base", (a) => ({
+      minHeight: a,
       height: 24,
-      lineHeight: `${size} !important`
+      lineHeight: `${a} !important`
     })),
     "& input": {
       width: "100%",
       textAlign: "inherit",
-      color: theme.vars.palette.text.secondary,
-      padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp1}`,
-      border: `1px solid ${theme.vars.palette.border.secondary}`,
-      borderRadius: theme.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",
-      ...theme.colorSchemes.finalTheme.typography.body,
-      ...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => ({
-        height: size
+      ...e.colorSchemes.finalTheme.typography.body,
+      ...o(e, r?.size || "medium", "case", (a) => ({
+        height: a
       })),
       "&:focus": {
-        border: `1px solid ${theme.vars.palette.border.secondary}`,
+        border: `1px solid ${e.vars.palette.border.secondary}`,
         outline: "none",
         boxShadow: "none"
       },
       "&:hover": {
-        border: `1px solid ${theme.vars.palette.border.secondary}`,
+        border: `1px solid ${e.vars.palette.border.secondary}`,
         outline: "none"
       }
     }
@@ -910,50 +908,50 @@ const dataGridStyles = {
   /**
    * Placeholder editable
    */
-  editablePlaceholder: ({ theme }) => ({
+  editablePlaceholder: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: e.vars.size.baseSpacings.sp1
   }),
   /**
    * EditLabel
    */
-  editLabel: ({ theme, ownerState }) => ({
+  editLabel: ({ theme: e, ownerState: r }) => ({
     width: "auto",
     opacity: 1,
     transition: "opacity 0.3s ease",
-    ...getTypographyStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
+    ...i(
+      e.generalSettings.isMobile,
+      r?.size || "medium",
       "body"
     )
   }),
   /**
    * Botón para mostrar el input en los editores (cards)
    */
-  iconButtonEdit: ({ theme }) => ({
+  iconButtonEdit: ({ theme: e }) => ({
     "& .M4LIcon-icon": {
-      backgroundColor: `${theme.vars.palette.text.secondary} !important`
+      backgroundColor: `${e.vars.palette.text.secondary} !important`
     }
   }),
   /**
    * Estilos para el header de tarjeta personalizada.
    */
-  customCardHeader: ({ theme }) => ({
+  customCardHeader: ({ theme: e }) => ({
     display: "flex",
-    gap: theme.vars.size.baseSpacings.sp4,
+    gap: e.vars.size.baseSpacings.sp4,
     alignItems: "center",
-    marginBottom: theme.vars.size.baseSpacings.sp2
+    marginBottom: e.vars.size.baseSpacings.sp2
   }),
   /**
    * Estilos para el avatar de tarjeta personalizada.
    */
-  customCardAvatar: ({ theme }) => ({
+  customCardAvatar: ({ theme: e }) => ({
     width: "32px",
     height: "32px",
-    borderRadius: theme.vars.size.borderRadius.r3,
-    border: theme.vars.size.borderStroke.container,
-    borderColor: theme.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",
@@ -962,39 +960,39 @@ const dataGridStyles = {
   /**
    * Estilos para nombre y email en tarjeta personalizada.
    */
-  customCardNameEmail: ({ theme }) => ({
+  customCardNameEmail: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para campo con icono en tarjeta personalizada.
    */
-  customCardFieldWithIcon: ({ theme }) => ({
+  customCardFieldWithIcon: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp3
+    gap: e.vars.size.baseSpacings.sp3
   }),
   /**
    * Estilos para contenido de campo en tarjeta personalizada.
    */
-  customCardFieldContent: ({ theme }) => ({
+  customCardFieldContent: ({ theme: e }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: e.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para contenedor de icono en tarjeta personalizada.
    */
-  customCardIconContainer: ({ theme }) => ({
+  customCardIconContainer: ({ theme: e }) => ({
     width: "24px",
     height: "24px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.vars.size.borderRadius.r2,
-    border: theme.vars.size.borderStroke.container,
-    borderColor: theme.vars.palette.primary.toneOpacity,
+    borderRadius: e.vars.size.borderRadius.r2,
+    border: e.vars.size.borderStroke.container,
+    borderColor: e.vars.palette.primary.toneOpacity,
     flexShrink: 0
   }),
   /**
@@ -1013,19 +1011,19 @@ const dataGridStyles = {
   /**
    * Estilos para el wrapper del input en cabeceras arrastrables
    */
-  draggableWrapperInputBase: ({ theme, ownerState }) => ({
+  draggableWrapperInputBase: ({ theme: e, ownerState: r }) => ({
     borderTop: "1px solid var(--rdg-border-color)",
     width: "100%",
     display: "flex",
     alignItems: "center",
-    backgroundColor: theme.vars.palette.default.enabled,
-    padding: theme.vars.size.baseSpacings.sp1,
-    marginBottom: theme.vars.size.baseSpacings.sp2,
-    gap: theme.vars.size.baseSpacings.sp1,
-    borderRadius: theme.vars.size.borderRadius.r1,
-    ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
-      minHeight: size,
-      height: size
+    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
     }))
   }),
   /**
@@ -1039,15 +1037,15 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor del skeleton de carga
    */
-  wrapperSkeleton: ({ theme, ownerState }) => ({
+  wrapperSkeleton: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     width: "100%",
     height: "100%",
     alignItems: "center",
     "& .MuiSkeleton-root": {
-      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
-        minHeight: `${size}!important`,
-        height: `${size}!important`
+      ...o(e, r?.size || "medium", "base", (a) => ({
+        minHeight: `${a}!important`,
+        height: `${a}!important`
       }))
     }
   }),
@@ -1064,20 +1062,20 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor de nombre de columna con icono
    */
-  nameColumnIcon: ({ theme }) => ({
+  nameColumnIcon: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.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 }) => ({
+  nameColumn: ({ ownerState: e }) => ({
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? 1 : ownerState?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
@@ -1087,10 +1085,10 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor de icono de columna
    */
-  iconColumn: ({ theme }) => ({
+  iconColumn: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: e.vars.size.baseSpacings.sp1
   }),
   headerRenderClick: () => ({
     width: "fit-content"
@@ -1098,20 +1096,20 @@ const dataGridStyles = {
   /**
    * Estilos para la lista del menú de opciones
    */
-  menuList: ({ theme }) => ({
-    padding: theme.vars.size.baseSpacings.sp3,
+  menuList: ({ theme: e }) => ({
+    padding: e.vars.size.baseSpacings.sp3,
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp1,
+    gap: e.vars.size.baseSpacings.sp1,
     "& > div": {
-      paddingLeft: theme.vars.size.baseSpacings.sp4,
-      paddingRight: theme.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 }) => ({
+  buttonHeaderActions: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -1126,18 +1124,18 @@ const dataGridStyles = {
       "& svg": {
         width: "8px",
         height: "8px",
-        color: theme.vars.palette.chips.default.contained.backgroundColorTone
+        color: e.vars.palette.chips.default.contained.backgroundColorTone
       }
     }
   }),
   /**
    * Estilos para el formateador de iconos de columna
    */
-  columnIconFormatter: ({ theme }) => ({
+  columnIconFormatter: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.vars.size.baseSpacings.sp2,
+    gap: e.vars.size.baseSpacings.sp2,
     minWidth: "max-content",
     overflow: "visible",
     flexWrap: "nowrap"
@@ -1145,22 +1143,22 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor raíz del renderizador de celdas de grupo por defecto
    */
-  defaultRenderGroupCellRoot: ({ theme, ownerState }) => ({
+  defaultRenderGroupCellRoot: ({ theme: e, ownerState: r }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp2,
+    gap: e.vars.size.baseSpacings.sp2,
     cursor: "pointer",
     width: "100%",
-    justifyContent: ownerState?.align === "center" ? "center" : ownerState?.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 }) => ({
+  defaultRenderGroupCellText: ({ ownerState: e }) => ({
     fontWeight: 600,
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? 1 : ownerState?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    WebkitLineClamp: e?.currentRowHeightVariant === "compact" ? 1 : e?.currentRowHeightVariant === "confortable" ? 3 : 2,
     overflow: "hidden",
     textOverflow: "ellipsis",
     wordBreak: "break-word",
@@ -1173,7 +1171,7 @@ const dataGridStyles = {
    * manteniendo el comportamiento de truncado con ellipsis.
    * El color se recibe a través de ownerState.cellBackgroundColor
    */
-  cellBackgroundWrapper: ({ ownerState }) => ({
+  cellBackgroundWrapper: ({ ownerState: e }) => ({
     // Ocupar toda la celda con margin negativo
     margin: "-8px",
     padding: "8px",
@@ -1183,15 +1181,15 @@ const dataGridStyles = {
     // Mantener el comportamiento de truncado igual que las celdas
     display: "-webkit-box",
     WebkitBoxOrient: "vertical",
-    WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? 1 : ownerState?.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",
-    ...ownerState?.cellBackgroundColor ? { backgroundColor: ownerState.cellBackgroundColor } : {}
+    ...e?.cellBackgroundColor ? { backgroundColor: e.cellBackgroundColor } : {}
   })
 };
 export {
-  dataGridStyles as d
+  d as dataGridStyles
 };