@m4l/components 0.1.26 → 0.1.28

package/components/hook-form/RHFRadioGroup/index.b3335e13.js

@@ -1,43 +1,43 @@
-import { useFormContext as s, Controller as u } from "react-hook-form";
-import { RadioGroup as c, FormControlLabel as x, Radio as p, FormHelperText as f } from "@mui/material";
-import { jsx as r, jsxs as R } from "react/jsx-runtime";
-function j({
-  name: l,
-  options: m,
-  getOptionLabel: e,
-  ...n
+import { useFormContext, Controller } from "react-hook-form";
+import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  ...other
 }) {
   const {
-    control: a
-  } = s();
-  return /* @__PURE__ */ r(u, {
-    name: l,
-    control: a,
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: d,
+      field,
       fieldState: {
-        error: t
+        error
       }
-    }) => /* @__PURE__ */ R("div", {
-      children: [/* @__PURE__ */ r(c, {
-        ...d,
-        row: !0,
-        ...n,
-        children: m.map((o, i) => /* @__PURE__ */ r(x, {
-          value: o,
-          control: /* @__PURE__ */ r(p, {}),
-          label: e?.length ? e[i] : o
-        }, o))
-      }), !!t && /* @__PURE__ */ r(f, {
-        error: !0,
+    }) => /* @__PURE__ */ jsxs("div", {
+      children: [/* @__PURE__ */ jsx(RadioGroup, {
+        ...field,
+        row: true,
+        ...other,
+        children: options.map((option, index) => /* @__PURE__ */ jsx(FormControlLabel, {
+          value: option,
+          control: /* @__PURE__ */ jsx(Radio, {}),
+          label: getOptionLabel?.length ? getOptionLabel[index] : option
+        }, option))
+      }), !!error && /* @__PURE__ */ jsx(FormHelperText, {
+        error: true,
         sx: {
           px: 2
         },
-        children: t.message
+        children: error.message
       })]
     })
   });
 }
 export {
-  j as R
+  RHFRadioGroup as R
 };

package/components/hook-form/RHFSelect/index.b6ca8bb2.js

@@ -1,36 +1,36 @@
-import { useFormContext as m, Controller as s } from "react-hook-form";
-import { TextField as u } from "@mui/material";
-import { jsx as t } from "react/jsx-runtime";
-function x({
-  name: r,
-  children: o,
-  ...l
+import { useFormContext, Controller } from "react-hook-form";
+import { TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFSelect({
+  name,
+  children,
+  ...other
 }) {
   const {
-    control: n
-  } = m();
-  return /* @__PURE__ */ t(s, {
-    name: r,
-    control: n,
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
     render: ({
-      field: i,
+      field,
       fieldState: {
-        error: e
+        error
       }
-    }) => /* @__PURE__ */ t(u, {
-      ...i,
-      select: !0,
-      fullWidth: !0,
+    }) => /* @__PURE__ */ jsx(TextField, {
+      ...field,
+      select: true,
+      fullWidth: true,
       SelectProps: {
-        native: !0
+        native: true
       },
-      error: !!e,
-      helperText: e?.message,
-      ...l,
-      children: o
+      error: !!error,
+      helperText: error?.message,
+      ...other,
+      children
     })
   });
 }
 export {
-  x as R
+  RHFSelect as R
 };

package/components/hook-form/RHFTextField/index.f9aaaa90.js

@@ -0,0 +1,146 @@
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, TextField, InputAdornment } from "@mui/material";
+import { forwardRef, useState } from "react";
+import { I as IconButton } from "../../mui_extended/IconButton/index.a321e5cb.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperSkeletonRHFTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "42.25px",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+const SkeletonTextField = (props) => {
+  const {
+    skeletonWidth,
+    skeletonHeight,
+    skeletonVariant
+  } = props;
+  if (skeletonVariant === "text") {
+    return /* @__PURE__ */ jsx(WrapperSkeletonRHFTextField, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs(WrapperSkeletonRHFTextField, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: skeletonWidth,
+      height: skeletonHeight
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: "20px",
+      height: "20px"
+    })]
+  });
+};
+const RHFTextField = forwardRef((props, inputRef) => {
+  const {
+    name: nameRHF,
+    autoComplete = "off",
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    type,
+    skeletonVariant = "text",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonTextField, {
+      skeletonWidth,
+      skeletonHeight,
+      skeletonVariant
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name: nameRHF,
+    control,
+    render: ({
+      field: {
+        onChange,
+        onBlur,
+        value,
+        name,
+        ref
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      const onInternalChange = (event) => {
+        if (type === "number") {
+          if (event.target.value) {
+            onChange(Number(event.target.value));
+            return;
+          }
+        }
+        onChange(event);
+      };
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          inputRef,
+          autoComplete,
+          onChange: onInternalChange,
+          onBlur,
+          value: value || "",
+          name,
+          ref,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          type,
+          ...other
+        }
+      );
+    }
+  });
+});
+RHFTextField.displayName = "RHFTextField";
+const RHFTextFieldPassword = (props) => {
+  const {
+    name,
+    label,
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsx(RHFTextField, {
+    name,
+    label,
+    type: showPassword ? "text" : "password",
+    skeletonVariant: "password",
+    autoComplete: "on",
+    skeletonWidth,
+    skeletonHeight,
+    InputProps: {
+      endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+        position: "end",
+        children: /* @__PURE__ */ jsx(IconButton, {
+          onClick: () => setShowPassword(!showPassword),
+          src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
+        })
+      })
+    }
+  });
+};
+export {
+  RHFTextField as R,
+  RHFTextFieldPassword as a
+};

package/components/hook-form/RHFUpload/RHFUploadImage/{components → subcomponents}/UploadImage/styles.d.ts

@@ -4,8 +4,9 @@ export declare const DropZoneStyle: import("@emotion/styled").StyledComponent<im
 export declare const PlaceholderStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContainerUploadBody: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Containermessage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContainerTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ContainerDescription: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ContainerConditions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerDescription: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerConditions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const WrapperImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContainerPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperFileImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFUpload/index.d5cc7c13.js

@@ -0,0 +1,285 @@
+import { styled as styled$1, Skeleton, FormHelperText } from "@mui/material";
+import { useCallback } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import isString from "lodash/isString";
+import { useDropzone } from "react-dropzone";
+import { styled, alpha } from "@mui/material/styles";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const WrapperUploadImage = styled("div")(({
+  theme
+}) => ({
+  width: "inherit",
+  height: "100%",
+  minHeight: "200px",
+  minWidth: theme.spacing(20),
+  margin: "auto",
+  borderRadius: theme.spacing(1),
+  padding: theme.spacing(1),
+  border: `1px dashed ${theme.palette.divider}`
+}));
+const DropZoneStyle = styled("div")(({
+  theme
+}) => ({
+  zIndex: 0,
+  width: "100%",
+  height: "100%",
+  outline: "none",
+  display: "flex",
+  overflow: "hidden",
+  borderRadius: theme.spacing(1),
+  position: "relative",
+  alignItems: "center",
+  justifyContent: "center",
+  "& > *": {
+    width: "100%",
+    height: "100%"
+  },
+  "&:hover": {
+    cursor: "pointer",
+    "& .placeholder": {
+      zIndex: 9
+    }
+  }
+}));
+const PlaceholderStyle = styled("div")(({
+  theme
+}) => ({
+  "&:hover": {
+    opacity: 1
+  },
+  display: "flex",
+  justifyContent: "center",
+  position: "absolute",
+  zIndex: "2",
+  inset: "0",
+  transition: theme.transitions.create("opacity", {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shorter
+  }),
+  overflow: "auto"
+}));
+const ContainerUploadBody = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(3, 5),
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  gap: theme.spacing(3)
+}));
+const Containermessage = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  gap: theme.spacing(1)
+}));
+const ContainerTitle = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle1,
+  textAlign: "center"
+}));
+const ContainerDescription = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  textAlign: "center"
+}));
+const ContainerConditions = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  textAlign: "center"
+}));
+const WrapperImage = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center"
+}));
+styled("div")(() => ({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  inset: "0",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}));
+const WrapperFileImage = styled("div")(() => ({
+  "& .m4l_image > img": {
+    objectFit: "cover",
+    width: "auto",
+    margin: "0 auto"
+  }
+}));
+const MaskSkeletonUploadImage = styled$1("div")(({
+  theme
+}) => ({
+  maskPosition: "center!important",
+  maskRepeat: "no-repeat!important",
+  WebkitMaskRepeat: "no-repeat!important",
+  border: `1px dashed ${theme.palette.divider}`,
+  width: "100%",
+  height: "100%",
+  mask: `url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')`,
+  WebkitMask: `url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')`
+}));
+const SkeletonUploadImage = () => {
+  return /* @__PURE__ */ jsx(WrapperUploadImage, {
+    children: /* @__PURE__ */ jsx(MaskSkeletonUploadImage, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rectangular",
+        width: "100%",
+        height: "100%"
+      })
+    })
+  });
+};
+function UploadImage({
+  error,
+  file,
+  helperText,
+  sx,
+  ...other
+}) {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject
+  } = useDropzone({
+    multiple: false,
+    ...other
+  });
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonUploadImage, {});
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(WrapperUploadImage, {
+      sx: {
+        ...(isDragReject || error) && {
+          borderColor: "error.light"
+        },
+        ...sx
+      },
+      children: /* @__PURE__ */ jsxs(DropZoneStyle, {
+        ...getRootProps(),
+        sx: {
+          ...isDragActive && {
+            opacity: 0.72
+          }
+        },
+        children: [/* @__PURE__ */ jsx("input", {
+          ...getInputProps()
+        }), file && /* @__PURE__ */ jsx(WrapperFileImage, {
+          children: /* @__PURE__ */ jsx(Image, {
+            alt: "avatar",
+            src: isString(file) ? file : file.preview || "",
+            width: "auto",
+            height: "100%"
+          })
+        }), /* @__PURE__ */ jsx(PlaceholderStyle, {
+          id: "PlaceholderStyle",
+          className: "placeholder",
+          sx: {
+            ...file ? {
+              bgcolor: alpha("#161C24", 0.72),
+              color: "common.white",
+              opacity: 0
+            } : {
+              opacity: 1
+            },
+            ...(isDragReject || error) && {
+              bgcolor: "error.lighter",
+              borderColor: "error.light",
+              color: "error.main"
+            }
+          },
+          children: /* @__PURE__ */ jsxs(ContainerUploadBody, {
+            className: "ContainerUploadBody",
+            children: [/* @__PURE__ */ jsx(WrapperImage, {
+              children: /* @__PURE__ */ jsx(Image, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
+                width: "100px",
+                height: "100px"
+              })
+            }), /* @__PURE__ */ jsxs(Containermessage, {
+              children: [/* @__PURE__ */ jsx(ContainerTitle, {
+                children: getLabel("upload_image.title_upload")
+              }), /* @__PURE__ */ jsx(ContainerDescription, {
+                children: getLabel("upload_image.description")
+              }), /* @__PURE__ */ jsx(ContainerConditions, {
+                children: getLabel("upload_image.conditions")
+              })]
+            })]
+          })
+        })]
+      })
+    }), helperText && helperText]
+  });
+}
+const WrapperRHFUploadImage = styled$1("div")(() => ({
+  width: "inherit",
+  height: "inherit",
+  padding: "1px"
+}));
+function RHFUploadImage({
+  name,
+  ...other
+}) {
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const handleDrop = useCallback((acceptedFiles) => {
+    const file = acceptedFiles[0];
+    if (file) {
+      setValue(name, Object.assign(file, {
+        preview: URL.createObjectURL(file)
+      }));
+    }
+  }, [setValue]);
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => {
+      const checkError = !!error && !field.value;
+      return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, {
+        children: [/* @__PURE__ */ jsx(UploadImage, {
+          onDrop: handleDrop,
+          error: checkError,
+          ...other,
+          file: field.value
+        }), checkError && /* @__PURE__ */ jsx(FormHelperText, {
+          error: true,
+          sx: {
+            px: 2,
+            textAlign: "center"
+          },
+          children: error.message
+        })]
+      });
+    }
+  });
+}
+export {
+  RHFUploadImage as R
+};