@m4l/components 9.1.45 → 9.1.47

package/components/formatters/BooleanFormatter/BooleanFormatter.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { BooleanFormatterProps } from './types';
 /**
  * BooleanFormatter
@@ -10,10 +11,12 @@ import { BooleanFormatterProps } from './types';
  * - `'check'`: Displays an icon representing `true` or `false`.
  * [value=false]
  * The boolean value to be formatted.
- * [Component=WrapperComponent]
+ * [Component=BooleanFormatterRootStyled]
  * A custom wrapper component for the formatted output.
  * [dataTestId]
  * A unique identifier for testing purposes, used as a `data-testid` attribute.
+ * [className]
+ * A custom class name to apply to the component.
  * @example
  * <BooleanFormatter presentationType="string_yes_no" value={true} />
  * // Renders "Yes"
@@ -26,4 +29,4 @@ import { BooleanFormatterProps } from './types';
  * @updatedAt 2024-12-10 14:11:20 - automatic
  * @updatedUser cesar - automatic
  */
-export declare function BooleanFormatter(props: BooleanFormatterProps): import("react/jsx-runtime").JSX.Element;
+export declare function BooleanFormatter<T extends React.ElementType>(props: BooleanFormatterProps<T>): string | import("react/jsx-runtime").JSX.Element;

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -1,47 +1,50 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { W as WrapperComponent } from "../../WrapperComponent/index.js";
 import { L as LABEL_BOOLEAN_YES, a as LABEL_BOOLEAN_NO, b as LABEL_BOOLEAN_TRUE, c as LABEL_BOOLEAN_FALSE } from "./dictionary.js";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { T as TextStyled, F as FormatterRootStyled, B as BooleanFormatterIconStyled } from "./slots/BooleanFormatterSlots.js";
+import { B as BooleanFormatterIconStyled, a as BooleanFormatterRootStyled } from "./slots/BooleanFormatterSlots.js";
 import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
 function BooleanFormatter(props) {
-  const { presentationType, value, Component = WrapperComponent, dataTestId } = props;
+  const { presentationType, value, Component = BooleanFormatterRootStyled, dataTestId, className, componentProps } = props;
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const final_value = value ?? false;
   const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
   const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
-  const ownerState = { isTrue: final_value };
+  const ownerState = { value: final_value };
   const memoComponent = useMemo(() => {
     if (presentationType === "string_yes_no") {
-      return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(TextStyled, { ownerState, children: final_value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO) }) });
+      return final_value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO);
     }
     if (presentationType === "string_true_false") {
-      return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(TextStyled, { ownerState, children: final_value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE) }) });
+      return final_value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE);
     }
     return /* @__PURE__ */ jsx(
-      FormatterRootStyled,
+      BooleanFormatterIconStyled,
       {
-        className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT)),
-        ...getPropDataTestId(BOOLEAN_FORMATTER_KEY_COMPONENT, BooleanFormatterSlots.booleanFormatterRoot, dataTestId),
-        role: "booleanStyled-role",
         ownerState,
-        children: /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(
-          BooleanFormatterIconStyled,
-          {
-            ownerState,
-            src: final_value ? srcCheckTrue : srcCheckFalse
-          }
-        ) })
+        src: final_value ? srcCheckTrue : srcCheckFalse
       }
     );
   }, [final_value, getLabel, presentationType, srcCheckTrue, srcCheckFalse]);
-  return memoComponent;
+  if (Component === React.Fragment) {
+    return memoComponent;
+  }
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className),
+      ...getPropDataTestId(BOOLEAN_FORMATTER_KEY_COMPONENT, BooleanFormatterSlots.root, dataTestId),
+      role: "booleanStyled-role",
+      ownerState,
+      ...componentProps,
+      children: memoComponent
+    }
+  );
 }
 export {
   BooleanFormatter as B

package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js

@@ -6,15 +6,20 @@ const booleanFormatterStyles = {
    * @updatedAt 2024-12-30 14:36:10 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  text: ({ theme }) => ({
+  root: ({ theme }) => ({
     "& .MuiSkeleton-text": {
       width: `${theme.vars.size.baseSpacings.sp7} !important`,
       borderRadius: theme.vars.size.borderRadius.r1
     }
   }),
-  booleanFormatterRoot: {},
-  booleanFormatterSkeleton: {},
-  booleanFormatterIcon: {}
+  /**
+   * Styled del icono
+   */
+  icon: ({ theme }) => ({
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.text.primary
+    }
+  })
 };
 export {
   booleanFormatterStyles as b

package/components/formatters/BooleanFormatter/dictionary.d.ts

@@ -3,5 +3,5 @@ export declare const LABEL_BOOLEAN_YES = "boolean_formatter.boolean_yes";
 export declare const LABEL_BOOLEAN_NO = "boolean_formatter.boolean_no";
 export declare const LABEL_BOOLEAN_TRUE = "boolean_formatter.boolean_true";
 export declare const LABEL_BOOLEAN_FALSE = "boolean_formatter.boolean_false";
-export declare function getFormattersComponentsDictionary(): string[];
+export declare function getBooleanFormatterComponentsDictionary(): string[];
 export declare const BOOLEAN_FORMATTER_DICTIONARY_LABELS: string[];

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.d.ts

@@ -1,6 +1,4 @@
 export declare enum BooleanFormatterSlots {
-    booleanFormatterRoot = "booleanFormatterRoot",
-    booleanFormatterSkeleton = "booleanFormatterSkeleton",
-    booleanFormatterIcon = "booleanFormatterIcon",
-    text = "text"
+    icon = "icon",
+    root = "root"
 }

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.js

@@ -1,8 +1,6 @@
 var BooleanFormatterSlots = /* @__PURE__ */ ((BooleanFormatterSlots2) => {
-  BooleanFormatterSlots2["booleanFormatterRoot"] = "booleanFormatterRoot";
-  BooleanFormatterSlots2["booleanFormatterSkeleton"] = "booleanFormatterSkeleton";
-  BooleanFormatterSlots2["booleanFormatterIcon"] = "booleanFormatterIcon";
-  BooleanFormatterSlots2["text"] = "text";
+  BooleanFormatterSlots2["icon"] = "icon";
+  BooleanFormatterSlots2["root"] = "root";
   return BooleanFormatterSlots2;
 })(BooleanFormatterSlots || {});
 export {

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts

@@ -1,12 +1,6 @@
-export declare const FormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../FormatterRoot/types').FormatterRootProps, "children"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
-}, {}, {}>;
 export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon/types').IconProps, keyof import('../../../Icon/types').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const BooleanFormatterSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
-}, {}, {}>;
-export declare const TextStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+export declare const BooleanFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js

@@ -2,28 +2,17 @@ import { styled } from "@mui/material/styles";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "../constants.js";
 import { B as BooleanFormatterSlots } from "./BooleanFormatterEnum.js";
 import { b as booleanFormatterStyles } from "../BooleanFormatter.styles.js";
-import { F as FormatterRoot } from "../../FormatterRoot/index.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
-import { S as Skeleton } from "../../../mui_extended/Skeleton/Skeleton.js";
 import { I as Icon } from "../../../Icon/Icon.js";
-const FormatterRootStyled = styled(FormatterRoot, {
-  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.booleanFormatterRoot
-})(booleanFormatterStyles?.booleanFormatterRoot);
 const BooleanFormatterIconStyled = styled(Icon, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.booleanFormatterIcon
-})(booleanFormatterStyles?.booleanFormatterIcon);
-styled(Skeleton, {
-  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.booleanFormatterSkeleton
-})(booleanFormatterStyles?.booleanFormatterSkeleton);
-const TextStyled = styled(Typography, {
+  slot: BooleanFormatterSlots.icon
+})(booleanFormatterStyles?.icon);
+const BooleanFormatterRootStyled = styled(Typography, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.text
-})(booleanFormatterStyles?.text);
+  slot: BooleanFormatterSlots.root
+})(booleanFormatterStyles?.root);
 export {
   BooleanFormatterIconStyled as B,
-  FormatterRootStyled as F,
-  TextStyled as T
+  BooleanFormatterRootStyled as a
 };

package/components/formatters/BooleanFormatter/types.d.ts

@@ -1,5 +1,5 @@
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { BooleanFormatterSlots } from './slots';
+import { BooleanFormatterRootStyled, BooleanFormatterSlots } from './slots';
 import { BOOLEAN_FORMATTER_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
 /**
@@ -16,17 +16,22 @@ export type BooleanFormatter = keyof typeof BooleanFormatterSlots;
 /**
  * Properties for the `BooleanFormatter` component.
  */
-export interface BooleanFormatterProps {
-    Component?: React.ElementType;
+export interface BooleanFormatterProps<T extends React.ElementType = typeof BooleanFormatterRootStyled> {
+    Component?: T;
     presentationType: PresentationType;
     value?: boolean;
     dataTestId?: string;
+    className?: string;
+    /**
+     * Props para el componente personalizado.
+     */
+    componentProps?: React.ComponentPropsWithoutRef<T>;
 }
 /**
  * State properties for the `BooleanFormatter` component.
  */
 export interface BooleanFormatterOwnerState {
-    isTrue?: boolean;
+    value?: boolean;
     [key: string]: unknown;
 }
 /**

package/components/mui_extended/Button/Button.js

@@ -78,7 +78,7 @@ const Button = forwardRef((props, ref) => {
       ref,
       ...others,
       children: [
-        /* @__PURE__ */ jsx(TextButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, children: label }),
+        /* @__PURE__ */ jsx(TextButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, size: adjustedSize, children: label }),
         props.children
       ]
     }

package/components/mui_extended/TextField/TextField.js

@@ -29,7 +29,7 @@ const TextField = (props) => {
     theme.palette.default
   );
   const ownerState = {
-    textFieldSizes: adjustedSize,
+    size: adjustedSize,
     textFieldDisabled: disabled,
     textFieldPaletteColor: paletteColor,
     textFieldVariant: variant,

package/components/mui_extended/TextField/TextField.styles.js

@@ -1,4 +1,3 @@
-import { a as TEXT_FIELD_CLASSES } from "./constants.js";
 const textFieldStyles = {
   /**
    * Estilos personalizados para el componente TextField.
@@ -8,152 +7,161 @@ const textFieldStyles = {
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ ownerState, theme }) => ({
-    [`&.${TEXT_FIELD_CLASSES.root}`]: {
-      width: "100%",
-      padding: 0,
-      borderRadius: theme.vars.size.borderRadius.r1,
-      display: "flex",
-      // Estilos específicos para el tamaño small
-      ...ownerState.size === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.small.action,
-          minHeight: theme.vars.size.mobile.small.action
-        } : {
-          height: theme.vars.size.desktop.small.action,
-          minHeight: theme.vars.size.desktop.small.action
-        }
-      },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.size === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.medium.action,
-          minHeight: theme.vars.size.mobile.medium.action
-        } : {
-          height: theme.vars.size.desktop.medium.action,
-          minHeight: theme.vars.size.desktop.medium.action
-        }
-      },
-      // Variant Outlined TextField
-      ...ownerState.textFieldVariant === "outlined" && {
-        "& .MuiInputBase-root": {
-          padding: 0,
+    width: "100%",
+    padding: 0,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    display: "flex",
+    // Estilos específicos para el tamaño small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.action,
+        minHeight: theme.vars.size.mobile.small.action
+      } : {
+        height: theme.vars.size.desktop.small.action,
+        minHeight: theme.vars.size.desktop.small.action
+      }
+    },
+    // Estilos específicos para el tamaño medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.action,
+        minHeight: theme.vars.size.mobile.medium.action
+      } : {
+        height: theme.vars.size.desktop.medium.action,
+        minHeight: theme.vars.size.desktop.medium.action
+      }
+    },
+    // Variant Outlined TextField
+    ...ownerState.textFieldVariant === "outlined" && {
+      "& .MuiInputBase-root": {
+        padding: 0,
+        minHeight: 0,
+        height: "inherit",
+        paddingLeft: theme.vars.size.baseSpacings.sp1,
+        borderRadius: theme.vars.size.borderRadius.r1,
+        '.MuiIconButton-root [class*="M4LIcon-icon"]': {
+          backgroundColor: theme.vars.palette.text.primary
+        },
+        '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+          backgroundColor: theme.vars.palette.text.primary
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
           minHeight: 0,
-          height: "inherit",
-          paddingLeft: theme.vars.size.baseSpacings.sp1,
-          borderRadius: theme.vars.size.borderRadius.r1,
-          '.MuiIconButton-root [class*="M4LIcon-icon"]': {
+          border: theme.vars.size.borderStroke.actionInput,
+          borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default
+        },
+        //Estilo Hover para primary para el Icono e IconButton
+        "&:hover": {
+          backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity
+        },
+        //Estilo Focus para primary para el Icono e IconButton
+        ":focus-within": {
+          borderColor: theme.palette.border.main,
+          '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
             backgroundColor: theme.vars.palette.text.primary
           },
-          '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+          '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
             backgroundColor: theme.vars.palette.text.primary
-          },
-          "& .MuiOutlinedInput-notchedOutline": {
-            minHeight: 0,
-            border: theme.vars.size.borderStroke.actionInput,
-            borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default
-          },
-          //Estilo Hover para primary para el Icono e IconButton
-          "&:hover": {
-            backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity
-          },
-          //Estilo Focus para primary para el Icono e IconButton
+          }
+        },
+        //Estilo Active para primary para el Icono e IconButton
+        "&:active": {
           ":focus-within": {
-            borderColor: theme.palette.border.main,
             '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
               backgroundColor: theme.vars.palette.text.primary
             },
             '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
               backgroundColor: theme.vars.palette.text.primary
             }
-          },
-          //Estilo Active para primary para el Icono e IconButton
-          "&:active": {
-            ":focus-within": {
-              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: theme.vars.palette.text.primary
-              },
-              '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
-                backgroundColor: theme.vars.palette.text.primary
-              }
+          }
+        },
+        //Estilos del InputBase
+        "& .MuiInputBase-input": {
+          padding: "0px",
+          paddingRight: theme.vars.size.baseSpacings.sp1,
+          paddingLeft: theme.vars.size.baseSpacings.sp1,
+          height: "inherit",
+          //Estilos del InputBase en hover
+          "&:hover ~ .MuiOutlinedInput-notchedOutline": {
+            ...ownerState.textFieldError && {
+              borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : theme.vars.palette.border.default
             }
           },
-          //Estilos del InputBase
-          "& .MuiInputBase-input": {
-            padding: "0px",
-            paddingRight: theme.vars.size.baseSpacings.sp1,
-            paddingLeft: theme.vars.size.baseSpacings.sp1,
-            height: "inherit",
-            //Estilos del InputBase en hover
-            "&:hover ~ .MuiOutlinedInput-notchedOutline": {
-              ...ownerState.textFieldError && {
-                borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : theme.vars.palette.border.default
-              }
-            },
-            // Estilos del InputBase en Focus
-            "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
-            },
-            //Estilos del InputBase en placeholder default
-            "&::placeholder": {
-              color: theme.palette.text.disabled
-            }
+          // Estilos del InputBase en Focus
+          "&:focus ~ .MuiOutlinedInput-notchedOutline": {
+            borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
           },
-          //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
-          "& .MuiOutlinedInput-input:-webkit-autofill": {
-            padding: 0
+          //Estilos del InputBase en placeholder default
+          "&::placeholder": {
+            color: theme.palette.text.disabled
+          }
+        },
+        //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
+        "& .MuiOutlinedInput-input:-webkit-autofill": {
+          padding: 0
+        },
+        // Historia Disabled para Outlined
+        ...ownerState.textFieldDisabled && {
+          borderColor: theme.palette.border.disabled,
+          pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
+          "&:hover": {
+            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
           },
-          // Historia Disabled para Outlined
-          ...ownerState.textFieldDisabled && {
-            borderColor: theme.palette.border.disabled,
-            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
-            "&:hover": {
-              pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
-            },
-            "& .MuiInputBase-input::placeholder": {
-              color: theme.palette.text.disabled
-            },
-            '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-              backgroundColor: theme.vars.palette.text.disabled
-            },
-            '.MuiIconButton-root [class*="M4LIcon-icon"]': {
-              backgroundColor: theme.vars.palette.text.disabled
-            }
+          "& .MuiInputBase-input::placeholder": {
+            color: theme.palette.text.disabled
+          },
+          '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+            backgroundColor: theme.vars.palette.text.disabled
+          },
+          '.MuiIconButton-root [class*="M4LIcon-icon"]': {
+            backgroundColor: theme.vars.palette.text.disabled
           }
         }
-      },
-      // Variant Text TextField
-      ...ownerState.textFieldVariant === "text" && {
+      }
+    },
+    // Variant Text TextField
+    ...ownerState.textFieldVariant === "text" && {
+      borderColor: "transparent",
+      "& .MuiInputBase-root": {
+        padding: 0,
+        minHeight: 0,
+        height: "inherit",
         borderColor: "transparent",
-        "& .MuiInputBase-root": {
-          padding: 0,
+        paddingLeft: theme.vars.size.baseSpacings.sp1,
+        borderRadius: theme.vars.size.borderRadius.r1,
+        '.MuiIconButton-root [class*="M4LIcon-icon"]': {
+          backgroundColor: theme.vars.palette.text.primary
+        },
+        '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+          backgroundColor: theme.vars.palette.text.primary
+        },
+        //Estilos para los bordes del campo de texto
+        "& .MuiOutlinedInput-notchedOutline": {
           minHeight: 0,
-          height: "inherit",
-          borderColor: "transparent",
-          paddingLeft: theme.vars.size.baseSpacings.sp1,
-          borderRadius: theme.vars.size.borderRadius.r1,
+          border: theme.vars.size.borderStroke.actionInput,
+          borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default,
+          borderLeft: "transparent",
+          borderTop: "transparent",
+          borderRight: "transparent"
+        },
+        //Estilo Hover para primary para el Icono e IconButton
+        "&:hover": {
+          backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity,
           '.MuiIconButton-root [class*="M4LIcon-icon"]': {
             backgroundColor: theme.vars.palette.text.primary
-          },
-          '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+          }
+        },
+        //Estilo Focus para primary para el Icono e IconButton
+        ":focus-within": {
+          '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
             backgroundColor: theme.vars.palette.text.primary
           },
-          //Estilos para los bordes del campo de texto
-          "& .MuiOutlinedInput-notchedOutline": {
-            minHeight: 0,
-            border: theme.vars.size.borderStroke.actionInput,
-            borderColor: ownerState.textFieldError ? ownerState.textFieldPaletteColor?.main : theme.vars.palette.border.default,
-            borderLeft: "transparent",
-            borderTop: "transparent",
-            borderRight: "transparent"
-          },
-          //Estilo Hover para primary para el Icono e IconButton
-          "&:hover": {
-            backgroundColor: ownerState.textFieldError ? "inherit" : theme.palette.primary.hoverOpacity,
-            '.MuiIconButton-root [class*="M4LIcon-icon"]': {
-              backgroundColor: theme.vars.palette.text.primary
-            }
-          },
-          //Estilo Focus para primary para el Icono e IconButton
+          '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
+            backgroundColor: theme.vars.palette.text.primary
+          }
+        },
+        //Estilo Active para primary para el Icono e IconButton
+        "&:active": {
           ":focus-within": {
             '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
               backgroundColor: theme.vars.palette.text.primary
@@ -161,58 +169,47 @@ const textFieldStyles = {
             '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
               backgroundColor: theme.vars.palette.text.primary
             }
+          }
+        },
+        //Estilos del InputBase
+        "& .MuiInputBase-input": {
+          padding: "0px",
+          paddingRight: theme.vars.size.baseSpacings.sp1,
+          paddingLeft: theme.vars.size.baseSpacings.sp1,
+          height: "inherit",
+          //Estilo Focus del InputBase
+          "&:focus ~ .MuiOutlinedInput-notchedOutline": {
+            borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
           },
-          //Estilo Active para primary para el Icono e IconButton
-          "&:active": {
-            ":focus-within": {
-              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: theme.vars.palette.text.primary
-              },
-              '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
-                backgroundColor: theme.vars.palette.text.primary
-              }
-            }
+          // Estilos del InputBase en placeholder default
+          "&::placeholder": {
+            color: theme.palette.text.disabled
+          }
+        },
+        //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
+        "& .MuiOutlinedInput-input:-webkit-autofill": {
+          padding: 0
+        },
+        // Historia Disabled
+        ...ownerState.textFieldDisabled && {
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: theme.palette.border.disabled,
+            borderTop: theme.palette.border.disabled,
+            borderLeft: "transparent",
+            borderRight: "transparent"
           },
-          //Estilos del InputBase
-          "& .MuiInputBase-input": {
-            padding: "0px",
-            paddingRight: theme.vars.size.baseSpacings.sp1,
-            paddingLeft: theme.vars.size.baseSpacings.sp1,
-            height: "inherit",
-            //Estilo Focus del InputBase
-            "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.textFieldError ? theme.vars.palette.border.error : ownerState.textFieldPaletteColor?.selected
-            },
-            // Estilos del InputBase en placeholder default
-            "&::placeholder": {
-              color: theme.palette.text.disabled
-            }
+          pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
+          "&:hover": {
+            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
           },
-          //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
-          "& .MuiOutlinedInput-input:-webkit-autofill": {
-            padding: 0
+          "& .MuiInputBase-input::placeholder": {
+            color: theme.palette.text.disabled
           },
-          // Historia Disabled
-          ...ownerState.textFieldDisabled && {
-            "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: theme.palette.border.disabled,
-              borderTop: theme.palette.border.disabled,
-              borderLeft: "transparent",
-              borderRight: "transparent"
-            },
-            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
-            "&:hover": {
-              pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
-            },
-            "& .MuiInputBase-input::placeholder": {
-              color: theme.palette.text.disabled
-            },
-            '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-              backgroundColor: theme.vars.palette.text.disabled
-            },
-            '.MuiIconButton-root [class*="M4LIcon-icon"]': {
-              backgroundColor: theme.vars.palette.text.disabled
-            }
+          '[class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+            backgroundColor: theme.vars.palette.text.disabled
+          },
+          '.MuiIconButton-root [class*="M4LIcon-icon"]': {
+            backgroundColor: theme.vars.palette.text.disabled
           }
         }
       }

package/components/mui_extended/TextField/types.d.ts

@@ -65,7 +65,7 @@ export interface TextFieldOwnerState {
     /**
      * Tamaño del campo de texto.
      */
-    textFieldSizes: Extract<Sizes, 'small' | 'medium'>;
+    size: Extract<Sizes, 'small' | 'medium'>;
     /**
      * Indica si el campo de texto es error.
      */

package/components/mui_extended/Typography/types.d.ts

@@ -34,7 +34,7 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     /**
      * Contenido del componente.
      */
-    children?: string;
+    children?: React.ReactNode;
     /**
      * Nombre identificador del componente, es útil para realizar pruebas del componente.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.45",
+  "version": "9.1.47",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/components/formatters/FormatterRoot/index.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { f as formatterClasses } from "../classes/index.js";
-import { F as FormatterRootContainer } from "./styles.js";
-const FormatterRoot = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsx(FormatterRootContainer, { className: formatterClasses.root, children });
-};
-export {
-  FormatterRoot as F
-};

package/components/formatters/FormatterRoot/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material";
-const FormatterRootContainer = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LFormatter?.styleOverrides || {}
-}));
-export {
-  FormatterRootContainer as F
-};

package/components/formatters/classes/index.js

@@ -1,13 +0,0 @@
-import { generateUtilityClasses } from "@mui/material";
-import "@mui/base";
-import { C as COMPONENT_CLASS_NAME } from "../constants.js";
-const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  /* elements */
-  "root",
-  "booleanFormatterIcon",
-  "booleanFormatterCheck"
-  /* states or variants of elements */
-]);
-export {
-  formatterClasses as f
-};

package/components/formatters/constants.js

@@ -1,4 +0,0 @@
-const COMPONENT_CLASS_NAME = "M4LFormatter";
-export {
-  COMPONENT_CLASS_NAME as C
-};