@m4l/components 0.1.95 → 0.1.97

package/components/formatters/PointsFormatter/{index.80a4e414.js → index.5c94c5e8.js}

@@ -1,7 +1,7 @@
 import { getPropertyByString } from "@m4l/core";
 import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
 import { jsx } from "react/jsx-runtime";
-function getFormatPoints(obProps, fieldValue, fieldUnit) {
+function getFormatPoints(obProps, fieldValue, fieldUnit, chainPoint) {
   let result = "";
   const points = getPropertyByString(obProps, fieldValue);
   const unit = getPropertyByString(obProps, fieldUnit) || "";
@@ -10,7 +10,7 @@ function getFormatPoints(obProps, fieldValue, fieldUnit) {
   }
   points.map((point) => {
     if (point) {
-      result = result.concat(`[${point}${unit}]`);
+      result = !chainPoint ? result.concat(`[${point}${unit}]`) : result.concat(`[${getPropertyByString(point, chainPoint)}${unit}]`);
     }
   });
   return result;

package/components/formatters/PointsFormatter/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { PointsFormatterProps } from './types';
-export declare function getFormatPoints(obProps: any, fieldValue: string, fieldUnit: string): string;
+export declare function getFormatPoints(obProps: any, fieldValue: string, fieldUnit: string, chainPoint?: string): string;
 export declare function PointsFormatter(props: PointsFormatterProps): import("react").JSX.Element;

package/components/formatters/{index.1906141f.js → index.e8bd78a5.js}

@@ -3,7 +3,7 @@ import "@mui/base";
 import { jsx } from "react/jsx-runtime";
 import { W as WrapperComponent } from "../WrapperComponent/index.5e872594.js";
 import { useModuleDictionary } from "@m4l/core";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.00596be3.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.35005602.js";
 const COMPONENT_CLASS_NAME = "M4LFormatter";
 const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",

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

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

package/components/hook-form/RHFAutocomplete/{index.a5f1034a.js → index.b01b97e3.js}

@@ -2,15 +2,15 @@ import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/cor
 import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { I as Image } from "../../Image/index.9799dfc0.js";
+import { I as Image } from "../../Image/index.8b134b95.js";
 import { useMemo, useRef, useState, useEffect } from "react";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { unstable_composeClasses } from "@mui/base";
 import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
+import { unstable_composeClasses } from "@mui/base";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as IconButton } from "../../mui_extended/IconButton/index.5499ffdb.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.3c568901.js";
 const AutocompleteRoot = styled("div")(({
   theme
 }) => ({
@@ -28,7 +28,7 @@ const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
 const getNameDataTestId = (KEY) => {
   return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
 };
-function withRenderOption(getUrlImage, classes) {
+function withRenderOption(getUrlImage, classes, imageWidth) {
   return function RenderOption(optionProps, option) {
     return /* @__PURE__ */ jsxs(WrapperOption, {
       ...optionProps,
@@ -37,18 +37,19 @@ function withRenderOption(getUrlImage, classes) {
         [TEST_PROP_ID]: getNameDataTestId("withImage")
       } : {},
       children: [/* @__PURE__ */ jsx(Image, {
-        src: getUrlImage(option)
-      }), optionProps.key]
+        src: getUrlImage(option),
+        width: imageWidth,
+        height: "100%"
+      }), /* @__PURE__ */ jsx(Typography, {
+        variant: "body",
+        children: optionProps.key
+      })]
     });
   };
 }
 const SkeletonRHFAutocomplete = (props) => {
   const {
     withImage,
-    skeletonWidth,
-    skeletonHeight,
-    imageWidth,
-    imageHeight,
     classes,
     hasLabel
   } = props;
@@ -67,9 +68,7 @@ const SkeletonRHFAutocomplete = (props) => {
         children: [/* @__PURE__ */ jsx("div", {
           className: classes.skeletonContainerText,
           children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text",
-            width: skeletonWidth,
-            height: skeletonHeight
+            variant: "text"
           })
         }), /* @__PURE__ */ jsx(Skeleton, {
           variant: "circular",
@@ -81,18 +80,11 @@ const SkeletonRHFAutocomplete = (props) => {
         })]
       }) : /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: imageWidth,
-          height: imageHeight,
-          sx: {
-            minWidth: imageWidth
-          }
+          variant: "circular"
         }), /* @__PURE__ */ jsx("div", {
           className: classes.skeletonContainerText,
           children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text",
-            width: skeletonWidth,
-            height: skeletonHeight
+            variant: "text"
           })
         }), /* @__PURE__ */ jsx(Skeleton, {
           variant: "circular",
@@ -117,7 +109,9 @@ generateUtilityClasses(componentName, [
   "skeletonContainerText",
   "iconDown",
   "variantInfo",
+  "variantImage",
   "isDisabled",
+  "imageWidthDefined",
   "variantSuccess",
   "variantWarning",
   "variantError",
@@ -130,11 +124,11 @@ function getRHFAutocompleteClassesUtilityClass(slot) {
 }
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.focus && "isFocus", ownerState.disabled && "isDisabled", ownerState.variant === "info" && "variantInfo", ownerState.variant === "success" && "variantSuccess", ownerState.variant === "warning" && "variantWarning", ownerState.variant === "error" && "variantError"],
+    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.focus && "isFocus", ownerState.disabled && "isDisabled", ownerState.semantics === "info" && "variantInfo", ownerState.semantics === "success" && "variantSuccess", ownerState.semantics === "warning" && "variantWarning", ownerState.semantics === "error" && "variantError", ownerState.imageWidthDefined && "imageWidthDefined"],
     withImage: ["withImage"],
     skeleton: ["skeleton"],
     label: ["label"],
-    popper: ["popper"],
+    popper: ["popper", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.imageWidthDefined && "imageWidthDefined"],
     skeletonRoot: ["skeletonRoot"],
     skeletonContainerText: ["SkeletonContainerText"],
     iconDown: ["iconDown"]
@@ -155,8 +149,6 @@ function RHFAutocomplete(props) {
     options,
     disabled,
     getOptionUrlImage,
-    imageWidth = "24px",
-    imageHeight = "24px",
     onOpen,
     onClose,
     loading,
@@ -164,6 +156,7 @@ function RHFAutocomplete(props) {
     helperMessage,
     size = "small",
     onChangeFilterParmsLocal,
+    imageWidth,
     ...other
   } = props;
   const {
@@ -232,8 +225,9 @@ function RHFAutocomplete(props) {
   const ownerState = {
     size: !isDesktop ? "medium" : size,
     focus: isFocus,
-    variant: currentVariant,
-    disabled
+    semantics: currentVariant,
+    disabled,
+    imageWidthDefined: imageWidth ? true : false
   };
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
@@ -285,11 +279,12 @@ function RHFAutocomplete(props) {
             inputValue,
             clearOnBlur: false,
             PopperComponent: (props2) => {
+              console.log("Autocomplete open Popover");
               return /* @__PURE__ */ jsx(Popper, {
                 ...props2,
                 className: classes.popper,
                 placement: "bottom-start",
-                placeholder: /* @__PURE__ */ jsx(Fragment, {}),
+                placeholder: void 0,
                 sx: {
                   ...theme.components?.M4LRHFAutocompletePopover?.styleOverrides
                 }
@@ -322,7 +317,7 @@ function RHFAutocomplete(props) {
             }),
             disabled,
             noOptionsText: getLabel("rhf_autocomplete.no_options"),
-            renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, classes) : void 0,
+            renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, classes, imageWidth) : void 0,
             renderInput: (params) => {
               return /* @__PURE__ */ jsx(TextField, {
                 ...params,
@@ -339,7 +334,7 @@ function RHFAutocomplete(props) {
                   startAdornment: withImage && value ? /* @__PURE__ */ jsx(Image, {
                     src: getOptionUrlImageLocal(value),
                     width: imageWidth,
-                    height: imageHeight
+                    height: "100%"
                   }, "ImageTextField") : null,
                   endAdornment: /* @__PURE__ */ jsx(Fragment, {
                     children: loading ? /* @__PURE__ */ jsx(CircularProgress, {
@@ -366,10 +361,6 @@ function RHFAutocomplete(props) {
       }
     }) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, {
       withImage,
-      skeletonWidth,
-      skeletonHeight,
-      imageWidth,
-      imageHeight,
       classes,
       hasLabel: label
     })

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): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => import("react").JSX.Element;
+export declare function withRenderOption<T>(getUrlImage: GetOptionString<T>, classes: any, imageWidth: string | number | undefined): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => import("react").JSX.Element;

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

@@ -1,6 +1,5 @@
 import { Classes } from '../../classes/types';
-import { RHFAutocompleteProps } from '../../types';
-export interface SkeletonRHFAutocompleteProps extends Pick<RHFAutocompleteProps<any>, 'skeletonWidth' | 'skeletonHeight' | 'imageWidth' | 'imageHeight'> {
+export interface SkeletonRHFAutocompleteProps {
     withImage: boolean;
     classes: Classes;
     hasLabel?: string;

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

@@ -8,21 +8,26 @@ export declare type RHFAutocompleteProps<T> = {
     options: Array<T>;
     getOptionLabel: (option: T) => string;
     getOptionUrlImage?: (option: T) => string;
+    /**
+    * El valor de tamaño en anchura que va a tener el elemento de imagen.
+    */
+    imageWidth?: string | number;
     isOptionEqualToValue: (option: T, value: T) => boolean;
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
     size?: Pick<RHFTextFieldProps, 'size'>;
     label: string;
-    imageWidth?: string;
-    imageHeight?: string;
     loading?: boolean;
     variant?: RHFAutocompleteVariants;
     helperMessage?: string;
     onOpen?: (event: React.SyntheticEvent) => void;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
     onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
+    imageHeight?: string | number;
 } & TextFieldProps;
 export interface OwnerState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
     focus: boolean;
-    variant: RHFAutocompleteVariants | 'error' | null;
+    semantics: RHFAutocompleteVariants | 'error' | null;
+    variant?: 'withImage';
+    imageWidthDefined: boolean;
 }

package/components/hook-form/RHFAutocompleteAsync/{index.047ff594.js → index.8241ce18.js}

@@ -6,7 +6,7 @@ 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 { jsx } from "react/jsx-runtime";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.a5f1034a.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.b01b97e3.js";
 styled("div")(() => ({
   display: "flex",
   width: "100%",

package/components/hook-form/RHFColorPicker/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LRHFColorPicker";

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

@@ -0,0 +1,11 @@
+import { RHFColorPickerClassesType } from './types';
+export declare const colorPickerClasses: RHFColorPickerClassesType;
+export declare function getRHFColorPickerUtilityClass(slot: string): string;
+export declare const useUtilityClasses: () => {
+    root: string;
+    skeleton: string;
+    popoverRoot: string;
+    containerFieldColor: string;
+    containerPicker: string;
+    fieldColor: string;
+};

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

@@ -0,0 +1,11 @@
+import { useUtilityClasses } from ".";
+export interface RHFColorPickerClassesType {
+    root: string;
+    popoverRoot: string;
+    containerFieldColor: string;
+    fieldColor: string;
+    containerPicker: string;
+    skeleton: string;
+}
+export declare type RHFColorPickerClassesKey = keyof RHFColorPickerClassesType;
+export declare type Classes = ReturnType<typeof useUtilityClasses>;

package/components/hook-form/RHFColorPicker/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RHFColorPickerProps } from './types';
+/**
+ * Componente RHFColorPicker para seleccionar colores con React Hook Form.
+ * @component
+ * @param {RHFColorPickerProps} props - Propiedades del componente.
+ * @returns {JSX.Element} - Elemento JSX que representa el componente.
+ */
+export declare const RHFColorPicker: (props: RHFColorPickerProps) => import("react").JSX.Element;

package/components/hook-form/RHFColorPicker/subcomponents/Skeleton/indext.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Skeleton: () => import("react").JSX.Element;

package/components/hook-form/RHFColorPicker/types.d.ts

@@ -0,0 +1,8 @@
+export interface RHFColorPickerProps {
+    /**
+    * Identificador del campo dentro del formulario de react hook form
+    */
+    name: string;
+}
+export interface OwnerState {
+}

package/components/hook-form/RHFDateTime/{index.a273293c.js → index.e8ea2555.js}

@@ -11,7 +11,7 @@ import clsx from "clsx";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
-import { I as Icon } from "../../Icon/index.11a7a77c.js";
+import { I as Icon } from "../../Icon/index.4e424a81.js";
 const SKTRHFWrapperTextField = styled("div")(({
   theme
 }) => ({

package/components/hook-form/RHFDateTime/types.d.ts

@@ -2,7 +2,6 @@ export interface RHFDateTimeProps {
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
     name: string;
-    withMask?: boolean;
     variant?: RHFDateTimeVariants;
     size?: SizeType;
     disabled?: boolean;

package/components/hook-form/RHFPeriod/{index.53827a17.js → index.584f515c.js}

@@ -3,7 +3,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { P as Period } from "../../Period/index.8cccbb4b.js";
+import { P as Period } from "../../Period/index.5f3af84b.js";
 const RHFPeriodRoot = styled("div")(({
   theme
 }) => ({

package/components/hook-form/RHFTextField/{index.5801338a.js → index.87c99323.js}

@@ -1,13 +1,13 @@
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
 import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.5499ffdb.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.3c568901.js";
 import { useFormContext, Controller } from "react-hook-form";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { styled as styled$1 } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.6469f148.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.de903261.js";
 import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { useResponsiveDesktop } from "@m4l/graphics";

package/components/hook-form/RHFUpload/{index.f04df1c9.js → index.f2983d70.js}

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import { useFormContext, Controller } from "react-hook-form";
-import isString from "lodash/isString";
+import require$$0 from "lodash/isString";
 import { useDropzone } from "react-dropzone";
-import { I as Image } from "../../Image/index.9799dfc0.js";
+import { I as Image } from "../../Image/index.8b134b95.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled } from "@mui/material/styles";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, styled as styled$1 } from "@mui/material";
@@ -10,7 +10,7 @@ import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
-import { B as Button } from "../../mui_extended/Button/index.857c2dfe.js";
+import { B as Button } from "../../mui_extended/Button/index.158a9a65.js";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 const UploadImageRoot = styled("div")(({
   theme
@@ -140,7 +140,7 @@ function UploadImage({
             } : {},
             children: /* @__PURE__ */ jsx(Image, {
               alt: "bgImageUploadImage",
-              src: isString(file) ? file : file.preview || "",
+              src: require$$0(file) ? file : file.preview || "",
               ratio: "1:1"
             })
           }), /* @__PURE__ */ jsx("div", {

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

@@ -3,6 +3,7 @@ export { getRHFAutocompleteComponentsDictionary } from './RHFAutocomplete/dictio
 export { RHFAutocompleteAsync } from './RHFAutocompleteAsync/RHFAutocompleteAsync';
 export { getRHFAutocompleteAsyncComponentsDictionary } from './RHFAutocompleteAsync/dictionary';
 export * from './RHFCheckbox/RHFCheckbox';
+export { RHFColorPicker } from './RHFColorPicker';
 export { RHFDateTime } from './RHFDateTime';
 export { RHFMultiCheckbox } from './RHFMultiCheckbox';
 export { RHFSelect } from './RHFSelect';

package/components/index.d.ts

@@ -40,6 +40,7 @@ export * from './ResizeableWindow';
 export * from './ScrollBar';
 export { ScrollToTop } from './ScrollToTop';
 export * from './SplitLayout/SplitLayout';
+export * from './ToastContainer';
 export * from './SideBar';
 export * from './AppBar';
 export * from './AccountPopover';

package/components/modal/{WindowBase.beb2fb3e.js → WindowBase.b1f12376.js}

@@ -2,9 +2,9 @@ import { m as modalUtilityClasses } from "./index.61389369.js";
 import { useEnvironment } from "@m4l/core";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { I as IconButton } from "../mui_extended/IconButton/index.5499ffdb.js";
-import { I as Icon } from "../Icon/index.11a7a77c.js";
-import { u as useModal } from "../../hooks/useModal/index.05d1821e.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.3c568901.js";
+import { I as Icon } from "../Icon/index.4e424a81.js";
+import { u as useModal } from "../../hooks/useModal/index.abdc0962.js";
 const Header = (props) => {
   const {
     title,

package/components/modal/{WindowConfirm.477e6f63.js → WindowConfirm.481ef7a0.js}

@@ -1,13 +1,13 @@
-import { A as Actions } from "../CommonActions/components/Actions/index.ccf731c1.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.2f6286eb.js";
 import { Typography } from "@mui/material";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { u as useModal } from "../../hooks/useModal/index.05d1821e.js";
+import { u as useModal } from "../../hooks/useModal/index.abdc0962.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Image } from "../Image/index.9799dfc0.js";
+import { I as Image } from "../Image/index.8b134b95.js";
 import { m as modalUtilityClasses } from "./index.61389369.js";
-import { W as WindowBase } from "./WindowBase.beb2fb3e.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.bb383946.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.4bc5780e.js";
+import { W as WindowBase } from "./WindowBase.b1f12376.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.918fe98b.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.ee716861.js";
 const dictionary = {
   MESSAGE: "common_actions.confirm_quit_msg"
 };

package/components/mui_extended/Accordion/{index.08ff7e2f.js → index.54101c95.js}

@@ -1,12 +1,12 @@
 import { generateUtilityClasses, generateUtilityClass, styled, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.5499ffdb.js";
+import { I as IconButton } from "../IconButton/index.3c568901.js";
 import { useEnvironment } from "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../vendor.6019bf6e.js";
+import { g as getNameDataTestId } from "../../../vendor.c4bc5f4d.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Icon } from "../../Icon/index.11a7a77c.js";
+import { I as Icon } from "../../Icon/index.4e424a81.js";
 import { T as Typography } from "../Typography/index.379dd374.js";
 const componentName = "M4LAccordion";
 generateUtilityClasses(componentName, [

package/components/mui_extended/Button/classes/types.d.ts

@@ -1,3 +1,4 @@
+import { useUtilityClasses } from ".";
 export interface ButtonClassesType {
     root: string;
     skeleton: string;
@@ -12,3 +13,4 @@ export interface ButtonClassesType {
     colorWarning: string;
 }
 export declare type ButtonClassesKey = keyof ButtonClassesType;
+export declare type Classes = ReturnType<typeof useUtilityClasses>;

package/components/mui_extended/Button/{index.857c2dfe.js → index.158a9a65.js}

@@ -5,7 +5,7 @@ import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { I as Image } from "../../Image/index.9799dfc0.js";
+import { I as Image } from "../../Image/index.8b134b95.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { LoadingButton as LoadingButton$1 } from "@mui/lab";
 import { T as Typography } from "../Typography/index.379dd374.js";
@@ -144,7 +144,7 @@ function ImageButton({
     }) : imageButton
   });
 }
-const componentName = "M4LoadingButton";
+const componentName = "M4LLoadingButton";
 generateUtilityClasses(componentName, [
   "root",
   "skeleton",
@@ -169,7 +169,7 @@ const useUtilityClasses = (onwerState) => {
   };
 };
 const LoadingButtonRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LoadingButton?.styleOverrides
+  ...theme.components?.M4LLoadingButton?.styleOverrides
 }));
 const LOADINGBUTTON_PREFIX = "M4LoadingButton";
 const getNameDataTestId = (KEY) => {

package/components/mui_extended/IconButton/{index.5499ffdb.js → index.3c568901.js}

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton, styled, generateUtilityClasses, generateUtilityClass, Tooltip, IconButton as IconButton$1 } from "@mui/material";
-import { I as Icon } from "../../Icon/index.11a7a77c.js";
+import { I as Icon } from "../../Icon/index.4e424a81.js";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";

package/components/mui_extended/LoadingButton/classes/constants.d.ts

@@ -1 +1 @@
-export declare const componentName = "M4LoadingButton";
+export declare const componentName = "M4LLoadingButton";

package/components/mui_extended/MenuActions/{index.d8d0c00e.js → index.4817512a.js}

@@ -3,12 +3,12 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { IconButton, generateUtilityClasses, generateUtilityClass, useTheme, MenuItem } from "@mui/material";
 import { P as Popover } from "../Popover/index.b3eca6b1.js";
 import { styled } from "@mui/material/styles";
-import { I as Icon } from "../../Icon/index.11a7a77c.js";
+import { I as Icon } from "../../Icon/index.4e424a81.js";
 import clsx from "clsx";
 import { unstable_composeClasses } from "@mui/base";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { B as Badge } from "../Badge/index.09f5aee5.js";
-import { I as IconButton$1 } from "../IconButton/index.5499ffdb.js";
+import { I as IconButton$1 } from "../IconButton/index.3c568901.js";
 styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
   theme

package/components/mui_extended/Pager/{index.47343062.js → index.ba2163c2.js}

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { styled } from "@mui/material/styles";
 import { generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.5499ffdb.js";
+import { I as IconButton } from "../IconButton/index.3c568901.js";
 import { useEnvironment } from "@m4l/core";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";

package/components/mui_extended/Tab/{index.2f9a6815.js → index.ed3c7b65.js}

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import { styled as styled$1 } from "@mui/material/styles";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../vendor.6019bf6e.js";
+import { g as getNameDataTestId } from "../../../vendor.c4bc5f4d.js";
 const componentName$2 = "M4LTabs";
 generateUtilityClasses(componentName$2, [
   "root"

package/contexts/ModalContext/{index.436c2938.js → index.b39d303d.js}

@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { M as ModalDialog } from "../../components/ModalDialog/index.ec55087e.js";
+import { M as ModalDialog } from "../../components/ModalDialog/index.89e26413.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const ModalContext = createContext(null);
 function ModalProvider({

package/hooks/useFormAddEdit/{index.b9ccd95f.js → index.6929cc88.js}

@@ -1,14 +1,15 @@
 import { useNetwork, useFlags, useModuleDictionary } from "@m4l/core";
 import { useState, useEffect } from "react";
-import { u as useModal } from "../useModal/index.05d1821e.js";
+import { u as useModal } from "../useModal/index.abdc0962.js";
 import { jsx } from "react/jsx-runtime";
-import { W as WindowConfirm } from "../../components/modal/WindowConfirm.477e6f63.js";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm.481ef7a0.js";
 const useFormAddEdit = (props) => {
   const {
     initialValues,
     objectId,
     endPoint,
-    formatDataEnpoint
+    formatDataEnpoint,
+    queryParamas
   } = props;
   const {
     openModal
@@ -36,7 +37,7 @@ const useFormAddEdit = (props) => {
     if (statusLoad === "edit") {
       networkOperation({
         method: "GET",
-        endPoint: `${endPoint}/${objectId}`
+        endPoint: queryParamas ? `${endPoint}/${objectId}?${queryParamas}` : `${endPoint}/${objectId}`
       }).then((response) => {
         if (mounted) {
           if (formatDataEnpoint) {

package/hooks/useFormAddEdit/types.d.ts

@@ -5,4 +5,5 @@ export interface UseFormAddEditProps {
     endPoint: string;
     initialValues: FormInitialValues;
     formatDataEnpoint?: (data: FieldValues) => FormInitialValues;
+    queryParamas?: string;
 }

package/hooks/useModal/{index.05d1821e.js → index.abdc0962.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModalContext } from "../../contexts/ModalContext/index.436c2938.js";
+import { M as ModalContext } from "../../contexts/ModalContext/index.b39d303d.js";
 function useModal() {
   const context = useContext(ModalContext);
   if (!context)