@m4l/components 0.2.25 → 0.2.27

package/components/hook-form/RHFTextField/{index.fbb29ee1.js → index.d4192912.js}

@@ -1,16 +1,16 @@
 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.9ea23f87.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.32fc9419.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.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";
+import { u as useFormFocus } from "../../../vendor.47f1f3d4.js";
+import { F as FieldLabel } from "../../FieldLabel/index.8d3d6bb4.js";
 const SkeletonTextFieldRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -74,12 +74,12 @@ const SkeletonTextField = (props) => {
     })]
   });
 };
-const RHFTextFieldRoot = styled$1("div")(({
+const RHFTextFieldRoot = styled("div")(({
   theme
 }) => ({
   ...theme.components?.M4LRHFTextField?.styleOverrides
 }));
-styled$1("div")(({
+styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -105,7 +105,8 @@ generateUtilityClasses(
     "variantError",
     "sizeSmall",
     "sizeMedium",
-    "isFocus"
+    "isFocus",
+    "isTabSelected"
   ]
 );
 const getRHFTextFieldClassesByState = (ownerState) => {
@@ -115,7 +116,8 @@ const getRHFTextFieldClassesByState = (ownerState) => {
       ownerState.type === "password" ? "variantPassword" : "variantText",
       ownerState.size === "small" && "sizeSmall",
       ownerState.size === "medium" && "sizeMedium",
-      ownerState.focus && "isFocus",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
       ownerState.disabled && "isDisabled",
       ownerState.variant === "info" && "variantInfo",
       ownerState.variant === "success" && "variantSuccess",
@@ -144,6 +146,9 @@ const RHFTextField = forwardRef((props, ref) => {
     variant,
     helperMessage = "",
     disabled,
+    mandatory,
+    mandatoryMessage,
+    helperText,
     ...other
   } = props;
   const {
@@ -152,9 +157,16 @@ const RHFTextField = forwardRef((props, ref) => {
       errors
     }
   } = useFormContext();
-  const [isFocus, setIsFocus] = useState(false);
   const [currentVariant, setCurrentVariant] = useState(null);
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
   const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
   useEffect(() => {
     if (errors[nameRHF]) {
       setCurrentVariant("error");
@@ -164,23 +176,21 @@ const RHFTextField = forwardRef((props, ref) => {
       setCurrentVariant(null);
     }
   }, [errors[nameRHF], variant, control]);
-  const handleFocus = () => {
-    setIsFocus(true);
-  };
-  const handleBlur = () => {
-    setIsFocus(false);
-  };
   const ownerState = {
     type: type === "password" ? "password" : "text",
     size: !isDesktop ? "medium" : size,
-    focus: isFocus,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
     variant: currentVariant,
     disabled
   };
   const classes = getRHFTextFieldClassesByState(ownerState);
-  const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(RHFTextFieldRoot, {
     className: classes.root,
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
     role: "textbox",
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}`
@@ -209,11 +219,12 @@ const RHFTextField = forwardRef((props, ref) => {
           onChange(event);
         };
         return /* @__PURE__ */ jsxs(Fragment, {
-          children: [label ? /* @__PURE__ */ jsx(Typography, {
-            variant: "body",
-            className: classes.label,
-            children: label
-          }) : null, /* @__PURE__ */ jsx(TextField, {
+          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+            label,
+            mandatory,
+            mandatoryMessage,
+            helperMessage
+          }), /* @__PURE__ */ jsx(TextField, {
             variant: "outlined",
             disabled,
             ref,
@@ -223,8 +234,6 @@ const RHFTextField = forwardRef((props, ref) => {
             },
             autoComplete,
             onChange: onInternalChange,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
             value: type === "number" ? isNaN(value) ? 0 : value : value || "",
             name,
             inputProps: {
@@ -270,7 +279,7 @@ const RHFTextField = forwardRef((props, ref) => {
   });
 });
 RHFTextField.displayName = "RHFTextField";
-const RHFTextFieldPasswordRoot = styled$1("div")(({
+const RHFTextFieldPasswordRoot = styled("div")(({
   theme
 }) => ({
   ...theme.components?.M4LRHFTextFieldPassword?.styleOverrides
@@ -300,7 +309,10 @@ const RHFTextFieldPassword = (props) => {
     label,
     skeletonWidth,
     skeletonHeight,
-    size
+    size,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
   } = props;
   const [showPassword, setShowPassword] = useState(false);
   const {
@@ -321,6 +333,9 @@ const RHFTextFieldPassword = (props) => {
       skeletonWidth,
       skeletonHeight,
       size,
+      mandatory,
+      mandatoryMessage,
+      helperMessage,
       InputProps: {
         endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
           position: "end",

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

@@ -1,7 +1,8 @@
 import { TextFieldProps } from '@mui/material';
 import { ReactElement } from 'react';
+import { FieldLabelProps } from '../../FieldLabel/types';
 export declare type RHFTextFieldVariants = 'info' | 'success' | 'warning';
-export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'variant' | 'label'> {
+export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'variant' | 'label'>, Omit<FieldLabelProps, 'label'> {
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
     name: string;
@@ -9,11 +10,11 @@ export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputP
     startIcon?: ReactElement;
     endIcon?: ReactElement;
     variant?: RHFTextFieldVariants;
-    helperMessage?: string;
     label?: string;
 }
 export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
     type: 'password' | 'text';
-    focus: boolean;
+    isFocus: boolean;
+    isTabSelected: boolean;
     variant: RHFTextFieldVariants | 'error' | null;
 }

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

@@ -1,4 +1,3 @@
 import { RHFTextFieldProps } from '../RHFTextField/types';
 export interface RHFTextFieldPasswordProps extends RHFTextFieldProps {
-    label: string;
 }

package/components/hook-form/RHFUpload/{index.05d7e2a7.js → index.f7efd0e2.js}

@@ -2,15 +2,14 @@ import { useCallback } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import require$$0 from "lodash/isString";
 import { useDropzone } from "react-dropzone";
-import { I as Image } from "../../Image/index.d034ca68.js";
+import { I as Image } from "../../Image/index.fa98eb78.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";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 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.e520bd15.js";
+import { B as Button } from "../../mui_extended/Button/index.81367a73.js";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 const UploadImageRoot = styled("div")(({
   theme
@@ -194,7 +193,7 @@ function UploadImage({
     })
   });
 }
-const WrapperRHFUploadImage = styled$1("div")(() => ({
+const WrapperRHFUploadImage = styled("div")(() => ({
   width: "inherit",
   height: "inherit",
   padding: "1px"

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

@@ -1,5 +1,5 @@
 export { RHFAutocomplete } from './RHFAutocomplete/RHFAutocomplete';
-export { RHFColorPicker } from './RHFColorPicker';
+export * from './RHFColorPicker';
 export { getRHFAutocompleteComponentsDictionary } from './RHFAutocomplete/dictionary';
 export { RHFAutocompleteAsync } from './RHFAutocompleteAsync/RHFAutocompleteAsync';
 export { getRHFAutocompleteAsyncComponentsDictionary } from './RHFAutocompleteAsync/dictionary';

package/components/index.d.ts

@@ -13,6 +13,7 @@ export { getDataGridComponentsDictionary as getGridComponentsDictionary } from '
 export { TextEditor, NumberEditor } from './DataGrid/subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './DataGrid/utils/getDataGridRowsFromSet';
 export * from './DynamicFilter/index';
+export * from './FieldLabel';
 export * from './HelperText';
 export * from './CommonActions/';
 export * from './CommonActions/dictionary';

package/components/modal/{WindowBase.998b8a38.js → WindowBase.4881da1f.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.9ea23f87.js";
-import { I as Icon } from "../Icon/index.b920baf8.js";
-import { u as useModal } from "../../hooks/useModal/index.786a4439.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.32fc9419.js";
+import { I as Icon } from "../Icon/index.58eaf354.js";
+import { u as useModal } from "../../hooks/useModal/index.66a0c82e.js";
 const Header = (props) => {
   const {
     title,

package/components/modal/{WindowConfirm.55ac3c8f.js → WindowConfirm.3b0e842b.js}

@@ -1,13 +1,13 @@
-import { A as Actions } from "../CommonActions/components/Actions/index.2f6286eb.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.16946bfd.js";
 import { Typography } from "@mui/material";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { u as useModal } from "../../hooks/useModal/index.786a4439.js";
+import { u as useModal } from "../../hooks/useModal/index.66a0c82e.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Image } from "../Image/index.d034ca68.js";
+import { I as Image } from "../Image/index.fa98eb78.js";
 import { m as modalUtilityClasses } from "./index.61389369.js";
-import { W as WindowBase } from "./WindowBase.998b8a38.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.de862adf.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.79fc2386.js";
+import { W as WindowBase } from "./WindowBase.4881da1f.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.bd767c14.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.9bd56cd0.js";
 const dictionary = {
   MESSAGE: "common_actions.confirm_quit_msg"
 };

package/components/mui_extended/Accordion/{index.fb4eb664.js → index.a32a5761.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.9ea23f87.js";
+import { I as IconButton } from "../IconButton/index.32fc9419.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 "../../../test/getNameDataTestId.14875ec7.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Icon } from "../../Icon/index.b920baf8.js";
+import { I as Icon } from "../../Icon/index.58eaf354.js";
 import { T as Typography } from "../Typography/index.379dd374.js";
 const componentName = "M4LAccordion";
 generateUtilityClasses(componentName, [

package/components/mui_extended/Button/{index.e520bd15.js → index.81367a73.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.d034ca68.js";
+import { I as Image } from "../../Image/index.fa98eb78.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";
@@ -113,8 +113,6 @@ function ImageButton({
   src,
   width,
   height,
-  useIntersectionObserver,
-  skeletonVariant = "circle",
   tooltip,
   sx = {
     width,
@@ -129,12 +127,10 @@ function ImageButton({
       sx,
       ...other,
       children: /* @__PURE__ */ jsx(Image, {
-        src,
-        useIntersectionObserver,
-        skeletonVariant
+        src
       })
     });
-  }, [src, width, height, useIntersectionObserver, skeletonVariant, sx]);
+  }, [src, width, height, sx]);
   return /* @__PURE__ */ jsx(WrapperImageButton, {
     className: classes.root,
     ...process.env.NODE_ENV !== "production" ? {

package/components/mui_extended/CheckBox/types.d.ts

@@ -1,5 +1,6 @@
 import { CheckboxProps as MUICheckboxProps } from "@mui/material";
+import { FieldLabelProps } from "../../FieldLabel/types";
 export declare type OwnerState = Pick<CheckboxProps, 'size' | 'disabled'>;
-export interface CheckboxProps extends MUICheckboxProps {
+export interface CheckboxProps extends MUICheckboxProps, Omit<FieldLabelProps, 'label'> {
     label?: string;
 }

package/components/mui_extended/{CheckBox.e662d20c.js → CheckBox.b3c0f2ad.js}

@@ -1,11 +1,11 @@
-import { generateUtilityClasses, generateUtilityClass, styled, Skeleton, Checkbox } from "@mui/material";
+import { generateUtilityClasses, generateUtilityClass, Skeleton, styled, Checkbox } from "@mui/material";
 import clsx from "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { unstable_composeClasses } from "@mui/base";
 import { useModuleSkeleton } from "@m4l/core";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { T as Typography } from "./Typography/index.379dd374.js";
+import { F as FieldLabel } from "../FieldLabel/index.8d3d6bb4.js";
 const COMPONENT_CLASS_NAME = "M4LCheckBox";
 generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",
@@ -27,26 +27,12 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-const WrapperSkeletonCheckBox = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "36px",
-  height: "36px"
-}));
-styled("div")(() => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: "8px",
-  width: "100%"
-}));
 const SkeletonCheckBox = (props) => {
   const {
     classes
   } = props;
   return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
+    children: /* @__PURE__ */ jsx("div", {
       className: classes.skeleton,
       children: /* @__PURE__ */ jsx(Skeleton, {
         variant: "rounded",
@@ -56,12 +42,19 @@ const SkeletonCheckBox = (props) => {
     })
   });
 };
+const CheckBoxRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LCheckBox?.styleOverrides
+}));
 const CheckBox = forwardRef((props, ref) => {
   const {
     className,
     size = "small",
     disabled,
-    label
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    htmlFor
   } = props;
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
@@ -70,17 +63,22 @@ const CheckBox = forwardRef((props, ref) => {
     disabled
   };
   const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsxs("div", {
+  console.log("checkbox label props", props);
+  return /* @__PURE__ */ jsxs(CheckBoxRoot, {
     className: clsx(classes.root, className),
     ref,
     children: [!isSkeleton ? /* @__PURE__ */ jsx(Checkbox, {
+      id: htmlFor,
       ...props
     }) : /* @__PURE__ */ jsx(SkeletonCheckBox, {
       classes
-    }), label ? /* @__PURE__ */ jsx(Typography, {
-      skeletonWidth: "80px",
-      children: label
-    }) : null]
+    }), label && /* @__PURE__ */ jsx(FieldLabel, {
+      label,
+      mandatory,
+      mandatoryMessage,
+      helperMessage,
+      htmlFor
+    })]
   });
 });
 export {

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

@@ -1,7 +1,6 @@
 export interface IconButtonClassesType {
     root: string;
     skeleton: string;
-    sizeExtraSmall: string;
     sizemSall: string;
     sizeMedium: string;
     variantPrimary: string;

package/components/mui_extended/IconButton/{index.9ea23f87.js → index.32fc9419.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.b920baf8.js";
+import { I as Icon } from "../../Icon/index.58eaf354.js";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
@@ -12,8 +12,6 @@ const SkeletonIconButton = (props) => {
   } = props;
   return /* @__PURE__ */ jsx(Skeleton, {
     variant: "rectangular",
-    width: "100%",
-    height: "100%",
     className: classes.skeleton,
     "data-testid": "SkeletonIconButton"
   });
@@ -27,7 +25,6 @@ const componentName = "M4LIconButton";
 const iconButtonClasses = generateUtilityClasses(componentName, [
   "root",
   "skeleton",
-  "sizeExtraSmall",
   "sizemSall",
   "sizeMedium",
   "variantPrimary",
@@ -43,7 +40,7 @@ function getIconButtonUtilityClass(slot) {
 }
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.size === "extraSmall" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.variant === "primary" && ownerState.isSkeleton !== true && "variantPrimary", ownerState.variant === "secondary" && ownerState.isSkeleton !== true && "variantSecondary", ownerState.variant === "line" && ownerState.isSkeleton !== true && "variantLine", ownerState.isFocus && !ownerState.isDisabled && "isFocus", ownerState.isDisabled && "isDisabled"],
+    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.variant === "primary" && ownerState.isSkeleton !== true && "variantPrimary", ownerState.variant === "secondary" && ownerState.isSkeleton !== true && "variantSecondary", ownerState.variant === "line" && ownerState.isSkeleton !== true && "variantLine", ownerState.isFocus && !ownerState.isDisabled && "isFocus", ownerState.isDisabled && "isDisabled"],
     skeleton: ["skeleton"]
   };
   const composedClasses = unstable_composeClasses(slots, getIconButtonUtilityClass, {});

package/components/mui_extended/IconButton/types.d.ts

@@ -1,7 +1,7 @@
 import { IconProps } from '../../Icon/types';
 import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
 export declare type IconButtonVariants = 'primary' | 'secondary' | 'line';
-export declare type IconButtonSize = 'extraSmall' | 'small' | 'medium';
+export declare type IconButtonSize = 'small' | 'medium';
 export interface IconButtonProps extends Omit<IconProps, 'size'>, Omit<MUIIconButtonProps, 'size'> {
     tooltip?: string;
     dictionaryTooltipId?: string;

package/components/mui_extended/ImageButton/ImageButton.d.ts

@@ -1,2 +1,2 @@
 import { ImageButtonProps } from './types';
-export declare function ImageButton({ src, width, height, useIntersectionObserver, skeletonVariant, tooltip, sx, ...other }: ImageButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageButton({ src, width, height, tooltip, sx, ...other }: ImageButtonProps): import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/MenuActions/{index.fa7c26a5.js → index.fdea20e7.js}

@@ -1,14 +1,13 @@
 import React__default, { useState, useEffect, useMemo } from "react";
 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.b920baf8.js";
+import { styled, IconButton, generateUtilityClasses, generateUtilityClass, useTheme, MenuItem } from "@mui/material";
+import { P as Popover } from "../Popover/index.d85de73b.js";
+import { I as Icon } from "../../Icon/index.58eaf354.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.9ea23f87.js";
+import { I as IconButton$1 } from "../IconButton/index.32fc9419.js";
 styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
   theme

package/components/mui_extended/Pager/{index.0c703574.js → index.c843dde3.js}

@@ -1,8 +1,7 @@
 import { useMemo } from "react";
-import { styled } from "@mui/material/styles";
-import { generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
+import { styled, generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.9ea23f87.js";
+import { I as IconButton } from "../IconButton/index.32fc9419.js";
 import { useEnvironment } from "@m4l/core";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";

package/components/mui_extended/Popover/{index.b3eca6b1.js → index.d85de73b.js}

@@ -1,6 +1,5 @@
 import { styled, Popover as Popover$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { styled as styled$1 } from "@mui/material/styles";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PopoverRoot = styled(Popover$1)(({
@@ -38,7 +37,7 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-const ArrowStyle = styled$1("span")(({
+const ArrowStyle = styled("span")(({
   arrowType,
   theme
 }) => {

package/components/mui_extended/Tab/{index.409b9c74.js → index.2068925d.js}

@@ -3,7 +3,6 @@ import { generateUtilityClasses, generateUtilityClass, styled, Tabs as Tabs$1, T
 import { unstable_composeClasses } from "@mui/base";
 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 "../../../test/getNameDataTestId.14875ec7.js";
 import { createContext, useState } from "react";
@@ -71,12 +70,12 @@ const TabContent = (props) => {
     children
   });
 };
-const TabRoot = styled$1("div")(({
+const TabRoot = styled("div")(({
   theme
 }) => ({
   ...theme.components?.M4LTab?.styleOverrides
 }));
-const SKTTabWrapper = styled$1("div")(({
+const SKTTabWrapper = styled("div")(({
   theme
 }) => ({
   padding: theme.spacing(1.5, 2)

package/components/mui_extended/ToggleButton/{index.bcaea74b.js → index.3d71f374.js}

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { B as Button, b as buttonClasses } from "../Button/index.e520bd15.js";
+import { B as Button, b as buttonClasses } from "../Button/index.81367a73.js";
 import { w as withToggle } from "../../../hocs/withToggle/index.e44eb0da.js";
 import { jsx } from "react/jsx-runtime";
 const ToggleAbleButton = ({

package/components/mui_extended/ToggleIconButton/{index.131772d7.js → index.1cff26af.js}

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.9ea23f87.js";
+import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.32fc9419.js";
 import { w as withToggle } from "../../../hocs/withToggle/index.e44eb0da.js";
 import { jsx } from "react/jsx-runtime";
 const ToggleAbleIconButton = ({

package/contexts/ModalContext/{index.978a412d.js → index.e748f329.js}

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

package/contexts/RHFormContext/{index.7769076a.js → index.7b2a8723.js}

@@ -2,8 +2,7 @@ import { useEffect } from "react";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { styled } from "@mui/material/styles";
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { jsx } from "react/jsx-runtime";
 const FormProviderRoot = styled("form")(({

package/hooks/index.d.ts

@@ -2,3 +2,4 @@ export { useFormAddEdit } from './useFormAddEdit';
 export { useModal } from './useModal';
 export { useTab } from './useTab';
 export { getformAddEditDictionary } from './useFormAddEdit/dictionary';
+export { useFormFocus } from './useFormFocus';

package/hooks/useFormAddEdit/{index.4caddd24.js → index.5c3d8e48.js}

@@ -1,8 +1,8 @@
 import { useNetwork, useFlags, useModuleDictionary } from "@m4l/core";
 import { useState, useEffect } from "react";
-import { u as useModal } from "../useModal/index.786a4439.js";
+import { u as useModal } from "../useModal/index.66a0c82e.js";
 import { jsx } from "react/jsx-runtime";
-import { W as WindowConfirm } from "../../components/modal/WindowConfirm.55ac3c8f.js";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm.3b0e842b.js";
 function useFormAddEdit(props) {
   const {
     initialValues,

package/hooks/useFormFocus/index.d.ts

@@ -0,0 +1,7 @@
+import { FormFocusHookReturnType } from "./types";
+/**
+ * useFormFocus: Custom hook creado para facilitar el manejo de estado de interacción de usuario para los
+ * componentes de formulario. Aporta los estados Focus, TabSelected y
+ *
+*/
+export declare const useFormFocus: <ElmentType extends HTMLElement>() => FormFocusHookReturnType<ElmentType>;

package/hooks/useFormFocus/types.d.ts

@@ -0,0 +1,8 @@
+import { KeyboardEvent } from "react";
+export interface FormFocusHookReturnType<ElementType extends HTMLElement> {
+    isFocus: boolean;
+    isTabSelected: boolean;
+    handlerFocus: () => void;
+    handlerOnKeyUp: (event: KeyboardEvent<ElementType>) => void;
+    handlerOnBlur: () => void;
+}

package/hooks/useModal/{index.786a4439.js → index.66a0c82e.js}

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