@m4l/components 3.0.0 → 3.0.2

package/components/commercial/AppBarCommercial/{index.b4f6147e.js → index-D1jIOw7M.js}

@@ -1,13 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.f77cc2ab.js";
-import { ab as AppBarComercialRoot } from "../../../styles/index.db9e7ddb.js";
+import { g as getComponentUtilityClass } from "../../../utils/index-DiMrtgIu.js";
+import { ab as AppBarComercialRoot } from "../../../styles/index-C-MsxWtr.js";
 const componentName = "M4LAppBarCommercial";
 generateUtilityClasses(
   componentName,
   [
+    /* elements */
     "root"
+    /* states or variants of elements */
   ]
 );
 const useAppBarComercialUtilityClasses = () => {

package/components/commercial/SectionCommercial/{index.a250338c.js → index-C9THYik8.js}

@@ -1,13 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.f77cc2ab.js";
-import { ac as SectionCommercialRoot } from "../../../styles/index.db9e7ddb.js";
+import { g as getComponentUtilityClass } from "../../../utils/index-DiMrtgIu.js";
+import { ac as SectionCommercialRoot } from "../../../styles/index-C-MsxWtr.js";
 const componentName = "M4LSectionCommercial";
 generateUtilityClasses(
   componentName,
   [
+    /* elements */
     "root",
+    /* states or variants of elements */
     "fullWidth",
     "boxed",
     "columnReverse"

package/components/commercial/TopBar/{index.4fdd66e5.js → index-DLn3yEcX.js}

@@ -1,19 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
 import { generateUtilityClasses, useTheme, Box, Grid, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.f77cc2ab.js";
+import { g as getComponentUtilityClass } from "../../../utils/index-DiMrtgIu.js";
 import { createContext, useContext, useState } from "react";
 import { useEnvironment } from "@m4l/core";
-import { ad as ArrowIconRoot } from "../../../styles/index.db9e7ddb.js";
-import { I as Icon } from "../../Icon/index.c06685f4.js";
+import { ad as ArrowIconRoot } from "../../../styles/index-C-MsxWtr.js";
+import { I as Icon } from "../../Icon/index-CueLDD9j.js";
 import clsx from "clsx";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
-import { A as Accordion } from "../../mui_extended/Accordion/index.26524ecd.js";
-import { B as Button } from "../../mui_extended/Button/index.3d14e3e9.js";
-import { P as Popover } from "../../mui_extended/Popover/index.a7da93f1.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId-BaBTWhBr.js";
+import { A as Accordion } from "../../mui_extended/Accordion/index-D1775s1J.js";
+import { B as Button } from "../../mui_extended/Button/index-CksGG1B8.js";
+import { P as Popover } from "../../mui_extended/Popover/index-BnKsmvtw.js";
 const componentName = "M4LTopBar";
 const TopBarClasses = generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "ContainerImageComercial",
   "SimplebarComercial",
@@ -22,6 +23,7 @@ const TopBarClasses = generateUtilityClasses(componentName, [
   "ContainerAccordion",
   "ContainerAccordionCase1",
   "IconAndButton",
+  /* states or variants of elements */
   "IsActive"
 ]);
 function getTopBarClassesUtilityClass() {
@@ -58,7 +60,6 @@ const TopBarProvider = (props) => {
   );
 };
 const useTopBar = () => useContext(TopBarContext);
-const useTopBar$1 = useTopBar;
 function ArrowIcon(props) {
   const { openState } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -83,7 +84,7 @@ const isActive = (data) => {
 };
 const NavItemRoot = (props) => {
   const theme = useTheme();
-  const { classes, dataTestId } = useTopBar$1();
+  const { classes, dataTestId } = useTopBar();
   const { itemRootData } = props;
   const { title, children, module_id } = itemRootData;
   const [anchorEl, setAnchorEl] = useState(null);
@@ -200,12 +201,13 @@ const NavItemRoot = (props) => {
   );
 };
 const ConteinItem = () => {
-  const { dataMenu: DataMenu, classes, dataTestId } = useTopBar$1();
+  const { dataMenu: DataMenu, classes, dataTestId } = useTopBar();
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: classes.SimplebarComercial,
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(componentName, "SimplebarComercial", dataTestId) } : {},
+      //Map que se encarga de cargar el iNavItemRoot
       children: DataMenu.map((group) => /* @__PURE__ */ jsx(NavItemRoot, { itemRootData: group }, group.module_id))
     }
   );

package/components/commercial/{index.be1af158.js → index-D1bCIF7p.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { ae as HamburgerMenuRoot } from "../../styles/index.db9e7ddb.js";
+import { ae as HamburgerMenuRoot } from "../../styles/index-C-MsxWtr.js";
 import { 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 { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
 import { useEnvironment } from "@m4l/core";
-import { S as SideBar } from "../SideBar/index.990e8667.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.7b6c1ee3.js";
+import { S as SideBar } from "../SideBar/index-Ddxe1VvL.js";
+import { I as IconButton } from "../mui_extended/IconButton/index-OMq0pPK0.js";
 const componentName = "M4LHamburgerMenuCommercial";
 generateUtilityClasses(componentName, ["root", "ImageLogo"]);
 function getHamburgerMenuComercialClassesUtilityClass(slot) {

package/components/formatters/BooleanFormatter/{index.91435984.js → index-Bc2l6GTX.js}

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.c06685f4.js";
-import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
-import { F as FormatterRoot, f as formatterClasses } from "../index.64017cc1.js";
+import { I as Icon } from "../../Icon/index-CueLDD9j.js";
+import { W as WrapperComponent } from "../../WrapperComponent/index-BHV-CsDU.js";
+import { F as FormatterRoot, f as formatterClasses } from "../index-Botdzyt2.js";
 import clsx from "clsx";
 const BOOLEAN_FORMATTER_DICTIONARY_KEY = `boolean_formatter`;
 const LABEL_BOOLEAN_YES = `${BOOLEAN_FORMATTER_DICTIONARY_KEY}.boolean_yes`;

package/components/formatters/DateFormatter/{index.2ef6f261.js → index-CGcRZ8BA.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useFormatter } from "@m4l/graphics";
-import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
+import { W as WrapperComponent } from "../../WrapperComponent/index-BHV-CsDU.js";
 function getFormatDate(presentationType, value, format) {
   const { dateFormatter } = useFormatter();
   let finalFormat = format || dateFormatter.datetimeFormat;

package/components/formatters/PointsFormatter/{index.51cd6774.js → index-C7sR8iqk.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
+import { W as WrapperComponent } from "../../WrapperComponent/index-BHV-CsDU.js";
 function getFormatPoints(obProps, fieldValue, fieldUnit, chainPoint) {
   let result = "";
   const points = getPropertyByString(obProps, fieldValue);

package/components/formatters/PriceFormatter/{index.97f75b4b.js → index-CsvRawmc.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import { useFormatter } from "@m4l/graphics";
-import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
+import { W as WrapperComponent } from "../../WrapperComponent/index-BHV-CsDU.js";
 function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
   let result = "";
   const value = getPropertyByString(obProps, fieldValue);

package/components/formatters/UncertaintyFormatter/{index.c3ffdebc.js → index-B9ESVEVp.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
+import { W as WrapperComponent } from "../../WrapperComponent/index-BHV-CsDU.js";
 function getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) {
   let result = "";
   const ranges = getPropertyByString(obProps, fieldValue);
@@ -10,11 +10,11 @@ function getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) {
     return "[]";
   }
   ranges.map((obj, idx) => {
-    const cmc_min_closed = obj.cmc_min_closed != true ? "<" : "\u2264";
-    const cmc_max_closed = obj.cmc_max_closed != true ? "<" : "\u2264";
+    const cmc_min_closed = obj.cmc_min_closed != true ? "<" : "≤";
+    const cmc_max_closed = obj.cmc_max_closed != true ? "<" : "≤";
     result = result.concat(
       `${idx > 0 ? " " : ""}`,
-      obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} \xB1 ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} \xB1 ${obj.cmc_uncertainty}]`
+      obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} ± ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} ± ${obj.cmc_uncertainty}]`
     );
   });
   return result;

package/components/formatters/{index.64017cc1.js → index-Botdzyt2.js}

@@ -1,15 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
-import { af as FormatterRootContainer } from "../../styles/index.db9e7ddb.js";
-import { W as WrapperComponent } from "../WrapperComponent/index.57964195.js";
+import { af as FormatterRootContainer } from "../../styles/index-C-MsxWtr.js";
+import { W as WrapperComponent } from "../WrapperComponent/index-BHV-CsDU.js";
 import { useModuleDictionary } from "@m4l/core";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.91435984.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index-Bc2l6GTX.js";
 const COMPONENT_CLASS_NAME = "M4LFormatter";
 const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  /* elements */
   "root",
   "booleanFormatterIcon",
   "booleanFormatterCheck"
+  /* states or variants of elements */
 ]);
 const FormatterRoot = (props) => {
   const { children } = props;
@@ -17,17 +19,14 @@ const FormatterRoot = (props) => {
 };
 function getFormatConcatenated(values, separator) {
   const returnSymbol = "";
-  if (values === null)
-    return returnSymbol;
+  if (values === null) return returnSymbol;
   if (!Array.isArray(values)) {
     return values.toString();
   } else {
-    if (values.length == 0)
-      return returnSymbol;
+    if (values.length == 0) return returnSymbol;
     else {
       const result = values.map((value) => {
-        if (value === null || value === void 0)
-          return returnSymbol;
+        if (value === null || value === void 0) return returnSymbol;
         else {
           if (typeof value === "string" || typeof value === "number") {
             return value.toString();
@@ -71,30 +70,25 @@ function getFormatPeriod(years, months, days) {
     case 0:
       break;
     case 1:
-      if (years > 0)
-        period += separator;
+      if (years > 0) period += separator;
       period += "1 " + getLabel(dictionary.LABEL_MONTH);
       break;
     default:
-      if (years > 0)
-        period += separator;
+      if (years > 0) period += separator;
       period += months.toString() + " " + getLabel(dictionary.LABEL_MONTHS);
   }
   switch (days) {
     case 0:
       break;
     case 1:
-      if (years > 0 || months > 0)
-        period += separator;
+      if (years > 0 || months > 0) period += separator;
       period += "1 " + getLabel(dictionary.LABEL_DAY);
       break;
     default:
-      if (years > 0 || months > 0)
-        period += separator;
+      if (years > 0 || months > 0) period += separator;
       period += days.toString() + " " + getLabel(dictionary.LABEL_DAYS);
   }
-  if (period == "")
-    period = "-";
+  if (period == "") period = "-";
   return period;
 }
 function PeriodFormatter(props) {

package/components/hook-form/HelperError/{index.360f8fb7.js → index-J-C5u9AH.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useFormContext, useController } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
+import { H as HelperText } from "../../HelperText/index-DVV5Jfc8.js";
 function HelperError(props) {
   const { name } = props;
   const { control } = useFormContext();

package/components/hook-form/RHFAutocomplete/{index.089af1b8.js → index-erpzYu8W.js}

@@ -6,18 +6,19 @@ import { generateUtilityClasses, generateUtilityClass, Skeleton, useTheme, Autoc
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormContext, Controller } from "react-hook-form";
 import { unstable_composeClasses } from "@mui/base";
-import { ag as WrapperOption, ah as AutocompleteRoot } from "../../../styles/index.db9e7ddb.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { I as Image } from "../../Image/index.ae542f70.js";
-import { T as Typography } from "../../mui_extended/Typography/index.8c0801e4.js";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
-import { F as FieldLabel } from "../../FieldLabel/index.9a979def.js";
-import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.967e70b7.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.7b6c1ee3.js";
+import { ag as WrapperOption, ah as AutocompleteRoot } from "../../../styles/index-C-MsxWtr.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
+import { I as Image } from "../../Image/index-By5vsRzf.js";
+import { T as Typography } from "../../mui_extended/Typography/index-W88rbpsJ.js";
+import { H as HelperText } from "../../HelperText/index-DVV5Jfc8.js";
+import { F as FieldLabel } from "../../FieldLabel/index-DCAMDJoJ.js";
+import { C as CircularProgress } from "../../mui_extended/CircularProgress/index-Bnnti_G6.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index-OMq0pPK0.js";
 const componentName = "M4LRHFAutocomplete";
 generateUtilityClasses(
   componentName,
   [
+    /* elements */
     "root",
     "withImage",
     "skeleton",
@@ -28,6 +29,7 @@ generateUtilityClasses(
     "containerRefreshDown",
     "iconRefresh",
     "iconDown",
+    /* states or variants of elements */
     "variantInfo",
     "isDisabled",
     "imageWidthDefined",
@@ -131,7 +133,9 @@ function ComponentTypeImage(props) {
     getOptionLabel,
     isOptionEqualToValue,
     label,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     skeletonWidth = 100,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     skeletonHeight = "18px",
     options,
     disabled,
@@ -161,13 +165,11 @@ function ComponentTypeImage(props) {
   const isDesktop = useResponsiveDesktop();
   const onCloseLocal = (event, reason) => {
     setOpen(false);
-    if (onClose)
-      onClose(event, reason);
+    if (onClose) onClose(event, reason);
   };
   const onOpenLocal = (event) => {
     setOpen((currentState) => !currentState);
-    if (onOpen)
-      onOpen(event);
+    if (onOpen) onOpen(event);
   };
   const getOptionLabelLocal = (option) => {
     if (option === void 0 || option === null) {
@@ -240,8 +242,7 @@ function ComponentTypeImage(props) {
               }
             }, [value]);
             const checkKeyDown = (e) => {
-              if (e.code === "Enter")
-                e.preventDefault();
+              if (e.code === "Enter") e.preventDefault();
             };
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
@@ -404,7 +405,9 @@ function ComponentTypeText(props) {
     getOptionLabel,
     isOptionEqualToValue,
     label,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     skeletonWidth = 100,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     skeletonHeight = "18px",
     options,
     disabled,
@@ -430,13 +433,11 @@ function ComponentTypeText(props) {
   const isDesktop = useResponsiveDesktop();
   const onCloseLocal = (event, reason) => {
     setOpen(false);
-    if (onClose)
-      onClose(event, reason);
+    if (onClose) onClose(event, reason);
   };
   const onOpenLocal = (event) => {
     setOpen((currentState) => !currentState);
-    if (onOpen)
-      onOpen(event);
+    if (onOpen) onOpen(event);
   };
   const getOptionLabelLocal = (option) => {
     if (option === void 0 || option === null) {
@@ -501,8 +502,7 @@ function ComponentTypeText(props) {
               }
             }, [value]);
             const checkKeyDown = (e) => {
-              if (e.code === "Enter")
-                e.preventDefault();
+              if (e.code === "Enter") e.preventDefault();
             };
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(

package/components/hook-form/RHFAutocompleteAsync/{index.f05b6fe3.js → index-BV0f25eK.js}

@@ -4,14 +4,16 @@ import { useState, useCallback, useEffect } from "react";
 import debounce from "lodash/debounce";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { ai as RHFAutocompleteAsyncRoot } from "../../../styles/index.db9e7ddb.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.089af1b8.js";
+import { ai as RHFAutocompleteAsyncRoot } from "../../../styles/index-C-MsxWtr.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index-erpzYu8W.js";
 const componentName = "M4LRHFAutocompleteAsync";
 generateUtilityClasses(
   componentName,
   [
+    /* elements */
     "root"
+    /* states or variants of elements */
   ]
 );
 function getRHFAutocompleteAsyncClassesUtilityClass(slot) {

package/components/hook-form/RHFCheckbox/{index.4cefbad2.js → index-Duf51-pS.js}

@@ -1,18 +1,20 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
-import { aj as RHFCheckboxRoot, ak as ContainerCheckTypography } from "../../../styles/index.db9e7ddb.js";
+import { aj as RHFCheckboxRoot, ak as ContainerCheckTypography } from "../../../styles/index-C-MsxWtr.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { H as HelperText } from "../../HelperText/index-DVV5Jfc8.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useModuleSkeleton } from "@m4l/core";
 import { useFormFocus } from "../../../index.js";
-import { C as CheckBox } from "../../mui_extended/CheckBox.5dc01b37.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox-CjxjIrmN.js";
 generateUtilityClasses("M4LRHFCheckbox", [
+  /* elements */
   "root",
   "checkTypography",
   "skeleton",
+  /* states or variants of elements */
   "small",
   "medium",
   "stateDisabled",
@@ -75,49 +77,54 @@ function RHFCheckbox(props) {
     error: errors[name] ? true : false
   };
   const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(
-    RHFCheckboxRoot,
-    {
-      className: classes.root,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root", name) } : {},
-      children: /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name,
-          control,
-          render: ({ field: { onChange, value }, fieldState: { error } }) => {
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                ContainerCheckTypography,
-                {
-                  className: classes.checkTypography,
-                  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("checkTypography", name) } : {},
-                  children: /* @__PURE__ */ jsx(
-                    CheckBox,
-                    {
-                      size: sizeCheck,
-                      onChange,
-                      checked: value,
-                      disabled: disabled ? true : false,
-                      disableRipple: true,
-                      label,
-                      mandatory,
-                      mandatoryMessage,
-                      helperMessage,
-                      htmlFor: name
-                    }
-                  )
-                }
-              ),
-              error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
-            ] });
+  return (
+    /* ImageRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
+        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros componentes
+        de la plataforna web. */
+    /* @__PURE__ */ jsx(
+      RHFCheckboxRoot,
+      {
+        className: classes.root,
+        onFocus: handlerFocus,
+        onBlur: handlerOnBlur,
+        onKeyUp: handlerOnKeyUp,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root", name) } : {},
+        children: /* @__PURE__ */ jsx(
+          Controller,
+          {
+            name,
+            control,
+            render: ({ field: { onChange, value }, fieldState: { error } }) => {
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  ContainerCheckTypography,
+                  {
+                    className: classes.checkTypography,
+                    ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("checkTypography", name) } : {},
+                    children: /* @__PURE__ */ jsx(
+                      CheckBox,
+                      {
+                        size: sizeCheck,
+                        onChange,
+                        checked: value,
+                        disabled: disabled ? true : false,
+                        disableRipple: true,
+                        label,
+                        mandatory,
+                        mandatoryMessage,
+                        helperMessage,
+                        htmlFor: name
+                      }
+                    )
+                  }
+                ),
+                error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
+              ] });
+            }
           }
-        }
-      )
-    }
+        )
+      }
+    )
   );
 }
 export {

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

@@ -3,5 +3,5 @@ export declare const RHFCheckboxRoot: import("@emotion/styled").StyledComponent<
 export declare const WrapperSKTRHFCheckbox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SKTCheckSkeleton: import("@emotion/styled").StyledComponent<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").RefObject<HTMLSpanElement> | null | undefined;
-}, "style" | "children" | "width" | "className" | "height" | "animation" | "variant" | "sx" | "classes"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "style" | "children" | "width" | "className" | "height" | "animation" | "sx" | "classes" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ContainerCheckTypography: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFColorPicker/{index.ed380b30.js → index-C-tITRAx.js}

@@ -3,25 +3,27 @@ import { useState } from "react";
 import { useFormContext, useWatch, Controller } from "react-hook-form";
 import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
 import { SketchPicker } from "react-color";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
+import { H as HelperText } from "../../HelperText/index-DVV5Jfc8.js";
 import { generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { al as RHFColorPickerRoot } from "../../../styles/index.db9e7ddb.js";
+import { al as RHFColorPickerRoot } from "../../../styles/index-C-MsxWtr.js";
 import { useTheme } from "@mui/material/styles";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.9a979def.js";
-import { P as Popover } from "../../mui_extended/Popover/index.a7da93f1.js";
-import { I as Icon } from "../../Icon/index.c06685f4.js";
-import { B as Button } from "../../mui_extended/Button/index.3d14e3e9.js";
+import { F as FieldLabel } from "../../FieldLabel/index-DCAMDJoJ.js";
+import { I as Icon } from "../../Icon/index-CueLDD9j.js";
+import { P as Popover } from "../../mui_extended/Popover/index-BnKsmvtw.js";
+import { B as Button } from "../../mui_extended/Button/index-CksGG1B8.js";
 const componentName = "M4LRHFColorPicker";
 const colorPickerClasses = generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "popoverRoot",
   "containerFieldColor",
   "fieldColor",
   "containerPicker",
   "skeleton",
+  /* states or variants of elements */
   "sizeSmall",
   "sizeMedium",
   "isFocus",

package/components/hook-form/RHFDateTime/{index.118ebe6d.js → index-OdXKdhJS.js}

@@ -7,12 +7,12 @@ import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { useState, useEffect } from "react";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
-import { am as RHFDateTimeRoot } from "../../../styles/index.db9e7ddb.js";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { am as RHFDateTimeRoot } from "../../../styles/index-C-MsxWtr.js";
+import { H as HelperText } from "../../HelperText/index-DVV5Jfc8.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
 import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.9a979def.js";
-import { I as Icon } from "../../Icon/index.c06685f4.js";
+import { F as FieldLabel } from "../../FieldLabel/index-DCAMDJoJ.js";
+import { I as Icon } from "../../Icon/index-CueLDD9j.js";
 const SkeletonRHFDateTime = (props) => {
   const { skeletonWidth, skeletonHeight, className, label } = props;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -25,8 +25,10 @@ const SkeletonRHFDateTime = (props) => {
 };
 const componentName = "M4LRHFDateTime";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "skeleton",
+  /* states or variants of elements */
   "small",
   "medium",
   "isFocus",

package/components/hook-form/RHFInputNumberSpinner/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHF_INPUTNUMBER_SPINNER_KEY_COMPONENT = "M4LRHFInputNumberSpinner";

package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnnerEnum.d.ts

@@ -0,0 +1,9 @@
+export declare enum RHFInputNumberSpinnerSlots {
+    root = "root",
+    containerInput = "containerInput",
+    input = "input",
+    span = "span",
+    containerButton = "containerButton",
+    actionButton = "actionButton",
+    actionsInputSkeleton = "actionsInputSkeleton"
+}