@m4l/components 1.1.2 → 2.0.0

package/components/areas/contexts/AreasContext/{index.c2289888.js → index.c677ccfa.js}

@@ -6,13 +6,13 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.266a3815.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.42d40964.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.8a568629.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.55c40f0c.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.3d9ad0ad.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.65aeef5e.js";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.ad80dae3.js";
 import { debounce, cloneDeep } from "lodash";
-import { A as isEqualLayouts } from "../../../GridLayout/index.56c3f4fa.js";
+import { A as isEqualLayouts } from "../../../GridLayout/index.a9f419d8.js";
 import { useNavigate } from "react-router-dom";
 const PADDING_GRIDLAYOUT = 11;
 const MARGIN_GRIDLAYOUT = 11;

package/components/areas/hooks/useAreas/{index.509c1703.js → index.2d10f64c.js}

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

package/components/areas/types.d.ts

@@ -119,7 +119,7 @@ export declare type WindowState = {
     toasties: Toasty[];
     /**
    * Hash que mapea el identificador de la tostada con su respectiva información.
-  
+  
    */
     hashToasties: Record<number, Toasty>;
     toastyCount: number;

package/components/commercial/AppBarCommercial/{index.3fd10868.js → index.85de55bb.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.78d1638f.js";
-import { ab as AppBarComercialRoot } from "../../../styles/index.239f949e.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.14912462.js";
+import { ab as AppBarComercialRoot } from "../../../styles/index.d972f170.js";
 const componentName = "M4LAppBarCommercial";
 generateUtilityClasses(
   componentName,

package/components/commercial/SectionCommercial/{index.bd45c64e.js → index.47c0cb0c.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.78d1638f.js";
-import { ac as SectionCommercialRoot } from "../../../styles/index.239f949e.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.14912462.js";
+import { ac as SectionCommercialRoot } from "../../../styles/index.d972f170.js";
 const componentName = "M4LSectionCommercial";
 generateUtilityClasses(
   componentName,

package/components/commercial/TopBar/{index.4e55cffa.js → index.ec7a6cc6.js}

@@ -2,16 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { generateUtilityClasses, useTheme, Box, Grid, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.78d1638f.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.14912462.js";
 import { createContext, useContext, useState } from "react";
 import { useEnvironment } from "@m4l/core";
-import { ad as ArrowIconRoot } from "../../../styles/index.239f949e.js";
-import { I as Icon } from "../../Icon/index.13aaae3c.js";
+import { ad as ArrowIconRoot } from "../../../styles/index.d972f170.js";
+import { I as Icon } from "../../Icon/index.2b591dd6.js";
 import clsx from "clsx";
 import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
-import { A as Accordion } from "../../mui_extended/Accordion/index.e6971e30.js";
-import { B as Button } from "../../mui_extended/Button/index.111f830e.js";
-import { P as Popover } from "../../mui_extended/Popover/index.5e78a637.js";
+import { A as Accordion } from "../../mui_extended/Accordion/index.bb0cd2ab.js";
+import { B as Button } from "../../mui_extended/Button/index.24b9496b.js";
+import { P as Popover } from "../../mui_extended/Popover/index.6d8fe229.js";
 const componentName = "M4LTopBar";
 const TopBarClasses = generateUtilityClasses(componentName, [
   "root",

package/components/commercial/{index.4bdbb8fe.js → index.90e72726.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { ae as HamburgerMenuRoot } from "../../styles/index.239f949e.js";
+import { ae as HamburgerMenuRoot } from "../../styles/index.d972f170.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 { useEnvironment } from "@m4l/core";
-import { S as SideBar } from "../SideBar/index.bb6c2c7b.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.9425bdc5.js";
+import { S as SideBar } from "../SideBar/index.f15b9904.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.f5dcf537.js";
 const componentName = "M4LHamburgerMenuCommercial";
 generateUtilityClasses(componentName, ["root", "ImageLogo"]);
 function getHamburgerMenuComercialClassesUtilityClass(slot) {

package/components/formatters/BooleanFormatter/{index.ac870381.js → index.5243a181.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.13aaae3c.js";
+import { I as Icon } from "../../Icon/index.2b591dd6.js";
 import { W as WrapperComponent } from "../../WrapperComponent/index.57964195.js";
-import { F as FormatterRoot, f as formatterClasses } from "../index.53ad2f51.js";
+import { F as FormatterRoot, f as formatterClasses } from "../index.1b738709.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/{index.53ad2f51.js → index.1b738709.js}

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
-import { af as FormatterRootContainer } from "../../styles/index.239f949e.js";
+import { af as FormatterRootContainer } from "../../styles/index.d972f170.js";
 import { W as WrapperComponent } from "../WrapperComponent/index.57964195.js";
 import { useModuleDictionary } from "@m4l/core";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.ac870381.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.5243a181.js";
 const COMPONENT_CLASS_NAME = "M4LFormatter";
 const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",

package/components/hook-form/HelperError/{index.9f93c627.js → index.c6f8f840.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.5c72277a.js";
+import { H as HelperText } from "../../HelperText/index.e9eddfe4.js";
 function HelperError(props) {
   const { name } = props;
   const { control } = useFormContext();

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

@@ -1,2 +1,2 @@
-import type { RHFAutocompleteProps } from './types';
+import { RHFAutocompleteProps } from './types';
 export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -7,9 +7,8 @@ export declare const useUtilityClasses: (ownerState: OwnerState) => {
     root: string;
     skeleton: string;
     popper: string;
-    withImage: string;
     skeletonRoot: string;
+    skeletonContainerText: string;
     iconDown: string;
     chip: string;
-    skeletonContainerText: string;
 };

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

@@ -9,7 +9,6 @@ export interface RHFAutocompleteClassesType {
     skeletonContainerText: string;
     iconDown: string;
     variantInfo: string;
-    variantImage: string;
     isDisabled: string;
     imageWidthDefined: string;
     variantSuccess: string;

package/components/hook-form/RHFAutocomplete/{index.b8347185.js → index.c8bcfed8.js}

@@ -1,61 +1,19 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useEffect, createElement } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createElement, useMemo, useRef, useState, useEffect } from "react";
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { useFormFocus } from "../../../index.js";
+import { generateUtilityClasses, generateUtilityClass, Skeleton, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
+import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormContext, Controller } from "react-hook-form";
-import { Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
-import { ag as WrapperOption, ah as AutocompleteRoot } from "../../../styles/index.239f949e.js";
-import { I as Image } from "../../Image/index.4b51d4ba.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { T as Typography } from "../../mui_extended/Typography/index.45e97bdd.js";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.5c72277a.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.59b9b63a.js";
+import { ag as WrapperOption, ah as AutocompleteRoot } from "../../../styles/index.d972f170.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { I as Image } from "../../Image/index.fb9e71ba.js";
+import { T as Typography } from "../../mui_extended/Typography/index.dbc44e77.js";
+import { H as HelperText } from "../../HelperText/index.e9eddfe4.js";
+import { F as FieldLabel } from "../../FieldLabel/index.44f3e099.js";
 import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.967e70b7.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.9425bdc5.js";
-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" } })
-        ] })
-      }
-    )
-  ] });
-};
+import { I as IconButton } from "../../mui_extended/IconButton/index.f5dcf537.js";
 const componentName = "M4LRHFAutocomplete";
 generateUtilityClasses(
   componentName,
@@ -69,7 +27,6 @@ generateUtilityClasses(
     "skeletonContainerText",
     "iconDown",
     "variantInfo",
-    "variantImage",
     "isDisabled",
     "imageWidthDefined",
     "variantSuccess",
@@ -98,17 +55,16 @@ const useUtilityClasses = (ownerState) => {
       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"
+      ownerState.imageScale && "imageScale",
+      ownerState.imageRepeat && "imageRepeat"
     ],
     skeletonRoot: ["skeletonRoot"],
     skeletonContainerText: ["SkeletonContainerText"],
@@ -124,7 +80,48 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-function RHFAutocomplete(props) {
+const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";
+const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
+const getNameDataTestId = (KEY) => {
+  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
+};
+function withRenderOption(getUrlImage, classes) {
+  return function RenderOption(optionProps, option) {
+    return /* @__PURE__ */ createElement(
+      WrapperOption,
+      {
+        ...optionProps,
+        key: optionProps.key,
+        className: classes.withImage,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("withImage") } : {}
+      },
+      /* @__PURE__ */ jsx(Image, { src: getUrlImage(option) }),
+      /* @__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" } })
+        ] })
+      }
+    )
+  ] });
+};
+function ComponentTypeImage(props) {
   const {
     name: nameRHF,
     getOptionLabel,
@@ -142,11 +139,11 @@ function RHFAutocomplete(props) {
     helperMessage,
     size = "small",
     onChangeFilterParmsLocal,
-    imageWidth,
-    imageHeight,
     mandatory,
     mandatoryMessage,
     multiple,
+    imageScale = true,
+    imageRepeat,
     ...other
   } = props;
   const { getLabel } = useModuleDictionary();
@@ -207,8 +204,9 @@ function RHFAutocomplete(props) {
     isTabSelected: !isSkeleton ? isTabSelected : false,
     semantics: currentVariant,
     disabled,
-    imageWidthDefined: Boolean(imageWidth),
-    multiple: Boolean(multiple)
+    multiple: Boolean(multiple),
+    imageScale: Boolean(imageScale),
+    imageRepeat: Boolean(imageRepeat)
   };
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
@@ -266,6 +264,7 @@ function RHFAutocomplete(props) {
                   inputValue,
                   clearOnBlur: false,
                   PopperComponent: (popperProps) => {
+                    console.log("popper debug");
                     return /* @__PURE__ */ jsx(
                       Popper,
                       {
@@ -306,7 +305,7 @@ function RHFAutocomplete(props) {
                   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,
+                  renderOption: withRenderOption(getOptionUrlImageLocal, classes),
                   renderInput: (params) => {
                     return /* @__PURE__ */ jsx(
                       TextField,
@@ -325,9 +324,7 @@ function RHFAutocomplete(props) {
                             !multiple && withImage && value ? /* @__PURE__ */ jsx(
                               Image,
                               {
-                                src: getOptionUrlImageLocal(value),
-                                width: imageWidth,
-                                height: "100%"
+                                src: getOptionUrlImageLocal(value)
                               },
                               "ImageTextField"
                             ) : null,
@@ -365,9 +362,7 @@ function RHFAutocomplete(props) {
                           icon: withImage && option ? /* @__PURE__ */ jsx(
                             Image,
                             {
-                              src: getOptionUrlImageLocal(option),
-                              width: imageWidth,
-                              height: imageHeight ?? "100%"
+                              src: getOptionUrlImageLocal(option)
                             }
                           ) : void 0,
                           sx: {
@@ -387,6 +382,243 @@ function RHFAutocomplete(props) {
     }
   );
 }
+function ComponentTypeText(props) {
+  const {
+    name: nameRHF,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    onOpen,
+    onClose,
+    loading,
+    variant,
+    helperMessage,
+    size = "small",
+    onChangeFilterParmsLocal,
+    mandatory,
+    mandatoryMessage,
+    multiple,
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  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 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,
+    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: 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__ */ jsx(Fragment, { children: 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: void 0,
+                          sx: {
+                            ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
+                          }
+                        }
+                      );
+                    })
+                  } : {}
+                }
+              ),
+              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, { variant: currentVariant, message: error?.message }) : null
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, { classes, hasLabel: label })
+    }
+  );
+}
+function RHFAutocomplete(props) {
+  return /* @__PURE__ */ jsx(Fragment, { children: props.type === "image" ? /* @__PURE__ */ jsx(ComponentTypeImage, { ...props }) : /* @__PURE__ */ jsx(ComponentTypeText, { ...props }) });
+}
 function getRHFAutocompleteComponentsDictionary() {
   return ["rhf_autocomplete"];
 }

package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeImage/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageProps, RHFAutocompleteBaseProps } from "../../types";
+export declare function ComponentTypeImage<T>(props: RHFAutocompleteBaseProps<T> & ImageProps<T>): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeText/index.d.ts

@@ -0,0 +1,2 @@
+import { RHFAutocompleteBaseProps, RHFAutocompleteTypeTextProps } from "../../types";
+export declare function ComponentTypeText<T>(props: RHFAutocompleteBaseProps<T> & RHFAutocompleteTypeTextProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFAutocomplete/subcomponents/RenderOption/index.d.ts

@@ -1,3 +1,3 @@
 import { HTMLAttributes } from 'react';
 import { GetOptionString } from '../../types';
-export declare function withRenderOption<T>(getUrlImage: GetOptionString<T>, classes: any, imageWidth: string | number | undefined): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => import("react/jsx-runtime").JSX.Element;
+export declare function withRenderOption<T>(getUrlImage: GetOptionString<T>, classes: any): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Classes } from '../../classes/types';
 export interface SkeletonRHFAutocompleteProps {
-    withImage: boolean;
+    withImage?: boolean;
     classes: Classes;
     hasLabel?: string;
 }