@m4l/components 0.1.25 → 0.1.27

package/components/CommonActions/components/ActionCancel/{index.9cfffe65.js → index.431160ba.js}

@@ -1,5 +1,5 @@
 import { useModuleDictionary as n } from "@m4l/core";
-import { B as r } from "../../../mui_extended/Button/index.2afaa420.js";
+import { B as r } from "../../../mui_extended/Button/index.51dae0bb.js";
 import { jsx as i } from "react/jsx-runtime";
 const m = (o) => {
   const {

package/components/CommonActions/components/ActionFormCancel/{index.ef60c2ee.js → index.6a0f34aa.js}

@@ -2,9 +2,9 @@ import { useFormContext as f, useFormState as p } from "react-hook-form";
 import { useNavigate as C } from "react-router-dom";
 import { useModuleDictionary as g, useModuleSkeleton as d } from "@m4l/core";
 import { Skeleton as k } from "@mui/material";
-import { B as _ } from "../../../mui_extended/Button/index.2afaa420.js";
+import { B as _ } from "../../../mui_extended/Button/index.51dae0bb.js";
 import { useCallback as v } from "react";
-import { u as h } from "../../../../hooks/useModal/index.b1f96279.js";
+import { u as h } from "../../../../hooks/useModal/index.34f5978e.js";
 import { jsx as r } from "react/jsx-runtime";
 function A(n) {
   const {

package/components/CommonActions/components/ActionIntro/{index.f8403e8e.js → index.85557b90.js}

@@ -1,5 +1,5 @@
 import { useModuleDictionary as r } from "@m4l/core";
-import { B as n } from "../../../mui_extended/Button/index.2afaa420.js";
+import { B as n } from "../../../mui_extended/Button/index.51dae0bb.js";
 import { jsx as i } from "react/jsx-runtime";
 const e = (o) => {
   const {

package/components/CommonActions/components/Actions/{index.309d3b6f.js → index.edeb05c2.js}

@@ -6,17 +6,17 @@ import "@mui/material/Button";
 import "react-hook-form";
 import "react-router-dom";
 import { useState as W, useMemo as w, forwardRef as st, useRef as B, useImperativeHandle as rt, useEffect as at, useCallback as j } from "react";
-import "../../../../contexts/ModalContext/index.f17b3653.js";
+import "../../../../contexts/ModalContext/index.9ebc793c.js";
 import "@mui/lab";
-import { I as y } from "../../../mui_extended/IconButton/index.4b5ce8b5.js";
-import { u as I, a as lt, O as ct } from "../../../DataGrid/index.fe073438.js";
-import { P as dt } from "../../../mui_extended/Pager/index.a23cf8de.js";
+import { I as y } from "../../../mui_extended/IconButton/index.a321e5cb.js";
+import { u as I, a as lt, O as ct } from "../../../DataGrid/index.2ce9da7d.js";
+import { P as dt } from "../../../mui_extended/Pager/index.1dc45f5e.js";
 import { D as pt } from "../../../../react-data-grid.d46d625e.js";
-import { u as gt } from "../../../../hooks/useModal/index.b1f96279.js";
-import { A as ft } from "../ActionCancel/index.9cfffe65.js";
-import { A as ut } from "../ActionIntro/index.f8403e8e.js";
-import { P as mt } from "../../../mui_extended/Popover/index.12b0ab55.js";
-import { I as N } from "../../../Icon/index.f569765b.js";
+import { u as gt } from "../../../../hooks/useModal/index.34f5978e.js";
+import { A as ft } from "../ActionCancel/index.431160ba.js";
+import { A as ut } from "../ActionIntro/index.85557b90.js";
+import { P as mt } from "../../../mui_extended/Popover/index.cb2ccc66.js";
+import { I as N } from "../../../Icon/index.619c31c4.js";
 import { useResponsiveDesktop as ht } from "@m4l/graphics";
 const _t = p("div")(({
   theme: t

package/components/DataGrid/{index.fe073438.js → index.2ce9da7d.js}

@@ -6,9 +6,9 @@ import { HTML5Backend as ge } from "react-dnd-html5-backend";
 import { SvgIcon as B, Checkbox as fe, InputBase as he, Skeleton as pe } from "@mui/material";
 import { jsx as d, jsxs as Q } from "react/jsx-runtime";
 import { voidFunction as I, useModuleDictionary as we, useModuleSkeleton as me } from "@m4l/core";
-import { A as ye, a as Ce } from "../CommonActions/components/Actions/index.309d3b6f.js";
-import { g as be, d as ve } from "../ModalDialog/index.a24ca508.js";
-import { g as xe, d as Re } from "../mui_extended/Pager/index.a23cf8de.js";
+import { A as ye, a as Ce } from "../CommonActions/components/Actions/index.edeb05c2.js";
+import { g as be, d as ve } from "../ModalDialog/index.ad61757f.js";
+import { g as xe, d as Re } from "../mui_extended/Pager/index.1dc45f5e.js";
 const Se = A("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/components/DynamicFilter/{index.d0753667.js → index.e1d4a948.js}

@@ -11,27 +11,27 @@ import "../hook-form/RHFCheckbox/index.6dcec9e2.js";
 import { alpha as Ke, styled as be, Skeleton as Fe, MenuItem as ze, useTheme as Ye, Popper as Ge } from "@mui/material";
 import "@mui/x-date-pickers";
 import { R as ee } from "../hook-form/RHFDateTime/index.9231a7c7.js";
-import { R as Y } from "../hook-form/RHFTextField/index.ba2a8f67.js";
-import { I as he } from "../Icon/index.f569765b.js";
-import "../hook-form/RHFPeriod/index.067790c9.js";
+import { R as Y } from "../hook-form/RHFTextField/index.f9aaaa90.js";
+import { I as he } from "../Icon/index.619c31c4.js";
+import "../hook-form/RHFPeriod/index.e08fb1ab.js";
 import "../ErrorLabel/index.c8615f16.js";
-import "../Period/index.080a987d.js";
-import { L as Ue, b as Je, g as Qe } from "../CommonActions/components/Actions/index.309d3b6f.js";
+import "../Period/index.81de7941.js";
+import { L as Ue, b as Je, g as Qe } from "../CommonActions/components/Actions/index.edeb05c2.js";
 import "@mui/material/Button";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.f17b3653.js";
+import "../../contexts/ModalContext/index.9ebc793c.js";
 import "@mui/lab";
 import "lodash/isString";
 import "react-dropzone";
 import "../Image/index.c9da2d5a.js";
-import "../hook-form/RHFUpload/index.6347159a.js";
-import { I as G } from "../mui_extended/IconButton/index.4b5ce8b5.js";
+import "../hook-form/RHFUpload/index.ec4d5326.js";
+import { I as G } from "../mui_extended/IconButton/index.a321e5cb.js";
 import "simplebar/dist/simplebar.min.css";
-import { F as te } from "../mui_extended/Button/index.2afaa420.js";
-import { P as Xe } from "../mui_extended/Popover/index.12b0ab55.js";
+import { F as te } from "../mui_extended/Button/index.51dae0bb.js";
+import { P as Xe } from "../mui_extended/Popover/index.cb2ccc66.js";
 import { R as Ze } from "../contexts/RHFormContext/index.33dba822.js";
-import { A as et } from "../CommonActions/components/ActionCancel/index.9cfffe65.js";
-import { A as tt } from "../CommonActions/components/ActionIntro/index.f8403e8e.js";
+import { A as et } from "../CommonActions/components/ActionCancel/index.431160ba.js";
+import { A as tt } from "../CommonActions/components/ActionIntro/index.85557b90.js";
 import { useResponsiveDesktop as rt } from "@m4l/graphics";
 const re = h("div")(({
   theme: e

package/components/Icon/{index.f569765b.js → index.619c31c4.js}

@@ -1,16 +1,16 @@
-import { styled as c } from "@mui/material";
-import { useState as C, useMemo as l, useEffect as g } from "react";
-import { useTheme as m } from "@mui/material/styles";
+import { styled as r } from "@mui/material";
+import { useState as l, useMemo as g, useEffect as m } from "react";
+import { useTheme as D } from "@mui/material/styles";
 import { g as I } from "../../utils/index.214d9542.js";
 import { jsx as o } from "react/jsx-runtime";
-const d = c("div", {
-  shouldForwardProp: (t) => t !== "src" && t !== "sizeIcon" && t !== "bgColor" && t !== "rotate"
+const d = r("div", {
+  shouldForwardProp: (t) => t !== "src" && t !== "size" && t !== "bgColor" && t !== "rotationAngle" && t !== "angleTransition"
 })(({
   size: t,
   src: L,
   bgColor: e,
-  rotate: i,
-  theme: s
+  rotationAngle: s,
+  angleTransition: i
 }) => ({
   maskPosition: "center!important",
   maskRepeat: "no-repeat!important",
@@ -20,24 +20,25 @@ const d = c("div", {
   backgroundColor: e,
   mask: `url('data:image/svg+xml;base64,${L}')`,
   WebkitMask: `url('data:image/svg+xml;base64,${L}')`,
-  transition: s.transitions.create("transform", {
-    duration: s.transitions.duration.shorter
-  }),
-  ...i && {
-    transform: "rotate(180deg)"
+  ...s && {
+    transform: `rotate(${s}deg)`
+  },
+  ...i && s && {
+    transition: `transform ${i}s ease-in-out`
   }
-})), D = c("div")(() => ({
+})), N = r("div")(() => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center"
 }));
-function b(t) {
+function T(t) {
   const {
     src: L,
     size: e = "small",
-    bgColor: i = "action.active",
-    rotate: s = !1
-  } = t, [r, n] = C(void 0), w = m(), u = l(() => {
+    bgColor: s = "action.active",
+    rotationAngle: i,
+    angleTransition: n
+  } = t, [c, w] = l(void 0), j = D(), u = g(() => {
     switch (e) {
       case "extra-small":
         return "12px";
@@ -50,25 +51,26 @@ function b(t) {
     }
     return e;
   }, [e]);
-  return g(() => {
+  return m(() => {
     let a = !0;
     return async function() {
       await fetch(L).then((M) => M.text() || "").then((M) => {
         M = M.match(
           /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
-        )?.toString() || "", a && n(window.btoa(M));
+        )?.toString() || "", a && w(window.btoa(M));
       }).catch((M) => {
       });
     }(), function() {
       a = !1;
     };
-  }, [L]), /* @__PURE__ */ o(D, {
+  }, [L]), /* @__PURE__ */ o(N, {
     className: "m4l_icon",
-    children: r ? /* @__PURE__ */ o(d, {
-      src: r,
+    children: c ? /* @__PURE__ */ o(d, {
+      src: c,
       size: u,
-      bgColor: I(w.palette, i),
-      rotate: s
+      bgColor: I(j.palette, s),
+      rotationAngle: i,
+      angleTransition: n
     }) : /* @__PURE__ */ o("img", {
       src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==",
       alt: "icon_svg",
@@ -78,5 +80,5 @@ function b(t) {
   });
 }
 export {
-  b as I
+  T as I
 };

package/components/Icon/types.d.ts

@@ -3,7 +3,8 @@ export interface IconProps {
     src: string;
     bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
     size?: SizeIcon;
-    rotate?: boolean;
+    rotationAngle?: number;
+    angleTransition?: number;
 }
 export declare type WrapperPlaceHolderProps = {
     size: string;

package/components/LanguagePopover/styles.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
 export declare const LabelItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerProgress: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerMenuItems: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ModalDialog/{index.a24ca508.js → index.ad61757f.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.b1f96279.js";
+import { u as $ } from "../../hooks/useModal/index.34f5978e.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.f569765b.js";
+import { I as C } from "../Icon/index.619c31c4.js";
 import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { b as W, g as _ } from "../CommonActions/components/Actions/index.309d3b6f.js";
+import { b as W, g as _ } from "../CommonActions/components/Actions/index.edeb05c2.js";
 const j = s(b)(() => ({})), k = s("div")(({ theme: o }) => ({
   display: "flex",
   flexDirection: "column",

package/components/ObjectLogs/{index.a7d36267.js → index.6ebaec71.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.fe073438.js";
-import { D as L } from "../formatters/DateFormatter/index.08d8823b.js";
+import { D as R, g as I } from "../DataGrid/index.2ce9da7d.js";
+import { D as L } from "../formatters/DateFormatter/index.1b9baacc.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.b1f96279.js";
-import { I as u } from "../Icon/index.f569765b.js";
-import { D as E, g as K } from "../DynamicFilter/index.d0753667.js";
+import { u as T } from "../../hooks/useModal/index.34f5978e.js";
+import { I as u } from "../Icon/index.619c31c4.js";
+import { D as E, g as K } from "../DynamicFilter/index.e1d4a948.js";
 const q = g("div")(() => ({
   height: "100%",
   width: "100%",

package/components/Page/index.4237c241.js

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

package/components/PaperForm/{index.3f8c7ef2.js → index.ec9cb8c9.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.f569765b.js";
+import { I as l } from "../Icon/index.619c31c4.js";
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
 const c = r("div")(({
   theme: i

package/components/Period/{index.080a987d.js → index.81de7941.js}

@@ -1,13 +1,13 @@
-import { useModuleDictionary as O, useModuleSkeleton as P, useEnvironment as R } from "@m4l/core";
-import { styled as a, Skeleton as u, Autocomplete as T, TextField as b } from "@mui/material";
-import { useMemo as $ } from "react";
-import { I as A } from "../Icon/index.f569765b.js";
+import { useModuleDictionary as k, useModuleSkeleton as O, useEnvironment as P } from "@m4l/core";
+import { styled as a, Skeleton as u, Autocomplete as R, TextField as S } from "@mui/material";
+import { useMemo as T } from "react";
+import { I as A } from "../Icon/index.619c31c4.js";
 import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { g as w } from "../CommonActions/components/Actions/index.309d3b6f.js";
+import { g as $ } from "../CommonActions/components/Actions/index.edeb05c2.js";
 import "@mui/material/Button";
 import "react-hook-form";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.f17b3653.js";
+import "../../contexts/ModalContext/index.9ebc793c.js";
 import "@mui/lab";
 const M = a("div")(({
   theme: t,
@@ -40,7 +40,7 @@ const M = a("div")(({
   width: "1px",
   height: "20px",
   backgroundColor: t.palette.divider
-})), D = a("div", {
+})), w = a("div", {
   shouldForwardProp: (t) => t !== "readOnly"
 })(({
   theme: t,
@@ -57,7 +57,7 @@ const M = a("div")(({
   },
   padding: t.spacing(0.5, 1),
   borderRadius: "4px"
-})), F = a("div")(({
+})), D = a("div")(({
   theme: t
 }) => ({
   ...t.typography.body2,
@@ -67,7 +67,7 @@ const M = a("div")(({
   overflow: "hidden",
   padding: "5px",
   textAlign: "left"
-})), H = a("div")(({
+})), F = a("div")(({
   theme: t
 }) => ({
   ...t.typography.body2,
@@ -79,7 +79,7 @@ const M = a("div")(({
   textAlign: "left"
 }));
 var r = /* @__PURE__ */ ((t) => (t[t.YEARS = 0] = "YEARS", t[t.MONTHS = 1] = "MONTHS", t[t.DAYS = 2] = "DAYS", t))(r || {});
-const _ = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0 ? r.YEARS : t.months && t.months > 0 ? r.MONTHS : t.days && t.days > 0 ? r.DAYS : r.YEARS : r.YEARS, N = (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 : "" : "", J = (t) => {
+const H = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0 ? r.YEARS : t.months && t.months > 0 ? r.MONTHS : t.days && t.days > 0 ? r.DAYS : r.YEARS : r.YEARS, N = (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 : "" : "", J = (t) => {
   const {
     value: i,
     onChange: p,
@@ -89,28 +89,28 @@ const _ = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0
     skeletonHeight: h = "18px"
   } = t, {
     getLabel: d
-  } = O(), Y = P(), f = _(i), x = N(i), m = (e, o) => {
+  } = k(), Y = O(), f = H(i), x = N(i), m = (e, o) => {
     const s = {
       selPeriodTime: e,
       singleValue: o
     };
     o !== "" && o > 0 && (s.years = 0, s.months = 0, s.days = 0, e === r.YEARS && (s.years = o), e === r.MONTHS && (s.months = o), e === r.DAYS && (s.days = o)), p(s);
-  }, k = (e) => {
+  }, _ = (e) => {
     e && m(e.id, x);
   }, {
     host_static_assets: y,
     environment_assets: v
-  } = R(), S = $(() => [{
+  } = P(), b = T(() => [{
     id: 0,
-    label: d("period.years")
+    label: d("period.label_days")
   }, {
     id: 1,
-    label: d("period.months")
+    label: d("period.label_months")
   }, {
     id: 2,
-    label: d("period.days")
+    label: d("period.label_years")
   }], [d]);
-  return Y ? /* @__PURE__ */ c(D, {
+  return Y ? /* @__PURE__ */ c(w, {
     readOnly: l,
     children: [/* @__PURE__ */ n(u, {
       variant: "text",
@@ -131,14 +131,14 @@ const _ = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0
   }) : (l && (i.selPeriodTime, i.singleValue, A, `${y}${v}`), /* @__PURE__ */ c(M, {
     error: C,
     readOnly: l,
-    children: [/* @__PURE__ */ n(T, {
-      options: S,
-      value: S[f],
+    children: [/* @__PURE__ */ n(R, {
+      options: b,
+      value: b[f],
       disableClearable: !0,
       onChange: (e, o) => {
-        k(o);
+        _(o);
       },
-      renderInput: (e) => /* @__PURE__ */ n(b, {
+      renderInput: (e) => /* @__PURE__ */ n(S, {
         ...e,
         fullWidth: !0,
         variant: "standard",
@@ -151,7 +151,7 @@ const _ = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0
         },
         autoComplete: "off"
       }, `tx_async_${e.id}`)
-    }), /* @__PURE__ */ n(g, {}), /* @__PURE__ */ n(b, {
+    }), /* @__PURE__ */ n(g, {}), /* @__PURE__ */ n(S, {
       type: "number",
       variant: "standard",
       value: x,
@@ -167,7 +167,7 @@ const _ = (t) => t ? t.selPeriodTime ? t.selPeriodTime : t.years && t.years > 0
   }));
 };
 function Q() {
-  return ["period"].concat(w());
+  return ["period"].concat($());
 }
 export {
   J as P,

package/components/PropertyValue/{index.ab3dd7e9.js → index.dfcfe1ba.js}

@@ -1,13 +1,13 @@
-import { styled as p } from "@mui/material/styles";
+import { styled as a } from "@mui/material/styles";
 import { Skeleton as g } from "@mui/material";
 import { jsx as n, jsxs as f } from "react/jsx-runtime";
 import { useResponsiveDesktop as c } from "@m4l/graphics";
 import { useModuleSkeleton as h } from "@m4l/core";
-const y = p("div", {
+const y = a("div", {
   shouldForwardProp: (r) => r !== "propertyWidth" && r !== "propertyHeight" && r !== "isForm"
 })(({
   propertyWidth: r,
-  isForm: i,
+  isForm: o,
   theme: t
 }) => ({
   display: "grid",
@@ -16,20 +16,20 @@ const y = p("div", {
   width: "100%",
   padding: `${t.spacing(1)} ${t.spacing(2)}`,
   ":hover": {
-    backgroundColor: i ? "unset" : t.palette.grid?.rowHover
+    backgroundColor: o ? "unset" : t.palette.grid?.rowHover
   },
-  borderBottom: i ? "none" : `1px solid ${t.palette.divider}`,
+  borderBottom: o ? "none" : `1px solid ${t.palette.divider}`,
   flexDirection: "column",
   [t.breakpoints.up("sm")]: {
     gridTemplateColumns: r ? `${r}px 1fr` : "150px 1fr",
     gap: t.spacing(2),
     alignItems: "center"
   }
-})), x = p("div", {
+})), x = a("div", {
   shouldForwardProp: (r) => r !== "propertyWidth" && r !== "propertyHeight" && r !== "isForm"
 })(({
   propertyWidth: r,
-  isForm: i,
+  isForm: o,
   theme: t
 }) => ({
   width: "100%",
@@ -42,7 +42,7 @@ const y = p("div", {
   justifyContent: "flex-start",
   position: "relative",
   [t.breakpoints.up("sm")]: {
-    borderRight: i ? "none" : `1px solid ${t.palette.divider}`,
+    borderRight: o ? "none" : `1px solid ${t.palette.divider}`,
     paddingRight: t.spacing(2),
     textAlign: "right",
     width: r || "150px",
@@ -51,11 +51,11 @@ const y = p("div", {
   },
   overflow: "hidden",
   overflowWrap: "break-word"
-})), v = p("div", {
+})), v = a("div", {
   shouldForwardProp: (r) => r !== "valueWidth" && r !== "valueHeight" && r !== "withGrid"
 })(({
   valueWidth: r,
-  valueHeight: i,
+  valueHeight: o,
   theme: t
 }) => ({
   flexGrow: "1",
@@ -65,14 +65,14 @@ const y = p("div", {
   padding: "1px",
   maxWidth: `${r}%`,
   width: `${r}%`,
-  height: i,
+  height: o,
   marginTop: t.spacing(1),
   [t.breakpoints.up("sm")]: {
     marginTop: "0px"
   },
-  overflow: "hidden",
+  overflow: "auto",
   overflowWrap: "break-word"
-})), m = p("div")(() => ({
+})), m = a("div")(() => ({
   display: "flex",
   justifyContent: "flex-end"
 }));
@@ -87,26 +87,27 @@ function w() {
 }
 function C(r) {
   const {
-    property: i,
+    property: o,
     value: t,
-    propertyWidth: a = 200,
-    valueHeight: d = "auto",
+    propertyWidth: l = 200,
+    valueHeight: s = "auto",
     valueWidth: e = "100",
-    isForm: l
-  } = r, o = c(), s = h(), u = (() => e === "75" && o ? "75" : e === "75" && !o ? "100" : e === "50" && o ? "50" : e === "50" && !o ? "100" : e === "25" && o || e === "12.5" && o ? `${e}` : e === "25" && !o ? "50" : e === "12.5" && !o ? "25" : "100")();
+    valueWidthMobile: p,
+    isForm: d
+  } = r, i = c(), u = h();
   return /* @__PURE__ */ f(y, {
     id: "WrapperPropertyValue",
-    isForm: l,
-    propertyWidth: a,
+    isForm: d,
+    propertyWidth: l,
     children: [/* @__PURE__ */ n(x, {
       id: "Property",
-      isForm: l,
-      propertyWidth: a,
-      children: s ? /* @__PURE__ */ n(w, {}) : i
+      isForm: d,
+      propertyWidth: l,
+      children: u ? /* @__PURE__ */ n(w, {}) : o
     }), /* @__PURE__ */ n(v, {
       id: "Value",
-      valueWidth: u,
-      valueHeight: d,
+      valueWidth: (() => p && !i ? p : e === 75 && i ? 75 : e === 75 && !i ? 100 : e === 50 && i ? 50 : e === 50 && !i ? 100 : e === 25 && i || e === 12.5 && i ? e : e === 25 && !i ? 50 : e === 12.5 && !i ? 25 : 100)(),
+      valueHeight: s,
       children: t
     })]
   });

package/components/PropertyValue/styles.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import { WrapperValueProps } from './types';
 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 Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperValueProps, 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

@@ -4,9 +4,9 @@ export interface PropertyProps {
 }
 export interface ValueProps {
     valueHeight?: number | string;
-    valueWidth?: valueWidthType;
+    valueWidth?: number;
+    valueWidthMobile?: number;
 }
-export declare type valueWidthType = '100' | '75' | '50' | '25' | '12.5';
 export interface PropertyValueProps extends PropertyProps, ValueProps {
     property: string;
     value: number | string | ReactNode;
@@ -14,4 +14,4 @@ export interface PropertyValueProps extends PropertyProps, ValueProps {
 }
 export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
 export declare type WrapperPropertyProps = WrapperProps;
-export declare type WrapperValueProps = ValueProps;
+export declare type WrapperValueProps = Omit<ValueProps, 'valueWidthMobile'>;

package/components/formatters/BooleanFormatter/{index.3ec56305.js → index.8da35c9c.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.f569765b.js";
+import { I as d } from "../../Icon/index.619c31c4.js";
 import { jsx as t } from "react/jsx-runtime";
 function g(r) {
   const {

package/components/formatters/DateFormatter/{index.08d8823b.js → index.1b9baacc.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.f569765b.js";
+import "../../Icon/index.619c31c4.js";
 import "@mui/material/styles";
 import { jsx as f, Fragment as y } from "react/jsx-runtime";
 function g(a) {

package/components/formatters/{index.6959c2de.js → index.c2a9b55d.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.f569765b.js";
+import "../Icon/index.619c31c4.js";
 import "@mui/material/styles";
 function _(e) {
   const {

package/components/hook-form/RHFPeriod/{index.067790c9.js → index.e08fb1ab.js}

@@ -1,7 +1,7 @@
 import { styled as d } from "@mui/material";
 import { useFormContext as f, Controller as p } from "react-hook-form";
 import { E as c } from "../../ErrorLabel/index.c8615f16.js";
-import { P as x } from "../../Period/index.080a987d.js";
+import { P as x } from "../../Period/index.81de7941.js";
 import { jsx as r, jsxs as g } from "react/jsx-runtime";
 const u = d("div")(({
   theme: e