@m4l/components 1.0.11 → 1.0.13

package/components/formatters/PriceFormatter/index.97f75b4b.js

@@ -0,0 +1,35 @@
+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";
+function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
+  let result = "";
+  const value = getPropertyByString(obProps, fieldValue);
+  try {
+    result = Number(value).toLocaleString(navigator.language, {
+      currency,
+      style: "currency",
+      currencyDisplay: "symbol",
+      useGrouping: true,
+      maximumFractionDigits: decimalDigits
+    }) || "";
+  } catch (error) {
+    result = Number(value).toLocaleString("en-US", {
+      style: "currency",
+      currency: "USD",
+      currencyDisplay: "symbol",
+      useGrouping: true,
+      maximumFractionDigits: decimalDigits
+    }) || "";
+  }
+  return result;
+}
+function PriceFormatter(props) {
+  const { obProps, fieldValue, Component = WrapperComponent } = props;
+  const { currencyFormatter } = useFormatter();
+  return /* @__PURE__ */ jsx(Component, { children: getFormatPrice(obProps, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits) });
+}
+export {
+  PriceFormatter as P,
+  getFormatPrice as g
+};

package/components/formatters/UncertaintyFormatter/index.c3ffdebc.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
+function getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) {
+  let result = "";
+  const ranges = getPropertyByString(obProps, fieldValue);
+  const symbol = getPropertyByString(obProps, fieldSymbol);
+  const unit = getPropertyByString(obProps, fieldUnit);
+  if (ranges === void 0 || ranges === null || !Array.isArray(ranges) || typeof symbol !== "string" || typeof unit !== "string") {
+    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";
+    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}]`
+    );
+  });
+  return result;
+}
+function UncertaintyFormatter(props) {
+  const { obProps, fieldValue, fieldSymbol, fieldUnit, Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) });
+}
+export {
+  UncertaintyFormatter as U,
+  getUncertaintyFormat as g
+};

package/components/formatters/index.63a3e08e.js

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import { generateUtilityClasses, styled } from "@mui/material";
+import "@mui/base";
+import { W as WrapperComponent } from "../WrapperComponent/index.57964195.js";
+import { useModuleDictionary } from "@m4l/core";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.cbf9cd6e.js";
+const COMPONENT_CLASS_NAME = "M4LFormatter";
+const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "booleanFormatterIcon",
+  "booleanFormatterCheck"
+]);
+const FormatterRootContainer = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LFormatter?.styleOverrides
+}));
+const FormatterRoot = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx(FormatterRootContainer, { className: formatterClasses.root, children });
+};
+function getFormatConcatenated(values, separator) {
+  const returnSymbol = "";
+  if (values === null)
+    return returnSymbol;
+  if (!Array.isArray(values)) {
+    return values.toString();
+  } else {
+    if (values.length == 0)
+      return returnSymbol;
+    else {
+      const result = values.map((value) => {
+        if (value === null || value === void 0)
+          return returnSymbol;
+        else {
+          if (typeof value === "string" || typeof value === "number") {
+            return value.toString();
+          } else {
+            return returnSymbol;
+          }
+        }
+      });
+      const output = result.join(separator.toString());
+      return output.trim();
+    }
+  }
+}
+function ConcatenatedFormatter(props) {
+  const { values = [], separator = " ", Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: getFormatConcatenated(values, separator) });
+}
+const PERIOD_FORMATTER_DICTIONARY_KEY = `period_formatter`;
+const dictionary = {
+  LABEL_YEARS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_years`,
+  LABEL_YEAR: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_year`,
+  LABEL_MONTHS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_months`,
+  LABEL_MONTH: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_month`,
+  LABEL_DAYS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_days`,
+  LABEL_DAY: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_day`
+};
+function getFormatPeriod(years, months, days) {
+  const { getLabel } = useModuleDictionary();
+  let period = "";
+  const separator = ", ";
+  switch (years) {
+    case 0:
+      break;
+    case 1:
+      period = "1 " + getLabel(dictionary.LABEL_YEAR);
+      break;
+    default:
+      period = years.toString() + " " + getLabel(dictionary.LABEL_YEARS);
+  }
+  switch (months) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0)
+        period += separator;
+      period += "1 " + getLabel(dictionary.LABEL_MONTH);
+      break;
+    default:
+      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;
+      period += "1 " + getLabel(dictionary.LABEL_DAY);
+      break;
+    default:
+      if (years > 0 || months > 0)
+        period += separator;
+      period += days.toString() + " " + getLabel(dictionary.LABEL_DAYS);
+  }
+  if (period == "")
+    period = "-";
+  return period;
+}
+function PeriodFormatter(props) {
+  const { years = 0, months = 0, days = 0, Component = WrapperComponent } = props;
+  return /* @__PURE__ */ jsx(Component, { children: getFormatPeriod(years, months, days) });
+}
+function getFormattersComponentsDictionary() {
+  return [BOOLEAN_FORMATTER_DICTIONARY_KEY, PERIOD_FORMATTER_DICTIONARY_KEY];
+}
+export {
+  ConcatenatedFormatter as C,
+  FormatterRoot as F,
+  PeriodFormatter as P,
+  getFormatPeriod as a,
+  getFormattersComponentsDictionary as b,
+  formatterClasses as f,
+  getFormatConcatenated as g
+};

package/components/hook-form/HelperError/{index.2ed03a3c.js → index.c0109d5b.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.ebb53dac.js";
+import { H as HelperText } from "../../HelperText/index.09e80920.js";
 function HelperError(props) {
   const { name } = props;
   const { control } = useFormContext();

package/components/hook-form/RHFAutocomplete/index.2991d444.js

@@ -0,0 +1,404 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useEffect, createElement } from "react";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { I as Image } from "../../Image/index.19aa7ff5.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { T as Typography } from "../../mui_extended/Typography/index.642798f1.js";
+import { unstable_composeClasses } from "@mui/base";
+import { H as HelperText } from "../../HelperText/index.09e80920.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.6b6f708e.js";
+import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.967e70b7.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.b4532b85.js";
+const AutocompleteRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
+}));
+const WrapperOption = styled("li")(({ theme }) => ({
+  "& .m4l_image": {
+    marginRight: theme.spacing(1.5)
+  }
+}));
+const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";
+const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
+const getNameDataTestId = (KEY) => {
+  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
+};
+function withRenderOption(getUrlImage, classes, imageWidth) {
+  return function RenderOption(optionProps, option) {
+    return /* @__PURE__ */ jsxs(
+      WrapperOption,
+      {
+        ...optionProps,
+        className: classes.withImage,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("withImage") } : {},
+        children: [
+          /* @__PURE__ */ jsx(Image, { src: getUrlImage(option), width: imageWidth, height: "100%" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body", children: optionProps.key })
+        ]
+      }
+    );
+  };
+}
+const SkeletonRHFAutocomplete = (props) => {
+  const { withImage, classes, hasLabel } = props;
+  return /* @__PURE__ */ jsxs("div", { className: classes.skeletonRoot, children: [
+    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes.skeleton,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("skeleton") } : {},
+        children: !withImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular" }),
+          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
+        ] })
+      }
+    )
+  ] });
+};
+const componentName = "M4LRHFAutocomplete";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "withImage",
+    "skeleton",
+    "label",
+    "popper",
+    "skeletonRoot",
+    "skeletonContainerText",
+    "iconDown",
+    "variantInfo",
+    "variantImage",
+    "isDisabled",
+    "imageWidthDefined",
+    "variantSuccess",
+    "variantWarning",
+    "variantError",
+    "sizeSmall",
+    "sizeMedium",
+    "isFocus",
+    "isTabSelected",
+    "chip"
+  ]
+);
+function getRHFAutocompleteClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
+      ownerState.disabled && "isDisabled",
+      ownerState.semantics === "info" && "variantInfo",
+      ownerState.semantics === "success" && "variantSuccess",
+      ownerState.semantics === "warning" && "variantWarning",
+      ownerState.semantics === "error" && "variantError",
+      ownerState.imageWidthDefined && "imageWidthDefined",
+      ownerState.multiple && "multiple"
+    ],
+    withImage: ["withImage"],
+    skeleton: ["skeleton"],
+    label: ["label"],
+    popper: [
+      "popper",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.imageWidthDefined && "imageWidthDefined"
+    ],
+    skeletonRoot: ["skeletonRoot"],
+    skeletonContainerText: ["SkeletonContainerText"],
+    iconDown: ["iconDown"],
+    chip: [
+      "chip",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium"
+    ]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function RHFAutocomplete(props) {
+  const {
+    name: nameRHF,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    getOptionUrlImage,
+    onOpen,
+    onClose,
+    loading,
+    variant,
+    helperMessage,
+    size = "small",
+    onChangeFilterParmsLocal,
+    imageWidth,
+    imageHeight,
+    mandatory,
+    mandatoryMessage,
+    multiple,
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const autocompleteRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const isDesktop = useResponsiveDesktop();
+  const onCloseLocal = (event, reason) => {
+    setOpen(false);
+    if (onClose)
+      onClose(event, reason);
+  };
+  const onOpenLocal = (event) => {
+    setOpen(true);
+    if (onOpen)
+      onOpen(event);
+  };
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const getOptionUrlImageLocal = (option) => {
+    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
+      return "";
+    }
+    return getOptionUrlImage(option);
+  };
+  const isOptionEqualToValueLocal = (option, value) => {
+    if (value === void 0 || value === null || option === null) {
+      return false;
+    }
+    return isOptionEqualToValue(option, value);
+  };
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  const [currentVariant, setCurrentVariant] = useState(
+    null
+  );
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const ownerState = {
+    size: !isDesktop ? "medium" : size,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    semantics: currentVariant,
+    disabled,
+    imageWidthDefined: Boolean(imageWidth),
+    multiple: Boolean(multiple)
+  };
+  const classes = useUtilityClasses(ownerState);
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    AutocompleteRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTAUTOCOMPLET_ROOT_TEST_ID}_${nameRHF}` } : {},
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: nameRHF,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
+            useEffect(() => {
+              if (!open && value === null && inputValue !== "") {
+                setInputValue("");
+              }
+              if (!open && value !== null && options.length === 0) {
+                onChangeFilterParmsLocal?.(getOptionLabelLocal(value), "reset");
+              }
+            }, [value]);
+            const checkKeyDown = (e) => {
+              if (e.code === "Enter")
+                e.preventDefault();
+            };
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  className: classes.label,
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Autocomplete,
+                {
+                  autoComplete: true,
+                  disableClearable: true,
+                  multiple,
+                  onKeyDown: checkKeyDown,
+                  size,
+                  ref: autocompleteRef,
+                  autoSelect: false,
+                  options,
+                  getOptionLabel: getOptionLabelLocal,
+                  inputValue,
+                  clearOnBlur: false,
+                  PopperComponent: (popperProps) => {
+                    return /* @__PURE__ */ jsx(
+                      Popper,
+                      {
+                        ...popperProps,
+                        className: classes.popper,
+                        placement: "bottom-start",
+                        sx: {
+                          ...theme.components?.M4LRHFAutocompletePopover?.styleOverrides
+                        }
+                      }
+                    );
+                  },
+                  onInputChange: (_event, newValue, reason) => {
+                    if (reason === "input") {
+                      setInputValue(newValue);
+                      if (onChangeFilterParmsLocal) {
+                        onChangeFilterParmsLocal(newValue, reason);
+                      }
+                    } else {
+                      onChange(null);
+                    }
+                  },
+                  isOptionEqualToValue: isOptionEqualToValueLocal,
+                  value: Array.isArray(value) ? value : multiple ? value ? [value] : [] : value || null,
+                  onOpen: onOpenLocal,
+                  onClose: onCloseLocal,
+                  open,
+                  onChange: (_e, newValue) => {
+                    if (!multiple && !Array.isArray(newValue)) {
+                      setInputValue(getOptionLabelLocal(newValue));
+                    } else {
+                      setInputValue("");
+                    }
+                    onChange(Array.isArray(newValue) ? [...newValue] : newValue);
+                  },
+                  filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
+                  loading,
+                  loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel("rhf_autocomplete.loading_options") }),
+                  disabled,
+                  noOptionsText: getLabel("rhf_autocomplete.no_options"),
+                  renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, classes, imageWidth) : void 0,
+                  renderInput: (params) => {
+                    return /* @__PURE__ */ jsx(
+                      TextField,
+                      {
+                        ...params,
+                        InputLabelProps: {
+                          ...params.InputLabelProps,
+                          shrink: true
+                        },
+                        fullWidth: true,
+                        size,
+                        SelectProps: { native: true },
+                        InputProps: {
+                          ...params.InputProps,
+                          startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+                            !multiple && withImage && value ? /* @__PURE__ */ jsx(
+                              Image,
+                              {
+                                src: getOptionUrlImageLocal(value),
+                                width: imageWidth,
+                                height: "100%"
+                              },
+                              "ImageTextField"
+                            ) : null,
+                            params.InputProps.startAdornment
+                          ] }),
+                          endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              className: classes.iconDown,
+                              src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
+                              onClick: (event) => onOpenLocal(event),
+                              disabled,
+                              size
+                            }
+                          )
+                        },
+                        autoComplete: "off",
+                        error: !!error,
+                        ...other
+                      }
+                    );
+                  },
+                  ...multiple ? {
+                    renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
+                      const { key, ...restTagProps } = getTagProps({
+                        index
+                      });
+                      return /* @__PURE__ */ createElement(
+                        Chip,
+                        {
+                          ...restTagProps,
+                          key,
+                          label: getOptionLabelLocal(option),
+                          className: classes.chip,
+                          icon: withImage && option ? /* @__PURE__ */ jsx(
+                            Image,
+                            {
+                              src: getOptionUrlImageLocal(option),
+                              width: imageWidth,
+                              height: imageHeight ?? "100%"
+                            }
+                          ) : void 0,
+                          sx: {
+                            ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
+                          }
+                        }
+                      );
+                    })
+                  } : {}
+                }
+              ),
+              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, { variant: currentVariant, message: error?.message }) : null
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, { withImage, classes, hasLabel: label })
+    }
+  );
+}
+function getRHFAutocompleteComponentsDictionary() {
+  return ["rhf_autocomplete"];
+}
+export {
+  RHFAutocomplete as R,
+  getRHFAutocompleteComponentsDictionary as g
+};

package/components/hook-form/RHFAutocompleteAsync/{index.69f5661d.js → index.d97c727b.js}

@@ -5,9 +5,8 @@ import debounce from "lodash/debounce";
 import { styled } from "@mui/material/styles";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../areas/constants.0d3ba950.js";
-import { R as RHFAutocomplete } from "../../../vendor.5b266106.js";
-import { e as getRHFAutocompleteComponentsDictionary } from "../../areas/dictionary.6168209a.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.2991d444.js";
 styled("div")(() => ({
   display: "flex",
   width: "100%",

package/components/hook-form/RHFCheckbox/{index.13de27db.js → index.b57e3131.js}

@@ -3,12 +3,12 @@ import { useFormContext, Controller } from "react-hook-form";
 import { styled } from "@mui/material/styles";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.ebb53dac.js";
-import { T as TEST_PROP_ID } from "../../areas/constants.0d3ba950.js";
+import { H as HelperText } from "../../HelperText/index.09e80920.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useModuleSkeleton } from "@m4l/core";
-import { c as useFormFocus } from "../../../vendor.5b266106.js";
-import { C as CheckBox } from "../../mui_extended/CheckBox/index.01218423.js";
+import { useFormFocus } from "../../../index.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox.21c25705.js";
 const RHFCheckboxRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LRHFCheckbox?.styleOverrides
 }));

package/components/hook-form/RHFColorPicker/{index.66004599.js → index.310f6ff0.js}

@@ -3,16 +3,16 @@ 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.ebb53dac.js";
+import { H as HelperText } from "../../HelperText/index.09e80920.js";
 import { generateUtilityClasses, generateUtilityClass, styled, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { useTheme } from "@mui/material/styles";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { c as useFormFocus } from "../../../vendor.5b266106.js";
-import { F as FieldLabel } from "../../FieldLabel/index.1577ac9c.js";
-import { P as Popover } from "../../mui_extended/Popover/index.146ded9e.js";
-import { I as Icon } from "../../Icon/index.8ecfb193.js";
-import { B as Button } from "../../mui_extended/Button/index.52852c42.js";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.6b6f708e.js";
+import { P as Popover } from "../../mui_extended/Popover/index.2348fc4f.js";
+import { I as Icon } from "../../Icon/index.83867398.js";
+import { B as Button } from "../../mui_extended/Button/index.d742e9ee.js";
 const componentName = "M4LRHFColorPicker";
 const colorPickerClasses = generateUtilityClasses(componentName, [
   "root",

package/components/hook-form/RHFDateTime/{index.dfe07e18.js → index.5689a29f.js}

@@ -7,11 +7,11 @@ import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { useState, useEffect } from "react";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
-import { H as HelperText } from "../../HelperText/index.ebb53dac.js";
-import { T as TEST_PROP_ID } from "../../areas/constants.0d3ba950.js";
-import { c as useFormFocus } from "../../../vendor.5b266106.js";
-import { F as FieldLabel } from "../../FieldLabel/index.1577ac9c.js";
-import { I as Icon } from "../../Icon/index.8ecfb193.js";
+import { H as HelperText } from "../../HelperText/index.09e80920.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.6b6f708e.js";
+import { I as Icon } from "../../Icon/index.83867398.js";
 const SkeletonRHFDateTime = (props) => {
   const { skeletonWidth, skeletonHeight, className, label } = props;
   return /* @__PURE__ */ jsxs(Fragment, { children: [