@m4l/components 0.1.7 → 0.1.9

package/components/PropertyValue/index.js

@@ -2,53 +2,62 @@ import { styled } from "@mui/material/styles";
 import { Skeleton } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
 const WrapperPropertyValue = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
-  propertyHeight,
+  propertyWidth,
   isForm,
   theme
 }) => ({
-  display: "flex",
+  display: "grid",
+  gridTemplateColumns: "1fr",
   alignItems: "flex-start",
   width: "100%",
   padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-  maxHeight: propertyHeight || "auto",
   ":hover": {
     backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
   },
   borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
   flexDirection: "column",
   [theme.breakpoints.up("sm")]: {
-    flexDirection: "row",
+    gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
+    gap: theme.spacing(2),
     alignItems: "center"
   }
 }));
-const Property = styled("span", {
+const Property = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
   propertyWidth,
   isForm,
   theme
 }) => ({
-  width: propertyWidth || "150px",
-  minWidth: propertyWidth || "150px",
+  width: "100%",
+  minWidth: "100%",
   ...theme.typography.subtitle2,
   color: theme.palette.text.primary,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
   position: "relative",
   [theme.breakpoints.up("sm")]: {
     borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
     paddingRight: theme.spacing(2),
-    textAlign: "right"
+    textAlign: "right",
+    width: propertyWidth || "150px",
+    minWidth: propertyWidth || "150px",
+    justifyContent: "flex-end"
   },
   overflow: "hidden",
   overflowWrap: "break-word"
 }));
 const Value = styled("div", {
-  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "valueWidth"
+  shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
 })(({
-  width,
-  propertyHeight,
+  valueWidth,
+  valueHeight,
   theme
 }) => ({
   flexGrow: "1",
@@ -56,11 +65,12 @@ const Value = styled("div", {
   color: theme.palette.text.secondary,
   position: "relative",
   padding: "1px",
-  width: width ? `${width}%` : "100%",
-  height: propertyHeight ? propertyHeight : "auto",
+  maxWidth: `${valueWidth}%`,
+  width: `${valueWidth}%`,
+  height: valueHeight,
   marginTop: theme.spacing(1),
   [theme.breakpoints.up("sm")]: {
-    marginLeft: theme.spacing(2),
+    marginLeft: theme.spacing(0),
     marginTop: "0px"
   },
   overflow: "hidden",
@@ -83,13 +93,13 @@ function PropertyValue(props) {
   const {
     property,
     value,
-    propertyWidth,
-    propertyHeight,
+    propertyWidth = 200,
+    valueHeight = "auto",
     valueWidth = "100",
-    isForm,
-    isSkeleton = false
+    isForm
   } = props;
   const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
   const getValueW = () => {
     if (valueWidth === "75" && isDesktop) {
       return "75";
@@ -102,28 +112,30 @@ function PropertyValue(props) {
       return "100";
     }
     if (valueWidth === "25" && isDesktop || valueWidth === "12.5" && isDesktop) {
-      return parseFloat(valueWidth).toString(10);
-    } else if (valueWidth === "25" && !isDesktop || valueWidth === "12.5" && !isDesktop) {
-      return (parseFloat(valueWidth) * 2).toString(10);
+      return `${valueWidth}`;
+    }
+    if (valueWidth === "25" && !isDesktop) {
+      return "50";
+    }
+    if (valueWidth === "12.5" && !isDesktop) {
+      return "25";
     }
     return "100";
   };
   const valueW = getValueW();
   return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
-    id: "ContainerPropertyValue",
+    id: "WrapperPropertyValue",
     isForm,
     propertyWidth,
-    propertyHeight,
     children: [/* @__PURE__ */ jsx(Property, {
       id: "Property",
       isForm,
       propertyWidth,
-      propertyHeight,
       children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
     }), /* @__PURE__ */ jsx(Value, {
       id: "Value",
-      width: valueW,
-      propertyHeight,
+      valueWidth: valueW,
+      valueHeight,
       children: value
     })]
   });

package/components/PropertyValue/styles.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { PropertyProps, ValueProps } from './types';
-export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Property: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").PropertyProps & Pick<import("./types").PropertyValueProps, "isForm">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Property: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").PropertyProps & Pick<import("./types").PropertyValueProps, "isForm">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SKTWrapperProperty: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PropertyValue/types.d.ts

@@ -1,18 +1,17 @@
 import type { ReactNode } from 'react';
 export interface PropertyProps {
     propertyWidth?: number;
-    propertyHeight?: number | string;
-    isForm?: boolean;
 }
 export interface ValueProps {
-    width: string;
-    propertyHeight?: number | string;
+    valueHeight?: number | string;
+    valueWidth?: valueWidthType;
 }
-export interface PropertyValueProps extends PropertyProps, ValueTypeProps {
+export declare type valueWidthType = '100' | '75' | '50' | '25' | '12.5';
+export interface PropertyValueProps extends PropertyProps, ValueProps {
     property: string;
-    isSkeleton?: boolean;
     value: number | string | ReactNode;
+    isForm?: boolean;
 }
-export interface ValueTypeProps {
-    valueWidth?: '100' | '75' | '50' | '25' | '12.5';
-}
+export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
+export declare type WrapperPropertyProps = WrapperProps;
+export declare type WrapperValueProps = ValueProps;

package/components/animate/variants/bounce.d.ts

@@ -1,5 +1,5 @@
 import { VariantsType } from '../type';
-export declare const varBounce: (props?: VariantsType | undefined) => {
+export declare const varBounce: (props?: VariantsType) => {
     in: {
         initial: {};
         animate: {

package/components/animate/variants/container.d.ts

@@ -3,7 +3,7 @@ export declare type Props = {
     delayIn?: number;
     staggerOut?: number;
 };
-export declare const varContainer: (props?: Props | undefined) => {
+export declare const varContainer: (props?: Props) => {
     animate: {
         transition: {
             staggerChildren: number;

package/components/animate/variants/fade.d.ts

@@ -1,5 +1,5 @@
 import { VariantsType } from '../type';
-export declare const varFade: (props?: VariantsType | undefined) => {
+export declare const varFade: (props?: VariantsType) => {
     in: {
         initial: {
             opacity: number;

package/components/animate/variants/transition.d.ts

@@ -1,13 +1,13 @@
 import { TranHoverType, TranEnterType, TranExitType } from '../type';
-export declare const varTranHover: (props?: TranHoverType | undefined) => {
+export declare const varTranHover: (props?: TranHoverType) => {
     duration: number;
     ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };
-export declare const varTranEnter: (props?: TranEnterType | undefined) => {
+export declare const varTranEnter: (props?: TranEnterType) => {
     duration: number;
     ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };
-export declare const varTranExit: (props?: TranExitType | undefined) => {
+export declare const varTranExit: (props?: TranExitType) => {
     duration: number;
     ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };

package/components/formatters/BooleanFormatter/index.js

@@ -11,18 +11,19 @@ function BooleanFormatter(props) {
   const {
     getLabel
   } = useModuleDictionary();
+  const final_value = value ?? false;
   if (presentationType === "string_yes_no") {
     return /* @__PURE__ */ jsx(Component, {
-      children: value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
+      children: final_value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
     });
   }
   if (presentationType === "string_true_false") {
     return /* @__PURE__ */ jsx(Component, {
-      children: value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
+      children: final_value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
     });
   }
   return /* @__PURE__ */ jsx(Checkbox, {
-    checked: value !== void 0 ? value : false,
+    checked: final_value,
     size: "small",
     readOnly: true,
     disableFocusRipple: true,

package/components/formatters/BooleanFormatter/types.d.ts

@@ -3,5 +3,5 @@ export declare type PresentationType = 'string_yes_no' | 'string_true_false' | '
 export interface BooleanFormatterProps {
     Component?: ComponentForrmaterType;
     presentationType: PresentationType;
-    value: boolean;
+    value?: boolean;
 }

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PointsFormatterProps } from './types';
+export declare function PointsFormatter(props: PointsFormatterProps): JSX.Element;

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

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+export declare type CalibrationPoint = number | null;
+export interface PointsFormatterProps {
+    Component?: ComponentType;
+    unit?: string;
+    value?: Array<CalibrationPoint>;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PriceFormatterProps } from './types';
+export declare function PriceFormatter(props: PriceFormatterProps): JSX.Element;

package/components/formatters/PriceFormatter/types.d.ts

@@ -0,0 +1,5 @@
+import { ComponentForrmaterType } from '../types';
+export interface PriceFormatterProps {
+    Component?: ComponentForrmaterType;
+    value?: number;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { UncertaintyFormatterProps } from './types';
+export declare function UncertaintyFormatter(props: UncertaintyFormatterProps): JSX.Element;

package/components/formatters/UncertaintyFormatter/types.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+export interface UncertaintyRange {
+    cmc_min_closed: boolean;
+    cmc_min: number;
+    cmc_max_closed: boolean;
+    cmc_max: number;
+    cmc_uncertainty: number;
+}
+export interface UncertaintyFormatterProps {
+    Component?: ComponentType;
+    symbol?: string;
+    unit?: string;
+    value?: Array<UncertaintyRange>;
+}

package/components/formatters/index.d.ts

@@ -1,2 +1,6 @@
 export { BooleanFormatter } from './BooleanFormatter';
 export { DateFormatter } from './DateFormatter';
+export { UncertaintyFormatter } from './UncertaintyFormatter';
+export { PointsFormatter } from './PointsFormatter';
+export { PriceFormatter } from './PriceFormatter';
+export type { UncertaintyRange } from './UncertaintyFormatter/types';

package/components/formatters/index.js

@@ -1,7 +1,61 @@
-import "react";
-import "@m4l/core";
+import require$$0 from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
 import "@mui/material";
-import "react/jsx-runtime";
+function UncertaintyFormatter(props) {
+  const {
+    value,
+    unit,
+    symbol,
+    Component = require$$0.Fragment
+  } = props;
+  if (value === void 0 || value === null || !Array.isArray(value)) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: ""
+    });
+  }
+  let result = "";
+  value.map((obj, idx) => {
+    const cmc_min_closed = obj.cmc_min_closed != true ? "<" : "\u2264";
+    const cmc_max_closed = obj.cmc_max_closed != true ? "<" : "\u2264";
+    result = result.concat(`${idx > 0 ? " " : ""}`, obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} \xB1 ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} \xB1 ${obj.cmc_uncertainty}]`);
+  });
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
+  });
+}
+function PointsFormatter(props) {
+  const {
+    value,
+    unit,
+    Component = require$$0.Fragment
+  } = props;
+  console.log("points", value);
+  if (value === void 0 || value === null || !Array.isArray(value)) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: "[]"
+    });
+  }
+  let result = "";
+  value.map((point) => {
+    if (point) {
+      console.log("point", point);
+      result = result.concat(`[${point}${unit}]`);
+    }
+  });
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
+  });
+}
+function PriceFormatter(props) {
+  const {
+    value,
+    Component = require$$0.Fragment
+  } = props;
+  return /* @__PURE__ */ jsx(Component, {
+    children: `${value}$Cop`
+  });
+}
 function getFormattersComponentsDictionary() {
   return ["formatters"];
 }
@@ -13,4 +67,46 @@ const defaultFormattersDictionary = {
     boolean_false: "False"
   }
 };
-export { defaultFormattersDictionary as d, getFormattersComponentsDictionary as g };
+function columnUncertaintyFormatter(props) {
+  const {
+    fieldUnit,
+    fieldValue,
+    fieldSymbol,
+    Component
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(UncertaintyFormatter, {
+      Component,
+      value: getPropertyByString(obProps, fieldValue),
+      unit: getPropertyByString(obProps, fieldUnit),
+      symbol: getPropertyByString(obProps, fieldSymbol)
+    });
+  };
+}
+function columnPointsFormatter(props) {
+  const {
+    fieldUnit,
+    fieldValue,
+    Component
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(PointsFormatter, {
+      Component,
+      value: getPropertyByString(obProps, fieldValue),
+      unit: getPropertyByString(obProps, fieldUnit)
+    });
+  };
+}
+function columnNestedValueFormatter(props) {
+  const {
+    fieldValue,
+    Component = require$$0.Fragment
+  } = props;
+  return (obProps) => {
+    console.log("columnNestedValueFormatter", obProps, fieldValue);
+    return /* @__PURE__ */ jsx(Component, {
+      children: getPropertyByString(obProps, fieldValue)
+    });
+  };
+}
+export { PointsFormatter as P, UncertaintyFormatter as U, PriceFormatter as a, columnPointsFormatter as b, columnUncertaintyFormatter as c, defaultFormattersDictionary as d, columnNestedValueFormatter as e, getFormattersComponentsDictionary as g };

package/components/hook-form/FormProvider/index.js

@@ -18,25 +18,37 @@ function FormProvider(props) {
     children,
     onSubmit,
     values,
-    validationSchema
+    validationSchema,
+    statusLoad = "ready"
   } = props;
   const methods = useForm({
     resolver: o(validationSchema),
     defaultValues: values
   });
   useEffect(() => {
-    if (values.initial) {
+    console.log("useEffect FormProvider reload_values_provider===", statusLoad);
+    if (statusLoad === "reload_values_provider") {
+      const keys = Object.keys(values);
+      keys.forEach((key) => {
+        methods.setValue(key, values[key], {
+          shouldValidate: false,
+          shouldDirty: false,
+          shouldTouch: false
+        });
+      });
       return;
     }
-    const keys = Object.keys(values);
-    keys.forEach((key) => {
-      methods.setValue(key, values[key], {
+  }, [methods, statusLoad, values]);
+  useEffect(() => {
+    if (statusLoad === "ready") {
+      console.log("useEffect FormProvider Ready", statusLoad);
+      methods.setValue("statusLoad", "ready", {
         shouldValidate: false,
         shouldDirty: false,
         shouldTouch: false
       });
-    });
-  }, [methods, values]);
+    }
+  }, [statusLoad]);
   return /* @__PURE__ */ jsx(FormProvider$1, {
     ...methods,
     children: /* @__PURE__ */ jsx(WrapperFormProvider, {

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

@@ -1,8 +1,11 @@
 import { ReactNode } from 'react';
 import { FieldValues } from 'react-hook-form';
+export declare type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
+export declare type FormInitialValues = FieldValues;
 export interface FormProviderProps {
     children: ReactNode;
     onSubmit: (data: FieldValues) => void;
-    values: FieldValues;
+    values: FormInitialValues;
     validationSchema: any;
+    statusLoad?: FormStatusLoad;
 }

package/components/hook-form/RHFAutocomplete/index.js

@@ -1,4 +1,4 @@
-import { useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, Autocomplete, TextField } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -49,16 +49,17 @@ function RHFAutocomplete(props) {
     label,
     skeletonProps = {},
     options,
+    disabled,
     ...other
   } = props;
   const {
-    isSkeleton = false,
     width = 100,
     height = "18px"
   } = skeletonProps;
   const {
     getLabel
   } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
   const {
     control,
     getValues
@@ -116,6 +117,7 @@ function RHFAutocomplete(props) {
             onChange(val);
           },
           loadingText: "",
+          disabled,
           noOptionsText: getLabel("rhf_autocomplete.component_no_options"),
           renderInput: (params) => {
             return /* @__PURE__ */ jsx(TextField, {

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

@@ -1,5 +1,4 @@
 export interface SkeletonProps {
-    isSkeleton?: boolean;
     width?: string | number;
     height?: string | number;
 }

package/components/hook-form/RHFAutocompleteAsync/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, Fragment } from "react";
-import { useModuleDictionary, useNetwork, getPropertyByString } from "@m4l/core";
+import { useModuleDictionary, useModuleSkeleton, useNetwork, getPropertyByString } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, Autocomplete, TextField, CircularProgress } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -43,23 +43,25 @@ function RHFAutocompleteAsync(props) {
     label,
     endPoint,
     timeout = 5e3,
-    parms = {},
+    parms,
     resultField = "data",
     skeletonProps = {},
     isRemote = true,
+    disabled,
     ...other
   } = props;
   const {
-    isSkeleton = false,
     width = 100,
     height = "18px"
   } = skeletonProps;
   const {
     getLabel
   } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
   const {
     control,
-    getValues
+    getValues,
+    setValue
   } = useFormContext();
   const {
     networkOperation
@@ -68,7 +70,14 @@ function RHFAutocompleteAsync(props) {
   const [options, setOptions] = useState(initialValue === null ? [] : [initialValue]);
   const [open, setOpen] = useState(false);
   const [optionsLoaded, setOptionsLoaded] = useState(false);
-  const loading = open && !optionsLoaded;
+  const loading = open && !optionsLoaded && !!endPoint && !isSkeleton;
+  useEffect(() => {
+    if (optionsLoaded) {
+      setOptionsLoaded(false);
+      setOptions([]);
+      setValue(name, null);
+    }
+  }, [parms, endPoint]);
   useEffect(() => {
     if (!optionsLoaded && initialValue) {
       setOptions([initialValue]);
@@ -149,6 +158,7 @@ function RHFAutocompleteAsync(props) {
       onChange: (_e, val) => {
         onChange(val);
       },
+      disabled,
       loading,
       loadingText: "",
       noOptionsText: getLabel("rhf_autocomplete.component_no_options"),

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

@@ -1,5 +1,4 @@
 export interface SkeletonProps {
-    isSkeleton?: boolean;
     width?: string | number;
     height?: string | number;
 }
@@ -10,7 +9,7 @@ export interface RHFAutocompleteAsyncProps<T> {
     skeletonProps?: SkeletonProps;
     endPoint: string;
     timeout?: number;
-    parms?: any;
+    parms?: Record<string, any>;
     resultField?: string;
     label: string;
     isRemote?: boolean;

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { RHFCheckboxProps } from './types';
-export declare function RHFCheckbox({ name, sizeCheck, isSkeleton, ...other }: RHFCheckboxProps): JSX.Element;
+export declare const ErrorLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare function RHFCheckbox({ name, sizeCheck, ...other }: RHFCheckboxProps): JSX.Element;