@m4l/components 3.0.0 → 3.0.1

package/components/hook-form/RHFAutocomplete/{index.089af1b8.js → index-BhbgwNUz.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-Cc9p_h7i.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
+import { I as Image } from "../../Image/index-B7FhR9uF.js";
+import { T as Typography } from "../../mui_extended/Typography/index-DKPqV11f.js";
+import { H as HelperText } from "../../HelperText/index-COWCXeJp.js";
+import { F as FieldLabel } from "../../FieldLabel/index-BpW2AGJx.js";
+import { C as CircularProgress } from "../../mui_extended/CircularProgress/index-Bnnti_G6.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index-BfDbi0cC.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-BnUgdSnR.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-Cc9p_h7i.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-BhbgwNUz.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-ubHFuH1F.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-Cc9p_h7i.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-COWCXeJp.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-ByxYagHV.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/RHFColorPicker/{index.ed380b30.js → index-DBpi0Zhe.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-COWCXeJp.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-Cc9p_h7i.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-BpW2AGJx.js";
+import { P as Popover } from "../../mui_extended/Popover/index-C6_2t4L1.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
+import { B as Button } from "../../mui_extended/Button/index-DlzpoczE.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-BtfOlX4T.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-Cc9p_h7i.js";
+import { H as HelperText } from "../../HelperText/index-COWCXeJp.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-BpW2AGJx.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.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/RHFPeriod/{index.404ba4c6.js → index-BicAIry0.js}

@@ -1,16 +1,18 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { an as RHFPeriodRoot } from "../../../styles/index.db9e7ddb.js";
+import { an as RHFPeriodRoot } from "../../../styles/index-Cc9p_h7i.js";
 import { useFormContext, Controller } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.6818980e.js";
+import { H as HelperText } from "../../HelperText/index-COWCXeJp.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { useModuleSkeleton } from "@m4l/core";
 import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.9a979def.js";
-import { P as Period } from "../../Period/index.b0b2a03b.js";
+import { F as FieldLabel } from "../../FieldLabel/index-BpW2AGJx.js";
+import { P as Period } from "../../Period/index-DxijnNw6.js";
 const componentName = "M4LRHFPeriod";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
+  /* states or variants of elements */
   "isFocus",
   "isTabSelected"
 ]);

package/components/hook-form/RHFRadioGroup/{index.591f779d.js → index-Di37rp0B.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
 import { RadioGroup, FormControlLabel, FormHelperText, Radio } from "@mui/material";
-import { I as Icon } from "../../Icon/index.c06685f4.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
 function OptionIconLabelFormatter(option, getOptionLabel, getOptionIconUrl) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(