@m4l/components 0.1.79 → 0.1.80

package/components/areas/components/{index.7ae189ba.js → index.7756928a.js}

@@ -7,23 +7,24 @@ import "react/jsx-runtime";
 import "../../mui_extended/IconButton/index.12f1a3c3.js";
 import "@m4l/graphics";
 import "zustand";
-import "../contexts/AreasContext/index.1213c3ef.js";
-import "./AreasAdmin/index.31905078.js";
+import "../contexts/AreasContext/index.0a08a08b.js";
+import "./AreasAdmin/index.7a0dabbe.js";
 import "zustand/shallow";
 import "../../ScrollBar/index.bbe48f4d.js";
-import "../../mui_extended/Accordion/index.e8ba0755.js";
+import "../../mui_extended/Accordion/index.a6447bf8.js";
 import "../../mui_extended/Typography/index.443590d6.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../../mui_extended/Button/index.4288f9fc.js";
-import "../../mui_extended/Badge/index.8c2b8b66.js";
+import "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/Badge/index.cad260fe.js";
 import "../../Image/index.c18ebf5a.js";
 import "@mui/lab";
 import "../../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.2f6d6d7d.js";
-import "../../mui_extended/Tab/index.3c005df1.js";
+import "../../mui_extended/Pager/index.82e89328.js";
+import "../../mui_extended/Tab/index.c39a6681.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
-import "./AreasViewer/index.fe18bdbc.js";
+import "./AreasViewer/index.fd49f06c.js";
 import "../../LinearProgressIndeterminate/index.60dabc06.js";

package/components/areas/contexts/AreasContext/{index.1213c3ef.js → index.0a08a08b.js}

@@ -5,13 +5,13 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.fe18bdbc.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.31905078.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.fd49f06c.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.7a0dabbe.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.afb7e3d9.js";
 import "clsx";
-import "../../../GridLayout/index.da6fd387.js";
-import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as isEqualLayouts } from "../../../GridLayout/Responsive/index.0905a698.js";
+import "../../../GridLayout/index.a792aacb.js";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as isEqualLayouts } from "../../../GridLayout/Responsive/index.1671380a.js";
 import { jsx } from "react/jsx-runtime";
 import { debounce, cloneDeep } from "lodash";
 const ROW_HEIGTH_GRIDLAYOUT = 20;

package/components/areas/contexts/{index.84d35ffe.js → index.b303b664.js}

@@ -1,2 +1,2 @@
-import "./AreasContext/index.1213c3ef.js";
+import "./AreasContext/index.0a08a08b.js";
 import "./WindowToolsMFContext/index.8f3e2a04.js";

package/components/areas/hooks/useAreas/{index.cd799cf6.js → index.c6eb2569.js}

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

package/components/areas/{index.6ee7a4eb.js → index.6e67d89a.js}

@@ -7,25 +7,26 @@ import "react/jsx-runtime";
 import "../mui_extended/IconButton/index.12f1a3c3.js";
 import "@m4l/graphics";
 import "zustand";
-import "./contexts/AreasContext/index.1213c3ef.js";
-import "./components/AreasAdmin/index.31905078.js";
+import "./contexts/AreasContext/index.0a08a08b.js";
+import "./components/AreasAdmin/index.7a0dabbe.js";
 import "zustand/shallow";
 import "../ScrollBar/index.bbe48f4d.js";
-import "../mui_extended/Accordion/index.e8ba0755.js";
+import "../mui_extended/Accordion/index.a6447bf8.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.4288f9fc.js";
-import "../mui_extended/Badge/index.8c2b8b66.js";
+import "../mui_extended/CheckBox.5f6c78b0.js";
+import "../mui_extended/Badge/index.cad260fe.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
 import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.2f6d6d7d.js";
-import "../mui_extended/Tab/index.3c005df1.js";
+import "../mui_extended/Pager/index.82e89328.js";
+import "../mui_extended/Tab/index.c39a6681.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
-import "./components/AreasViewer/index.fe18bdbc.js";
+import "./components/AreasViewer/index.fd49f06c.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "./contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "./contexts/DynamicMFParmsContext/index.1607c78e.js";

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

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

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

@@ -1,8 +1,13 @@
+import { useUtilityClasses } from ".";
 export interface RHFAutocompleteClassesType {
     root: string;
     withImage: string;
     skeleton: string;
     label: string;
+    popper: string;
+    skeletonRoot: string;
+    skeletonContainerText: string;
+    iconDown: string;
     variantInfo: string;
     isDisabled: string;
     variantSuccess: string;
@@ -13,3 +18,4 @@ export interface RHFAutocompleteClassesType {
     isFocus: string;
 }
 export declare type RHFAutocompleteClassesKey = keyof RHFAutocompleteClassesType;
+export declare type Classes = ReturnType<typeof useUtilityClasses>;

package/components/hook-form/RHFAutocomplete/{index.e52c1f6a.js → index.d1bbb015.js}

@@ -1,29 +1,30 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
-import { styled as styled$1, Skeleton, generateUtilityClasses, generateUtilityClass, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
 import { I as Image } from "../../Image/index.c18ebf5a.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 { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
-import { H as HelperText } from "../../HelperText/index.29d5ad65.js";
+import { H as HelperText } from "../../HelperText/index.6ef76993.js";
 import { I as IconButton } from "../../mui_extended/IconButton/index.12f1a3c3.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
 import { styled } from "@mui/material/styles";
 import "clsx";
 import { unstable_composeClasses } from "@mui/base";
 import "../../Icon/index.9fcd1476.js";
-import "@m4l/graphics";
-import "../../mui_extended/Accordion/index.e8ba0755.js";
+import "../../mui_extended/Accordion/index.a6447bf8.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../../mui_extended/Button/index.4288f9fc.js";
-import "../../mui_extended/Badge/index.8c2b8b66.js";
+import "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/Badge/index.cad260fe.js";
 import "@mui/lab";
 import "../../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.2f6d6d7d.js";
-import "../../mui_extended/Tab/index.3c005df1.js";
+import "../../mui_extended/Pager/index.82e89328.js";
+import "../../mui_extended/Tab/index.c39a6681.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
 const AutocompleteRoot = styled("div")(({
   theme
@@ -56,36 +57,6 @@ function withRenderOption(getUrlImage, classes) {
     });
   };
 }
-const WrapperSkeletonRHFAutocomplete = styled$1("div")(({
-  theme
-}) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  height: `${theme.spacing(4.5)}`,
-  border: `1px solid ${theme.palette.divider}`,
-  borderRadius: `${theme.spacing(1)}`,
-  padding: `0 ${theme.spacing(2)}`,
-  overflow: "hidden",
-  [theme.breakpoints.down("md")]: {
-    width: "100%"
-  }
-}));
-const SkeletonContainerText = styled$1("div")(({
-  theme
-}) => ({
-  width: "100%",
-  height: "auto",
-  overflow: "hidden",
-  margin: theme.spacing(1.5)
-}));
-const SkeletonRHFAutocompleteRoot = styled$1("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: "4px",
-  width: "100%"
-}));
 const SkeletonRHFAutocomplete = (props) => {
   const {
     withImage,
@@ -96,21 +67,20 @@ const SkeletonRHFAutocomplete = (props) => {
     classes,
     hasLabel
   } = props;
-  return /* @__PURE__ */ jsxs(SkeletonRHFAutocompleteRoot, {
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.skeletonRoot,
     children: [(hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
       width: "30%",
       height: "16px"
-    }), /* @__PURE__ */ jsx(WrapperSkeletonRHFAutocomplete, {
+    }), /* @__PURE__ */ jsx("div", {
       className: classes.skeleton,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("skeleton")
       } : {},
       children: !withImage ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(SkeletonContainerText, {
-          sx: {
-            marginLeft: "0px"
-          },
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes.skeletonContainerText,
           children: /* @__PURE__ */ jsx(Skeleton, {
             variant: "text",
             width: skeletonWidth,
@@ -132,7 +102,8 @@ const SkeletonRHFAutocomplete = (props) => {
           sx: {
             minWidth: imageWidth
           }
-        }), /* @__PURE__ */ jsx(SkeletonContainerText, {
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes.skeletonContainerText,
           children: /* @__PURE__ */ jsx(Skeleton, {
             variant: "text",
             width: skeletonWidth,
@@ -156,6 +127,10 @@ generateUtilityClasses(componentName, [
   "withImage",
   "skeleton",
   "label",
+  "popper",
+  "skeletonRoot",
+  "skeletonContainerText",
+  "iconDown",
   "variantInfo",
   "isDisabled",
   "variantSuccess",
@@ -173,7 +148,11 @@ const useUtilityClasses = (ownerState) => {
     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"],
     withImage: ["withImage"],
     skeleton: ["skeleton"],
-    label: ["label"]
+    label: ["label"],
+    popper: ["popper"],
+    skeletonRoot: ["skeletonRoot"],
+    skeletonContainerText: ["SkeletonContainerText"],
+    iconDown: ["iconDown"]
   };
   const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
   return {
@@ -213,6 +192,7 @@ function RHFAutocomplete(props) {
   } = useEnvironment();
   const autocompleteRef = useRef(null);
   const [open, setOpen] = useState(false);
+  const isDesktop = useResponsiveDesktop();
   const onCloseLocal = (event, reason) => {
     setOpen(false);
     if (onClose)
@@ -265,12 +245,13 @@ function RHFAutocomplete(props) {
     setIsFocus(false);
   };
   const ownerState = {
-    size,
+    size: !isDesktop ? "medium" : size,
     focus: isFocus,
     variant: currentVariant,
     disabled
   };
   const classes = useUtilityClasses(ownerState);
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(AutocompleteRoot, {
     className: classes.root,
     ...process.env.NODE_ENV !== "production" ? {
@@ -309,6 +290,7 @@ function RHFAutocomplete(props) {
           }), /* @__PURE__ */ jsx(Autocomplete, {
             onKeyDown: checkKeyDown,
             autoComplete: true,
+            size,
             ref: autocompleteRef,
             onFocus: handleFocus,
             onBlur: handleBlur,
@@ -320,11 +302,10 @@ function RHFAutocomplete(props) {
             PopperComponent: (props2) => {
               return /* @__PURE__ */ jsx(Popper, {
                 ...props2,
+                className: classes.popper,
                 placement: "bottom-start",
                 sx: {
-                  style: {
-                    top: "50px"
-                  }
+                  ...theme.components?.M4LRHFAutocompletePopover?.styleOverrides
                 }
               });
             },
@@ -363,6 +344,7 @@ function RHFAutocomplete(props) {
                   shrink: true
                 },
                 fullWidth: true,
+                size,
                 SelectProps: {
                   native: true
                 },
@@ -378,9 +360,10 @@ function RHFAutocomplete(props) {
                       color: "inherit",
                       size: 20
                     }) : /* @__PURE__ */ jsx(IconButton, {
-                      src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronRight.svg`,
+                      className: classes.iconDown,
+                      src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
                       onClick: (event) => onOpenLocal(event),
-                      size: "small"
+                      size
                     })
                   })
                 },

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

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

package/components/hook-form/RHFAutocompleteAsync/{index.a226b8ac.js → index.f9a9ef48.js}

@@ -5,7 +5,7 @@ import { styled } from "@mui/material/styles";
 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 { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.e52c1f6a.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.d1bbb015.js";
 import { jsx } from "react/jsx-runtime";
 styled("div")(() => ({
   display: "flex",

package/components/hook-form/RHFCheckbox/{index.9619debd.js → index.7b4a21d7.js}

@@ -1,71 +1,48 @@
 import { useFormContext, Controller } from "react-hook-form";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, Checkbox } from "@mui/material";
-import { useModuleSkeleton } from "@m4l/core";
-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 { styled } from "@mui/material/styles";
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.29d5ad65.js";
-import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
-const WrapperSkeletonCheckBox = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "36px",
-  height: "36px"
-}));
-const SkeletonRHFCheckBoxRoot = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: "8px",
-  width: "100%"
-}));
-const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
-const getNameDataTestId = (KEY, NAME) => {
-  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
-};
-const SkeletonRHFCheckBox = (props) => {
-  const {
-    classes,
-    hasLabel,
-    fieldName
-  } = props;
-  return /* @__PURE__ */ jsxs(SkeletonRHFCheckBoxRoot, {
-    children: [/* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
-      className: classes.skeleton,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("skeleton", fieldName)
-      } : {},
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "18px",
-        height: "18px"
-      })
-    }), hasLabel && /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width: "70px",
-      height: "18px"
-    })]
-  });
-};
-const RHFCheckboxRoot = styled$1("div")(({
+import { H as HelperText } from "../../HelperText/index.6ef76993.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import "react";
+import "@m4l/core";
+import "../../Icon/index.9fcd1476.js";
+import "clsx";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../../mui_extended/IconButton/index.12f1a3c3.js";
+import "../../mui_extended/Accordion/index.a6447bf8.js";
+import "../../mui_extended/Typography/index.443590d6.js";
+import "../../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../../mui_extended/Button/index.4288f9fc.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/Badge/index.cad260fe.js";
+import "../../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import "../../mui_extended/MenuActions/index.43a2e1ae.js";
+import "../../mui_extended/Popover/index.9f35d0eb.js";
+import "../../mui_extended/Pager/index.82e89328.js";
+import "../../mui_extended/Tab/index.c39a6681.js";
+import "../../mui_extended/Tooltip/index.5a795dcd.js";
+const RHFCheckboxRoot = styled("div")(({
   theme
 }) => ({
   ...theme.components?.M4LRHFCheckbox?.styleOverrides
 }));
-styled$1("div")(() => ({
+styled("div")(() => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   padding: "8px"
 }));
-styled$1(Skeleton)(() => ({
+styled(Skeleton)(() => ({
   width: "20px",
   height: "20px",
   borderRadius: "4px"
 }));
-const ContainerCheckTypography = styled$1("div")(() => ({
+const ContainerCheckTypography = styled("div")(() => ({
   display: "flex",
   alignItems: "center"
 }));
@@ -92,6 +69,10 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
+const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
+const getNameDataTestId = (KEY, NAME) => {
+  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
+};
 function RHFCheckbox(props) {
   const {
     name,
@@ -99,15 +80,15 @@ function RHFCheckbox(props) {
     label,
     disabled = false
   } = props;
-  const isSkeleton = useModuleSkeleton();
   const {
     control,
     formState: {
       errors
     }
   } = useFormContext();
+  const isDesktop = useResponsiveDesktop();
   const ownerState = {
-    sizeCheck,
+    sizeCheck: !isDesktop ? "medium" : sizeCheck,
     disabled,
     error: errors[name] ? true : false
   };
@@ -126,29 +107,23 @@ function RHFCheckbox(props) {
           error
         }
       }) => {
-        return !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsxs(ContainerCheckTypography, {
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(ContainerCheckTypography, {
             className: classes.checkTypography,
             ...process.env.NODE_ENV !== "production" ? {
               [TEST_PROP_ID]: getNameDataTestId("checkTypography", name)
             } : {},
-            children: [/* @__PURE__ */ jsx(Checkbox, {
+            children: /* @__PURE__ */ jsx(CheckBox, {
               size: sizeCheck,
               ...field,
               checked: field.value,
               disabled: disabled ? true : false,
-              disableRipple: true
-            }), /* @__PURE__ */ jsx(Typography, {
-              skeletonWidth: "80px",
-              children: label
-            })]
+              disableRipple: true,
+              label
+            })
           }), error?.message && /* @__PURE__ */ jsx(HelperText, {
             message: error?.message + ""
           })]
-        }) : /* @__PURE__ */ jsx(SkeletonRHFCheckBox, {
-          classes,
-          hasLabel: !!label,
-          fieldName: name
         });
       }
     })

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

@@ -1,7 +1,8 @@
 import { FormControlLabelProps } from '@mui/material';
-export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
+export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
     name: string;
     sizeCheck?: 'small' | 'medium';
+    label?: string;
 }
 export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
     name: string;

package/components/hook-form/RHFDateTime/{index.5da7b839.js → index.46cf616e.js}

@@ -3,27 +3,28 @@ import { DateTimePicker } from "@mui/x-date-pickers";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, styled as styled$1 } from "@mui/material";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useFormatter } from "@m4l/graphics";
+import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { useState, useEffect } from "react";
 import clsx from "clsx";
 import "../../Icon/index.9fcd1476.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import "../../mui_extended/IconButton/index.12f1a3c3.js";
-import "../../mui_extended/Accordion/index.e8ba0755.js";
+import "../../mui_extended/Accordion/index.a6447bf8.js";
 import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
 import "../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../../mui_extended/Button/index.4288f9fc.js";
-import "../../mui_extended/Badge/index.8c2b8b66.js";
+import "../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../mui_extended/Badge/index.cad260fe.js";
 import "../../Image/index.c18ebf5a.js";
 import "@mui/lab";
 import "../../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../mui_extended/Pager/index.2f6d6d7d.js";
-import "../../mui_extended/Tab/index.3c005df1.js";
+import "../../mui_extended/Pager/index.82e89328.js";
+import "../../mui_extended/Tab/index.c39a6681.js";
 import "../../mui_extended/Tooltip/index.5a795dcd.js";
-import { H as HelperText } from "../../HelperText/index.29d5ad65.js";
+import { H as HelperText } from "../../HelperText/index.6ef76993.js";
 import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 const SKTRHFWrapperTextField = styled("div")(({
@@ -131,10 +132,11 @@ function RHFDateTime(props) {
   const handlerBlur = () => {
     setIsFocus(false);
   };
+  const isDesktop = useResponsiveDesktop();
   const ownerState = {
     isFocus,
     disabled,
-    size,
+    size: isDesktop ? size : "medium",
     variant: currentVariant
   };
   const classes = useUtilityClasses(ownerState);

package/components/hook-form/RHFPeriod/{index.7e42c292.js → index.ce513149.js}

@@ -1,7 +1,7 @@
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { useFormContext, Controller } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.29d5ad65.js";
-import { P as Period } from "../../Period/index.adc328ca.js";
+import { H as HelperText } from "../../HelperText/index.6ef76993.js";
+import { P as Period } from "../../Period/index.26071a16.js";
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs } from "react/jsx-runtime";
 const RHFPeriodRoot = styled("div")(({

package/components/hook-form/RHFTextField/{index.13447584.js → index.f7ee202c.js}

@@ -6,13 +6,13 @@ import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import "../../Icon/index.9fcd1476.js";
 import "clsx";
-import "@m4l/graphics";
+import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormContext, Controller } from "react-hook-form";
 import { styled as styled$1 } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../utils/index.c43a95f4.js";
 import { T as Typography } from "../../mui_extended/Typography/index.443590d6.js";
-import { H as HelperText } from "../../HelperText/index.29d5ad65.js";
+import { H as HelperText } from "../../HelperText/index.6ef76993.js";
 const SkeletonTextFieldRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -156,6 +156,7 @@ const RHFTextField = forwardRef((props, ref) => {
   } = useFormContext();
   const [isFocus, setIsFocus] = useState(false);
   const [currentVariant, setCurrentVariant] = useState(null);
+  const isDesktop = useResponsiveDesktop();
   useEffect(() => {
     if (errors[nameRHF]) {
       setCurrentVariant("error");
@@ -173,7 +174,7 @@ const RHFTextField = forwardRef((props, ref) => {
   };
   const ownerState = {
     type: type === "password" ? "password" : "text",
-    size,
+    size: !isDesktop ? "medium" : size,
     focus: isFocus,
     variant: currentVariant,
     disabled