@m4l/components 2.0.7 → 3.0.1

package/components/commercial/TopBar/{index.06c1e138.js → index-DJNYXgHq.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.ebfbb70f.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.ccd8acc4.js";
-import { I as Icon } from "../../Icon/index.0f315ccd.js";
+import { ad as ArrowIconRoot } from "../../../styles/index-Cc9p_h7i.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
 import clsx from "clsx";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
-import { A as Accordion } from "../../mui_extended/Accordion/index.49007a43.js";
-import { B as Button } from "../../mui_extended/Button/index.ca15c36e.js";
-import { P as Popover } from "../../mui_extended/Popover/index.1fafd106.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId-BaBTWhBr.js";
+import { A as Accordion } from "../../mui_extended/Accordion/index-ZFpEUCnw.js";
+import { B as Button } from "../../mui_extended/Button/index-DlzpoczE.js";
+import { P as Popover } from "../../mui_extended/Popover/index-C6_2t4L1.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.163293c3.js → index-BLUHQfcA.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { ae as HamburgerMenuRoot } from "../../styles/index.ccd8acc4.js";
+import { ae as HamburgerMenuRoot } from "../../styles/index-Cc9p_h7i.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.50868466.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.caf17392.js";
+import { S as SideBar } from "../SideBar/index-Cg1bZn8y.js";
+import { I as IconButton } from "../mui_extended/IconButton/index-BfDbi0cC.js";
 const componentName = "M4LHamburgerMenuCommercial";
 generateUtilityClasses(componentName, ["root", "ImageLogo"]);
 function getHamburgerMenuComercialClassesUtilityClass(slot) {

package/components/formatters/BooleanFormatter/{index.b224ae9b.js → index-DpF0x_xp.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.0f315ccd.js";
-import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
-import { F as FormatterRoot, f as formatterClasses } from "../index.373a6ce1.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
+import { W as WrapperComponent } from "../../WrapperComponent/index-BHV-CsDU.js";
+import { F as FormatterRoot, f as formatterClasses } from "../index-CDt8LzvL.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.373a6ce1.js → index-CDt8LzvL.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.ccd8acc4.js";
-import { W as WrapperComponent } from "../WrapperComponent/index.57964195.js";
+import { af as FormatterRootContainer } from "../../styles/index-Cc9p_h7i.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.b224ae9b.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index-DpF0x_xp.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.399e7338.js → index-D-_czK9n.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.2f4c6655.js";
+import { H as HelperText } from "../../HelperText/index-COWCXeJp.js";
 function HelperError(props) {
   const { name } = props;
   const { control } = useFormContext();

package/components/hook-form/RHFAutocomplete/{index.0d32fed5.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.ccd8acc4.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { I as Image } from "../../Image/index.32b58ce4.js";
-import { T as Typography } from "../../mui_extended/Typography/index.61dd3fc6.js";
-import { H as HelperText } from "../../HelperText/index.2f4c6655.js";
-import { F as FieldLabel } from "../../FieldLabel/index.972f989e.js";
-import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.967e70b7.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.caf17392.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.2622450c.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.ccd8acc4.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.0d32fed5.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.3229f16c.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.ccd8acc4.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.2f4c6655.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.983e10e6.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.86525787.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.2f4c6655.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.ccd8acc4.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.972f989e.js";
-import { P as Popover } from "../../mui_extended/Popover/index.1fafd106.js";
-import { I as Icon } from "../../Icon/index.0f315ccd.js";
-import { B as Button } from "../../mui_extended/Button/index.ca15c36e.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.572079c5.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.ccd8acc4.js";
-import { H as HelperText } from "../../HelperText/index.2f4c6655.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.972f989e.js";
-import { I as Icon } from "../../Icon/index.0f315ccd.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.1883d9f6.js → index-BicAIry0.js}

@@ -1,16 +1,18 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { an as RHFPeriodRoot } from "../../../styles/index.ccd8acc4.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.2f4c6655.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.972f989e.js";
-import { P as Period } from "../../Period/index.5757802b.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.9eea0df1.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.0f315ccd.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
 function OptionIconLabelFormatter(option, getOptionLabel, getOptionIconUrl) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(