@m4l/components 9.1.6 → 9.1.8

package/@types/types.d.ts

@@ -52,6 +52,10 @@ import type {
 } from '../components/mui_extended/MenuItem/types';
 
 import { SelectOwnerState, SelectSlotsType } from '../components/mui_extended/Select/types';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { C } from 'vitest/dist/chunks/environment.CzISCQ7o';
+
+import { CheckBoxOwnerState, CheckBoxSlotsType } from '../components/mui_extended/CheckBox/types';
 import { RHFInputNumberSpinnerOwnerState, RHFInputNumberSpinnerSlotsType } from '../components/hook-form/RHFInputNumberSpinner/types';
 import { TabOwnerState, TabSlotsType } from '../components/mui_extended/Tab/types';
 
@@ -83,6 +87,7 @@ declare module '@mui/material/styles' {
     M4LSkeleton: SkeletonSlotsType;
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
+    M4LCheckBox: CheckBoxSlotsType;
     M4LRHFInputNumberSpinner: RHFInputNumberSpinnerSlotsType;
     M4LTab: TabSlotsType;
     M4LButton: ButtonSlotsType;
@@ -112,6 +117,7 @@ declare module '@mui/material/styles' {
     M4LSkeleton: Partial<SkeletonOwnerState>;
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
+    M4LCheckBox: Partial<CheckBoxOwnerState>;
     M4LRHFInputNumberSpinner:Partial<RHFInputNumberSpinnerOwnerState>
     M4LTab: Partial<TabOwnerState>;
     M4LButton: Partial<ButtonOwnerState>;
@@ -241,10 +247,105 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LActionIntro'];
       variants?: ComponentsVariants['M4LActionIntro'];
     };
-      M4LActionCancel?: {
-        defaultProps?: ComponentsPropsList['M4LActionCancel'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];
-        variants?: ComponentsVariants['M4LActionCancel'];
-      };
-    }
-  }
+    M4LDynamicSort?: {
+      defaultProps?: ComponentsPropsList['M4LDynamicSort'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDynamicSort'];
+      variants?: ComponentsVariants['M4LDynamicSort'];
+    };
+    M4LMenuActions?: {
+      defaultProps?: ComponentsPropsList['M4LMenuActions'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LMenuActions'];
+      variants?: ComponentsVariants['M4LMenuActions'];
+    };
+    M4LInputNumberSpinner?: {
+      defaultProps?: ComponentsPropsList['M4LInputNumberSpinner'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LInputNumberSpinner'];
+      variants?: ComponentsVariants['M4LInputNumberSpinner'];
+    };
+    M4LPopupsViewer?: {
+      defaultProps?: ComponentsPropsList['M4LPopupsViewer'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LPopupsViewer'];
+      variants?: ComponentsVariants['M4LPopupsViewer'];
+    };
+    M4LDragResizeWindow?: {
+      defaultProps?: ComponentsPropsList['M4LDragResizeWindow'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDragResizeWindow'];
+      variants?: ComponentsVariants['M4LDragResizeWindow'];
+    };
+    M4LToastContainer?: {
+      defaultProps?: ComponentsPropsList['M4LToastContainer'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LToastContainer'];
+      variants?: ComponentsVariants['M4LToastContainer'];
+    };
+    M4LHelperError?: {
+      defaultProps?: ComponentsPropsList['M4LHelperError'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LHelperError'];
+      variants?: ComponentsVariants['M4LHelperError'];
+    };
+    M4LLabel?: {
+      defaultProps?: ComponentsPropsList['M4LLabel'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LLabel'];
+      variants?: ComponentsVariants['M4LLabel'];
+    };
+    M4LIcon?: {
+      defaultProps?: ComponentsPropsList['M4LIcon'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIcon'];
+      variants?: ComponentsVariants['M4LIcon'];
+    };
+    M4LTooltip?: {
+      defaultProps?: ComponentsPropsList['M4LTooltip'];
+      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'];
+      variants?: ComponentsVariants['M4LIconButton'];
+    };
+    M4LBadge?: {
+      defaultProps?: ComponentsPropsList['M4LBadge'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LBadge'];
+      variants?: ComponentsVariants['M4LBadge'];
+    };
+    M4LControlIncrement?: {
+      defaultProps?: ComponentsPropsList['M4LControlIncrement'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LControlIncrement'];
+      variants?: ComponentsVariants['M4LControlIncrement'];
+    M4LMenuItem?: {
+      defaultProps?: ComponentsPropsList['M4LMenuItem'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LMenuItem'];
+      variants?: ComponentsVariants['M4LMenuItem'];
+    };
+    M4LSkeleton?: {
+      defaultProps?: ComponentsPropsList['M4LSkeleton'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSkeleton'];
+      variants?: ComponentsVariants['M4LSkeleton'];
+    };
+    M4LSelect: {
+      defaultProps?: ComponentsPropsList['M4LSelect'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSelect'];
+      variants?: ComponentsVariants['M4LSelect'];
+    };
+    M4LTypography?: {
+      defaultProps?: ComponentsPropsList['M4LTypography'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
+      variants?: ComponentsVariants['M4LTypography'];
+    };
+    M4LCheckBox?: {
+      defaultProps?: ComponentsPropsList['M4LCheckBox'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
+      variants?: ComponentsVariants['M4LCheckBox'];
+    };
+    M4LActionCancel?: {
+      defaultProps?: ComponentsPropsList['M4LActionCancel'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];
+      variants?: ComponentsVariants['M4LActionCancel'];
+    };
+  }
+}
+}

package/components/Label/Label.js

@@ -2,15 +2,15 @@ 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, error, size = "medium" } = props;
+  const { helperMessage, label, mandatory, mandatoryMessage, htmlFor, id, error, size = "medium", disabled } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const isSkeleton = useModuleSkeleton();
-  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 }),
+  return /* @__PURE__ */ jsx(LabelRootStyled, { ownerState: { disabled }, htmlFor, id, label: "", variantLabel: "standard", children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TypographyStyled, { ownerState: { size, disabled }, variant: "body", className: "", children: label }),
     mandatory && /* @__PURE__ */ jsx(
       TypographyMandatoryMessageStyled,
       {
-        ownerState: { size },
+        ownerState: { size, disabled },
         variant: "body",
         className: mandatoryMessage ? "mandatoryMessage" : "mandatoryAsterisk",
         children: mandatoryMessage ? mandatoryMessage : "*"
@@ -20,7 +20,7 @@ const Label = (props) => {
       IconHelperMessageStyled,
       {
         tooltipContent: helperMessage,
-        ownerState: {},
+        ownerState: { disabled },
         placement: "right",
         className: error ? "helper-icon-error" : "helper-icon",
         src: `${host_static_assets}/${environment_assets}/frontend/components/LabelMessage/assets/icons/infoSmall.svg`

package/components/Label/Label.styles.js

@@ -13,6 +13,10 @@ const labelStyles = {
     flexWrap: "wrap",
     width: "100%",
     gap: theme.size.baseSpacings.sp1,
+    ...ownerState.disabled && {
+      color: theme.vars.palette?.text.disabled,
+      pointerEvents: "none"
+    },
     flexDirection: "row",
     [`& .${ownerState.label}`]: {
       ...ownerState.size === "small" && {

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

@@ -10,11 +10,9 @@ import { Label } from '../../../Label';
 declare const meta: Meta<typeof Label>;
 export default meta;
 type Story = StoryObj<typeof Label>;
-/** Base Label componentin mode Skeleton  */
-export declare const MandatoryAndMelpmessage: Story;
+/** Label component mode Skeleton With props `helperMessage`   */
+export declare const MandatoryAndHelpMessage: Story;
 /**  Label component  With props `mandatory=true` in mode Skeleton  */
 export declare const Mandatory: Story;
-/**  Label component  With props `helperMessage`  */
-export declare const Base: Story;
-/**  Label component in mode Skeleton  */
-export declare const Skeleton: Story;
+/** Base Label component mode Skeleton  */
+export declare const BaseSkeleton: Story;

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

@@ -11,7 +11,7 @@ declare const meta: Meta<typeof Label>;
 export default meta;
 type Story = StoryObj<typeof Label>;
 /**  Label component Props Comunes  */
-export declare const MandatoryAndMelpmessage: Story;
+export declare const MandatoryAndHelpmessage: Story;
 /**  Label component  With props `mandatory=true`  */
 export declare const Mandatory: Story;
 /**  Label component  With props `helperMessage`  */

package/components/Label/types.d.ts

@@ -19,10 +19,18 @@ export interface LabelProps {
     id?: string;
     /**  Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'. */
     size?: 'small' | 'medium';
-    /** Clase externa */
+    /**
+     * Los elementos secundarios que se renderizarán dentro del componente.
+     */
+    children?: React.ReactNode;
+    /**
+     * Clase CSS personalizada que se aplicará al componente.
+     */
     className?: string;
     /** Indica si hay un error en el campo asociado a la etiqueta. */
     error?: boolean;
+    /** Indica si el componente está deshabilitado. */
+    disabled?: boolean;
 }
 export type OwnerState = Pick<LabelProps, 'size' | 'variantLabel'>;
 export interface LabelOwnerState extends LabelProps, OwnerState {

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

@@ -1,2 +1,24 @@
 import { CheckboxProps } from './types';
+/**
+ * Componente CheckBox
+ *
+ * Este componente representa un checkbox personalizado que puede ser utilizado en formularios y otros lugares donde se necesite una opción de selección.
+ * @param {CheckboxProps} props - Las propiedades del componente.
+ * @param {React.Ref<HTMLDivElement>} ref - La referencia al elemento raíz del componente.
+ * @returns {JSX.Element} El componente CheckBox renderizado.
+ * @example
+ * ```tsx
+ * <CheckBox
+ *   size="medium"
+ *   disabled={false}
+ *   color="primary"
+ *   label="Acepto los términos y condiciones"
+ *   mandatory={true}
+ *   mandatoryMessage="Este campo es obligatorio"
+ *   helperMessage="Más información"
+ *   htmlFor="checkbox-id"
+ *   error={false}
+ * />
+ * ```
+ */
 export declare const CheckBox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/mui_extended/CheckBox/CheckBox.js

@@ -1,45 +1,67 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Checkbox } from "@mui/material";
-import clsx from "clsx";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { u as useUtilityClasses } from "./classes/index.js";
-import { useModuleSkeleton } from "@m4l/core";
-import { S as SkeletonCheckBox } from "./subcomponents/Skeleton/index.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { C as CheckBoxRoot } from "./styles.js";
-import { L as Label } from "../../Label/Label.js";
+import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
+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) => {
   const {
     className,
     size = "small",
     disabled,
+    color = "primary",
     label,
     mandatory,
     mandatoryMessage,
     helperMessage,
     htmlFor,
+    error,
     ...others
   } = props;
-  const isDesktop = useResponsiveDesktop();
+  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 ownerState = {
-    size: !isDesktop ? "medium" : size,
-    disabled
+    CheckBoxPaletteColor: paletteColor,
+    CheckBoxDisabled: disabled,
+    CheckBoxColor: color,
+    CheckBoxError: error,
+    CheckBoxSizes: adjustedSize
   };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsxs(CheckBoxRoot, { className: clsx(classes.root, className), ref, children: [
-    !isSkeleton ? /* @__PURE__ */ jsx(Checkbox, { id: htmlFor, ...others }) : /* @__PURE__ */ jsx(SkeletonCheckBox, { classes }),
+  return /* @__PURE__ */ jsx(CheckBoxRootStyled, { ref, ownerState: { ...ownerState }, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MUICheckboxStyled,
+      {
+        ownerState: { ownerState },
+        disableRipple: true,
+        id: htmlFor,
+        tabIndex: 0,
+        ...others
+      }
+    ),
     label && /* @__PURE__ */ jsx(
-      Label,
+      LabelCheckBoxStyled,
       {
+        ownerState: { ...ownerState },
         label,
+        className: "MuiTypography-checkbox",
         mandatory,
         mandatoryMessage,
         helperMessage,
-        htmlFor
+        htmlFor,
+        disabled
       }
     )
-  ] });
+  ] }) : /* @__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" })
+  ] }) });
 });
 export {
   CheckBox as C

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

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

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

@@ -0,0 +1,80 @@
+const checkBoxStyles = {
+  /**
+   * Estilos generales para el checkbox
+   */
+  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,
+      borderRadius: theme.size.borderRadius.r1,
+      "&:active": {
+        color: ownerState.CheckBoxPaletteColor?.active,
+        backgroundColor: ownerState.CheckBoxPaletteColor?.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
+        }
+      },
+      // Historia Disabled para CheckBox
+      ...ownerState.CheckBoxDisabled && {
+        color: theme.vars.palette?.text.disabled,
+        pointerEvents: ownerState.CheckBoxDisabled ? "none" : "auto",
+        "&:hover": {
+          pointerEvents: ownerState.CheckBoxDisabled ? "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
+   */
+  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": {}
+  }),
+  /**
+   * Estilos para el label del CheckBox
+   */
+  skeletonStyled: ({ theme }) => ({
+    borderRadius: theme.vars.size.borderRadius.r1
+  })
+};
+export {
+  checkBoxStyles as c
+};

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

@@ -0,0 +1 @@
+export declare const CHECK_BOX_KEY_COMPONENT = "M4LCheckBox";

package/components/mui_extended/CheckBox/constants.js

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

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

@@ -0,0 +1,6 @@
+export declare enum CheckBoxSlots {
+    root = "root",
+    muiCheckBox = "muiCheckBox",
+    labelCheckBox = "labelCheckBox",
+    skeletonStyled = "skeletonStyled"
+}

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

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

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

@@ -0,0 +1,14 @@
+export declare const CheckBoxRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').CheckBoxOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+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> & {
+    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"> & {
+    ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
+}, "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>;
+}, {}, {}>;

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

@@ -0,0 +1,28 @@
+import { styled } from "@mui/material/styles";
+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";
+const CheckBoxRootStyled = styled("div", {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.root
+})(checkBoxStyles?.root);
+const MUICheckboxStyled = styled(Checkbox, {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.muiCheckBox
+})(checkBoxStyles?.muiCheckBox);
+const LabelCheckBoxStyled = styled(Label, {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.labelCheckBox
+})(checkBoxStyles?.labelCheckBox);
+const SkeletonStyled = styled(Skeleton, {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.skeletonStyled
+})(checkBoxStyles?.skeletonStyled);
+export {
+  CheckBoxRootStyled as C,
+  LabelCheckBoxStyled as L,
+  MUICheckboxStyled as M,
+  SkeletonStyled as S
+};

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

@@ -0,0 +1,2 @@
+export * from './CheckBoxEnum';
+export * from './CheckBoxSlots';

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

@@ -0,0 +1 @@
+

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

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

package/components/mui_extended/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { R as RootStyled, P as PopperStyled, T as ToolipStyled } from "./slots/TooltipSlots.js";
+import { R as RootStyled, T as ToolipStyled } from "./slots/TooltipSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const Tooltip = (props) => {
   const { size, children, ...others } = props;
@@ -8,13 +8,11 @@ const Tooltip = (props) => {
     RootStyled,
     {
       ownerState: { size: currentSize },
-      size: currentSize,
-      components: {},
       ...others,
-      slots: { popper: PopperStyled, tooltip: ToolipStyled },
+      slots: { tooltip: ToolipStyled },
       slotProps: {
         // @ts-ignore ownerState ignorado porque sobre escribe en tipos del styled
-        popper: { ownerState: { size: currentSize } }
+        //popper: { ownerState: { size: currentSize } },
       },
       children
     }

package/components/mui_extended/Tooltip/Tooltip.styles.js

@@ -1,61 +1,17 @@
 const tooltipStyles = {
-  root: {},
-  popper: {
-    padding: "8px 12px"
-  },
+  root: ({}) => ({}),
   /**
-   * TODO: Documentar
+   * Estilos del componente Tooltip
    */
-  tooltip: ({ theme, ownerState }) => ({
-    display: "flex",
-    alignItems: "center",
+  tooltip: ({ theme }) => ({
     background: theme.vars.palette.background.default,
-    borderRadius: "2px",
+    padding: theme.vars.size.baseSpacings.sp2,
+    borderRadius: theme.vars.size.borderRadius.r1,
     boxShadow: theme.vars.customShadows.z3,
-    width: "fit-content",
-    color: theme.vars.palette.text.primary,
-    ...theme.colorSchemes.finalTheme.typography.body,
-    letterSpacing: "0.4px",
-    minHeight: "32px",
-    height: "32px",
-    padding: "8px 12px",
-    ...ownerState.size === "large" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: "36px !important",
-        height: "36px  !important",
-        fontSize: "16px !important",
-        lineHeight: "28px  !important"
-      } : {
-        minHeight: "28px !important",
-        height: "28px  !important",
-        fontSize: "14px  !important",
-        lineHeight: "24px  !important"
-      }
-    },
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: "32px !important",
-        height: "32px  !important",
-        fontSize: "14px  !important",
-        lineHeight: "17px !important"
-      } : {
-        minHeight: "24px !important",
-        height: "24px  !important",
-        fontSize: "11px !important",
-        lineHeight: "13px !important"
-      }
-    },
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: "28px !important",
-        height: "28px  !important",
-        fontSize: "13px !important",
-        lineHeight: "16px !important"
-      } : {
-        minHeight: "20px !important",
-        height: "20px  !important",
-        fontSize: "10px !important",
-        lineHeight: "12px !important"
+    ".MuiTooltip-arrow": {
+      "&::before": {
+        backgroundColor: theme.vars.palette.background.default,
+        borderRadius: theme.vars.size.borderRadius["r0-5"]
       }
     }
   })

package/components/mui_extended/Tooltip/slots/TooltipSlots.js

@@ -7,7 +7,7 @@ const RootStyled = styled(Tooltip, {
   name: TOOLTIP_KEY_COMPONENT,
   slot: TooltipSlots.root
 })(tooltipStyles?.root);
-const PopperStyled = styled(Popper, {
+styled(Popper, {
   name: TOOLTIP_KEY_COMPONENT,
   slot: TooltipSlots.popper
 })(tooltipStyles?.popper);
@@ -16,7 +16,6 @@ const ToolipStyled = styled("div", {
   slot: TooltipSlots.tooltip
 })(tooltipStyles?.tooltip);
 export {
-  PopperStyled as P,
   RootStyled as R,
   ToolipStyled as T
 };

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

@@ -3,12 +3,21 @@ import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { TooltipSlots } from './slots';
 import { TOOLTIP_KEY_COMPONENT } from './constants';
 import { Sizes } from '@m4l/styles';
+import { ArrowType } from '../Popover/types';
 export interface TooltipProps extends Omit<MUITooltipProps, 'sx'> {
     sx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
     /**
      * Tamaño del componente, puede ser uno de los valores definidos en 'small' , 'medium' , 'large'.
      */
     size?: Sizes;
+    /**
+     * Tipo de flecha que se mostrará en el tooltip.
+     */
+    arrowType?: ArrowType;
+    /**
+     * Define la posición general del tooltip en relación con el elemento de referencia.
+     */
+    placement?: MUITooltipProps['placement'];
 }
 export type TooltipSlotsType = keyof typeof TooltipSlots;
 export type TooltipOwnerState = TooltipProps;

package/package.json

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

package/storybook/components/extended/mui/CheckBox/PaletteColor/Default/states/CheckBoxDisabled.stories.d.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * El estado `disabled` del checkbox se utiliza para indicar que el checkbox no está disponible para la interacción del usuario. Cuando un checkbox está en estado `disabled`:
+ *
+ * - No puede ser seleccionado ni deseleccionado por el usuario.
+ * - No responde a eventos de clic ni de teclado.
+ * - Se muestra con un estilo visual diferente (generalmente más tenue) para indicar que está deshabilitado.
+ *
+ * Este estado es útil en situaciones donde una opción no debe estar disponible para el usuario hasta que se cumplan ciertas condiciones o para evitar cambios en opciones que no deben ser modificadas.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox StateDisabled whit inlineText and Checked  */
+export declare const DisabledCheckBox: Story;
+/** CheckBox State Disabled whit inlineText no checked  */
+export declare const DisabledInlineText: Story;
+/** CheckBox State Disabled only Checked  */
+export declare const DisabledChecked: Story;
+/** CheckBox State Disabled no checked  */
+export declare const DisabledNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Default/states/CheckBoxSkeleton.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * CheckBox es un componente React que renderiza un campo de selección de tipo checkbox, el cual puede ser utilizado en formularios o en cualquier lugar donde se necesite una selección múltiple.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** Base CheckBox component in mode Skeleton  */
+export declare const SkeletonCheckBox: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Error/states/CheckBoxActive.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * El estado "active" en un checkbox con variante de error se refiere a la apariencia y comportamiento del checkbox cuando está seleccionado, indicando que hay un error asociado.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State Active whit inlineText and Checked  */
+export declare const ActiveCheckBox: Story;
+/** CheckBox State Active whit inlineText no checked  */
+export declare const ActiveInlineText: Story;
+/** CheckBox State Active only Checked  */
+export declare const ActiveChecked: Story;
+/** CheckBox State Active no checked  */
+export declare const ActiveNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Error/states/CheckBoxEnabled.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * Un checkbox en estado "enabled" con variante de error significa que el checkbox está activo y disponible para ser interactuado por el usuario, pero está resaltado para indicar que hay un error asociado.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State Enabled whit inlineText and Checked  */
+export declare const EnabledCheckBox: Story;
+/** CheckBox State Enabled whit inlineText no checked  */
+export declare const EnabledInlineText: Story;
+/** CheckBox State Enabled only Checked  */
+export declare const EnabledChecked: Story;
+/** CheckBox State Enabled no checked  */
+export declare const EnabledNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Error/states/CheckBoxFocusVisible.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * El estado "focusVisible" en un checkbox con variante de error se refiere a la apariencia y comportamiento del checkbox cuando ha recibido el foco de entrada y está visible para el usuario, indicando que hay un error asociado.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State FocusVisible whit inlineText and Checked  */
+export declare const FocusVisibleCheckBox: Story;
+/** CheckBox State FocusVisible whit inlineText no checked  */
+export declare const FocusVisibleInlineText: Story;
+/** CheckBox State FocusVisible only Checked  */
+export declare const FocusVisibleChecked: Story;
+/** CheckBox State FocusVisible no checked  */
+export declare const FocusVisibleNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Error/states/CheckBoxHover.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * El estado "hover" en un checkbox con variante de error se refiere a la apariencia y comportamiento del checkbox cuando el usuario coloca el cursor sobre él, indicando que hay un error asociado
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State Hover whit inlineText and Checked  */
+export declare const HoverCheckBox: Story;
+/** CheckBox State Hover whit inlineText no checked  */
+export declare const HoverInlineText: Story;
+/** CheckBox State Hover only Checked  */
+export declare const HoverChecked: Story;
+/** CheckBox State Hover no checked  */
+export declare const HoverNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Primary/states/CheckBoxActive.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * El componente CheckBox es versátil y se puede utilizar en diversas situaciones donde se necesite una selección múltiple.
+ * Las variantes del componente permiten personalizar su apariencia y comportamiento, incluyendo la visualización de mensajes de ayuda y la indicación de obligatoriedad.
+ * La variante primaria en estado activo es especialmente útil para resaltar los checkboxes seleccionados, mejorando la experiencia del usuario en formularios y listas.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State Active whit inlineText and Checked  */
+export declare const ActiveCheckBox: Story;
+/** CheckBox State Active whit inlineText no checked  */
+export declare const ActiveInlineText: Story;
+/** CheckBox State Active only Checked  */
+export declare const ActiveCheked: Story;
+/** CheckBox State Active no checked  */
+export declare const ActiveNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Primary/states/CheckBoxEnabled.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * Un checkbox en estado "enabled" con variante primaria es un elemento interactivo que sigue el estilo principal de la aplicación.
+ * Está disponible para ser seleccionado o deseleccionado por el usuario y utiliza el color primario del tema para indicar su estado activo.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State Enabled whit inlineText and Checked  */
+export declare const EnabledCheckBox: Story;
+/** CheckBox State Enabled whit inlineText no checked  */
+export declare const EnabledInlineText: Story;
+/** CheckBox State Enabled only Checked  */
+export declare const EnabledChecked: Story;
+/** CheckBox State Enabled no checked  */
+export declare const EnabledNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Primary/states/CheckBoxFocusVisible.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * El estado "focusVisible" en un checkbox con variante primaria se refiere a la apariencia y comportamiento del checkbox cuando ha recibido el foco de entrada y está visible para el usuario.
+ * Este estado es importante para la accesibilidad, ya que ayuda a los usuarios a identificar visualmente cuál elemento de la interfaz está actualmente enfocado, especialmente cuando navegan usando el teclado.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State FocusVisible whit inlineText and Checked  */
+export declare const FocusVisibleCheckBox: Story;
+/** CheckBox State FocusVisible whit inlineText no checked  */
+export declare const FocusVisibleInlineText: Story;
+/** CheckBox State FocusVisible only Checked  */
+export declare const FocusVisibleChecked: Story;
+/** CheckBox State FocusVisible no checked  */
+export declare const FocusVisibleNotChecked: Story;

package/storybook/components/extended/mui/CheckBox/PaletteColor/Primary/states/CheckBoxHover.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from '../../../../../../../../src/components/mui_extended/CheckBox';
+/**
+ * El estado "hover" en un checkbox con variante primaria se refiere a la apariencia y comportamiento del checkbox cuando el usuario coloca el cursor sobre él.
+ * Este estado proporciona una retroalimentación visual inmediata, indicando que el elemento es interactivo y puede ser seleccionado o deseleccionado.
+ */
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+/** CheckBox State Hover whit inlineText and Checked  */
+export declare const HoverCheckBox: Story;
+/** CheckBox State Hover whit inlineText no checked  */
+export declare const HoverInlineText: Story;
+/** CheckBox State Hover only Checked  */
+export declare const HoverChecked: Story;
+/** CheckBox State Hover no checked  */
+export declare const HoverNotChecked: Story;

package/storybook/components/extended/mui/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from '../../../../../src/components/mui_extended/Tooltip';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+/** Bottom Center Predeterminado 👑 */
+export declare const BottomCenter: Story;
+/** Bottom Left */
+export declare const BottomtLeft: Story;
+/** Bottom  Right */
+export declare const BottomRight: Story;
+/** Top Center */
+export declare const TopCenter: Story;
+/** Top Start */
+export declare const TopStart: Story;
+/** Top End */
+export declare const TopEnd: Story;
+/** Top End */
+export declare const LeftStart: Story;
+/** Left End */
+export declare const LeftEnd: Story;
+/** Left Center */
+export declare const LeftCenter: Story;
+/** Right Center */
+export declare const RightCenter: Story;
+/** Right Start */
+export declare const RightStart: Story;
+/** Right End */
+export declare const RightEnd: Story;

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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/mui_extended/CheckBox/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const COMPONENT_CLASS_NAME = "M4LCheckBox";

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

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

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

@@ -1,11 +0,0 @@
-import { CheckboxClassesType } from './types';
-import { OwnerState } from '../types';
-export declare const checkboxClasses: CheckboxClassesType;
-export declare function getRHFCheckboxUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const useUtilityClasses: (ownerState: OwnerState) => {
-    skeleton: string;
-    root: string;
-};

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

@@ -1,33 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { C as COMPONENT_CLASS_NAME } from "./constants.js";
-generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  /* elements */
-  "root",
-  "skeleton",
-  /* states or variants of elements */
-  "small",
-  "medium",
-  "stateDisabled"
-]);
-function getRHFCheckboxUtilityClass(slot) {
-  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.size === "small" && "small",
-      ownerState.size === "medium" && "medium",
-      ownerState.disabled && "stateDisabled"
-    ],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  useUtilityClasses as u
-};

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

@@ -1,10 +0,0 @@
-import { useUtilityClasses } from '.';
-export interface CheckboxClassesType {
-    root: string;
-    skeleton: string;
-    small: string;
-    medium: string;
-    stateDisabled: string;
-}
-export type CheckBoxClassesKey = keyof CheckboxClassesType;
-export type Classes = ReturnType<typeof useUtilityClasses>;

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

@@ -1 +0,0 @@
-export declare const CheckBoxRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/mui_extended/CheckBox/styles.js

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

package/components/mui_extended/CheckBox/subcomponents/Skeleton/index.d.ts

@@ -1,5 +0,0 @@
-import { SkeletonCheckBoxProps } from './types';
-/**
- * TODO: Documentar
- */
-export declare const SkeletonCheckBox: (props: SkeletonCheckBoxProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/CheckBox/subcomponents/Skeleton/index.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
-const SkeletonCheckBox = (props) => {
-  const { classes } = props;
-  return /* @__PURE__ */ jsx("div", { className: classes.skeleton, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "18px", height: "18px" }) });
-};
-export {
-  SkeletonCheckBox as S
-};

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

@@ -1,4 +0,0 @@
-import { Classes } from '../../classes/types';
-export interface SkeletonCheckBoxProps {
-    classes: Classes;
-}

package/components/mui_extended/Tooltip/Tooltip.stories.d.ts

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Tooltip } from '.';
-declare const meta: Meta<typeof Tooltip>;
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-/**
- * Base Tooltip component
- */
-export declare const Base: Story;
-/**
- * Tooltip in large size
- */
-export declare const TooltipSizeLarge: Story;
-/**
- * Tooltip in medium size
- */
-export declare const TooltipSizeMedium: Story;
-/**
- * Tooltip in small size
- */
-export declare const TooltipSizeSmall: Story;
-/**
- * Tooltip in focus mode
- */
-export declare const TooltipWithTab: Story;