@m4l/components 9.3.35-BE20251128-beta.1 → 9.3.35-BE20251129-beta.2

package/components/DataGrid/Datagrid.styles.js

@@ -317,7 +317,14 @@ const dataGridStyles = {
       },
       '& [role="columnheader"]': {
         paddingTop: theme.vars.size.baseSpacings.sp2,
-        paddingBottom: theme.vars.size.baseSpacings.sp2
+        paddingBottom: theme.vars.size.baseSpacings.sp2,
+        "& .MuiInputBase-input": {
+          ...getTypographyStyles(
+            theme.generalSettings.isMobile,
+            ownerState?.size || "medium",
+            "body"
+          )
+        }
       },
       '& [role="grid"]': {
         '& [aria-rowindex="1"].rdg-row .rdg-cell:last-child': {
@@ -424,6 +431,10 @@ const dataGridStyles = {
           borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
+        "&:has(> .M4LRadioButton-root)": {
+          overflow: "visible",
+          paddingInline: 0
+        },
         "&.rdg-cell-frozen": {
           display: "flex",
           boxShadow: "unset",
@@ -734,7 +745,10 @@ const dataGridStyles = {
    */
   cardsContainer: () => ({
     height: "auto",
-    overflow: "auto"
+    overflow: "auto",
+    "& > .M4LContainerFlow-root": {
+      alignItems: "start"
+    }
   }),
   /**
    * Card de la vista cards
@@ -746,6 +760,8 @@ const dataGridStyles = {
     minWidth: "280px",
     maxWidth: "580px",
     cursor: "pointer",
+    padding: theme.vars.size.baseSpacings["sp2-5"],
+    gap: "0 !important",
     // Si está checked (pero no selected), border de checked
     ...ownerState?.checked && !ownerState?.selected && {
       borderColor: theme.vars.palette.primary.activeOpacity
@@ -786,7 +802,7 @@ const dataGridStyles = {
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Contenido de la card (body)

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -155,6 +155,7 @@ function DataGridProvider(props) {
     initialRowHeightVariant = "standard",
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     rowKeyGetter,
     onChangeUserColumns,
     externalSortSettings: sortSettings,
@@ -530,6 +531,7 @@ function DataGridProvider(props) {
         rowActionsGetter,
         setRowHeightVariant: setCurrentRowHeightInternal,
         onCheckedRowsChange,
+        checkedRowsMultiple,
         rowKeyGetter,
         onChangeUserColumns,
         sortColumns,

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -79,7 +79,7 @@ export interface IGridConfig {
 export interface IGridConfigExtended extends IGridConfig {
     columnsConfigCards?: BaseConfigColumnCards[];
 }
-export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
     id: number | string;
     children: ReactNode;
     rowsCount: number;
@@ -92,7 +92,7 @@ export type RowHeightState = {
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
     getConfigColumns: (viewMode: ViewMode) => IViewConfig[];
     onChangeColumnsConfig: (viewMode: ViewMode, config: IViewConfig[]) => void;
     onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;

package/components/DataGrid/subcomponents/Cards/subcomponents/CardHeader/index.js

@@ -15,7 +15,7 @@ function CardHeader({
   checkedRows,
   onCheckedRowsChange
 }) {
-  const { rowKeyGetter, rowActionsGetter, size } = useDataGrid();
+  const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
@@ -23,15 +23,23 @@ function CardHeader({
       if (!onCheckedRowsChange || !checkedRows) {
         return;
       }
-      const newCheckedRows = new Set(checkedRows);
-      if (checked) {
-        newCheckedRows.add(rowKey);
+      if (checkedRowsMultiple === false) {
+        if (checked) {
+          onCheckedRowsChange(/* @__PURE__ */ new Set([rowKey]));
+        } else {
+          onCheckedRowsChange(/* @__PURE__ */ new Set());
+        }
       } else {
-        newCheckedRows.delete(rowKey);
+        const newCheckedRows = new Set(checkedRows);
+        if (checked) {
+          newCheckedRows.add(rowKey);
+        } else {
+          newCheckedRows.delete(rowKey);
+        }
+        onCheckedRowsChange(newCheckedRows);
       }
-      onCheckedRowsChange(newCheckedRows);
     },
-    [checkedRows, onCheckedRowsChange, rowKey]
+    [checkedRows, onCheckedRowsChange, rowKey, checkedRowsMultiple]
   );
   const anchorOrigin = useMemo(
     () => ({

package/components/DataGrid/subcomponents/CheckboxCellAdapter/index.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
 import { C as CheckboxFormatter } from "../Table/subcomponents/CheckboxFormatter.js";
+import { R as RadioButtonFormatter } from "../Table/subcomponents/RadioButtonFormatter.js";
 import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
 import { l as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
@@ -14,12 +15,14 @@ const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref)
   } = props;
   const context = useContext(DataGridContext);
   const viewMode = context?.viewMode ?? "cards";
+  const checkedRowsMultiple = context?.checkedRowsMultiple;
   if (viewMode !== "table") {
     const handleClick = (e) => {
       e.stopPropagation();
     };
+    const FormatterComponent = checkedRowsMultiple === false ? RadioButtonFormatter : CheckboxFormatter;
     return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { onClick: handleClick, children: /* @__PURE__ */ jsx(
-      CheckboxFormatter,
+      FormatterComponent,
       {
         ref,
         checked: value,

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.js

@@ -1,7 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { useTheme } from "@mui/material";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 import { p as pathIcons } from "../../../../icons.js";
@@ -45,7 +44,6 @@ function Density() {
     environment_assets,
     getLabel
   ]);
-  const theme = useTheme();
   const currenViewIcon = useMemo(() => {
     if (currentRowHeightVariant === "compact") {
       return `${host_static_assets}/${environment_assets}/${pathIcons.compact}`;
@@ -62,7 +60,6 @@ function Density() {
     MenuActions,
     {
       arrowType: "right-top",
-      menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       menuActions,

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from "react";
 import { g as getDragHeaderRenderer } from "./getDragHeaderRenderer.js";
 import { A as ActionsColumn } from "../subcomponents/ActionsColumn.js";
 import { f as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
+import { R as RadioSelectColumn } from "../subcomponents/RadioSelectColumn.js";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
@@ -38,7 +39,7 @@ function getComparator(columns, sortColumn) {
   }
 }
 const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths, rowActionsGetter) => {
+const getInOrderColumns = (columns, hasCheckedRows, checkedRowsMultiple, columnsConfig, columnsWidths, rowActionsGetter) => {
   let filteredSortedColumns = columns.filter((column) => {
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
@@ -64,7 +65,8 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
     filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
   }
   if (hasCheckedRows) {
-    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
+    const selectionColumn = checkedRowsMultiple === false ? RadioSelectColumn : SelectColumn;
+    filteredSortedColumns = [selectionColumn, ...filteredSortedColumns];
   }
   return filteredSortedColumns;
 };
@@ -89,6 +91,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     rowActionsGetter,
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     sortColumns,
     setSortColumns
   } = useDataGrid();
@@ -109,6 +112,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         sourceColumns,
         !!checkedRows && !!onCheckedRowsChange,
         //Si están seteados se habilita el múltipe
+        checkedRowsMultiple,
         columnsConfig,
         columnsWidths,
         rowActionsGetter

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -1,11 +1,9 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { useTheme } from "@mui/material";
 import { f as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();
-  const theme = useTheme();
   if (rowActionsGetter === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
@@ -15,7 +13,6 @@ function ActionsFormatter(props) {
       arrowType: "top-left",
       objItem: props.row,
       menuActions: rowActionsGetter,
-      menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
       marginTop: 1,
       marginLeft: "-11px",
       anchorOrigin: { vertical: "bottom", horizontal: "left" },

package/components/DataGrid/subcomponents/Table/subcomponents/RadioButtonFormatter.d.ts

@@ -0,0 +1,6 @@
+import { RenderCheckboxProps } from 'react-data-grid';
+/**
+ * Componente visual del RadioButton que se renderiza dentro de cada celda del DataGrid.
+ * ¿Para que sirve? Es un wrapper alrededor del componente Radio del MUI que adapta las props de react-data-grid
+ */
+export declare const RadioButtonFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/DataGrid/subcomponents/Table/subcomponents/RadioButtonFormatter.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { R as RadioButton } from "../../../../mui_extended/RadioButton/RadioButton.js";
+const RadioButtonFormatter = forwardRef(function RadioFormatter({ onChange, checked, ...props }, _ref) {
+  function handleChange(e) {
+    onChange(e.target.checked, e.nativeEvent.shiftKey);
+  }
+  return /* @__PURE__ */ jsx(RadioButton, { checked, onChange: handleChange, ...props });
+});
+export {
+  RadioButtonFormatter as R
+};

package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.d.ts

@@ -0,0 +1,64 @@
+import { Column, RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps } from 'react-data-grid';
+export declare const filterColumnClassName = "filter-cell";
+export declare const filterHeight = 35;
+/**
+ * Formateador para la celda de selección con radio button en filas agrupadas.
+ *
+ * **Nota:** Para radio buttons (selección única), no tiene sentido seleccionar grupos completos,
+ * por lo que este formateador retorna `null` y no renderiza ningún control.
+ * @param _props - Propiedades para renderizar la celda de grupo (no utilizadas).
+ * @returns `null` - No se renderiza ningún control de selección en grupos.
+ * @example
+ * // En un DataGrid con grupos, las filas de grupo no tendrán radio button
+ * // Solo las filas individuales tendrán radio buttons
+ */
+export declare function RadioSelectGroupFormatter(_props: RenderGroupCellProps<unknown>): null;
+/**
+ * Formateador para la celda de selección con radio button en filas individuales.
+ *
+ * Este componente maneja la lógica de **selección única**: cuando el usuario hace click
+ * en un radio button, se REEMPLAZA completamente la selección anterior con solo la fila actual.
+ *
+ * **Comportamiento:**
+ * - Si `checked` es `true`: El Set de `checkedRows` se reemplaza con `[rowKey actual]`
+ * - Si `checked` es `false`: El Set de `checkedRows` se vacía (deselección)
+ * @param props - Propiedades para renderizar la celda, incluyendo la fila actual.
+ * @returns Un componente `SelectCellFormatter` configurado como radio button.
+ * @example
+ * // Cuando el usuario hace click en el radio de la fila con ID=5:
+ * // checkedRows antes: Set([3])
+ * // checkedRows después: Set([5])  ← Reemplaza, no agrega
+ */
+export declare function RadioSelectFormatter(props: RenderCellProps<any, any>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Renderizador para la celda de cabecera (header) de la columna de selección con radio buttons.
+ *
+ * **Nota:** A diferencia de los checkboxes, los radio buttons NO tienen funcionalidad de
+ * "Seleccionar Todo", ya que solo se puede seleccionar una fila a la vez. Por lo tanto,
+ * este renderizador retorna `null` y no muestra ningún control en el header.
+ * @param _props - Propiedades para renderizar la celda de cabecera (no utilizadas).
+ * @returns `null` - No se renderiza ningún control en la cabecera.
+ * @example
+ * // La cabecera de la columna estará vacía (sin checkbox "Select All")
+ */
+export declare function RadioSelectColumnHeaderRenderer(_props: RenderHeaderCellProps<any, any>): null;
+/**
+ * Definición de la columna de selección con radio buttons para el DataGrid.
+ *
+ * Esta columna permite **selección única** de filas mediante radio buttons.
+ *
+ * **Características:**
+ * - **Ancho fijo:** 32px (igual que la columna de checkboxes)
+ * - **No redimensionable:** `resizable: false`
+ * - **No draggable:** `isDraggable: false`
+ * - **No sortable:** `sortable: false`
+ * - **Congelada:** `frozen: true` (siempre visible al hacer scroll horizontal)
+ * - **Header vacío:** No tiene control "Select All"
+ * - **Selección única:** Solo una fila puede estar seleccionada a la vez
+ * @example
+ * // En useSortColumnsRows.tsx:
+ * const selectionColumn = checkedRowsMultiple === false
+ *   ? RadioSelectColumn   // ← Selección única con radio buttons
+ *   : SelectColumn;       // ← Selección múltiple con checkboxes
+ */
+export declare const RadioSelectColumn: Column<any, any>;

package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { R as RadioButtonFormatter } from "./RadioButtonFormatter.js";
+function RadioSelectGroupFormatter(_props) {
+  return null;
+}
+function RadioSelectFormatter(props) {
+  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
+  const onChange = (checked, _isShiftClick) => {
+    if (checked) {
+      onCheckedRowsChange && onCheckedRowsChange(/* @__PURE__ */ new Set([rowKeyGetter(props.row)]));
+    } else {
+      onCheckedRowsChange && onCheckedRowsChange(/* @__PURE__ */ new Set());
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    RadioButtonFormatter,
+    {
+      checked: checkedRows?.has(rowKeyGetter(props.row)) || false,
+      tabIndex: props.tabIndex,
+      onChange,
+      "aria-label": "Select"
+    }
+  );
+}
+function RadioSelectColumnHeaderRenderer(_props) {
+  return null;
+}
+const RadioSelectColumn = {
+  key: DATAGRID_SELECT_COLUMN_KEY,
+  name: "",
+  width: 32,
+  minWidth: 32,
+  isDraggable: false,
+  resizable: false,
+  sortable: false,
+  frozen: true,
+  type: "boolean",
+  renderHeaderCell: RadioSelectColumnHeaderRenderer,
+  renderCell: RadioSelectFormatter,
+  renderGroupCell: RadioSelectGroupFormatter
+};
+export {
+  RadioSelectColumn as R
+};

package/components/DataGrid/tests/table/subcomponents/RadioButtonFormatter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/table/subcomponents/RadioSelectColumn.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/types.d.ts

@@ -137,6 +137,13 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
     onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
     checkedRows?: ReadonlySet<TKey>;
     onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
+    /**
+     * Define si la selección de filas es múltiple (checkboxes) o única (radio buttons).
+     *
+     * - `true` (default): Permite seleccionar múltiples filas con checkboxes
+     * - `false`: Permite seleccionar solo una fila con radio buttons
+     */
+    checkedRowsMultiple?: boolean;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
     /**
      * Propiedad opcional que recibe la configuración de las columnas

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -227,7 +227,8 @@ const dynamicFilterStyles = {
       flexDirection: "column",
       padding: theme.vars.size.baseSpacings.sp3,
       gap: theme.vars.size.baseSpacings.sp1,
-      borderRadius: theme.vars.size.borderRadius.r1
+      borderRadius: theme.vars.size.borderRadius.r1,
+      backgroundColor: theme.vars.palette.background.default
     }
   }),
   /**
@@ -241,6 +242,7 @@ const dynamicFilterStyles = {
       minWidth: "220px",
       maxWidth: "100%",
       minHeight: "auto",
+      backgroundColor: theme.vars.palette.background.default,
       boxShadow: theme.customShadows?.z3,
       "& .M4LPopover-arrowStyle": {
         display: "none"
@@ -250,7 +252,8 @@ const dynamicFilterStyles = {
         width: "max-content",
         minWidth: "220px",
         maxWidth: "420px",
-        height: "fit-content"
+        height: "fit-content",
+        overflow: "visible"
       },
       "& .M4LWindowBase-root": {
         borderRadius: `${theme.vars.size.borderRadius.r3}!important`,

package/components/DynamicSort/DynamicSort.styles.js

@@ -227,7 +227,8 @@ const dynamicSortStyles = {
       flexDirection: "column",
       padding: theme.vars.size.baseSpacings.sp3,
       gap: theme.vars.size.baseSpacings.sp1,
-      borderRadius: theme.vars.size.borderRadius.r1
+      borderRadius: theme.vars.size.borderRadius.r1,
+      backgroundColor: theme.vars.palette.background.default
     }
   }),
   /**
@@ -241,6 +242,7 @@ const dynamicSortStyles = {
       maxWidth: "100%",
       minHeight: "auto",
       borderRadius: `${theme.vars.size.borderRadius.r3}!important`,
+      backgroundColor: theme.vars.palette.background.default,
       boxShadow: theme.customShadows?.z3,
       "& .M4LPopover-arrowStyle": {
         display: "none"
@@ -250,7 +252,8 @@ const dynamicSortStyles = {
         width: "max-content",
         minWidth: "220px",
         maxWidth: "420px",
-        height: "fit-content"
+        height: "fit-content",
+        overflow: "visible"
       },
       "& .M4LWindowBase-root": {
         borderRadius: `${theme.vars.size.borderRadius.r3} !important`,

package/components/GridLayout/styles.js

@@ -67,7 +67,6 @@ const GridLayoutRoot = styled("div")`
     display: none;
   }
   ${react_resizable_css}
-  ${(props) => props.theme.components?.M4LGridLayout?.styleOverrides}
 `;
 export {
   GridLayoutRoot as G

package/components/Label/index.d.ts

@@ -1,2 +1,2 @@
 export { Label } from './Label';
-export type { LabelProps } from './types';
+export type { LabelProps, LabelPropsBase } from './types';

package/components/Label/types.d.ts

@@ -5,6 +5,12 @@ import { LABEL_KEY_COMPONENT } from './constants';
 import { Sizes } from '@m4l/styles';
 import { TypographyProps } from '../mui_extended/Typography/types';
 export type LabelVariants = 'standard';
+/**
+ * Base props for Label component, excluding control and layout properties.
+ * This type is commonly used as a base for form field components that need
+ * Label's content and configuration props but manage their own control/layout.
+ */
+export type LabelPropsBase = Omit<LabelProps, 'children' | 'disabled' | 'size' | 'className' | 'error'>;
 export interface LabelProps extends Pick<TypographyProps, 'skeletonWidth'> {
     /**
      * Mensaje de ayuda para el campo. Si es un string, muestra un icono de ayuda

package/components/LanguagePopover/LanguagePopover.styles.js

@@ -35,10 +35,19 @@ const languagePopoverStyles = {
    *  Estilos del paper
    */
   paper: ({ theme }) => ({
-    position: "absolute",
-    marginTop: theme.vars.size.baseSpacings.sp1,
-    "& .MuiTypography-root": {
-      cursor: "pointer"
+    "&&&": {
+      position: "absolute",
+      marginTop: theme.vars.size.baseSpacings.sp1,
+      backgroundColor: theme.vars.palette.background.default,
+      borderRadius: theme.vars.size.borderRadius.r2,
+      boxShadow: theme.vars.customShadows.z4,
+      padding: theme.vars.size.baseSpacings.sp3,
+      "& .MuiList-root": {
+        padding: "unset"
+      },
+      "& .MuiTypography-root": {
+        cursor: "pointer"
+      }
     }
   })
 };

package/components/MFLoader/styles.js

@@ -15,7 +15,6 @@ const MFLoaderRoot = styled("div")(() => ({
   "& .MuiLinearProgress-root": {
     width: "100%"
   }
-  // ...theme.components?.M4LMFLoader?.styleOverrides || {},
 }));
 export {
   MFLoaderRoot as M

package/components/ModalDialog/ModalDialog.styles.js

@@ -9,8 +9,15 @@ const modalDialogStyles = {
     position: "absolute",
     background: "transparent"
   }),
+  /**
+   * Dialog Root style
+   */
   dialogRoot: ({ theme }) => ({
-    padding: theme.vars.size.baseSpacings["sp2-5"]
+    padding: theme.vars.size.baseSpacings["sp2-5"],
+    "& .MuiBackdrop-root": {
+      backdropFilter: "blur(7px)",
+      backgroundColor: theme.vars.palette.background.backdrop
+    }
   })
 };
 export {

package/components/PrintingSystem/PrintingSystem.js

@@ -9,6 +9,7 @@ import { P as PRINTING_SYSTEM_KEY_COMPONENT } from "./constants.js";
 import { P as PrintingSystemSlots } from "./slots/PrintingSystemEnum.js";
 import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import clsx from "clsx";
+import { p as printingSystemStyles } from "./PrintingSystem.styles.js";
 const PrintingSystem = forwardRef((props, ref) => {
   const { templateData: nodeRoot, sourceData, size = "medium", variant = "body", className, dataTestId } = props;
   const theme = useTheme();
@@ -29,7 +30,8 @@ const PrintingSystem = forwardRef((props, ref) => {
           );
           printDocument.body.appendChild(content.cloneNode(true));
           const styleElement = printDocument.createElement("style");
-          styleElement.textContent = `${theme.components?.M4LPrintingSystem?.styleOverrides}`;
+          const rootStyles = printingSystemStyles.root && typeof printingSystemStyles.root === "function" ? printingSystemStyles.root({ theme }) : null;
+          styleElement.textContent = rootStyles ? String(rootStyles) : "";
           printDocument.head.appendChild(styleElement);
           printDocument.close();
           printWindow.print();