@m4l/components 9.1.60 → 9.1.62

package/@types/types.d.ts

@@ -132,6 +132,7 @@ import { ToggleButtonOwnerState, ToggleButtonSlotsType } from '../components/mui
 
 import { BooleanFormatterOwnerState, PresentationType } from '../components/formatters/BooleanFormatter/types';
 import { ToggleIconButtonOwnerState, ToggleIconButtonSlotsType } from '../components/mui_extended/ToggleIconButton/types';
+import { TabsSlotsType,TabsOwnerState } from '../components/mui_extended/Tabs/types';
 
 import { PopoverOwnerState, PopoverSlotsType } from '../components/mui_extended/Popover/types';
 import { AccountPopoverOwnerState, AccountPopoverSlotsType } from '../components/AccountPopover/types';
@@ -189,6 +190,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: ToggleButtonSlotsType;
     M4LBooleanFormatter: PresentationType;
     M4LToggleIconButton: ToggleIconButtonSlotsType;
+    M4LTabs: TabsSlotsType;
     RHFM4LAutocomplete: RHFAutocompleteSlotsType;
     M4LAccountPopover: AccountPopoverSlotsType;
     M4LPropertyValue: PropertyValueType;
@@ -241,6 +243,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: Partial<ToggleButtonOwnerState>;
     M4LBooleanFormatter: Partial<BooleanFormatterOwnerState>;
     M4LToggleIconButton: Partial<ToggleIconButtonOwnerState>;
+    M4LTabs: Partial<TabsOwnerState>;
     RHFM4LAutocomplete: Partial<RHFAutocompleteOwnerState>;
     M4LAccountPopover: Partial<AccountPopoverOwnerState>;
     M4LPropertyValue: Partial<PropertyVaLueOwnerState>;
@@ -570,6 +573,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LPropertyValue'];
       variants?: ComponentsVariants['M4LPropertyValue'];
     };
+    M4LTabs?: {
+      defaultProps?: ComponentsPropsList['M4LTabs'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTabs'];
+      variants?: ComponentsVariants['M4LTabs'];
+    };
     M4LColor?: {
       defaultProps?: ComponentsPropsList['M4LColor'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LColor'];

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/Tab/Slots/TabEnum.d.ts

@@ -4,5 +4,6 @@
  */
 export declare enum TabSlots {
     root = "root",
+    icon = "icon",
     tipography = "tipography"
 }

package/components/mui_extended/Tab/Slots/TabEnum.js

@@ -1,5 +1,6 @@
 var TabSlots = /* @__PURE__ */ ((TabSlots2) => {
   TabSlots2["root"] = "root";
+  TabSlots2["icon"] = "icon";
   TabSlots2["tipography"] = "tipography";
   return TabSlots2;
 })(TabSlots || {});

package/components/mui_extended/Tab/Slots/TabSlots.d.ts

@@ -8,6 +8,14 @@ export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<
 }, "children" | "value" | "action" | "style" | "icon" | "disabled" | "sx" | "classes" | "className" | "tabIndex" | "label" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "iconPosition" | "wrapped">, "children" | "value" | "ref" | "title" | "id" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "disabled" | "translate" | "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" | "label" | "key" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "iconPosition" | "wrapped"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TabOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').TabOwnerState> & Record<string, unknown>;
 }, {}, {}>;
+/**
+ * `IconStyled`:
+ * Componente de tipo icono (`Icon`).
+ * Utiliza el slot `icon` para agregar estilos específicos al icono del Tab.
+ */
+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').TabOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TabOwnerState> & Record<string, unknown>;
+}, {}, {}>;
 /**
  * `TypographyStyled`:
  * Componente de texto estilizado basado en `Typography`, se usa para mostrar texto en cada pestaña.

package/components/mui_extended/Tab/Slots/TabSlots.js

@@ -4,15 +4,21 @@ import { t as tabStyles } from "../Tab.styles.js";
 import { T as TAB_KEY_COMPONENT } from "../constants.js";
 import { T as TabSlots } from "./TabEnum.js";
 import { T as Typography } from "../../Typography/Typography.js";
+import { I as Icon } from "../../../Icon/Icon.js";
 const RootStyled = styled(Tab, {
   name: TAB_KEY_COMPONENT,
   slot: TabSlots.root
 })(tabStyles?.root);
+const IconStyled = styled(Icon, {
+  name: TAB_KEY_COMPONENT,
+  slot: TabSlots.icon
+})(tabStyles?.icon);
 const TypographyStyled = styled(Typography, {
   name: TAB_KEY_COMPONENT,
   slot: TabSlots.tipography
 })(tabStyles?.tipography);
 export {
+  IconStyled as I,
   RootStyled as R,
   TypographyStyled as T
 };

package/components/mui_extended/Tab/Tab.js

@@ -2,11 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
 import { T as TabSlots } from "./Slots/TabEnum.js";
-import { a as TYPOGRAPHY_KEY, b as TAB_SPECIFY, I as ICON_KEY, T as TAB_KEY_COMPONENT } from "./constants.js";
+import { T as TAB_KEY_COMPONENT } from "./constants.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { R as RootStyled, T as TypographyStyled } from "./Slots/TabSlots.js";
-import { I as Icon } from "../../Icon/Icon.js";
+import { R as RootStyled, T as TypographyStyled, I as IconStyled } from "./Slots/TabSlots.js";
 function Tab(props) {
   const {
     size = "medium",
@@ -38,13 +37,14 @@ function Tab(props) {
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      label: label ? /* @__PURE__ */ jsx(TypographyStyled, { className: clsx(TYPOGRAPHY_KEY, TAB_SPECIFY), ownerState: { ...OwnerState }, variant: "body", children: label }) : void 0,
+      label: label ? /* @__PURE__ */ jsx(TypographyStyled, { size: adjustedSize, className: clsx(classes.tipography, className), ownerState: { ...OwnerState }, variant: "body", children: label }) : void 0,
       disabled: isSkeleton || disabled,
       ownerState: { ...OwnerState },
       icon: urlIcon ? /* @__PURE__ */ jsx(
-        Icon,
+        IconStyled,
         {
-          className: clsx(ICON_KEY, TAB_SPECIFY),
+          ownerState: { ...OwnerState },
+          className: clsx(classes.icon, className),
           src: urlIcon,
           size
         }

package/components/mui_extended/Tab/Tab.styles.js

@@ -48,14 +48,25 @@ const tabStyles = {
     },
     // Ajuste de alineación del icono
     "& .MuiTab-iconWrapper": {
-      marginBottom: 1
+      marginBottom: 0
     },
-    // Default o disabled
-    ".icon.M4lclassCssSpecificity div": {
-      backgroundColor: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.secondary
+    //Disabled
+    ...ownerState.tabDisabled && {
+      ".M4LTab-icon div": {
+        backgroundColor: `${theme.vars.palette.text.disabled} !important`
+      },
+      ".M4LTab-tipography": {
+        color: `${theme.vars.palette.text.disabled} !important`
+      }
     },
-    "span.M4lclassCssSpecificity": {
-      color: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.secondary
+    //Default
+    "&:not(.Mui-selected)": {
+      ".M4LTab-icon div": {
+        backgroundColor: theme.vars.palette.text.secondary
+      },
+      ".M4LTab-tipography": {
+        color: theme.vars.palette.text.secondary
+      }
     },
     /**
      * **Pseudoclases**:
@@ -79,10 +90,10 @@ const tabStyles = {
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.border.secondary,
       borderBottom: 0,
-      ".icon.M4lclassCssSpecificity div": {
+      ".M4LTab-icon div": {
         backgroundColor: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.enabled
       },
-      "span": {
+      ".M4LTab-tipography": {
         color: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.enabled
       },
       // Efecto ripple en estado seleccionado
@@ -97,7 +108,7 @@ const tabStyles = {
         height: theme.vars.size.borderRadius["r0-5"],
         left: 0,
         top: -1,
-        backgroundColor: ownerState.tabSkeleton ? theme.vars.palette.background.surface : ownerState.tabDisabled ? theme.vars.palette.background.surface : theme.vars.palette.primary.main,
+        backgroundColor: ownerState.tabSkeleton ? theme.vars.palette.skeleton.default : ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.main,
         borderEndStartRadius: theme.vars.size.borderRadius["r1"],
         borderEndEndRadius: theme.vars.size.borderRadius["r1"],
         position: "absolute"
@@ -107,10 +118,10 @@ const tabStyles = {
       },
       "&:active": {
         background: theme.vars.palette.primary.activeOpacity,
-        ".icon.M4lclassCssSpecificity div": {
+        ".M4LTab-icon div": {
           backgroundColor: theme.vars.palette.primary.active
         },
-        "span": {
+        ".M4LTab-tipography": {
           color: theme.vars.palette.primary.active
         },
         "&::after": {
@@ -120,44 +131,18 @@ const tabStyles = {
     },
     "&.Mui-selected:focus-visible": {
       background: theme.vars.palette.primary.activeOpacity,
-      "&::before": {
-        zIndex: 1,
-        content: '""',
-        position: "absolute",
-        top: `-${theme.size.baseSpacings.sp1}`,
-        left: `-${theme.size.baseSpacings.sp1}`,
-        right: `-${theme.size.baseSpacings.sp1}`,
-        bottom: 0,
-        boxSizing: "border-box",
-        border: theme.vars.size.borderStroke.container,
-        borderBottom: 0,
-        borderColor: theme.vars.palette.primary.focusVisible,
-        borderRadius: theme.vars.size.borderRadius["r1-5"],
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0
-      },
+      outline: "1px solid",
+      outlineOffset: "-1px",
+      color: theme.vars.palette[ownerState.tabColor || "default"].focusVisible,
       "&:hover": {
         backgroundColor: theme.vars.palette.primary.activeOpacity
       }
     },
     "&:focus-visible": {
       background: theme.vars.palette[ownerState.tabColor || "default"].activeOpacity,
-      "&::before": {
-        zIndex: 1,
-        content: '""',
-        position: "absolute",
-        top: `-${theme.size.baseSpacings.sp1}`,
-        left: `-${theme.size.baseSpacings.sp1}`,
-        right: `-${theme.size.baseSpacings.sp1}`,
-        bottom: 0,
-        boxSizing: "border-box",
-        border: theme.vars.size.borderStroke.container,
-        borderBottom: 0,
-        borderColor: theme.vars.palette[ownerState.tabColor || "default"].focusVisible,
-        borderRadius: theme.vars.size.borderRadius["r1-5"],
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0
-      },
+      outline: "1px solid",
+      outlineOffset: "-1px",
+      color: theme.vars.palette[ownerState.tabColor || "default"].focusVisible,
       "&:hover": {
         backgroundColor: theme.vars.palette[ownerState.tabColor || "default"].activeOpacity
       }
@@ -172,12 +157,12 @@ const tabStyles = {
    * @updatedUser Andrés Quintero - automatic
    */
   tipography: ({ ownerState }) => ({
-    "&.M4lclassCssSpecificity": {
-      ...ownerState.tabSkeleton && {
-        width: "32px !important"
-      }
+    cursor: "pointer",
+    ...ownerState.tabSkeleton && {
+      width: "32px"
     }
-  })
+  }),
+  icon: {}
 };
 export {
   tabStyles as t

package/components/mui_extended/Tab/constants.d.ts

@@ -2,13 +2,3 @@
  * Nombre de clase que se usa para dar identidad a los slots del componente.
  */
 export declare const TAB_KEY_COMPONENT = "M4LTab";
-/**
- * Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
- * tener la necesidad de agregar valores en !important.
- */
-export declare const TAB_SPECIFY = "M4lclassCssSpecificity";
-/**
- *
- */
-export declare const TYPOGRAPHY_KEY = "tipography";
-export declare const ICON_KEY = "icon";

package/components/mui_extended/Tab/constants.js

@@ -1,10 +1,4 @@
 const TAB_KEY_COMPONENT = "M4LTab";
-const TAB_SPECIFY = "M4lclassCssSpecificity";
-const TYPOGRAPHY_KEY = "tipography";
-const ICON_KEY = "icon";
 export {
-  ICON_KEY as I,
-  TAB_KEY_COMPONENT as T,
-  TYPOGRAPHY_KEY as a,
-  TAB_SPECIFY as b
+  TAB_KEY_COMPONENT as T
 };

package/components/mui_extended/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
-import { TabsProps } from '@mui/material';
+import { TabsProps } from './types';
 /**
- * TODO: Documentar
+ * Componente `Tabs` usandon el `MuiTabs` de MUI.
  */
 export declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Tabs/Tabs.js

@@ -1,11 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { u as useTabsUtilityClasses } from "./classes/index.js";
-import { M as MUITabs } from "./styles.js";
+import { R as RootStyled } from "./slots/TabsSlots.js";
 const Tabs = (props) => {
   const { children, className, ...others } = props;
-  const classes = useTabsUtilityClasses();
-  return /* @__PURE__ */ jsx(MUITabs, { className: clsx(classes.root, className), ...others, children });
+  const ownerState = {};
+  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { ownerState }, ...others, children });
 };
 export {
   Tabs as T

package/components/mui_extended/Tabs/Tabs.styles.d.ts

@@ -0,0 +1,2 @@
+import { TabsStyles } from './types';
+export declare const tabsStyles: TabsStyles;

package/components/mui_extended/Tabs/Tabs.styles.js

@@ -0,0 +1,34 @@
+const tabsStyles = {
+  /**
+   * Elemento root referencia a `MuiTabs` de MUI
+   */
+  root: ({ theme }) => ({
+    position: "relative",
+    zIndex: 2,
+    display: "flex",
+    overflow: "auto",
+    width: "100%",
+    height: "fit-content",
+    maxWidth: "fit-content",
+    minHeight: "fit-content",
+    background: theme.vars.palette.default.enabled,
+    paddingBottom: theme.vars.size.baseSpacings.sp0,
+    gap: theme.vars.size.baseSpacings.sp0,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
+    borderBottomRightRadius: theme.vars.size.borderRadius.r0,
+    "& .MuiTabs-scroller": {
+      overflow: "visible !important"
+    },
+    "& .MuiTabs-indicator": {
+      display: "none"
+    },
+    "& .simplebar-content": {
+      display: "flex",
+      gap: theme.vars.size.baseSpacings.sp0
+    }
+  })
+};
+export {
+  tabsStyles as t
+};

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

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

package/components/mui_extended/Tabs/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * `TABS_KEY_COMPONENT` key para identificar el componente.
+ */
+export declare const TABS_KEY_COMPONENT = "M4LTabs";

package/components/mui_extended/Tabs/constants.js

@@ -0,0 +1,4 @@
+const TABS_KEY_COMPONENT = "M4LTabs";
+export {
+  TABS_KEY_COMPONENT as T
+};

package/components/mui_extended/Tabs/slots/TabsEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum TabsSlots {
+    root = "root"
+}

package/components/mui_extended/Tabs/slots/TabsEnum.js

@@ -0,0 +1,7 @@
+var TabsSlots = /* @__PURE__ */ ((TabsSlots2) => {
+  TabsSlots2["root"] = "root";
+  return TabsSlots2;
+})(TabsSlots || {});
+export {
+  TabsSlots as T
+};

package/components/mui_extended/Tabs/slots/TabsSlots.d.ts

@@ -0,0 +1,5 @@
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').TabsOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "value" | "action" | "style" | "variant" | "sx" | "classes" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "slotProps" | "slots" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar">, "children" | "value" | "ref" | "title" | "id" | "action" | "hidden" | "color" | "content" | "style" | "variant" | "translate" | "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" | "slotProps" | "slots" | "key" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TabsProps> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TabsProps> & Record<string, unknown>;
+}, {}, {}>;

package/components/mui_extended/Tabs/slots/TabsSlots.js

@@ -0,0 +1,11 @@
+import { styled, Tabs } from "@mui/material";
+import { t as tabsStyles } from "../Tabs.styles.js";
+import { T as TABS_KEY_COMPONENT } from "../constants.js";
+import { T as TabsSlots } from "./TabsEnum.js";
+const RootStyled = styled(Tabs, {
+  name: TABS_KEY_COMPONENT,
+  slot: TabsSlots.root
+})(tabsStyles.root);
+export {
+  RootStyled as R
+};

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

@@ -0,0 +1,21 @@
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { TabsProps as MuiTabProps } from '@mui/material/Tabs';
+import { TabsSlots } from './slots/TabsEnum';
+import { TABS_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+/**
+ * Props for the tabs component.
+ */
+export type TabsProps = MuiTabProps;
+/**
+ * State for the tabs component.
+ */
+export type TabsOwnerState = TabsProps;
+/**
+ * Slots for the tabs component.
+ */
+export type TabsSlotsType = typeof TabsSlots;
+/**
+ * Styles for the tabs component overrides.
+ */
+export type TabsStyles = OverridesStyleRules<TabsSlots, typeof TABS_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.62",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/components/mui_extended/Tabs/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LTabs";

package/components/mui_extended/Tabs/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LTabs";
-export {
-  componentName as c
-};

package/components/mui_extended/Tabs/classes/index.d.ts

@@ -1,9 +0,0 @@
-import { TabsClassesType } from './types';
-export declare const tabsClasses: TabsClassesType;
-export declare function getTabsUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const useTabsUtilityClasses: () => {
-    root: string;
-};

package/components/mui_extended/Tabs/classes/index.js

@@ -1,23 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-function getTabsUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useTabsUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabsUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  useTabsUtilityClasses as u
-};

package/components/mui_extended/Tabs/classes/types.d.ts

@@ -1,6 +0,0 @@
-import { useTabsUtilityClasses } from '.';
-export interface TabsClassesType {
-    root: string;
-}
-export type TabsClassesKey = keyof TabsClassesType;
-export type Classes = ReturnType<typeof useTabsUtilityClasses>;

package/components/mui_extended/Tabs/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const MUITabs: import('@emotion/styled').StyledComponent<import('@mui/material').TabsOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "value" | "action" | "style" | "variant" | "sx" | "classes" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "slotProps" | "slots" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/components/mui_extended/Tabs/styles.js

@@ -1,7 +0,0 @@
-import { styled, Tabs } from "@mui/material";
-const MUITabs = styled(Tabs)(({ theme }) => ({
-  ...theme.components?.M4LTabs?.styleOverrides || {}
-}));
-export {
-  MUITabs as M
-};