@m4l/components 0.2.25 → 0.2.26

package/components/hook-form/RHFColorPicker/index.60b50052.js

@@ -0,0 +1,188 @@
+import { useState } from "react";
+import { useFormContext, useWatch, Controller } from "react-hook-form";
+import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { S as SketchPicker } from "../../../node_modules.585eab0e.js";
+import "lodash-es/debounce";
+import "lodash-es/each";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { H as HelperText } from "../../HelperText/index.7d2afdb3.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 { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
+import { P as Popover } from "../../mui_extended/Popover/index.d85de73b.js";
+import { I as Icon } from "../../Icon/index.8c744412.js";
+import { B as Button } from "../../mui_extended/Button/index.93389adb.js";
+const componentName = "M4LRHFColorPicker";
+const colorPickerClasses = generateUtilityClasses(componentName, [
+  "root",
+  "popoverRoot",
+  "containerFieldColor",
+  "fieldColor",
+  "containerPicker",
+  "skeleton",
+  "sizeSmall",
+  "sizeMedium"
+]);
+function getRHFColorPickerUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (owmerState) => {
+  const slots = {
+    root: ["root", owmerState.size === "small" && "sizeSmall", owmerState.size === "medium" && "sizeMedium"],
+    popoverRoot: ["popoverRoot"],
+    containerFieldColor: ["containerFieldColor"],
+    fieldColor: ["boxColor"],
+    containerPicker: ["containerPicker"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFColorPickerUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFColorPickerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFColorPicker?.styleOverrides
+}));
+const RHFColorPickerSkeleton = (props) => {
+  const {
+    label
+  } = props;
+  return /* @__PURE__ */ jsxs("div", {
+    className: colorPickerClasses.skeleton,
+    children: [label && /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: "30%",
+      height: "14px"
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      className: colorPickerClasses.skeleton,
+      variant: "rectangular",
+      width: 20,
+      height: 20
+    })]
+  });
+};
+const RHFColorPicker = (props) => {
+  const {
+    name,
+    size = "small",
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
+  } = props;
+  const {
+    control,
+    setValue,
+    trigger
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const theme = useTheme();
+  const currentColor = useWatch({
+    name,
+    control
+  });
+  const isDesktop = useResponsiveDesktop();
+  const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const handleColorChange = (color) => {
+    console.log("react color pick", color.hex);
+    setTempColor(color.hex);
+  };
+  const handleApprove = () => {
+    setAnchorEl(null);
+    if (tempColor !== currentColor) {
+      setValue(name, tempColor);
+      trigger(name);
+    }
+  };
+  const ownerState = {
+    size: isDesktop ? size : "medium"
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(RHFColorPickerRoot, {
+    className: classes.root,
+    children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      defaultValue: "",
+      render: ({
+        field: {
+          value
+        },
+        fieldState: {
+          error
+        }
+      }) => /* @__PURE__ */ jsxs(Fragment, {
+        children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+          label,
+          mandatory,
+          mandatoryMessage,
+          helperMessage
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.containerFieldColor,
+          onClick: (event) => setAnchorEl(event.currentTarget),
+          children: [/* @__PURE__ */ jsx("div", {
+            className: classes.fieldColor,
+            style: {
+              backgroundColor: value
+            }
+          }), /* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/rhfcolorpicker/assets/icons/chevron_right.svg`
+          })]
+        }), error?.message && /* @__PURE__ */ jsx(HelperText, {
+          variant: "error",
+          message: error?.message + ""
+        }), /* @__PURE__ */ jsx(Popover, {
+          open: Boolean(anchorEl),
+          arrowType: "top-center",
+          className: classes.popoverRoot,
+          anchorEl,
+          onClose: () => setAnchorEl(null),
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "center"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "center"
+          },
+          sx: {
+            mt: "12px",
+            ml: -1.25,
+            ...theme.components?.M4LRHFColorPickerPopoverRoot?.styleOverrides
+          },
+          children: /* @__PURE__ */ jsxs("div", {
+            className: classes.containerPicker,
+            children: [/* @__PURE__ */ jsx(SketchPicker, {
+              color: tempColor,
+              onChange: handleColorChange,
+              disableAlpha: true
+            }), /* @__PURE__ */ jsx(Button, {
+              variant: "contained",
+              onClick: handleApprove,
+              children: getLabel("rhfcolorpicker.accept")
+            })]
+          })
+        })]
+      })
+    }) : /* @__PURE__ */ jsx(RHFColorPickerSkeleton, {
+      label
+    })
+  });
+};
+function getRHFColorPickerComponentsDictionary() {
+  return ["rhfcolorpicker"];
+}
+export {
+  RHFColorPicker as R,
+  getRHFColorPickerComponentsDictionary as g
+};

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

@@ -1,8 +1,2 @@
-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-runtime").JSX.Element;
+export { RHFColorPicker } from './RFHColorPicker';
+export { getRHFColorPickerComponentsDictionary } from './dictionary';

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

@@ -1 +1,2 @@
-export declare const Skeleton: () => import("react/jsx-runtime").JSX.Element;
+import { RHFColorPickerSkeletoProps } from './types';
+export declare const RHFColorPickerSkeleton: (props: RHFColorPickerSkeletoProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { RHFColorPickerProps } from "../../types";
+export interface RHFColorPickerSkeletoProps extends Pick<RHFColorPickerProps, 'label'> {
+}

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

@@ -1,8 +1,17 @@
-export interface RHFColorPickerProps {
+import { FieldLabelProps } from "../../FieldLabel/types";
+export interface RHFColorPickerProps extends Omit<FieldLabelProps, 'label'> {
+    /**
+    * Nombre de etiqueta del campo
+    */
+    label?: string;
     /**
     * Identificador del campo dentro del formulario de react hook form
     */
     name: string;
+    /**
+    * Variaciones de tamaño para el componente
+    */
+    size?: 'small' | 'medium';
 }
-export interface OwnerState {
+export interface OwnerState extends Pick<RHFColorPickerProps, 'size'> {
 }

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

@@ -1,3 +1,4 @@
+import { useUtilityClasses } from ".";
 export interface RHFDateTimeClassesType {
     root: string;
     skeleton: string;
@@ -11,3 +12,4 @@ export interface RHFDateTimeClassesType {
     variantError: string;
 }
 export declare type RHFDateTimeClassesKey = keyof RHFDateTimeClassesType;
+export declare type RHFDateTimeClasses = ReturnType<typeof useUtilityClasses>;

package/components/hook-form/RHFDateTime/{index.5a673a96.js → index.2396ea4a.js}

@@ -1,45 +1,37 @@
 import { useFormContext, Controller } from "react-hook-form";
 import { DateTimePicker } from "@mui/x-date-pickers";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { Skeleton, generateUtilityClasses, generateUtilityClass, styled as styled$1 } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 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.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.b920baf8.js";
-const SKTRHFWrapperTextField = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "42.25px",
-  alignItems: "center",
-  justifyContent: "space-between",
-  border: `1px solid ${theme.palette.divider}`,
-  padding: "0 14px",
-  borderRadius: theme.spacing(0.5)
-}));
+import { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
+import { I as Icon } from "../../Icon/index.8c744412.js";
 const SkeletonRHFDateTime = (props) => {
   const {
     skeletonWidth,
     skeletonHeight,
-    className
-  } = props;
-  return /* @__PURE__ */ jsxs(SKTRHFWrapperTextField, {
     className,
-    children: [/* @__PURE__ */ jsx(Skeleton, {
+    label
+  } = props;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [label && /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
-      width: skeletonWidth,
-      height: skeletonHeight
-    }), /* @__PURE__ */ jsx(Skeleton, {
-      variant: "circular",
-      width: "20px",
-      height: "20px"
+      height: "14px",
+      width: "30%"
+    }), /* @__PURE__ */ jsxs("div", {
+      className: className.skeleton,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular"
+      })]
     })]
   });
 };
@@ -69,7 +61,7 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-const RHFDateTimeRoot = styled$1("div")(({ theme }) => ({
+const RHFDateTimeRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LRHFDateTime?.styleOverrides
 }));
 const RHFDATETIME_PREFIX = "RHFDateTime";
@@ -86,7 +78,9 @@ function RHFDateTime(props) {
     skeletonHeight = 14,
     className,
     label,
-    helperMessage
+    helperMessage,
+    mandatory,
+    mandatoryMessage
   } = props;
   const {
     host_static_assets,
@@ -152,10 +146,13 @@ function RHFDateTime(props) {
           error
         }
       }) => {
+        console.log("RHFDateTime value", typeof value);
         return /* @__PURE__ */ jsxs(Fragment, {
-          children: [label && /* @__PURE__ */ jsx(Typography, {
-            variant: "body",
-            children: label
+          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+            label,
+            mandatory,
+            mandatoryMessage,
+            helperMessage
           }), /* @__PURE__ */ jsx(DateTimePicker, {
             sx: {
               "& .MuiTouchRipple-root": {
@@ -180,16 +177,17 @@ function RHFDateTime(props) {
                 format: datetimeFormat
               }
             }
-          }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
-            variant: currentVariant,
-            message: currentVariant !== "error" ? helperMessage : error?.message
-          }) : null]
+          }), error?.message && /* @__PURE__ */ jsx(HelperText, {
+            variant: "error",
+            message: error?.message + ""
+          })]
         });
       }
     }) : /* @__PURE__ */ jsx(SkeletonRHFDateTime, {
       skeletonWidth,
       skeletonHeight,
-      className: classes.skeleton
+      className: classes,
+      label
     })
   });
 }

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

@@ -1,4 +1,5 @@
 import { RHFDateTimeProps } from '../../types';
-export interface SkeletonRHFDateTimeProps extends Pick<RHFDateTimeProps, 'skeletonWidth' | 'skeletonHeight'> {
-    className: string;
+import { RHFDateTimeClasses } from '../../classes/types';
+export interface SkeletonRHFDateTimeProps extends Pick<RHFDateTimeProps, 'skeletonWidth' | 'skeletonHeight' | 'label'> {
+    className: RHFDateTimeClasses;
 }

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

@@ -1,4 +1,5 @@
-export interface RHFDateTimeProps {
+import { FieldLabelProps } from "../../FieldLabel/types";
+export interface RHFDateTimeProps extends Omit<FieldLabelProps, 'label'> {
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
     name: string;

package/components/hook-form/RHFPeriod/{index.4205c8ab.js → index.011965ef.js}

@@ -3,7 +3,8 @@ 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.d80dff10.js";
+import { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
+import { P as Period } from "../../Period/index.6e8d92dc.js";
 const RHFPeriodRoot = styled("div")(({
   theme
 }) => ({
@@ -37,7 +38,12 @@ const RHFPeriod = (props) => {
     readOnly,
     skeletonWidth,
     skeletonHeight,
-    state
+    state,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    size
   } = props;
   const {
     control
@@ -55,16 +61,24 @@ const RHFPeriod = (props) => {
         error
       }
     }) => {
+      console.log("value RHFPeriod", value);
       return /* @__PURE__ */ jsxs(RHFPeriodRoot, {
         className: classes.root,
-        children: [/* @__PURE__ */ jsx(Period, {
+        children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+          label,
+          mandatory,
+          mandatoryMessage,
+          helperMessage
+        }), /* @__PURE__ */ jsx(Period, {
           value,
           onChange,
           state: !!error === true ? "error" : state,
           readOnly,
           skeletonWidth,
-          skeletonHeight
+          skeletonHeight,
+          size
         }), error && /* @__PURE__ */ jsx(HelperText, {
+          variant: "error",
           message: error.message || ""
         })]
       });

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

@@ -1,6 +1,8 @@
+import { FieldLabelProps } from '../../FieldLabel/types';
 import { PeriodProps, PeriodState, PeriodVariant } from '../../../components/Period/types';
-export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight'> {
+export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight' | 'size'>, Omit<FieldLabelProps, 'label'> {
     name: string;
     variant?: PeriodVariant;
     state?: PeriodState;
+    label?: string;
 }

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

@@ -1,16 +1,15 @@
 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.383f5496.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 { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
 const SkeletonTextFieldRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -74,12 +73,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",
@@ -144,6 +143,9 @@ const RHFTextField = forwardRef((props, ref) => {
     variant,
     helperMessage = "",
     disabled,
+    mandatory,
+    mandatoryMessage,
+    helperText,
     ...other
   } = props;
   const {
@@ -209,11 +211,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,
@@ -270,7 +273,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 +303,10 @@ const RHFTextFieldPassword = (props) => {
     label,
     skeletonWidth,
     skeletonHeight,
-    size
+    size,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
   } = props;
   const [showPassword, setShowPassword] = useState(false);
   const {
@@ -321,6 +327,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,7 +10,6 @@ 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'> {

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.e5f734b8.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.39b3b9d9.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.93389adb.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.dd1d2d7b.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.383f5496.js";
+import { I as Icon } from "../Icon/index.8c744412.js";
+import { u as useModal } from "../../hooks/useModal/index.2f1d6a07.js";
 const Header = (props) => {
   const {
     title,

package/components/modal/{WindowConfirm.55ac3c8f.js → WindowConfirm.4501497a.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.389f9b28.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.2f1d6a07.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Image } from "../Image/index.d034ca68.js";
+import { I as Image } from "../Image/index.39b3b9d9.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.dd1d2d7b.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.33a748be.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.ac7cd0ee.js";
 const dictionary = {
   MESSAGE: "common_actions.confirm_quit_msg"
 };

package/components/mui_extended/Accordion/{index.fb4eb664.js → index.4393eca9.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.383f5496.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.8c744412.js";
 import { T as Typography } from "../Typography/index.379dd374.js";
 const componentName = "M4LAccordion";
 generateUtilityClasses(componentName, [