@m4l/components 0.2.24 → 0.2.26

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/CollapseButton/index.d.ts

@@ -11,5 +11,5 @@ declare type CollapseButtonProps = {
  * @param {VoidFunction} props.collapsed - Variable que guarda el estado de colapsado en desktop
  * @returns
  */
-export default function CollapseButton(props: CollapseButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function FooterSidebar(_props: CollapseButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/ContentComponent/index.d.ts

@@ -0,0 +1 @@
+export declare const ContentComponent: () => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/ContentGroups/index.d.ts

@@ -2,4 +2,4 @@
  *
  *
  */
-export declare const ContentGroups: () => import("react/jsx-runtime").JSX.Element;
+export declare const ContentGroups: () => import("react/jsx-runtime").JSX.Element | null;

package/components/SideBar/types.d.ts

@@ -9,8 +9,6 @@ export interface LogoConainerProps {
  * Propiedades para el componente WrapperSideBar.
  */
 export interface WrapperSideBarProps {
-    /** Ancho de la barra lateral.*/
-    width: string | number;
     /**  Indica si la barra lateral está visible.*/
     visible: boolean;
 }
@@ -47,8 +45,7 @@ export interface SideBarProps {
     visible: boolean;
     companyLogoSmallUrl?: string;
     companyLogoNormalUrl?: string;
-    collapsedWidht?: string | number;
-    unCollapsedWidht?: string | number;
+    expandedWidth?: string | number;
     companyName?: string;
     variantStyle?: 'variantDefault' | 'variantComercial';
 }

package/components/SplitLayout/{index.30fd5861.js → index.3856385c.js}

@@ -1,5 +1,4 @@
-import { styled } from "@mui/material/styles";
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";

package/components/ToastContainer/{index.97fdba82.js → index.98c4873e.js}

@@ -1,11 +1,11 @@
 import { styled, generateUtilityClasses } from "@mui/material";
-import { A } from "../../node_modules.71622512.js";
+import { A } from "../../node_modules.585eab0e.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
 import { useEnvironment } from "@m4l/core";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.b920baf8.js";
+import { I as Icon } from "../Icon/index.8c744412.js";
 const ToastContainerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LToastContainer?.styleOverrides
 }));

package/components/areas/components/AreasAdmin/{index.e4f0ccc1.js → index.debe3e3d.js}

@@ -1,31 +1,30 @@
-import { u as useAreasStore } from "../../hooks/useAreas/index.b18fe111.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.ca15a4b6.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import clsx from "clsx";
-import { generateUtilityClasses, useTheme } from "@mui/material";
+import { generateUtilityClasses, styled, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.de903261.js";
 import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { styled } from "@mui/material/styles";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.fa7c26a5.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7769076a.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.fbb29ee1.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.2f6286eb.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.de862adf.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.79fc2386.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.9ea23f87.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.b3eca6b1.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.e6e3aac8.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7b2a8723.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.fb0d1cac.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.389f9b28.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.33a748be.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.ac7cd0ee.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.383f5496.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.d85de73b.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.010f1b9d.js";
+import { S as ScrollBar } from "../../../ScrollBar/index.7dfc2f29.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index.e520bd15.js";
-import { I as Icon } from "../../../Icon/index.b920baf8.js";
+import { B as Button } from "../../../mui_extended/Button/index.93389adb.js";
+import { I as Icon } from "../../../Icon/index.8c744412.js";
 import { u as useOnClickOutside } from "../../index.4cc6a221.js";
 const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "root",

package/components/areas/components/AreasViewer/{index.f87c63ca.js → index.82a22acb.js}

@@ -1,36 +1,35 @@
-import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, styled, Skeleton, Dialog } from "@mui/material";
 import { r as react_resizable_css } from "../../../../react-resizable.ee028152.js";
-import { generateUtilityClasses, Skeleton, Dialog } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.de903261.js";
 import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.b18fe111.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.ca15a4b6.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.fa7c26a5.js";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.e6e3aac8.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.9ea23f87.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.383f5496.js";
 import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.a0ad2d9e.js";
-import { I as Icon } from "../../../Icon/index.b920baf8.js";
+import { I as Icon } from "../../../Icon/index.8c744412.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
-import { M as MFLoader } from "../../../MFLoader/index.52096ea5.js";
+import { M as MFLoader } from "../../../MFLoader/index.7cd7c372.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.14875ec7.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.3e3d8c62.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.0dc69929.js";
 import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.7669a2cd.js";
 import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.0fd1b7f8.js";
 import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index.123e16f8.js";
+import { L as LoadingError } from "../../../LoadingError/index.9c64680a.js";
 import { c as cjs } from "../../../../react-draggable.ee21cb7e.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.0eb66c37.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.8db8f77d.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",

package/components/areas/contexts/AreasContext/{index.3e3d8c62.js → index.0dc69929.js}

@@ -5,8 +5,8 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.f87c63ca.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.e4f0ccc1.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.82a22acb.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.debe3e3d.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
 import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.0fd1b7f8.js";

package/components/areas/hooks/useAreas/{index.b18fe111.js → index.ca15a4b6.js}

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { A as AreasContext } from "../../contexts/AreasContext/index.3e3d8c62.js";
+import { A as AreasContext } from "../../contexts/AreasContext/index.0dc69929.js";
 function useAreasStore(selector, equalityFn) {
   const context = useContext(AreasContext);
   if (!context)

package/components/commercial/TopBar/{index.1a73fecb.js → index.32a332c4.js}

@@ -5,12 +5,12 @@ import { g as getComponentUtilityClass } from "../../../utils/index.de903261.js"
 import { createContext, useContext, useState } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.b920baf8.js";
+import { I as Icon } from "../../Icon/index.8c744412.js";
 import clsx from "clsx";
 import { g as getNameDataTestId } from "../../../test/getNameDataTestId.14875ec7.js";
-import { A as Accordion } from "../../mui_extended/Accordion/index.fb4eb664.js";
-import { B as Button } from "../../mui_extended/Button/index.e520bd15.js";
-import { P as Popover } from "../../mui_extended/Popover/index.b3eca6b1.js";
+import { A as Accordion } from "../../mui_extended/Accordion/index.4393eca9.js";
+import { B as Button } from "../../mui_extended/Button/index.93389adb.js";
+import { P as Popover } from "../../mui_extended/Popover/index.d85de73b.js";
 const componentName = "M4LTopBar";
 const TopBarClasses = generateUtilityClasses(componentName, [
   "root",

package/components/formatters/BooleanFormatter/{index.b3052107.js → index.0703a256.js}

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.b920baf8.js";
+import { I as Icon } from "../../Icon/index.8c744412.js";
 import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
-import { F as FormatterRoot, f as formatterClasses } from "../index.95cc337e.js";
+import { F as FormatterRoot, f as formatterClasses } from "../index.94be7098.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const BOOLEAN_FORMATTER_DICTIONARY_KEY = `boolean_formatter`;

package/components/formatters/PointsFormatter/{index.5c94c5e8.js → index.8a4fa393.js}

@@ -1,16 +1,16 @@
-import { getPropertyByString } from "@m4l/core";
+import { evaluateWithContext } from "@m4l/core";
 import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
 import { jsx } from "react/jsx-runtime";
 function getFormatPoints(obProps, fieldValue, fieldUnit, chainPoint) {
   let result = "";
-  const points = getPropertyByString(obProps, fieldValue);
-  const unit = getPropertyByString(obProps, fieldUnit) || "";
+  const points = evaluateWithContext(obProps, fieldValue);
+  const unit = evaluateWithContext(obProps, fieldUnit) || "";
   if (points === void 0 || points === null || !Array.isArray(points)) {
     return "[]";
   }
   points.map((point) => {
     if (point) {
-      result = !chainPoint ? result.concat(`[${point}${unit}]`) : result.concat(`[${getPropertyByString(point, chainPoint)}${unit}]`);
+      result = !chainPoint ? result.concat(`[${point}${unit}]`) : result.concat(`[${evaluateWithContext(point, chainPoint)}${unit}]`);
     }
   });
   return result;

package/components/formatters/{index.95cc337e.js → index.94be7098.js}

@@ -3,7 +3,7 @@ import "@mui/base";
 import { jsx } from "react/jsx-runtime";
 import { W as WrapperComponent } from "../WrapperComponent/index.5e872594.js";
 import { useModuleDictionary } from "@m4l/core";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.b3052107.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.0703a256.js";
 const COMPONENT_CLASS_NAME = "M4LFormatter";
 const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",

package/components/hook-form/RHFAutocomplete/{index.cf399b24.js → index.993794f8.js}

@@ -1,8 +1,7 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
-import { Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { I as Image } from "../../Image/index.d034ca68.js";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
+import { I as Image } from "../../Image/index.39b3b9d9.js";
 import { useMemo, useRef, useState, useEffect } from "react";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
@@ -10,7 +9,8 @@ import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js
 import { unstable_composeClasses } from "@mui/base";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as IconButton } from "../../mui_extended/IconButton/index.9ea23f87.js";
+import { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.383f5496.js";
 const AutocompleteRoot = styled("div")(({
   theme
 }) => ({
@@ -68,7 +68,9 @@ const SkeletonRHFAutocomplete = (props) => {
         children: [/* @__PURE__ */ jsx("div", {
           className: classes.skeletonContainerText,
           children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text"
+            variant: "text",
+            width: "50%",
+            height: "14px"
           })
         }), /* @__PURE__ */ jsx(Skeleton, {
           variant: "circular",
@@ -84,7 +86,9 @@ const SkeletonRHFAutocomplete = (props) => {
         }), /* @__PURE__ */ jsx("div", {
           className: classes.skeletonContainerText,
           children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text"
+            variant: "text",
+            width: "50%",
+            height: "14px"
           })
         }), /* @__PURE__ */ jsx(Skeleton, {
           variant: "circular",
@@ -157,12 +161,17 @@ function RHFAutocomplete(props) {
     size = "small",
     onChangeFilterParmsLocal,
     imageWidth,
+    mandatory,
+    mandatoryMessage,
     ...other
   } = props;
   const {
     getLabel
   } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
+  console.log("RHFAutocomplete mandatory", mandatory);
+  console.log("RHFAutocomplete mandatoryMessage", mandatoryMessage);
+  console.log("RHFAutocomplete label", label);
   const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
   const {
     host_static_assets,
@@ -262,10 +271,12 @@ function RHFAutocomplete(props) {
             e.preventDefault();
         };
         return /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(Typography, {
-            variant: "body",
+          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
             className: classes.label,
-            children: label
+            label,
+            mandatory,
+            mandatoryMessage,
+            helperMessage
           }), /* @__PURE__ */ jsx(Autocomplete, {
             onKeyDown: checkKeyDown,
             autoComplete: true,
@@ -356,9 +367,9 @@ function RHFAutocomplete(props) {
                 ...other
               });
             }
-          }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
+          }), currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, {
             variant: currentVariant,
-            message: currentVariant !== "error" ? helperMessage : error?.message
+            message: error?.message
           }) : null]
         });
       }

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { AutocompleteCloseReason, AutocompleteInputChangeReason, TextFieldProps } from '@mui/material';
-import { RHFTextFieldProps } from '../RHFTextField';
+import { FieldLabelProps } from '../../FieldLabel/types';
 export declare type GetOptionString<T> = (option: T | null) => string;
 export declare type RHFAutocompleteVariants = 'info' | 'success' | 'warning';
-export declare type RHFAutocompleteProps<T> = {
+export interface RHFAutocompleteProps<T> extends Omit<TextFieldProps, 'label' | 'variant'>, Omit<FieldLabelProps, 'label'> {
     name: string;
     options: Array<T>;
     getOptionLabel: (option: T) => string;
@@ -15,17 +15,16 @@ export declare type RHFAutocompleteProps<T> = {
     isOptionEqualToValue: (option: T, value: T) => boolean;
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
-    size?: Pick<RHFTextFieldProps, 'size'>;
-    label: string;
     loading?: boolean;
+    label?: string;
     variant?: RHFAutocompleteVariants;
     helperMessage?: string;
     onOpen?: (event: React.SyntheticEvent) => void;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
     imageHeight?: string | number;
-} & TextFieldProps;
-export interface OwnerState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
+}
+export interface OwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled'> {
     focus: boolean;
     semantics: RHFAutocompleteVariants | 'error' | null;
     variant?: 'withImage';

package/components/hook-form/RHFAutocompleteAsync/{index.b2b75475.js → index.924c6473.js}

@@ -1,12 +1,11 @@
 import { useState, useCallback, useEffect } from "react";
 import { useNetwork, getPropertyByString } from "@m4l/core";
 import debounce from "lodash/debounce";
-import { styled } from "@mui/material/styles";
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsx } from "react/jsx-runtime";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.cf399b24.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.993794f8.js";
 styled("div")(() => ({
   display: "flex",
   width: "100%",

package/components/hook-form/RHFCheckbox/{index.a38715e3.js → index.f1fd5789.js}

@@ -1,12 +1,11 @@
 import { useFormContext, Controller } from "react-hook-form";
-import { styled } from "@mui/material/styles";
-import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { C as CheckBox } from "../../mui_extended/CheckBox.e662d20c.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox.840a443f.js";
 const RHFCheckboxRoot = styled("div")(({
   theme
 }) => ({
@@ -59,7 +58,10 @@ function RHFCheckbox(props) {
     name,
     sizeCheck = "small",
     label,
-    disabled = false
+    disabled = false,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
   } = props;
   const {
     control,
@@ -83,11 +85,15 @@ function RHFCheckbox(props) {
       name,
       control,
       render: ({
-        field,
+        field: {
+          onChange,
+          value
+        },
         fieldState: {
           error
         }
       }) => {
+        console.log("checkBox Field value", value);
         return /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsx(ContainerCheckTypography, {
             className: classes.checkTypography,
@@ -96,11 +102,15 @@ function RHFCheckbox(props) {
             } : {},
             children: /* @__PURE__ */ jsx(CheckBox, {
               size: sizeCheck,
-              ...field,
-              checked: field.value,
+              onChange,
+              checked: value,
               disabled: disabled ? true : false,
               disableRipple: true,
-              label
+              label,
+              mandatory,
+              mandatoryMessage,
+              helperMessage,
+              htmlFor: name
             })
           }), error?.message && /* @__PURE__ */ jsx(HelperText, {
             variant: "error",

package/components/hook-form/RHFCheckbox/types.d.ts

@@ -1,5 +1,6 @@
 import { FormControlLabelProps } from '@mui/material';
-export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+import { FieldLabelProps } from '../../FieldLabel/types';
+export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'>, Omit<FieldLabelProps, 'label'> {
     name: string;
     sizeCheck?: 'small' | 'medium';
     label?: string;

package/components/hook-form/RHFColorPicker/RFHColorPicker.d.ts

@@ -0,0 +1,8 @@
+import { RHFColorPickerProps } from './types';
+/**
+ * Componente RHFColorPicker para seleccionar colores con React Hook Form.
+ * @component
+ * @param {RHFColorPickerProps} props - Propiedades del componente.
+ * @returns {JSX.Element} - Elemento JSX que representa el componente.
+ */
+export declare const RHFColorPicker: (props: RHFColorPickerProps) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFColorPicker/classes/index.d.ts

@@ -1,7 +1,8 @@
 import { RHFColorPickerClassesType } from './types';
+import type { OwnerState } from '../types';
 export declare const colorPickerClasses: RHFColorPickerClassesType;
 export declare function getRHFColorPickerUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useUtilityClasses: (owmerState: OwnerState) => {
     root: string;
     skeleton: string;
     popoverRoot: string;

package/components/hook-form/RHFColorPicker/classes/types.d.ts

@@ -6,6 +6,8 @@ export interface RHFColorPickerClassesType {
     fieldColor: string;
     containerPicker: string;
     skeleton: string;
+    sizeSmall: string;
+    sizeMedium: string;
 }
 export declare type RHFColorPickerClassesKey = keyof RHFColorPickerClassesType;
 export declare type Classes = ReturnType<typeof useUtilityClasses>;

package/components/hook-form/RHFColorPicker/dictionary.d.ts

@@ -0,0 +1 @@
+export declare function getRHFColorPickerComponentsDictionary(): string[];