@m4l/components 9.1.60 → 9.1.61

package/components/Icon/types.d.ts

@@ -8,7 +8,7 @@ import { TooltipProps } from '../mui_extended/Tooltip/types';
 /**
  * Define la lista de posibles colores que se pueden aplicar al componente icono.
  */
-export type IconColors = 'primary.main' | 'text.primary' | 'primary.contrastText' | 'info.main' | 'success.main' | 'error.main' | 'warning.main' | string;
+export type IconColors = 'primary.main' | 'text.primary' | 'text.disabled' | 'primary.contrastText' | 'info.main' | 'success.main' | 'error.main' | 'warning.main' | string;
 export interface IconProps extends Pick<TooltipProps, 'placement'> {
     /**
      * URL o ruta de la imagen que se va a mostrar.

package/components/hook-form/RHFCheckbox/RHFCheckbox.js

@@ -66,7 +66,7 @@ function RHFCheckbox(props) {
                         checked: value,
                         disabled: disabled ? true : false,
                         disableRipple: true,
-                        label,
+                        inlineText: label,
                         mandatory,
                         mandatoryMessage,
                         helperMessage,

package/components/maps/components/Map/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/index.js

@@ -109,7 +109,7 @@ function MapSourcesTool() {
                   {
                     disabled: currentMapSourceId !== mapSourceOption.id,
                     checked: mapSourceOption.roadSeletedOptions?.bicyclingLayer || false,
-                    label: "Bycicle",
+                    inlineText: "Bycicle",
                     onChange: (_e, checked) => {
                       setMapSourceRoadMapOptions({ bicyclingLayer: checked });
                     }

package/components/mui_extended/CheckBox/CheckBox.d.ts

@@ -21,4 +21,4 @@ import { CheckboxProps } from './types';
  * />
  * ```
  */
-export declare const CheckBox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CheckBox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/components/mui_extended/CheckBox/CheckBox.js

@@ -1,66 +1,74 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { useTheme } from "@mui/material";
+import { forwardRef, useId } from "react";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { C as CHECK_BOX_KEY_COMPONENT } from "./constants.js";
+import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { C as CheckBoxRootStyled, M as MUICheckboxStyled, L as LabelCheckBoxStyled, S as SkeletonStyled } from "./slots/CheckBoxSlots.js";
-const CheckBox = forwardRef((props, ref) => {
+import { C as CheckBoxRootStyled, M as MUICheckboxStyled, I as IconCheckedStyled, a as IconStyled, T as TypographyStyled, S as SkeletonStyled } from "./slots/CheckBoxSlots.js";
+import { C as CheckBoxSlots } from "./slots/CheckBoxEnum.js";
+const CheckBox = forwardRef((props) => {
   const {
     className,
-    size = "small",
+    size = "medium",
     disabled,
-    color = "primary",
-    label,
+    color = "default",
     mandatory,
     mandatoryMessage,
     helperMessage,
+    id,
     htmlFor,
     error,
+    inlineText,
+    checked,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isSkeleton = useModuleSkeleton();
-  const theme = useTheme();
-  const paletteColor = getPropertyByString(
-    theme.palette,
-    disabled ? "default" : error ? "error" : color,
-    theme.palette.default
-  );
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const classes = getComponentClasses(CHECK_BOX_KEY_COMPONENT, CheckBoxSlots);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const hookId = useId();
+  const finalId = id || hookId;
+  const checkedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/checked.svg`;
+  const uncheckedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/unchecked.svg`;
   const ownerState = {
-    CheckBoxPaletteColor: paletteColor,
-    CheckBoxDisabled: disabled,
-    CheckBoxColor: color,
-    CheckBoxError: error,
-    CheckBoxSizes: adjustedSize
+    disabled,
+    color,
+    error,
+    size,
+    checked
   };
-  return /* @__PURE__ */ jsx(CheckBoxRootStyled, { ref, ownerState: { ...ownerState }, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(CheckBoxRootStyled, { ownerState: { ...ownerState }, className: clsx(className, classes.root), children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       MUICheckboxStyled,
       {
-        ownerState: { ownerState },
+        ownerState: { ...ownerState },
         disableRipple: true,
-        id: htmlFor,
-        tabIndex: 0,
+        id: finalId,
+        checked,
+        checkedIcon: /* @__PURE__ */ jsx(IconCheckedStyled, { src: checkedIconUrl, size: currentSize, color: disabled ? "text.disabled" : error ? "error.main" : "primary.main", ownerState: { ...ownerState } }),
+        icon: /* @__PURE__ */ jsx(IconStyled, { src: uncheckedIconUrl, size: currentSize, ownerState: { ...ownerState }, color: disabled ? "text.disabled" : error ? "error.main" : "text.primary" }),
+        disabled,
+        inputProps: { "aria-labelledby": finalId, "aria-invalid": error ? "true" : void 0 },
         ...others
       }
     ),
-    label && /* @__PURE__ */ jsx(
-      LabelCheckBoxStyled,
+    inlineText && /* @__PURE__ */ jsx(
+      TypographyStyled,
       {
+        component: "label",
+        htmlFor: finalId,
+        variant: "body",
         ownerState: { ...ownerState },
-        label,
-        className: "MuiTypography-checkbox",
-        mandatory,
-        mandatoryMessage,
-        helperMessage,
-        htmlFor,
-        disabled
+        size: adjustedSize,
+        disabled,
+        children: inlineText
       }
     )
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "rounded", width: "24px", height: "24px" }),
-    label && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "100px", height: "24px" })
+    inlineText ? /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "100px", height: "24px" }) : null
   ] }) });
 });
 export {

package/components/mui_extended/CheckBox/CheckBox.styles.js

@@ -1,92 +1,84 @@
 const checkBoxStyles = {
   /**
    * Estilos generales para el checkbox
-   * @author Andrés Quintero - automatic
-   * @createdAt 2024-12-30 14:36:06 - automatic
-   * @updatedAt 2024-12-30 14:36:10 - automatic
-   * @updatedUser Andrés Quintero - automatic
    */
-  root: ({ theme, ownerState }) => ({
-    display: "flex",
-    alignItems: "center",
-    outline: "none",
-    paddingRight: theme.vars.size.baseSpacings.sp1,
-    overflow: "visible",
-    boxSizing: "border-box",
-    gap: theme.vars.size.baseSpacings.sp1,
-    //Estilos para el checkbox
-    "& .MuiCheckbox-root": {
-      color: ownerState.CheckBoxPaletteColor?.main || theme.vars.palette?.text.primary,
+  root: ({ theme }) => {
+    return {
+      display: "flex",
+      alignItems: "center",
+      outline: "none",
+      paddingRight: theme.vars.size.baseSpacings.sp1,
+      overflow: "visible",
+      boxSizing: "border-box",
+      gap: theme.vars.size.baseSpacings.sp1
+      // height: theme.vars.size[device][size].action,
+    };
+  },
+  /**
+   * Componente MuiCheckBox, FocusVisible para cuando esta seleccionado el CheckBox
+   */
+  muiCheckBox: ({ theme, ownerState }) => {
+    const color = ownerState.error ? "error" : "primary";
+    const opacityColor = ownerState.error ? "error" : "default";
+    const device = theme.generalSettings.isMobile ? "mobile" : "desktop";
+    const size = ownerState.size ?? "medium";
+    return {
+      overflow: "visible",
+      height: theme.vars.size[device][size].action,
+      width: theme.vars.size[device][size].action,
       borderRadius: theme.size.borderRadius.r1,
+      "&:hover": {
+        backgroundColor: theme.vars.palette[opacityColor].hoverOpacity
+      },
       "&:active": {
-        color: ownerState.CheckBoxPaletteColor?.active,
-        backgroundColor: ownerState.CheckBoxPaletteColor?.activeOpacity
+        backgroundColor: theme.vars.palette[opacityColor].activeOpacity
       },
       "&.Mui-checked": {
-        borderRadius: theme.size.borderRadius.r1,
-        color: ownerState.CheckBoxPaletteColor?.main,
-        "&:active": {
-          color: ownerState.CheckBoxPaletteColor?.active,
-          backgroundColor: ownerState.CheckBoxPaletteColor?.activeOpacity
-        },
         "&:hover": {
-          color: ownerState.CheckBoxPaletteColor?.hover,
-          backgroundColor: ownerState.CheckBoxPaletteColor?.hoverOpacity
+          backgroundColor: theme.vars.palette[color].hoverOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette[color].hover
+          }
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette[color].activeOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette[color].active
+          }
         }
       },
+      "&.Mui-focusVisible, &:focus-visible": {
+        outline: `1px solid ${theme.vars.palette["primary"].focusVisible}`,
+        outlineOffset: 2
+      },
       // Historia Disabled para CheckBox
-      ...ownerState.CheckBoxDisabled && {
-        color: theme.vars.palette?.text.disabled,
-        pointerEvents: ownerState.CheckBoxDisabled ? "none" : "auto",
+      ...ownerState.disabled && {
+        pointerEvents: ownerState.disabled ? "none" : "auto",
         "&:hover": {
-          pointerEvents: ownerState.CheckBoxDisabled ? "none" : "auto"
+          pointerEvents: ownerState.disabled ? "none" : "auto"
         }
       }
-    },
-    //Estilos para el label del CheckBox Disabled
-    "& .MuiTypography-root": {
-      ...ownerState.CheckBoxDisabled && {
-        color: `${theme.vars.palette?.text.disabled} !important`
-      }
-    },
-    //Clase de estilo para cuando esta en estado hover pero no esta seleccionado el CheckBox
-    "& .MuiCheckbox-root:not(.Mui-checked):hover": {
-      backgroundColor: theme.palette.action.selected
-    }
-  }),
+    };
+  },
   /**
-   * Componente MuiCheckBox, FocusVisible para cuando esta seleccionado el CheckBox
-   * @author Andrés Quintero - automatic
-   * @createdAt 2024-12-30 14:36:06 - automatic
-   * @updatedAt 2024-12-30 14:36:10 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * Estilos para el inline-text del CheckBox
    */
-  muiCheckBox: ({ theme }) => ({
-    overflow: "visible",
-    "&.Mui-focusVisible, &:focus-visible": {
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        inset: "0px",
-        border: theme.vars.size.borderStroke.container,
-        color: theme.vars.palette.primary.main,
-        borderRadius: theme.vars.size.borderRadius.r1,
-        boxSizing: "border-box"
-      }
-    },
-    "&.MuiButtonBase-root": {}
+  skeletonStyled: ({ theme }) => ({
+    borderRadius: theme.vars.size.borderRadius.r1,
+    backgroundColor: theme.vars.palette?.skeleton.default
   }),
+  /**
+   * El estilado de este slot, se hace en muiCheckBox, debido a que el input absorve los psuedo selectore, entonces hay que hacerlos desde el nodo padre.
+   */
+  icon: {},
+  /**
+   * El estilado de este slot, se hace en muiCheckBox, debido a que el input absorve los psuedo selectore, entonces hay que hacerlos desde el nodo padre.
+   */
+  iconChecked: {},
   /**
    * Estilos para el label del CheckBox
-   * @author Andrés Quintero - automatic
-   * @createdAt 2024-12-30 14:36:06 - automatic
-   * @updatedAt 2024-12-30 14:36:10 - automatic
-   * @updatedUser Andrés Quintero - automatic
    */
-  skeletonStyled: ({ theme }) => ({
-    borderRadius: theme.vars.size.borderRadius.r1
-  }),
-  labelCheckBox: {}
+  typographyStyled: {}
 };
 export {
   checkBoxStyles as c

package/components/mui_extended/CheckBox/slots/CheckBoxEnum.d.ts

@@ -1,6 +1,8 @@
 export declare enum CheckBoxSlots {
     root = "root",
     muiCheckBox = "muiCheckBox",
-    labelCheckBox = "labelCheckBox",
-    skeletonStyled = "skeletonStyled"
+    typographyStyled = "typographyStyled",
+    skeletonStyled = "skeletonStyled",
+    iconChecked = "iconChecked",
+    icon = "icon"
 }

package/components/mui_extended/CheckBox/slots/CheckBoxEnum.js

@@ -1,8 +1,10 @@
 var CheckBoxSlots = /* @__PURE__ */ ((CheckBoxSlots2) => {
   CheckBoxSlots2["root"] = "root";
   CheckBoxSlots2["muiCheckBox"] = "muiCheckBox";
-  CheckBoxSlots2["labelCheckBox"] = "labelCheckBox";
+  CheckBoxSlots2["typographyStyled"] = "typographyStyled";
   CheckBoxSlots2["skeletonStyled"] = "skeletonStyled";
+  CheckBoxSlots2["iconChecked"] = "iconChecked";
+  CheckBoxSlots2["icon"] = "icon";
   return CheckBoxSlots2;
 })(CheckBoxSlots || {});
 export {

package/components/mui_extended/CheckBox/slots/CheckBoxSlots.d.ts

@@ -4,7 +4,7 @@ export declare const CheckBoxRootStyled: import('@emotion/styled').StyledCompone
 export declare const MUICheckboxStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').CheckboxProps, keyof import('@mui/material').CheckboxProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const LabelCheckBoxStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown> & {
+export declare const TypographyStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const SkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
@@ -12,3 +12,9 @@ export declare const SkeletonStyled: import('@emotion/styled').StyledComponent<P
 }, "children" | "style" | "variant" | "width" | "height" | "animation" | "sx" | "classes" | "className">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "variant" | "width" | "height" | "translate" | "animation" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown>;
 }, {}, {}>;
+export declare const IconCheckedStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/mui_extended/CheckBox/slots/CheckBoxSlots.js

@@ -3,26 +3,37 @@ import { Checkbox, Skeleton } from "@mui/material";
 import { C as CheckBoxSlots } from "./CheckBoxEnum.js";
 import { C as CHECK_BOX_KEY_COMPONENT } from "../constants.js";
 import { c as checkBoxStyles } from "../CheckBox.styles.js";
-import { L as Label } from "../../../Label/Label.js";
+import { T as Typography } from "../../Typography/Typography.js";
+import { I as Icon } from "../../../Icon/Icon.js";
 const CheckBoxRootStyled = styled("div", {
   name: CHECK_BOX_KEY_COMPONENT,
   slot: CheckBoxSlots.root
-})(checkBoxStyles?.root);
+})(checkBoxStyles.root);
 const MUICheckboxStyled = styled(Checkbox, {
   name: CHECK_BOX_KEY_COMPONENT,
   slot: CheckBoxSlots.muiCheckBox
-})(checkBoxStyles?.muiCheckBox);
-const LabelCheckBoxStyled = styled(Label, {
+})(checkBoxStyles.muiCheckBox);
+const TypographyStyled = styled(Typography, {
   name: CHECK_BOX_KEY_COMPONENT,
-  slot: CheckBoxSlots.labelCheckBox
-})(checkBoxStyles?.labelCheckBox);
+  slot: CheckBoxSlots.typographyStyled
+})(checkBoxStyles.typographyStyled);
 const SkeletonStyled = styled(Skeleton, {
   name: CHECK_BOX_KEY_COMPONENT,
   slot: CheckBoxSlots.skeletonStyled
-})(checkBoxStyles?.skeletonStyled);
+})(checkBoxStyles.skeletonStyled);
+const IconCheckedStyled = styled(Icon, {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.iconChecked
+})(checkBoxStyles.iconChecked);
+const IconStyled = styled(Icon, {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.icon
+})(checkBoxStyles.icon);
 export {
   CheckBoxRootStyled as C,
-  LabelCheckBoxStyled as L,
+  IconCheckedStyled as I,
   MUICheckboxStyled as M,
-  SkeletonStyled as S
+  SkeletonStyled as S,
+  TypographyStyled as T,
+  IconStyled as a
 };

package/components/mui_extended/CheckBox/test/CheckBox.test.d.ts

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

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

@@ -1,4 +1,4 @@
-import { CheckboxProps as MUICheckboxProps, PaletteColor, Theme } from '@mui/material';
+import { CheckboxProps as MUICheckboxProps, Theme } from '@mui/material';
 import { LabelProps } from '../../Label/types';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { CheckBoxSlots } from './slots';
@@ -10,38 +10,31 @@ export type OwnerState = Pick<CheckboxProps, 'size' | 'disabled'>;
  */
 export type CheckBoxVariants = 'standard';
 export interface CheckboxProps extends MUICheckboxProps, Omit<LabelProps, 'label' | 'size'> {
-    label?: string;
-    color?: Extract<ComponentPalletColor, 'primary'>;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    color?: Extract<ComponentPalletColor, 'default'>;
+    inlineText?: string;
 }
 export interface CheckBoxOwnerState {
     /**
-     * Indica si el  CheckBox está deshabilitado.
-     */
-    CheckBoxDisabled?: boolean;
-    /**
-     * Color de la paleta de CheckBox.
+     * Si está checkedo o no.
      */
-    CheckBoxPaletteColor: PaletteColor;
+    checked?: boolean;
     /**
-     * Variante de CheckBox.
-     */
-    CheckBoxVariant?: CheckBoxVariants;
-    /**
-     * Color de la paleta del componente del CheckBox.
+     * Indica si el  CheckBox está deshabilitado.
      */
-    CheckBoxComponentPaletteColor?: ComponentPalletColor;
+    disabled?: boolean;
     /**
      * Tamaño de CheckBox.
      */
-    CheckBoxSizes: Extract<Sizes, 'small' | 'medium'>;
+    size: Extract<Sizes, 'small' | 'medium'>;
     /**
      * Indica si CheckBox es error.
      */
-    CheckBoxError?: boolean;
+    error?: boolean;
     /**
      * Color del campo de CheckBox.
      */
-    CheckBoxColor?: Extract<ComponentPalletColor, 'primary'>;
+    color: Extract<ComponentPalletColor, 'default'>;
 }
 export type CheckBoxSlotsType = keyof typeof CheckBoxSlots;
 export type CheckBoxStyles = OverridesStyleRules<CheckBoxSlotsType, typeof CHECK_BOX_KEY_COMPONENT, Theme>;

package/components/mui_extended/Typography/Typography.js

@@ -16,16 +16,18 @@ function Typography(props) {
     className,
     dataTestid,
     children,
+    disabled,
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
-    typographyColor: color,
-    typographySize: adjustedSize,
-    typographyskeletonRows: skeletonRows,
-    typographyVariant: variant
+    disabled,
+    color,
+    size: adjustedSize,
+    skeletonRows,
+    variant
   };
   return /* @__PURE__ */ jsx(
     StyledMUITypography,

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

@@ -41,15 +41,18 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     dataTestid?: string;
     /** Sirve para vincular un elemento de etiqueta con un elemento de formulario, como un campo de entrada, lo que permite que al hacer clic en el texto de la etiqueta, se active el campo correspondiente*/
     htmlFor?: string | undefined;
+    /** Si esta disabled, el texto pasa a text.disabled */
+    disabled?: boolean;
 }
 /**
  * Define valores de estado necesarios para estilar el componente.
  */
 export interface TypographyOwnerState {
-    typographyColor: TypographyProps['color'];
-    typographyVariant: TypographyProps['variant'];
-    typographySize: TypographyProps['size'];
-    typographyskeletonRows: TypographyProps['skeletonRows'];
+    disabled?: boolean;
+    color: TypographyProps['color'];
+    variant: TypographyProps['variant'];
+    size: TypographyProps['size'];
+    skeletonRows: TypographyProps['skeletonRows'];
 }
 /**
  * Agrupa la lista de slots del componente.
@@ -59,4 +62,4 @@ export type TypographySlotsType = keyof typeof TypographySlots;
  * Define las capacidades de estilos css disponibles para los slots del componente,
  * también asocia la clase TYPOGRAPHY_KEY_COMPONENT a cada slot.
  */
-export type TypographyStyles = Partial<OverridesStyleRules<TypographySlotsType, typeof TYPOGRAPHY_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type TypographyStyles = OverridesStyleRules<TypographySlotsType, typeof TYPOGRAPHY_KEY_COMPONENT, Theme>;

package/components/mui_extended/Typography/typography.styles.js

@@ -14,27 +14,27 @@ const typographyStyles = {
       // Estilos generales 🌐
       // skeleton spacing when multiple rows 🦴
       fontFamily: theme.typography.fontFamily,
-      ...ownerState.typographyskeletonRows && ownerState.typographyskeletonRows > 1 && {
+      ...ownerState.skeletonRows && ownerState.skeletonRows > 1 && {
         display: "flex",
         flexDirection: "column"
       },
       // Override de estilos generales de MUI 🚫
       // color text.primary 🎨
-      ...ownerState.typographyColor === "text.primary" && {
+      ...ownerState.color === "text.primary" && {
         color: theme.vars.palette.text.primary
       },
       // color text.secondary 🎨
-      ...ownerState.typographyColor === "text.secondary" && {
+      ...ownerState.color === "text.secondary" && {
         color: theme.vars.palette.text.secondary
       },
       // color text.disabled 🎨
-      ...ownerState.typographyColor === "text.disabled" && {
+      ...(ownerState.disabled || ownerState.color === "text.disabled") && {
         color: theme.vars.palette.text.disabled
       },
       ...getTypographyStyles(
         theme.generalSettings.isMobile,
-        ownerState.typographySize || "medium",
-        ownerState.typographyVariant || "body"
+        ownerState.size || "medium",
+        ownerState.variant || "body"
       )
     }
   }),

package/package.json

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