@m4l/components 0.2.26 → 0.2.28

package/components/hook-form/RHFColorPicker/{index.60b50052.js → index.d02de5ee.js}

@@ -1,7 +1,7 @@
 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 { S as SketchPicker } from "../../../node_modules.4d80a09c.js";
 import "lodash-es/debounce";
 import "lodash-es/each";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
@@ -10,10 +10,11 @@ import { generateUtilityClasses, generateUtilityClass, styled, Skeleton } from "
 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 { u as useFormFocus } from "../../../vendor.aa97e825.js";
+import { F as FieldLabel } from "../../FieldLabel/index.61d55577.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";
+import { I as Icon } from "../../Icon/index.1976cb37.js";
+import { B as Button } from "../../mui_extended/Button/index.c6befaeb.js";
 const componentName = "M4LRHFColorPicker";
 const colorPickerClasses = generateUtilityClasses(componentName, [
   "root",
@@ -23,14 +24,16 @@ const colorPickerClasses = generateUtilityClasses(componentName, [
   "containerPicker",
   "skeleton",
   "sizeSmall",
-  "sizeMedium"
+  "sizeMedium",
+  "isFocus",
+  "isTabSelected"
 ]);
 function getRHFColorPickerUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
 }
 const useUtilityClasses = (owmerState) => {
   const slots = {
-    root: ["root", owmerState.size === "small" && "sizeSmall", owmerState.size === "medium" && "sizeMedium"],
+    root: ["root", owmerState.isFocus && "isFocus", owmerState.isTabSelected && "isTabSelected", owmerState.size === "small" && "sizeSmall", owmerState.size === "medium" && "sizeMedium"],
     popoverRoot: ["popoverRoot"],
     containerFieldColor: ["containerFieldColor"],
     fieldColor: ["boxColor"],
@@ -82,6 +85,13 @@ const RHFColorPicker = (props) => {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
   const theme = useTheme();
   const currentColor = useWatch({
     name,
@@ -105,11 +115,19 @@ const RHFColorPicker = (props) => {
     }
   };
   const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
     size: isDesktop ? size : "medium"
   };
   const classes = useUtilityClasses(ownerState);
+  console.log("isFocus", isFocus);
+  console.log("isTabSelected", isTabSelected);
   return /* @__PURE__ */ jsx(RHFColorPickerRoot, {
     className: classes.root,
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
     children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
       name,
       control,

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

@@ -14,4 +14,6 @@ export interface RHFColorPickerProps extends Omit<FieldLabelProps, 'label'> {
     size?: 'small' | 'medium';
 }
 export interface OwnerState extends Pick<RHFColorPickerProps, 'size'> {
+    isFocus: boolean;
+    isTabSelected: boolean;
 }

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

@@ -5,6 +5,7 @@ export interface RHFDateTimeClassesType {
     small: string;
     medium: string;
     isFocus: string;
+    isTabSelected: string;
     isDisabled: string;
     variantInfo: string;
     variantSuccess: string;

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

@@ -9,8 +9,9 @@ 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 { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
-import { I as Icon } from "../../Icon/index.8c744412.js";
+import { u as useFormFocus } from "../../../vendor.aa97e825.js";
+import { F as FieldLabel } from "../../FieldLabel/index.61d55577.js";
+import { I as Icon } from "../../Icon/index.1976cb37.js";
 const SkeletonRHFDateTime = (props) => {
   const {
     skeletonWidth,
@@ -42,6 +43,7 @@ generateUtilityClasses(componentName, [
   "small",
   "medium",
   "isFocus",
+  "isTabSelected",
   "isDisabled",
   "variantInfo",
   "variantSuccess",
@@ -53,7 +55,7 @@ function getRHFCheckboxUtilityClass(slot) {
 }
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.size === "small" && "small", ownerState.size === "medium" && "medium", ownerState.isFocus && "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" && "small", ownerState.size === "medium" && "medium", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected", ownerState.disabled && "isDisabled", ownerState.variant === "info" && "variantInfo", ownerState.variant === "success" && "variantSuccess", ownerState.variant === "warning" && "variantWarning", ownerState.variant === "error" && "variantError"],
     skeleton: ["skeleton"]
   };
   const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
@@ -91,8 +93,14 @@ function RHFDateTime(props) {
       src: `${host_static_assets}/${environment_assets}/frontend/components/rhfdate/ended_at.svg`
     });
   };
-  const [isFocus, setIsFocus] = useState(false);
   const [currentVariant, setCurrentVariant] = useState(void 0);
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
   const {
     control,
     formState: {
@@ -114,15 +122,10 @@ function RHFDateTime(props) {
       datetimeFormat
     }
   } = useFormatter();
-  const handlerFocus = () => {
-    setIsFocus(true);
-  };
-  const handlerBlur = () => {
-    setIsFocus(false);
-  };
   const isDesktop = useResponsiveDesktop();
   const ownerState = {
-    isFocus,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
     disabled,
     size: isDesktop ? size : "medium",
     variant: currentVariant
@@ -130,6 +133,10 @@ function RHFDateTime(props) {
   const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(RHFDateTimeRoot, {
     className: clsx(classes.root, className),
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root")
     } : {},
@@ -171,7 +178,7 @@ function RHFDateTime(props) {
             slotProps: {
               textField: {
                 onFocus: handlerFocus,
-                onBlur: handlerBlur
+                onBlur: handlerOnBlur
               },
               field: {
                 format: datetimeFormat

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

@@ -13,7 +13,8 @@ export interface RHFDateTimeProps extends Omit<FieldLabelProps, 'label'> {
 declare type SizeType = 'small' | 'medium';
 export declare type RHFDateTimeVariants = 'info' | 'success' | 'warning' | undefined;
 export interface OwnerState extends Pick<RHFDateTimeProps, 'size' | 'disabled'> {
-    isFocus?: boolean;
+    isFocus: boolean;
+    isTabSelected: boolean;
     variant?: RHFDateTimeVariants | 'error';
 }
 export {};

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

@@ -1,6 +1,7 @@
 import { RHFPeriodClassesType } from './types';
+import { OwnerState } from '../types';
 export declare const RHFPeriodClasses: RHFPeriodClassesType;
 export declare function getRHFPeriodUtilityClass(slot: string): string;
-export declare const RHFPeriodUtilityClasses: () => {
+export declare const RHFPeriodUtilityClasses: (ownerState: OwnerState) => {
     root: string;
 };

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

@@ -1,6 +1,8 @@
 import { RHFPeriodUtilityClasses } from ".";
 export interface RHFPeriodClassesType {
     root: string;
+    isFocus: string;
+    isTabSelected: string;
 }
 export declare type RHFPeriodClassesKey = keyof RHFPeriodClassesType;
 export declare type Classes = ReturnType<typeof RHFPeriodUtilityClasses>;

package/components/hook-form/RHFPeriod/index.5ca467ac.js

@@ -0,0 +1,112 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
+import { unstable_composeClasses } from "@mui/base";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { u as useFormFocus } from "../../../vendor.aa97e825.js";
+import { F as FieldLabel } from "../../FieldLabel/index.61d55577.js";
+import { P as Period } from "../../Period/index.b6fa6ce6.js";
+const RHFPeriodRoot = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
+const componentName = "M4LRHFPeriod";
+generateUtilityClasses(componentName, [
+  "root",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const RHFPeriodUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight,
+    state,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    size
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false
+  };
+  const classes = RHFPeriodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(RHFPeriodRoot, {
+    className: classes.root,
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
+    children: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field: {
+          onChange,
+          value
+        },
+        fieldState: {
+          error
+        }
+      }) => {
+        console.log("value RHFPeriod", value);
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+            label,
+            mandatory,
+            mandatoryMessage,
+            helperMessage
+          }), /* @__PURE__ */ jsx(Period, {
+            value,
+            onChange,
+            state: !!error === true ? "error" : state,
+            readOnly,
+            skeletonWidth,
+            skeletonHeight,
+            size
+          }), error && /* @__PURE__ */ jsx(HelperText, {
+            variant: "error",
+            message: error.message || ""
+          })]
+        });
+      }
+    })
+  });
+};
+export {
+  RHFPeriod as R
+};

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

@@ -6,3 +6,7 @@ export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeleton
     state?: PeriodState;
     label?: string;
 }
+export interface OwnerState {
+    isFocus: boolean;
+    isTabSelected: boolean;
+}

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

@@ -11,6 +11,7 @@ export interface RHFTextFieldClassesType {
     sizeSmall: string;
     sizeMedium: string;
     isFocus: string;
+    isTabSelected: string;
     isDisabled: string;
 }
 export declare type RHFTextFieldClassesKey = keyof RHFTextFieldClassesType;

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

@@ -1,7 +1,7 @@
 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.383f5496.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.63a9d74c.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";
@@ -9,7 +9,8 @@ import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../utils/index.de903261.js";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
+import { u as useFormFocus } from "../../../vendor.aa97e825.js";
+import { F as FieldLabel } from "../../FieldLabel/index.61d55577.js";
 const SkeletonTextFieldRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -104,7 +105,8 @@ generateUtilityClasses(
     "variantError",
     "sizeSmall",
     "sizeMedium",
-    "isFocus"
+    "isFocus",
+    "isTabSelected"
   ]
 );
 const getRHFTextFieldClassesByState = (ownerState) => {
@@ -114,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",
@@ -154,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");
@@ -166,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}`
@@ -226,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: {

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

@@ -14,6 +14,7 @@ export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputP
 }
 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/RHFUpload/{index.e5f734b8.js → index.f6c5027f.js}

@@ -2,14 +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.39b3b9d9.js";
+import { I as Image } from "../../Image/index.fd6f2c5f.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 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.93389adb.js";
+import { B as Button } from "../../mui_extended/Button/index.c6befaeb.js";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 const UploadImageRoot = styled("div")(({
   theme

package/components/modal/{WindowBase.dd1d2d7b.js → WindowBase.f38260ec.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.383f5496.js";
-import { I as Icon } from "../Icon/index.8c744412.js";
-import { u as useModal } from "../../hooks/useModal/index.2f1d6a07.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.63a9d74c.js";
+import { I as Icon } from "../Icon/index.1976cb37.js";
+import { u as useModal } from "../../hooks/useModal/index.66a0c82e.js";
 const Header = (props) => {
   const {
     title,

package/components/modal/{WindowConfirm.4501497a.js → WindowConfirm.67ee36e9.js}

@@ -1,13 +1,13 @@
-import { A as Actions } from "../CommonActions/components/Actions/index.389f9b28.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.2f1d6a07.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.39b3b9d9.js";
+import { I as Image } from "../Image/index.fd6f2c5f.js";
 import { m as modalUtilityClasses } from "./index.61389369.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";
+import { W as WindowBase } from "./WindowBase.f38260ec.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.e03455db.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.5ba2ef5f.js";
 const dictionary = {
   MESSAGE: "common_actions.confirm_quit_msg"
 };

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

package/components/mui_extended/Button/{index.93389adb.js → index.c6befaeb.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.39b3b9d9.js";
+import { I as Image } from "../../Image/index.fd6f2c5f.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.840a443f.js → CheckBox.d676424c.js}

@@ -5,7 +5,7 @@ import { unstable_composeClasses } from "@mui/base";
 import { useModuleSkeleton } from "@m4l/core";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { F as FieldLabel } from "../FieldLabel/index.1da2a28d.js";
+import { F as FieldLabel } from "../FieldLabel/index.61d55577.js";
 const COMPONENT_CLASS_NAME = "M4LCheckBox";
 generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",

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.383f5496.js → index.63a9d74c.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.8c744412.js";
+import { I as Icon } from "../../Icon/index.1976cb37.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.e6e3aac8.js → index.bca14ad9.js}

@@ -2,12 +2,12 @@ import React__default, { useState, useEffect, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 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.8c744412.js";
+import { I as Icon } from "../../Icon/index.1976cb37.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.383f5496.js";
+import { I as IconButton$1 } from "../IconButton/index.63a9d74c.js";
 styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
   theme

package/components/mui_extended/Pager/{index.5791276c.js → index.a024f67b.js}

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

package/components/mui_extended/ToggleButton/{index.4ac1f974.js → index.3f8bcf51.js}

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