@m4l/components 8.1.0-beta.devManuela.IconButton → 8.1.0-beta.devManuela.TextField

package/@types/export.d.ts

@@ -209,7 +209,7 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LStack'];
     };
     M4LTabs?: {
-      styleOverrides?: ComponentsOverrides<Theme>['M4LTabs'];
+      styleOverrides?: ComponeftntsOverrides<Theme>['M4LTabs'];
     };
     M4LNoItemSelected?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LNoItemSelected'];
@@ -256,5 +256,8 @@ declare module '@mui/material/styles' {
     M4LLabel?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LLabel'];
     };
+    M4LTextField?: {
+      styleOverrides?: ComponentsOverrides<Theme>[' M4LTextField'];
+    };
   }
 }

package/@types/types.d.ts

@@ -31,6 +31,11 @@ import {
 import { HelperErrorOwnerState, HelperErrorOwnerSlotsType } from '../components/HelperError/types';
 import { LabelOwnerState, LabelSlotsType } from '../components/Label/types';
 
+import {
+  TextFieldOwnerState,
+  TextFieldSlotsType,
+} from '../components/mui_extended/TextField/types';
+
 type Theme = Omit<MuiTheme, 'components'>;
 import { TooltipOwnerState, TooltipSlotsType } from '../components/mui_extended/Tooltip/types';
 
@@ -59,6 +64,7 @@ declare module '@mui/material/styles' {
     M4LLabel: LabelSlotsType;
     M4LTooltip: TooltipSlotsType;
     M4LIconButton: IconButtonSlotsType;
+    M4LTextField: TextFieldSlotsType;
     M4LBadge: BadgeSlotsType;
     M4LSkeleton: SkeletonSlotsType;
     M4LTypography: TypographySlotsType;
@@ -78,6 +84,7 @@ declare module '@mui/material/styles' {
     M4LHelperError: Partial<HelperErrorOwnerState>;
     M4LLabel: Partial<LabelOwnerState>;
     M4LTooltip: Partial<TooltipOwnerState>;
+    M4LTextField: Partial<TextFieldOwnerState>;
     M4LIconButton: Partial<IconButtonOwnerState>;
     M4LBadge: Partial<BadgeOwnerState>;
     M4LSkeleton: Partial<SkeletonOwnerState>;
@@ -145,6 +152,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LTooltip'];
       variants?: ComponentsVariants['M4LTooltip'];
     };
+    M4LTextField?: {
+      defaultProps?: ComponentsPropsList['M4LTextField'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTextField'];
+      variants?: ComponentsVariants['M4LTextField'];
+    };
     M4LIconButton?: {
       defaultProps?: ComponentsPropsList['M4LIconButton'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconButton'];

package/components/DynamicFilter/DynamicFIlter.styles.js

@@ -11,6 +11,162 @@ const dynamicFilterStyles = {
   },
   /**
    * TODO: Documentar
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:42:38 - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   innerContainer: ({ theme, ownerState }) => ({
     display: "grid",

package/components/GridLayout/subcomponents/withSizeProvider/index.d.ts

@@ -14,8 +14,8 @@ type MinimalParameters = Pick<CoreProps, 'containerWidth' | 'containerHeight' |
 /**
  * TODO: Documentar
  * @author Juan Escobar - automatic
- * @updatedAt 2024-10-15 17:33:28 - automatic
- * @updatedUser Juan Escobar - automatic
+ * @updatedAt 2024-10-22 09:42:38 - automatic
+ * @updatedUser Bruce Escobar - automatic
  * @createdAt 2024-10-15 17:33:28 - automatic
  */
 export declare function withSizeProvider<T extends MinimalParameters>(ComposedComponent: FunctionComponent<T>): (props: Omit<T, "containerWidth" | "containerHeight" | "innerRef"> & HOCProps) => import("react/jsx-runtime").JSX.Element;

package/components/HelperError/HelperError.d.ts

@@ -1,3 +1,13 @@
 import { HelperErrorProps } from './types';
-/** Es un componente de interfaz de usuario diseñado para mostrar mensajes de error, proporciona información sobre problemas o errores que han ocurrido durante la interacción con la aplicación o el sitio web.  */
+/**
+ * HelperError component displays an error message with optional skeleton width.
+ * @param {HelperErrorProps} props - The properties for the HelperError component.
+ * @param {string} [props.message] - The error message to display.
+ * @param {number} [props.skeletonWidth] - The width of the skeleton loader.
+ * @returns {JSX.Element} The rendered HelperError component.
+ * @author Bruce Escobar - automatic
+ * @createdAt 2024-10-22 09:42:38 - automatic
+ * @updatedAt 2024-10-22 09:42:38 - automatic
+ * @updatedUser Bruce Escobar - automatic
+ */
 export declare const HelperError: (props: HelperErrorProps) => import("react/jsx-runtime").JSX.Element;

package/components/HelperError/HelperError.stories.d.ts

@@ -4,4 +4,10 @@ declare const meta: Meta<typeof HelperError>;
 export default meta;
 type Story = StoryObj<typeof HelperError>;
 /** Base HelperError component  */
-export declare const Base: Story;
+export declare const ErrorBase: Story;
+/** Small  HelperError component  */
+export declare const small: Story;
+/** Medium HelperError component  */
+export declare const medium: Story;
+/** Skeleton HelperError component  */
+export declare const Skeleton: Story;

package/components/HelperError/HelperError.styles.js

@@ -1,11 +1,30 @@
 const helperErrorStyles = {
   /**
-   * TODO: Documentar
+   * Estilos para el slot del root HelperError
    */
-  root: ({ theme }) => ({
+  root: ({ theme, ownerState }) => ({
     "& .MuiTypography-root": {
-      color: theme.vars.palette.error.main
+      color: theme.vars.palette.error.main,
+      ...ownerState.size === "small" && {
+        ...theme.generalSettings.isMobile ? { height: theme.size.typography.mobile.small } : { height: theme.size.typography.desktop.small }
+      },
+      ...ownerState.size === "medium" && {
+        ...theme.generalSettings.isMobile ? { height: theme.size.typography.mobile.medium } : { height: theme.size.typography.desktop.medium }
+      }
     }
+  }),
+  /**
+   * Estilos personalizados Skeleton
+   */
+  skeletonStyled: ({ theme, ownerState }) => ({
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? { height: theme.size.typography.desktop.small } : { height: theme.vars.size.desktop.small.container }
+    },
+    // Condiciones de tamaño Medium en el root
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.medium.container } : { height: theme.vars.size.desktop.medium.container }
+    },
+    variants: []
   })
 };
 export {

package/components/HelperError/slots/HelperErrorEnum.d.ts

@@ -1,3 +1,4 @@
 export declare enum HelperErrorSlots {
-    root = "root"
+    root = "root",
+    skeletonStyled = "skeletonStyled"
 }

package/components/HelperError/slots/HelperErrorEnum.js

@@ -1,5 +1,6 @@
 var HelperErrorSlots = /* @__PURE__ */ ((HelperErrorSlots2) => {
   HelperErrorSlots2["root"] = "root";
+  HelperErrorSlots2["skeletonStyled"] = "skeletonStyled";
   return HelperErrorSlots2;
 })(HelperErrorSlots || {});
 export {

package/components/HelperError/slots/HelperErrorSlots.d.ts

@@ -1,3 +1,6 @@
 export declare const TypographyStyled: 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('..').HelperErrorProps> & Record<string, unknown> & {
     ownerState: Partial<import('..').HelperErrorProps> & Record<string, unknown>;
 }, {}, {}>;
+export declare const SkeletonStyled: 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('..').HelperErrorProps> & Record<string, unknown> & {
+    ownerState: Partial<import('..').HelperErrorProps> & Record<string, unknown>;
+}, {}, {}>;

package/components/HelperError/slots/HelperErrorSlots.js

@@ -3,10 +3,15 @@ import { H as HelperErrorSlots } from "./HelperErrorEnum.js";
 import { H as HELPER_ERROR_KEY_COMPONENT } from "../constant.js";
 import { h as helperErrorStyles } from "../HelperError.styles.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 const TypographyStyled = styled(Typography, {
   name: HELPER_ERROR_KEY_COMPONENT,
   slot: HelperErrorSlots.root
 })(helperErrorStyles?.root);
+styled(Skeleton, {
+  name: HELPER_ERROR_KEY_COMPONENT,
+  slot: HelperErrorSlots.skeletonStyled
+})(helperErrorStyles?.skeletonStyled);
 export {
   TypographyStyled as T
 };

package/components/HelperError/types.d.ts

@@ -3,6 +3,8 @@ import { TypographyProps } from '../mui_extended/Typography/types';
 import { HELPER_ERROR_KEY_COMPONENT } from './constant';
 import { HelperErrorSlots } from './slots';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Sizes } from '@m4l/styles';
+export type HelperErrorSize = 'small' | 'medium';
 /**
  * Extiende de TypographyProps para incluir propiedades de esqueleto y añade la propiedad `message`.
  * `message` es el mensaje de error a mostrar.
@@ -12,6 +14,7 @@ export interface HelperErrorProps extends Pick<TypographyProps, 'skeletonWidth'>
      * Mensaje que se visualiza en el componente HelperError.
      */
     message: string | undefined;
+    size?: Sizes;
 }
 /**
  * Representa el estado del componente HelperError, incluyendo todas las propiedades de HelperErrorProps.

package/components/Icon/Icon.styles.js

@@ -31,7 +31,7 @@ const iconStyles = {
     backgroundColor: !ownerState.disabled ? getPropertyByString(theme.vars.palette, ownerState.color || "text.primary") : theme.vars.palette.text.disabled,
     ...ownerState.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
-        minWidth: theme.vars.size.mobile.medium.base,
+        minWidth: theme.vars.size.mobile.medium.action,
         minHeight: theme.vars.size.mobile.medium.action
       } : {
         minWidth: theme.vars.size.desktop.medium.base,

package/components/Label/Label.d.ts

@@ -1,5 +1,21 @@
 import { LabelProps } from './types';
 /**
- * TODO: Documentar
+ * Label es un componente React que renderiza una etiqueta de texto, la cual puede ser utilizada en formularios o en cualquier
+ * lugar donde se necesite una descripción textual.
+ * Soporta la visualización de un indicador de campo obligatorio, mensaje de ayuda a través
+ * de un tooltip, y puede adaptar su tamaño. El componente también puede mostrar un estado de esqueleto, indicando
+ * que el contenido está cargando.
+ * @author Bruce Escobar - automatic
+ * @createdAt 2024-10-22 09:34:39 - automatic
+ * @updatedAt 2024-10-22 09:42:38 - automatic
+ * @updatedUser Bruce Escobar - automatic
+ */
+/**
+ * Label component that displays a label with optional mandatory and helper messages.
+ * @returns {JSX.Element} The rendered Label component.
+ * @author Bruce Escobar - automatic
+ * @createdAt 2024-10-22 09:34:39 - automatic
+ * @updatedAt 2024-10-22 09:42:38 - automatic
+ * @updatedUser Bruce Escobar - automatic
  */
 export declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/components/Label/Label.js

@@ -2,10 +2,10 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
 import { L as LabelRootStyled, T as TypographyStyled, a as TypographyMandatoryMessageStyled, I as IconHelperMessageStyled, S as SkeletonStyled } from "./slots/LabelSlots.js";
 const Label = (props) => {
-  const { helperMessage, label, mandatory, mandatoryMessage, htmlFor, id, size = "medium" } = props;
+  const { helperMessage, label, mandatory, mandatoryMessage, htmlFor, id, error, size = "medium" } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(LabelRootStyled, { ownerState: {}, htmlFor, id, label: "", children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(LabelRootStyled, { ownerState: {}, htmlFor, id, label: "", variantLabel: "standard", children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(TypographyStyled, { ownerState: { size }, variant: "body", className: "", children: label }),
     mandatory && /* @__PURE__ */ jsx(
       TypographyMandatoryMessageStyled,
@@ -22,10 +22,15 @@ const Label = (props) => {
         tooltipContent: helperMessage,
         ownerState: {},
         placement: "right",
+        className: error ? "helper-icon-error" : "helper-icon",
         src: `${host_static_assets}/${environment_assets}/frontend/components/LabelMessage/assets/icons/infoSmall.svg`
       }
     )
-  ] }) : /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "30%", height: "14px" }) });
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "30%", height: "14px" }),
+    mandatory && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "10px", height: "14px" }),
+    helperMessage && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { type: "helperMessage" }, variant: "rounded", width: "14px", height: "14px" })
+  ] }) });
 };
 export {
   Label as L

package/components/Label/Label.styles.js

@@ -1,6 +1,10 @@
 const labelStyles = {
   /**
-   * TODO: Documentar
+   * Estilos para el contenedor raíz del Label.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:34:39 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   root: ({ ownerState, theme }) => ({
     display: "flex",
@@ -8,6 +12,7 @@ const labelStyles = {
     alignItems: "center",
     flexWrap: "wrap",
     width: "100%",
+    gap: theme.size.baseSpacings.sp1,
     flexDirection: "row",
     [`& .${ownerState.label}`]: {
       ...ownerState.size === "small" && {
@@ -25,7 +30,11 @@ const labelStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * Estilos para el slot Typography.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:34:39 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   typographyStyled: ({ theme, ownerState }) => ({
     marginInlineStart: theme.spacing(0.4),
@@ -43,12 +52,16 @@ const labelStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * Estilos para el mensaje obligatorio.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:34:39 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   typographyMandatoryMessageStyled: ({ theme, ownerState }) => ({
     marginInlineStart: theme.spacing(0.4),
     "& .MuiTypography-root": {
-      color: theme.vars.palette.text.secondary,
+      color: theme.vars.palette.text.primary,
       [theme.breakpoints.up("sm")]: {
         fontSize: ownerState.size === "medium" ? "11px" : "10px"
       },
@@ -58,11 +71,16 @@ const labelStyles = {
     }
   }),
   /**
-   * TODO: Documentar
+   * Estilos para el icono del mensaje de ayuda.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:34:39 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   iconHelperMessageStyled: ({ theme }) => ({
     height: "24px",
     width: "24px",
+    borderRadius: theme.vars.size.borderRadius.r1,
     '&:hover > [class*="M4LIcon-icon"]': {
       backgroundColor: theme.vars.palette.primary.main
     },
@@ -71,7 +89,26 @@ const labelStyles = {
       backgroundColor: theme.vars.palette.text.secondary
     }
   }),
-  skeletonStyled: () => ({})
+  /**
+   *  Estilos para el componente Skeleton.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:34:39 - automatic
+   * @updatedAt 2024-10-22 09:42:38 - automatic
+   * @updatedUser Bruce Escobar - automatic
+   */
+  skeletonStyled: ({ ownerState, theme }) => ({
+    // borderRadius:theme.vars.size.borderRadius.r1,
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.small.action } : { height: theme.vars.size.desktop.small.action }
+    },
+    // Condiciones de tamaño Medium en el root
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.medium.action } : { height: theme.vars.size.desktop.medium.action }
+    },
+    ...ownerState.type === "helperMessage" && {
+      borderRadius: theme.vars.size.borderRadius.r1
+    }
+  })
 };
 export {
   labelStyles as l

package/components/Label/{Label.stories.d.ts → stories/PaletteColor/DefaultinternalManagement/LabelDefaultInternal.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Label } from './Label';
+import { Label } from '../../../Label';
 /**
  * Label es un componente React que renderiza una etiqueta de texto, la cual puede ser utilizada en formularios o en cualquier
  * lugar donde se necesite una descripción textual.
@@ -10,13 +10,11 @@ import { Label } from './Label';
 declare const meta: Meta<typeof Label>;
 export default meta;
 type Story = StoryObj<typeof Label>;
-/** Base Label component  */
-export declare const BaseDefault: Story;
-/**  Label component  With props `mandatory=true`  */
-export declare const Obligatorio: Story;
+/** Base Label componentin mode Skeleton  */
+export declare const MandatoryAndMelpmessage: Story;
+/**  Label component  With props `mandatory=true` in mode Skeleton  */
+export declare const Mandatory: Story;
 /**  Label component  With props `helperMessage`  */
-export declare const LabelWhitInfo: Story;
-/**  Label component  With props `helperMessage` and `mandatoryMessage` */
-export declare const LabelMandatoryMessage: Story;
+export declare const Base: Story;
 /**  Label component in mode Skeleton  */
 export declare const Skeleton: Story;

package/components/Label/stories/PaletteColor/DefaultinternalManagement/LabelDefaultPredeterminado.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Label } from '../../../Label';
+/**
+ * Label es un componente React que renderiza una etiqueta de texto, la cual puede ser utilizada en formularios o en cualquier
+ * lugar donde se necesite una descripción textual.
+ * Soporta la visualización de un indicador de campo obligatorio, mensaje de ayuda a través
+ * de un tooltip, y puede adaptar su tamaño. El componente también puede mostrar un estado de esqueleto, indicando
+ * que el contenido está cargando.
+ */
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+/**  Label component Props Comunes  */
+export declare const MandatoryAndMelpmessage: Story;
+/**  Label component  With props `mandatory=true`  */
+export declare const Mandatory: Story;
+/**  Label component  With props `helperMessage`  */
+export declare const Base: Story;

package/components/Label/stories/PaletteColor/DefaultinternalManagement/commonProps/LabelDefaultInternalVariants.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Label } from '../../../../Label';
+/**
+ * Label es un componente React que renderiza una etiqueta de texto, la cual puede ser utilizada en formularios o en cualquier
+ * lugar donde se necesite una descripción textual.
+ * Soporta la visualización de un indicador de campo obligatorio, mensaje de ayuda a través
+ * de un tooltip, y puede adaptar su tamaño. El componente también puede mostrar un estado de esqueleto, indicando
+ * que el contenido está cargando.
+ */
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+/** Base Label component  */
+export declare const Default: Story;

package/components/Label/stories/PaletteColor/DefaultinternalManagement/commonProps/LabelDefaultVariants.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Label } from '../../../../Label';
+/**
+ * Label es un componente React que renderiza una etiqueta de texto, la cual puede ser utilizada en formularios o en cualquier
+ * lugar donde se necesite una descripción textual.
+ * Soporta la visualización de un indicador de campo obligatorio, mensaje de ayuda a través
+ * de un tooltip, y puede adaptar su tamaño. El componente también puede mostrar un estado de esqueleto, indicando
+ * que el contenido está cargando.
+ */
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+/** Base Label component  */
+export declare const WithObligationAndHelp: Story;

package/components/Label/types.d.ts

@@ -2,11 +2,13 @@ import { LabelSlots } from './slots';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Theme } from '@mui/material';
 import { LABEL_KEY_COMPONENT } from './constants';
+export type LabelVariants = 'standard';
 export interface LabelProps {
     /**  Mesanje de ayuda opcional que se visualiza cuando se interactua con el tooltip del Icono de informacion */
     helperMessage?: string | undefined;
     /** Es la etiqueta de texto principal del componente.*/
     label: string;
+    variantLabel?: LabelVariants;
     /** Es una propiedad que permite visualizar el texto que acompaña a la etiqueta `label` Por defecto es `false`.*/
     mandatory?: boolean;
     /** Es una etiqueta de texto que define si el campo es obligatorio, por defecto se visualiza un `*` de lo contrario se va a mostrar el valor que se proporciona .*/
@@ -17,8 +19,12 @@ export interface LabelProps {
     id?: string;
     /**  Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'. */
     size?: 'small' | 'medium';
+    children?: React.ReactNode;
+    className?: string;
+    /** Indica si hay un error en el campo asociado a la etiqueta. */
+    error?: boolean;
 }
-export type OwnerState = Pick<LabelProps, 'size'>;
+export type OwnerState = Pick<LabelProps, 'size' | 'variantLabel'>;
 export interface LabelOwnerState extends LabelProps, OwnerState {
 }
 export type LabelSlotsType = keyof typeof LabelSlots;

package/components/MFLoader/MFLoader.d.ts

@@ -9,14 +9,20 @@ declare global {
  * divContainerId - El ID del contenedor DIV del microfrontend.
  * scriptId - El ID del script del microfrontend.
  * moduleId - El ID del módulo del microfrontend.
+ * @createdAt 2024-10-22 09:41:31 - automatic
  */
 /**
  * Componente para cargar microfrontends de manera dinámica.
  * @param {MFLoaderProps} props - Props del componente MFLoader.
  * @returns {JSX.Element} - El componente MFLoader.
+ * @createdAt 2024-10-22 09:41:31 - automatic
  */
 /**
  * TODO: Documentar
+ * @author Bruce Escobar - automatic
+ * @createdAt 2024-10-22 09:41:31 - automatic
+ * @updatedAt 2024-10-22 09:42:38 - automatic
+ * @updatedUser Bruce Escobar - automatic
  */
 export declare function MFLoader(props: MFLoaderProps): import("react/jsx-runtime").JSX.Element;
 export default MFLoader;