@m4l/components 0.1.27 → 0.1.28

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

@@ -1,129 +1,146 @@
-import { useModuleSkeleton as y, useEnvironment as C } from "@m4l/core";
-import { styled as H, Skeleton as h, TextField as R, InputAdornment as S } from "@mui/material";
-import { forwardRef as I, useState as T } from "react";
-import { I as b } from "../../mui_extended/IconButton/index.a321e5cb.js";
-import { useFormContext as W, Controller as $ } from "react-hook-form";
-import { jsx as e, jsxs as P } from "react/jsx-runtime";
-const u = H("div")(({
-  theme: t
+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 ${t.palette.divider}`,
+  border: `1px solid ${theme.palette.divider}`,
   padding: "12px 14px",
-  borderRadius: t.spacing(1)
-})), _ = (t) => {
+  borderRadius: theme.spacing(1)
+}));
+const SkeletonTextField = (props) => {
   const {
-    skeletonWidth: n,
-    skeletonHeight: o,
-    skeletonVariant: s
-  } = t;
-  return s === "text" ? /* @__PURE__ */ e(u, {
-    children: /* @__PURE__ */ e(h, {
-      variant: "text",
-      width: n,
-      height: o
-    })
-  }) : /* @__PURE__ */ P(u, {
-    children: [/* @__PURE__ */ e(h, {
+    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: n,
-      height: o
-    }), /* @__PURE__ */ e(h, {
+      width: skeletonWidth,
+      height: skeletonHeight
+    }), /* @__PURE__ */ jsx(Skeleton, {
       variant: "circular",
       width: "20px",
       height: "20px"
     })]
   });
-}, f = I((t, n) => {
+};
+const RHFTextField = forwardRef((props, inputRef) => {
+  const {
+    name: nameRHF,
+    autoComplete = "off",
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    type,
+    skeletonVariant = "text",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
   const {
-    name: o,
-    autoComplete: s = "off",
-    skeletonWidth: d = "100%",
-    skeletonHeight: r = "18px",
-    type: i,
-    skeletonVariant: a = "text",
-    ...l
-  } = t, x = y(), {
-    control: g
-  } = W();
-  return x ? /* @__PURE__ */ e(_, {
-    skeletonWidth: d,
-    skeletonHeight: r,
-    skeletonVariant: a
-  }) : /* @__PURE__ */ e($, {
-    name: o,
-    control: g,
+    control
+  } = useFormContext();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonTextField, {
+      skeletonWidth,
+      skeletonHeight,
+      skeletonVariant
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name: nameRHF,
+    control,
     render: ({
       field: {
-        onChange: m,
-        onBlur: k,
-        value: w,
-        name: F,
-        ref: v
+        onChange,
+        onBlur,
+        value,
+        name,
+        ref
       },
       fieldState: {
-        error: c
+        error
       }
-    }) => /* @__PURE__ */ e(
-      R,
-      {
-        inputRef: n,
-        autoComplete: s,
-        onChange: (p) => {
-          if (i === "number" && p.target.value) {
-            m(Number(p.target.value));
+    }) => {
+      const onInternalChange = (event) => {
+        if (type === "number") {
+          if (event.target.value) {
+            onChange(Number(event.target.value));
             return;
           }
-          m(p);
-        },
-        onBlur: k,
-        value: w || "",
-        name: F,
-        ref: v,
-        fullWidth: !0,
-        error: !!c,
-        helperText: c?.message,
-        type: i,
-        ...l
-      }
-    )
+        }
+        onChange(event);
+      };
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          inputRef,
+          autoComplete,
+          onChange: onInternalChange,
+          onBlur,
+          value: value || "",
+          name,
+          ref,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          type,
+          ...other
+        }
+      );
+    }
   });
 });
-f.displayName = "RHFTextField";
-const q = (t) => {
+RHFTextField.displayName = "RHFTextField";
+const RHFTextFieldPassword = (props) => {
+  const {
+    name,
+    label,
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
   const {
-    name: n,
-    label: o,
-    skeletonWidth: s,
-    skeletonHeight: d
-  } = t, [r, i] = T(!1), {
-    host_static_assets: a,
-    environment_assets: l
-  } = C();
-  return /* @__PURE__ */ e(f, {
-    name: n,
-    label: o,
-    type: r ? "text" : "password",
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsx(RHFTextField, {
+    name,
+    label,
+    type: showPassword ? "text" : "password",
     skeletonVariant: "password",
     autoComplete: "on",
-    skeletonWidth: s,
-    skeletonHeight: d,
+    skeletonWidth,
+    skeletonHeight,
     InputProps: {
-      endAdornment: /* @__PURE__ */ e(S, {
+      endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
         position: "end",
-        children: /* @__PURE__ */ e(b, {
-          onClick: () => i(!r),
-          src: r ? `${a}/${l}/frontend/domain/host/login/assets/icons/eye.svg` : `${a}/${l}/frontend/domain/host/login/assets/icons/eye_off.svg`
+        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 {
-  f as R,
-  q as a
+  RHFTextField as R,
+  RHFTextFieldPassword as a
 };

package/components/hook-form/RHFUpload/{index.ec4d5326.js → index.d5cc7c13.js}

@@ -1,25 +1,26 @@
-import { styled as w, Skeleton as p, FormHelperText as I } from "@mui/material";
-import { useCallback as D } from "react";
-import { useFormContext as y, Controller as m } from "react-hook-form";
-import N from "lodash/isString";
-import { useDropzone as x } from "react-dropzone";
-import { styled as e, alpha as S } from "@mui/material/styles";
-import { I as d } from "../../Image/index.c9da2d5a.js";
-import { useEnvironment as z, useModuleDictionary as h, useModuleSkeleton as A } from "@m4l/core";
-import { jsx as i, jsxs as n, Fragment as b } from "react/jsx-runtime";
-const j = e("div")(({
-  theme: t
+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: t.spacing(20),
+  minWidth: theme.spacing(20),
   margin: "auto",
-  borderRadius: t.spacing(1),
-  padding: t.spacing(1),
-  border: `1px dashed ${t.palette.divider}`
-})), T = e("div")(({
-  theme: t
+  borderRadius: theme.spacing(1),
+  padding: theme.spacing(1),
+  border: `1px dashed ${theme.palette.divider}`
+}));
+const DropZoneStyle = styled("div")(({
+  theme
 }) => ({
   zIndex: 0,
   width: "100%",
@@ -27,7 +28,7 @@ const j = e("div")(({
   outline: "none",
   display: "flex",
   overflow: "hidden",
-  borderRadius: t.spacing(1),
+  borderRadius: theme.spacing(1),
   position: "relative",
   alignItems: "center",
   justifyContent: "center",
@@ -41,8 +42,9 @@ const j = e("div")(({
       zIndex: 9
     }
   }
-})), E = e("div")(({
-  theme: t
+}));
+const PlaceholderStyle = styled("div")(({
+  theme
 }) => ({
   "&:hover": {
     opacity: 1
@@ -52,48 +54,54 @@ const j = e("div")(({
   position: "absolute",
   zIndex: "2",
   inset: "0",
-  transition: t.transitions.create("opacity", {
-    easing: t.transitions.easing.easeInOut,
-    duration: t.transitions.duration.shorter
+  transition: theme.transitions.create("opacity", {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shorter
   }),
   overflow: "auto"
-})), v = e("div")(({
-  theme: t
+}));
+const ContainerUploadBody = styled("div")(({
+  theme
 }) => ({
-  padding: t.spacing(3, 5),
+  padding: theme.spacing(3, 5),
   display: "flex",
   flexDirection: "column",
   justifyContent: "center",
   width: "100%",
   height: "100%",
-  gap: t.spacing(3)
-})), U = e("div")(({
-  theme: t
+  gap: theme.spacing(3)
+}));
+const Containermessage = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   justifyContent: "center",
   flexDirection: "column",
-  gap: t.spacing(1)
-})), H = e("div")(({
-  theme: t
+  gap: theme.spacing(1)
+}));
+const ContainerTitle = styled("div")(({
+  theme
 }) => ({
-  ...t.typography.subtitle1,
+  ...theme.typography.subtitle1,
   textAlign: "center"
-})), Y = e("div")(({
-  theme: t
+}));
+const ContainerDescription = styled("div")(({
+  theme
 }) => ({
-  ...t.typography.body2,
+  ...theme.typography.body2,
   textAlign: "center"
-})), k = e("div")(({
-  theme: t
+}));
+const ContainerConditions = styled("div")(({
+  theme
 }) => ({
-  ...t.typography.caption,
+  ...theme.typography.caption,
   textAlign: "center"
-})), G = e("div")(() => ({
+}));
+const WrapperImage = styled("div")(() => ({
   display: "flex",
   justifyContent: "center"
 }));
-e("div")(() => ({
+styled("div")(() => ({
   width: "100%",
   height: "100%",
   position: "absolute",
@@ -102,163 +110,176 @@ e("div")(() => ({
   justifyContent: "center",
   alignItems: "center"
 }));
-const Q = e("div")(() => ({
+const WrapperFileImage = styled("div")(() => ({
   "& .m4l_image > img": {
     objectFit: "cover",
     width: "auto",
     margin: "0 auto"
   }
-})), f = w("div")(({
-  theme: t
+}));
+const MaskSkeletonUploadImage = styled$1("div")(({
+  theme
 }) => ({
   maskPosition: "center!important",
   maskRepeat: "no-repeat!important",
   WebkitMaskRepeat: "no-repeat!important",
-  border: `1px dashed ${t.palette.divider}`,
+  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==')"
-})), Z = () => /* @__PURE__ */ i(j, {
-  children: /* @__PURE__ */ i(f, {
-    children: /* @__PURE__ */ i(p, {
-      variant: "rectangular",
-      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 W({
-  error: t,
-  file: o,
-  helperText: s,
-  sx: r,
-  ...a
+  });
+};
+function UploadImage({
+  error,
+  file,
+  helperText,
+  sx,
+  ...other
 }) {
   const {
-    getRootProps: L,
-    getInputProps: M,
-    isDragActive: u,
-    isDragReject: l
-  } = x({
-    multiple: !1,
-    ...a
-  }), {
-    host_static_assets: C,
-    environment_assets: g
-  } = z(), {
-    getLabel: c
-  } = h();
-  return A() ? /* @__PURE__ */ i(Z, {}) : /* @__PURE__ */ n(b, {
-    children: [/* @__PURE__ */ i(j, {
+    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: {
-        ...(l || t) && {
+        ...(isDragReject || error) && {
           borderColor: "error.light"
         },
-        ...r
+        ...sx
       },
-      children: /* @__PURE__ */ n(T, {
-        ...L(),
+      children: /* @__PURE__ */ jsxs(DropZoneStyle, {
+        ...getRootProps(),
         sx: {
-          ...u && {
+          ...isDragActive && {
             opacity: 0.72
           }
         },
-        children: [/* @__PURE__ */ i("input", {
-          ...M()
-        }), o && /* @__PURE__ */ i(Q, {
-          children: /* @__PURE__ */ i(d, {
+        children: [/* @__PURE__ */ jsx("input", {
+          ...getInputProps()
+        }), file && /* @__PURE__ */ jsx(WrapperFileImage, {
+          children: /* @__PURE__ */ jsx(Image, {
             alt: "avatar",
-            src: N(o) ? o : o.preview || "",
+            src: isString(file) ? file : file.preview || "",
             width: "auto",
             height: "100%"
           })
-        }), /* @__PURE__ */ i(E, {
+        }), /* @__PURE__ */ jsx(PlaceholderStyle, {
           id: "PlaceholderStyle",
           className: "placeholder",
           sx: {
-            ...o ? {
-              bgcolor: S("#161C24", 0.72),
+            ...file ? {
+              bgcolor: alpha("#161C24", 0.72),
               color: "common.white",
               opacity: 0
             } : {
               opacity: 1
             },
-            ...(l || t) && {
+            ...(isDragReject || error) && {
               bgcolor: "error.lighter",
               borderColor: "error.light",
               color: "error.main"
             }
           },
-          children: /* @__PURE__ */ n(v, {
+          children: /* @__PURE__ */ jsxs(ContainerUploadBody, {
             className: "ContainerUploadBody",
-            children: [/* @__PURE__ */ i(G, {
-              children: /* @__PURE__ */ i(d, {
-                src: `${C}/${g}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
+            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__ */ n(U, {
-              children: [/* @__PURE__ */ i(H, {
-                children: c("upload_image.title_upload")
-              }), /* @__PURE__ */ i(Y, {
-                children: c("upload_image.description")
-              }), /* @__PURE__ */ i(k, {
-                children: c("upload_image.conditions")
+            }), /* @__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")
               })]
             })]
           })
         })]
       })
-    }), s && s]
+    }), helperText && helperText]
   });
 }
-const P = w("div")(() => ({
+const WrapperRHFUploadImage = styled$1("div")(() => ({
   width: "inherit",
   height: "inherit",
   padding: "1px"
 }));
-function q({
-  name: t,
-  ...o
+function RHFUploadImage({
+  name,
+  ...other
 }) {
   const {
-    control: s,
-    setValue: r
-  } = y(), a = D((L) => {
-    const M = L[0];
-    M && r(t, Object.assign(M, {
-      preview: URL.createObjectURL(M)
-    }));
-  }, [r]);
-  return /* @__PURE__ */ i(m, {
-    name: t,
-    control: s,
+    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: L,
+      field,
       fieldState: {
-        error: M
+        error
       }
     }) => {
-      const u = !!M && !L.value;
-      return /* @__PURE__ */ n(P, {
-        children: [/* @__PURE__ */ i(W, {
-          onDrop: a,
-          error: u,
-          ...o,
-          file: L.value
-        }), u && /* @__PURE__ */ i(I, {
-          error: !0,
+      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: M.message
+          children: error.message
         })]
       });
     }
   });
 }
 export {
-  q as R
+  RHFUploadImage as R
 };