@m4l/components 0.1.18 → 0.1.19

package/components/Image/index.c9da2d5a.js

@@ -0,0 +1,152 @@
+import { useModuleSkeleton as y } from "@m4l/core";
+import { forwardRef as C, useState as g, useRef as b, useImperativeHandle as k, useEffect as w, useMemo as I } from "react";
+import { jsx as i, Fragment as E, jsxs as S } from "react/jsx-runtime";
+import { styled as v, Skeleton as h } from "@mui/material";
+function L() {
+  return typeof window < "u" && "IntersectionObserver" in window && "isIntersecting" in window.IntersectionObserverEntry.prototype;
+}
+const O = (e) => {
+  e.forEach((t) => {
+    t.isIntersecting && t.target?.setIsVisible(!0);
+  });
+}, m = {}, V = (e) => (m[e] = m[e] || new IntersectionObserver(O, {
+  rootMargin: e + "px"
+}), m[e]);
+console.log("LAZY_LOAD_OBSERVERS", JSON.stringify(m));
+const f = C((e, t) => {
+  const {
+    height: o,
+    width: c,
+    setIsVisible: l,
+    threshold: a
+  } = e, [r] = g(V(a)), n = b(null);
+  k(t, () => n.current), w(() => (r && n.current && (n.current.setIsVisible = l, r.observe(n.current)), () => {
+    r && n.current && r.unobserve(n.current);
+  }), []);
+  const s = {
+    display: "inline-block"
+  };
+  return typeof c < "u" && (s.width = c), typeof o < "u" && (s.height = o, s.minHeight = o), /* @__PURE__ */ i("span", {
+    id: "IntersectComponent",
+    ref: n,
+    style: s
+  });
+});
+f.displayName = "IntersectComponent";
+function M(e) {
+  const {
+    children: t,
+    useIntersectionObserver: o,
+    ...c
+  } = e, [l, a] = g(!(o && L()));
+  return l ? /* @__PURE__ */ i(E, {
+    children: t
+  }) : /* @__PURE__ */ i(f, {
+    useIntersectionObserver: o,
+    setIsVisible: a,
+    ...c
+  });
+}
+const z = v("div", {
+  shouldForwardProp: (e) => e !== "width" && e !== "height"
+})(({
+  height: e,
+  width: t
+}) => ({
+  position: "relative",
+  width: t,
+  height: e,
+  minHeight: e,
+  minWidth: t,
+  "& > img ": {
+    opacity: 0,
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%"
+  },
+  "&.loaded > img": {
+    opacity: 1,
+    transition: "opacity .5s"
+  },
+  "& .skeleton": {
+    opacity: 1,
+    width: t,
+    height: e
+  },
+  "&.loaded .skeleton": {
+    opacity: 0,
+    transition: "opacity .3s"
+  }
+})), B = v("div")(() => ({
+  mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
+  WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+})), R = (e) => {
+  const {
+    skeletonVariant: t
+  } = e;
+  return t === "image" ? /* @__PURE__ */ i(B, {
+    className: "skeleton",
+    children: /* @__PURE__ */ i(h, {
+      variant: "rectangular",
+      width: "100%",
+      height: "100%"
+    })
+  }) : /* @__PURE__ */ i(h, {
+    variant: "circular",
+    width: "100%",
+    height: "100%",
+    className: "skeleton"
+  });
+};
+function j(e) {
+  const {
+    src: t,
+    alt: o,
+    useIntersectionObserver: c = !0,
+    threshold: l = 100,
+    width: a,
+    height: r,
+    skeletonVariant: n = "image"
+  } = e, s = y(), [d, u] = g("initial");
+  w(() => {
+    let p;
+    return d === "loaded" && !s && (p = setTimeout(() => {
+      u("removed");
+    }, 3e3)), () => {
+      p && clearTimeout(p);
+    };
+  }, [d, s]);
+  const x = () => {
+    u("loaded");
+  };
+  return I(() => {
+    const p = !s && d !== "initial";
+    return console.log("image skeleton", s, n), /* @__PURE__ */ i(z, {
+      width: a,
+      height: r,
+      className: "m4l_image " + (p ? "loaded" : ""),
+      children: /* @__PURE__ */ S(M, {
+        width: a,
+        height: r,
+        useIntersectionObserver: c,
+        threshold: l,
+        children: [d !== "removed" ? /* @__PURE__ */ i(R, {
+          skeletonVariant: n
+        }) : null, /* @__PURE__ */ i("img", {
+          alt: o,
+          src: t,
+          onLoad: x
+        })]
+      })
+    });
+  }, [d, s, t]);
+}
+export {
+  j as I
+};

package/components/ModalDialog/{index.0ddffae6.js → index.dce36500.js}

@@ -1,14 +1,14 @@
 import { Dialog as b, IconButton as w, Paper as v } from "@mui/material";
 import { c as D } from "../../react-draggable.20e95c61.js";
-import { u as $ } from "../../hooks/useModal/index.cdd84702.js";
+import { u as $ } from "../../hooks/useModal/index.f2101669.js";
 import { styled as s } from "@mui/material/styles";
 import { a as x } from "../../utils/index.214d9542.js";
 import { R as M } from "../Resizeable/index.45995d2b.js";
 import { useResponsiveDesktop as H } from "@m4l/graphics";
 import { useEnvironment as I } from "@m4l/core";
-import { I as C } from "../Icon/index.cbca79b0.js";
+import { I as C } from "../Icon/index.f569765b.js";
 import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { b as W, g as _ } from "../CommonActions/components/Actions/index.6b25caed.js";
+import { b as W, g as _ } from "../CommonActions/components/Actions/index.9324a339.js";
 const j = s(b)(() => ({})), k = s("div")(({ theme: o }) => ({
   display: "flex",
   flexDirection: "column",

package/components/NoItemSelected/{index.12f0ca67.js → index.9609a7f7.js}

@@ -1,6 +1,6 @@
 import { useEnvironment as r, useModuleDictionary as l, useModuleSkeleton as p } from "@m4l/core";
 import { styled as c } from "@mui/material/styles";
-import { I as d } from "../Image/index.e790b50b.js";
+import { I as d } from "../Image/index.c9da2d5a.js";
 import { Skeleton as m } from "@mui/material";
 import { useMemo as g } from "react";
 import { jsx as t, jsxs as x } from "react/jsx-runtime";

package/components/ObjectLogs/{index.64f06b3d.js → index.b044f48f.js}

@@ -1,14 +1,14 @@
 import { useState as _, useEffect as f, useCallback as d, useMemo as $ } from "react";
 import { useNetwork as k, useModuleDictionary as y, useEnvironment as h, usePaginate as O } from "@m4l/core";
 import { styled as g } from "@mui/material/styles";
-import { D as R, g as I } from "../DataGrid/index.091572bf.js";
-import { D as L } from "../formatters/DateFormatter/index.ad8d9b8e.js";
+import { D as R, g as I } from "../DataGrid/index.f7c834db.js";
+import { D as L } from "../formatters/DateFormatter/index.08d8823b.js";
 import { Tooltip as G, IconButton as M } from "@mui/material";
 import { R as S } from "../../react-json-view.f56a7f8e.js";
 import { jsx as t, jsxs as A } from "react/jsx-runtime";
-import { u as T } from "../../hooks/useModal/index.cdd84702.js";
-import { I as u } from "../Icon/index.cbca79b0.js";
-import { D as E, g as K } from "../DynamicFilter/index.7efecd5d.js";
+import { u as T } from "../../hooks/useModal/index.f2101669.js";
+import { I as u } from "../Icon/index.f569765b.js";
+import { D as E, g as K } from "../DynamicFilter/index.118d3638.js";
 const q = g("div")(() => ({
   height: "100%",
   width: "100%",

package/components/Page/index.fc660ee5.js

@@ -0,0 +1,27 @@
+import { Helmet as a } from "react-helmet-async";
+import { useLocales as c } from "@m4l/graphics";
+import { useModuleSkeleton as u } from "@m4l/core";
+import { jsxs as t, Fragment as d, jsx as r } from "react/jsx-runtime";
+const p = (l) => {
+  const {
+    children: o,
+    title: n,
+    meta: m,
+    subtitle: e
+  } = l, {
+    currentLang: s
+  } = c(), i = u();
+  return /* @__PURE__ */ t(d, {
+    children: [!i && /* @__PURE__ */ t(a, {
+      children: [/* @__PURE__ */ r("title", {
+        children: `${n}${e ? ` | ${e}` : ""} `
+      }), /* @__PURE__ */ r("html", {
+        lang: s.value
+      }), m]
+    }), o]
+  });
+};
+p.displayName = "Page";
+export {
+  p as H
+};

package/components/PaperForm/{index.d7c74064.js → index.3f8c7ef2.js}

@@ -1,7 +1,7 @@
 import { styled as r } from "@mui/material/styles";
 import { useModuleSkeleton as s } from "@m4l/core";
 import { Skeleton as d } from "@mui/material";
-import { I as l } from "../Icon/index.cbca79b0.js";
+import { I as l } from "../Icon/index.f569765b.js";
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
 const c = r("div")(({
   theme: i

package/components/Period/{index.8423f865.js → index.a53032d9.js}

@@ -1,14 +1,13 @@
 import { useModuleDictionary as Y, useModuleSkeleton as R, useEnvironment as T } from "@m4l/core";
 import { styled as a, Skeleton as d, Autocomplete as $, TextField as x } from "@mui/material";
 import { useMemo as D } from "react";
-import { I as v } from "../Icon/index.cbca79b0.js";
+import { I as v } from "../Icon/index.f569765b.js";
 import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { g as O } from "../CommonActions/components/Actions/index.6b25caed.js";
+import { g as O } from "../CommonActions/components/Actions/index.9324a339.js";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.3debb608.js";
 import "react-hook-form";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.1688a07c.js";
+import "../../contexts/ModalContext/index.b84b990b.js";
 import "@mui/lab";
 const S = a("div")(({
   theme: t,
@@ -70,7 +69,7 @@ const S = a("div")(({
   textAlign: "left"
 }));
 var i = /* @__PURE__ */ ((t) => (t[t.YEARS = 0] = "YEARS", t[t.MONTHS = 1] = "MONTHS", t[t.DAYS = 2] = "DAYS", t))(i || {});
-const F = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0 ? i.YEARS : t.months && t.months > 0 ? i.MONTHS : t.days && t.days > 0 ? i.DAYS : i.YEARS : i.YEARS, _ = (t) => t ? t.singleValue !== void 0 ? t.singleValue : t.years && t.years > 0 ? t.years : t.months && t.months > 0 ? t.months : t.days && t.days > 0 ? t.days : "" : "", B = (t) => {
+const F = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0 ? i.YEARS : t.months && t.months > 0 ? i.MONTHS : t.days && t.days > 0 ? i.DAYS : i.YEARS : i.YEARS, _ = (t) => t ? t.singleValue !== void 0 ? t.singleValue : t.years && t.years > 0 ? t.years : t.months && t.months > 0 ? t.months : t.days && t.days > 0 ? t.days : "" : "", z = (t) => {
   const {
     value: s,
     onChange: b,
@@ -151,10 +150,10 @@ const F = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0
     })]
   }));
 };
-function J() {
+function B() {
   return ["period"].concat(O());
 }
 export {
-  B as P,
-  J as g
+  z as P,
+  B as g
 };

package/components/formatters/BooleanFormatter/{index.cca53b7f.js → index.3ec56305.js}

@@ -1,6 +1,6 @@
 import { useModuleDictionary as u, useEnvironment as _, getPropertyByString as p } from "@m4l/core";
 import l from "react";
-import { I as d } from "../../Icon/index.cbca79b0.js";
+import { I as d } from "../../Icon/index.f569765b.js";
 import { jsx as t } from "react/jsx-runtime";
 function g(r) {
   const {

package/components/formatters/DateFormatter/{index.ad8d9b8e.js → index.08d8823b.js}

@@ -1,6 +1,6 @@
 import c from "react";
 import { useEnvironment as p, useHostTools as u, getPropertyByString as d } from "@m4l/core";
-import "../../Icon/index.cbca79b0.js";
+import "../../Icon/index.f569765b.js";
 import "@mui/material/styles";
 import { jsx as f, Fragment as y } from "react/jsx-runtime";
 function g(a) {

package/components/formatters/{index.55856d65.js → index.6959c2de.js}

@@ -1,7 +1,7 @@
 import l from "react";
 import { jsx as m, Fragment as u } from "react/jsx-runtime";
 import { getPropertyByString as i } from "@m4l/core";
-import "../Icon/index.cbca79b0.js";
+import "../Icon/index.f569765b.js";
 import "@mui/material/styles";
 function _(e) {
   const {

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

@@ -0,0 +1,146 @@
+import { useModuleDictionary as F, useModuleSkeleton as H } from "@m4l/core";
+import { useFormContext as M, Controller as $ } from "react-hook-form";
+import { Skeleton as O, Autocomplete as q, TextField as E } from "@mui/material";
+import { styled as l } from "@mui/material/styles";
+import { I as w } from "../../Image/index.c9da2d5a.js";
+import { useMemo as V } from "react";
+import { jsxs as T, jsx as i } from "react/jsx-runtime";
+const j = l("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+})), D = l("div")(({
+  theme: e
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: e.spacing(2),
+  alignItems: "center",
+  height: `${e.spacing(4.5)}`,
+  border: `1px solid ${e.palette.divider}`,
+  borderRadius: `${e.spacing(1)}`,
+  padding: `0 ${e.spacing(2)}`,
+  [e.breakpoints.down("md")]: {
+    width: "100%"
+  }
+})), K = l("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  },
+  "& .m4l_image": {
+    marginLeft: e.spacing(1.5)
+  }
+})), P = l("li")(({
+  theme: e
+}) => ({
+  "& .m4l_image": {
+    marginRight: e.spacing(1.5)
+  }
+}));
+function U(e, a, d) {
+  return function(n, s) {
+    return /* @__PURE__ */ T(P, {
+      ...n,
+      children: [/* @__PURE__ */ i(w, {
+        src: e(s),
+        width: a,
+        height: d
+      }), n.key]
+    });
+  };
+}
+function Y(e) {
+  const {
+    name: a,
+    getOptionLabel: d,
+    isOptionEqualToValue: u,
+    label: n,
+    skeletonWidth: s = 100,
+    skeletonHeight: b = "18px",
+    options: I,
+    disabled: v,
+    getOptionUrlImage: r,
+    imageWidth: c = "24px",
+    imageHeight: m = "24px",
+    onOpen: k,
+    onClose: _,
+    loading: L,
+    ...C
+  } = e, {
+    getLabel: g
+  } = F(), R = H(), {
+    control: S
+  } = M(), h = V(() => r !== void 0, [r]), y = (t) => t == null ? "" : d(t), f = (t) => t == null || r === void 0 ? "" : r(t), A = (t, o) => o == null || t === null ? !1 : u(t, o);
+  return R ? /* @__PURE__ */ i(j, {
+    children: /* @__PURE__ */ T(D, {
+      children: [/* @__PURE__ */ i(O, {
+        variant: "text",
+        width: s,
+        height: b
+      }, "sk1"), /* @__PURE__ */ i(O, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }, "sk2")]
+    })
+  }) : /* @__PURE__ */ i($, {
+    name: a,
+    control: S,
+    render: ({
+      field: {
+        onChange: t,
+        value: o
+      },
+      fieldState: {
+        error: x
+      }
+    }) => /* @__PURE__ */ i(K, {
+      className: "m4l_rhf_autocomplete",
+      children: /* @__PURE__ */ i(q, {
+        options: I,
+        getOptionLabel: y,
+        isOptionEqualToValue: A,
+        disableClearable: !0,
+        value: o || null,
+        onOpen: k,
+        onClose: _,
+        onChange: (p, W) => {
+          t(W);
+        },
+        loading: L,
+        loadingText: g("rhf_autocomplete.loading_options"),
+        disabled: v,
+        noOptionsText: g("rhf_autocomplete.no_options"),
+        renderOption: h ? U(f, c, m) : void 0,
+        renderInput: (p) => /* @__PURE__ */ i(E, {
+          ...p,
+          label: n,
+          fullWidth: !0,
+          SelectProps: {
+            native: !0
+          },
+          InputProps: {
+            ...p.InputProps,
+            startAdornment: h && o ? /* @__PURE__ */ i(w, {
+              src: f(o),
+              width: c,
+              height: m
+            }, "ImageTextField") : null
+          },
+          autoComplete: "off",
+          error: !!x,
+          helperText: x?.message,
+          ...C
+        })
+      })
+    })
+  });
+}
+export {
+  Y as R
+};

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

@@ -0,0 +1,51 @@
+import { useState as o, useEffect as p } from "react";
+import { useNetwork as y, getPropertyByString as A } from "@m4l/core";
+import { useFormContext as L } from "react-hook-form";
+import { R as k } from "../RHFAutocomplete/index.b7f11146.js";
+import { jsx as w } from "react/jsx-runtime";
+function j(l) {
+  const {
+    name: n,
+    endPoint: e,
+    timeout: f = 5e3,
+    parms: s,
+    resultField: c = "data",
+    isRemote: d = !0,
+    ...g
+  } = l, {
+    setValue: O
+  } = L(), {
+    networkOperation: R
+  } = y(), [F, r] = o([]), [h, i] = o(!1), [m, u] = o(!1), t = h && !m && !!e;
+  return p(() => {
+    m && (u(!1), r([]), O(n, null));
+  }, [s, e]), p(() => {
+    let a = !0;
+    if (!!t)
+      return R({
+        method: "GET",
+        endPoint: e,
+        timeout: f,
+        parms: s,
+        isRemote: d
+      }).then((x) => {
+        a && (r(A(x, c)), u(!0));
+      }), () => {
+        a = !1;
+      };
+  }, [t]), console.log("Loading", t), /* @__PURE__ */ w(k, {
+    name: n,
+    loading: t,
+    options: F,
+    onOpen: () => {
+      i(!0);
+    },
+    onClose: () => {
+      i(!1);
+    },
+    ...g
+  });
+}
+export {
+  j as R
+};

package/components/hook-form/RHFCheckbox/index.6a40e25f.js

@@ -0,0 +1,55 @@
+import { useFormContext as i, Controller as c } from "react-hook-form";
+import { styled as m } from "@mui/material/styles";
+import { styled as p, Skeleton as d, FormControlLabel as u, Checkbox as f } from "@mui/material";
+import { useModuleSkeleton as g } from "@m4l/core";
+import { jsx as e, jsxs as k, Fragment as x } from "react/jsx-runtime";
+const h = p("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+})), C = () => /* @__PURE__ */ e(h, {
+  children: /* @__PURE__ */ e(d, {
+    variant: "rectangular"
+  })
+}), y = m("p")(({
+  theme: r
+}) => ({
+  ...r.typography.caption,
+  color: r.palette.error.main,
+  marginRight: 14,
+  marginLeft: 14
+}));
+function L({
+  name: r,
+  sizeCheck: n = "small",
+  ...l
+}) {
+  const {
+    control: s
+  } = i(), a = g();
+  return /* @__PURE__ */ e(u, {
+    control: /* @__PURE__ */ e(c, {
+      name: r,
+      control: s,
+      render: ({
+        field: t,
+        fieldState: {
+          error: o
+        }
+      }) => a ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ k(x, {
+        children: [/* @__PURE__ */ e(f, {
+          size: n,
+          ...t,
+          checked: t.value
+        }), o?.message && /* @__PURE__ */ e(y, {
+          children: o?.message + ""
+        })]
+      })
+    }),
+    ...l
+  });
+}
+export {
+  L as R
+};

package/components/hook-form/RHFDateTime/{index.fc5cbafe.js → index.5ed774e3.js}

@@ -1,10 +1,10 @@
-import { useFormContext as c, Controller as x } from "react-hook-form";
-import { Skeleton as h, TextField as g } from "@mui/material";
-import { styled as k } from "@mui/material/styles";
-import { DateTimePicker as F } from "@mui/x-date-pickers";
-import { useModuleSkeleton as v, useEnvironment as C } from "@m4l/core";
+import { useFormContext as u, Controller as c } from "react-hook-form";
+import { Skeleton as h, TextField as x } from "@mui/material";
+import { styled as g } from "@mui/material/styles";
+import { DateTimePicker as k } from "@mui/x-date-pickers";
+import { useModuleSkeleton as F, useEnvironment as v } from "@m4l/core";
 import { jsx as e } from "react/jsx-runtime";
-const T = k("div")(({
+const C = g("div")(({
   theme: t
 }) => ({
   display: "flex",
@@ -14,46 +14,44 @@ const T = k("div")(({
   padding: "12px 14px",
   borderRadius: t.spacing(1)
 }));
-function D(t) {
+function w(t) {
   const {
     name: i,
     autoComplete: a = "off",
-    skeletonProps: s = {}
-  } = t, {
-    width: m = "100%",
-    height: l = 14
-  } = s, d = v(), {
-    control: p
-  } = c(), {
+    skeletonWidth: m = "100%",
+    skeletonHeight: s = 14
+  } = t, l = F(), {
+    control: d
+  } = u(), {
     dfnsFormat: {
-      datetime_format: f,
-      datetime_mask: u
+      datetime_format: p,
+      datetime_mask: f
     }
-  } = C();
-  return d ? /* @__PURE__ */ e(T, {
+  } = v();
+  return l ? /* @__PURE__ */ e(C, {
     children: /* @__PURE__ */ e(h, {
       variant: "text",
       width: m,
-      height: l
+      height: s
     })
-  }) : /* @__PURE__ */ e(x, {
+  }) : /* @__PURE__ */ e(c, {
     name: i,
-    control: p,
+    control: d,
     render: ({
       field: r,
       fieldState: {
         error: n
       }
-    }) => /* @__PURE__ */ e(F, {
+    }) => /* @__PURE__ */ e(k, {
       ampm: !1,
-      inputFormat: f,
-      mask: u,
+      inputFormat: p,
+      mask: f,
       label: "",
       value: r.value,
       onChange: (o) => {
         isNaN(o) ? r.onChange(void 0) : r.onChange(o);
       },
-      renderInput: (o) => /* @__PURE__ */ e(g, {
+      renderInput: (o) => /* @__PURE__ */ e(x, {
         autoComplete: a,
         fullWidth: !0,
         error: !!n,
@@ -64,5 +62,5 @@ function D(t) {
   });
 }
 export {
-  D as R
+  w as R
 };

package/components/hook-form/RHFPeriod/{index.0b982ae8.js → index.421ace38.js}

@@ -1,7 +1,7 @@
 import { styled as m } from "@mui/material";
 import { useFormContext as a, Controller as l } from "react-hook-form";
 import { E as f } from "../../ErrorLabel/index.c8615f16.js";
-import { P as p } from "../../Period/index.8423f865.js";
+import { P as p } from "../../Period/index.a53032d9.js";
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 const d = m("div")(({
   theme: e