@m4l/components 9.1.59 → 9.1.61

package/components/hook-form/RHFPeriod/RHFPeriod.styles.js

@@ -1,14 +1,14 @@
 const rhfPeriodStyles = {
   /**
    * root class
-   * @updatedUser cesar - automatic
-   * @updatedAt 2025-01-03 14:54:18 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @createdAt 2024-12-27 16:45:26 - automatic
    * @author cesar - automatic
    * @author cesar - automatic
    * @createdAt 2024-11-21 08:55:01 - automatic
-   * @updatedAt 2025-01-03 14:54:18 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   root: ({ theme }) => ({
     width: "270px",
@@ -22,8 +22,8 @@ const rhfPeriodStyles = {
    * periodRoot class
    * @author cesar - automatic
    * @createdAt 2024-12-30 07:34:10 - automatic
-   * @updatedAt 2025-01-03 14:54:18 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   periodRoot: ({ theme }) => ({
     width: "100%",
@@ -36,8 +36,8 @@ const rhfPeriodStyles = {
    * textField class
    * @author cesar - automatic
    * @createdAt 2024-12-30 07:34:10 - automatic
-   * @updatedAt 2025-01-03 14:54:18 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   textField: ({ theme }) => ({
     borderRadius: "50px",
@@ -49,8 +49,8 @@ const rhfPeriodStyles = {
    * select class
    * @author cesar - automatic
    * @createdAt 2024-12-30 16:21:22 - automatic
-   * @updatedAt 2025-01-03 14:54:18 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   select: () => ({
     width: "100px"

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.d.ts

@@ -3,7 +3,7 @@ import { PeriodProps } from './types';
  * Componente que renderiza un campo de formulario para ingresar un período.
  * @author cesar - automatic
  * @createdAt 2024-12-30 16:32:50 - automatic
- * @updatedAt 2025-01-03 08:17:13 - automatic
- * @updatedUser cesar - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const Period: ({ value: valuePeriod, onChange, size, disabled, error }: PeriodProps) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFTextField/RHFTextField.d.ts

@@ -3,7 +3,7 @@ import { RHFTextFieldProps } from './types';
  * Provee de un campo de texto vinculado al formulario de hook-forms, aporta su versión provisional de carga en red.
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 19:27:22 - automatic
- * @updatedAt 2024-12-30 14:36:10 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const RHFTextField: import('react').ForwardRefExoticComponent<Omit<RHFTextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/hook-form/RHFTextField/RHFTextField.styles.js

@@ -3,7 +3,7 @@ const rhfTextFieldStyles = {
    * Elemento Root
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-27 08:27:31 - automatic
-   * @updatedAt 2024-12-30 14:36:10 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ theme }) => ({

package/components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.d.ts

@@ -4,6 +4,7 @@ import { RHFTextFieldPasswordProps } from './types';
  * de carga en red y el funcionamiento para ocultar y visualizar la contraseña.
  * @param props
  * @returns
+ * @createdAt 2025-01-08 10:36:40 - automatic
  */
 /**
  * Props del componente RHFTextFieldPassword

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/maps/components/Map/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/subcomponents/MeasureData/index.d.ts

@@ -1,5 +1,9 @@
 /**
  * subComponente que visualizar la medida que actualmente se haciendo sobre el mapa
  * @returns
+ * @author Andrés Quintero - automatic
+ * @createdAt 2025-01-08 10:36:40 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare function MeasureData(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/index.d.ts

@@ -1,4 +1,8 @@
 /**
  * TODO: Documentar
+ * @author Andrés Quintero - automatic
+ * @createdAt 2025-01-08 10:36:40 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare function GeneralData(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.d.ts

@@ -3,7 +3,7 @@ import { MyActionsProps } from './types';
  * TODO: Documentar
  * @author SebastianM - automatic
  * @createdAt 2024-11-06 09:00:05 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:14 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare function MyActions(props: MyActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -4,8 +4,8 @@ const autocompleteSyles = {
    * Styles for the icon button component.
    * @author SebastianM - automatic
    * @createdAt 2024-12-05 14:14:39 - automatic
-   * @updatedAt 2024-12-10 15:24:11 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   iconButton: () => ({
     position: "absolute",
@@ -25,11 +25,16 @@ const autocompleteSyles = {
   autocomplete: {},
   /**
    * Styles for the typography component.
+   * @createdAt 2025-01-08 10:36:40 - automatic
    */
   typography: {},
   menuList: {},
   /**
    * Styles for the menu item component.
+   * @author Andrés Quintero - automatic
+   * @createdAt 2025-01-08 10:36:40 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   menuItem: ({ theme }) => ({
     padding: `${theme.vars.size.baseSpacings.sp1}!important`,
@@ -39,8 +44,8 @@ const autocompleteSyles = {
    * Styles for the image component.
    * @author SebastianM - automatic
    * @createdAt 2024-12-02 07:14:21 - automatic
-   * @updatedAt 2024-12-10 15:24:11 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   image: ({ theme }) => ({
     width: `${theme.vars.size.baseSpacings.sp4} !important`,
@@ -50,8 +55,8 @@ const autocompleteSyles = {
    * Styles for the chip component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-26 12:36:08 - automatic
-   * @updatedAt 2024-12-10 15:24:11 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   chip: ({ theme }) => ({
     "& .M4LIconClass-root": {
@@ -62,8 +67,8 @@ const autocompleteSyles = {
    * Styles for the text field component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-26 12:36:08 - automatic
-   * @updatedAt 2024-12-10 15:24:11 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   textField: ({ theme }) => ({
     // position: 'relative',
@@ -77,8 +82,8 @@ const autocompleteSyles = {
    * Styles for the popper component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-26 12:36:08 - automatic
-   * @updatedAt 2024-12-10 15:24:11 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   popper: ({ theme }) => ({
     ...theme.typography.body1,
@@ -90,8 +95,8 @@ const autocompleteSyles = {
    * Styles for the popover component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-26 12:36:08 - automatic
-   * @updatedAt 2024-12-10 15:24:11 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   circularProgress: ({ theme }) => ({
     position: "absolute",
@@ -103,8 +108,8 @@ const autocompleteSyles = {
    * Styles for the skeleton autocomplete component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-21 15:23:15 - automatic
-   * @updatedAt 2024-12-10 15:24:11 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   skeletonAutocomplete: ({ theme, ownerState }) => {
     return {

package/components/mui_extended/Autocomplete/renderOptions/index.d.ts

@@ -6,8 +6,8 @@ import { Sizes } from '@m4l/styles';
  * @param color - The color for the MenuItem.
  * @author SebastianM - automatic
  * @createdAt 2024-11-28 18:58:00 - automatic
- * @updatedAt 2024-11-29 10:03:38 - automatic
- * @updatedUser SebastianM - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare function renderOption<T>(optionProps: HTMLAttributes<HTMLLIElement>, option: T & {
     label: string;

package/components/mui_extended/Button/Button.d.ts

@@ -7,7 +7,7 @@ import { ButtonProps } from './types';
  * @returns
  * @author SebastianM - automatic
  * @createdAt 2024-11-06 07:42:00 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:14 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/components/mui_extended/Button/ButtonStyles.js

@@ -3,7 +3,7 @@ const buttonStyles = {
    * Styles for the root element of the button component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-06 07:42:00 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   buttonRoot: ({ theme, ownerState }) => ({
@@ -145,7 +145,7 @@ const buttonStyles = {
    * Styles for the text of the button component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-07 18:00:35 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   textButton: ({ theme, ownerState }) => ({
@@ -173,7 +173,7 @@ const buttonStyles = {
    * Styles for the skeleton button component.
    * @author SebastianM - automatic
    * @createdAt 2024-11-06 10:12:30 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   skeletonButton: ({ theme, ownerState }) => ({

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>;
+}, {}, {}>;