@m4l/components 0.1.24 → 0.1.25

package/components/CommonActions/components/ActionCancel/{index.465be070.js → index.9cfffe65.js}

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

package/components/CommonActions/components/ActionFormCancel/{index.0deaba48.js → index.ef60c2ee.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.ae47764f.js";
+import { B as _ } from "../../../mui_extended/Button/index.2afaa420.js";
 import { useCallback as v } from "react";
-import { u as h } from "../../../../hooks/useModal/index.f2492b34.js";
+import { u as h } from "../../../../hooks/useModal/index.b1f96279.js";
 import { jsx as r } from "react/jsx-runtime";
 function A(n) {
   const {

package/components/CommonActions/components/ActionIntro/{index.235ecbe2.js → index.f8403e8e.js}

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

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

@@ -6,16 +6,16 @@ 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.73ab6934.js";
+import "../../../../contexts/ModalContext/index.f17b3653.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.cb62609c.js";
-import { P as dt } from "../../../mui_extended/Pager/index.298730a1.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 { D as pt } from "../../../../react-data-grid.d46d625e.js";
-import { u as gt } from "../../../../hooks/useModal/index.f2492b34.js";
-import { A as ft } from "../ActionCancel/index.465be070.js";
-import { A as ut } from "../ActionIntro/index.235ecbe2.js";
-import { P as mt } from "../../../mui_extended/Popover/index.b6e4392a.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 { useResponsiveDesktop as ht } from "@m4l/graphics";
 const _t = p("div")(({

package/components/DataGrid/{index.cb62609c.js → index.fe073438.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.798c6aee.js";
-import { g as be, d as ve } from "../ModalDialog/index.0340fb86.js";
-import { g as xe, d as Re } from "../mui_extended/Pager/index.298730a1.js";
+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";
 const Se = A("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/components/DynamicFilter/{index.549adc46.js → index.d0753667.js}

@@ -7,31 +7,31 @@ import { useFormContext as B, useWatch as ge } from "react-hook-form";
 import { R } from "../hook-form/RHFAutocomplete/index.5eee9d7c.js";
 import "lodash/debounce";
 import { jsx as r, jsxs as w, Fragment as A } from "react/jsx-runtime";
-import "../hook-form/RHFCheckbox/index.6a40e25f.js";
+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 { R as ee } from "../hook-form/RHFDateTime/index.5ed774e3.js";
 import "@mui/x-date-pickers";
-import { R as Y } from "../hook-form/RHFTextField/index.bab2a2cf.js";
+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.6c6733eb.js";
+import "../hook-form/RHFPeriod/index.067790c9.js";
 import "../ErrorLabel/index.c8615f16.js";
-import "../Period/index.05c1c5e0.js";
-import { L as Ue, b as Je, g as Qe } from "../CommonActions/components/Actions/index.798c6aee.js";
+import "../Period/index.080a987d.js";
+import { L as Ue, b as Je, g as Qe } from "../CommonActions/components/Actions/index.309d3b6f.js";
 import "@mui/material/Button";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.73ab6934.js";
+import "../../contexts/ModalContext/index.f17b3653.js";
 import "@mui/lab";
 import "lodash/isString";
 import "react-dropzone";
 import "../Image/index.c9da2d5a.js";
-import "../hook-form/RHFUpload/index.56e2e277.js";
+import "../hook-form/RHFUpload/index.6347159a.js";
 import { I as G } from "../mui_extended/IconButton/index.4b5ce8b5.js";
 import "simplebar/dist/simplebar.min.css";
-import { F as te } from "../mui_extended/Button/index.ae47764f.js";
-import { P as Xe } from "../mui_extended/Popover/index.b6e4392a.js";
+import { F as te } from "../mui_extended/Button/index.2afaa420.js";
+import { P as Xe } from "../mui_extended/Popover/index.12b0ab55.js";
 import { R as Ze } from "../contexts/RHFormContext/index.33dba822.js";
-import { A as et } from "../CommonActions/components/ActionCancel/index.465be070.js";
-import { A as tt } from "../CommonActions/components/ActionIntro/index.235ecbe2.js";
+import { A as et } from "../CommonActions/components/ActionCancel/index.9cfffe65.js";
+import { A as tt } from "../CommonActions/components/ActionIntro/index.f8403e8e.js";
 import { useResponsiveDesktop as rt } from "@m4l/graphics";
 const re = h("div")(({
   theme: e
@@ -60,7 +60,7 @@ const re = h("div")(({
 ], xe = {
   name: "all",
   label: "dynamic_filter.all_fields",
-  urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg",
+  urlIcon: "",
   type: "string",
   multiple: !0,
   presence: "optional"

package/components/ModalDialog/{index.0340fb86.js → index.a24ca508.js}

@@ -1,6 +1,6 @@
 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.f2492b34.js";
+import { u as $ } from "../../hooks/useModal/index.b1f96279.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";
@@ -8,7 +8,7 @@ import { useResponsiveDesktop as H } from "@m4l/graphics";
 import { useEnvironment as I } from "@m4l/core";
 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.798c6aee.js";
+import { b as W, g as _ } from "../CommonActions/components/Actions/index.309d3b6f.js";
 const j = s(b)(() => ({})), k = s("div")(({ theme: o }) => ({
   display: "flex",
   flexDirection: "column",

package/components/ObjectLogs/{index.b1dcc4db.js → index.a7d36267.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.cb62609c.js";
+import { D as R, g as I } from "../DataGrid/index.fe073438.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.f2492b34.js";
+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.549adc46.js";
+import { D as E, g as K } from "../DynamicFilter/index.d0753667.js";
 const q = g("div")(() => ({
   height: "100%",
   width: "100%",

package/components/Period/index.080a987d.js

@@ -0,0 +1,175 @@
+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 { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { g as w } from "../CommonActions/components/Actions/index.309d3b6f.js";
+import "@mui/material/Button";
+import "react-hook-form";
+import "react-router-dom";
+import "../../contexts/ModalContext/index.f17b3653.js";
+import "@mui/lab";
+const M = a("div")(({
+  theme: t,
+  error: i,
+  readOnly: p
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "auto",
+  alignItems: "center",
+  gap: t.spacing(1),
+  border: i ? `1px solid ${t.palette.error.main}` : `1px solid ${t.palette.divider}`,
+  padding: t.spacing(0.5, 1),
+  borderRadius: "4px",
+  ...p && {
+    border: "0px"
+  },
+  "& .MuiAutocomplete-root, & .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiAutocomplete-root .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiTextField-root .MuiInput-input": {
+    padding: "5px!important"
+  }
+})), g = a("div")(({
+  theme: t
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: t.palette.divider
+})), D = a("div", {
+  shouldForwardProp: (t) => t !== "readOnly"
+})(({
+  theme: t,
+  readOnly: i
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "37.5px",
+  alignItems: "center",
+  gap: t.spacing(1),
+  border: `1px solid ${t.palette.divider}`,
+  ...i && {
+    border: "0px"
+  },
+  padding: t.spacing(0.5, 1),
+  borderRadius: "4px"
+})), F = a("div")(({
+  theme: t
+}) => ({
+  ...t.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+})), H = a("div")(({
+  theme: t
+}) => ({
+  ...t.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  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 {
+    value: i,
+    onChange: p,
+    error: C = !1,
+    readOnly: l = !1,
+    skeletonWidth: I = "100%",
+    skeletonHeight: h = "18px"
+  } = t, {
+    getLabel: d
+  } = O(), Y = P(), f = _(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 && m(e.id, x);
+  }, {
+    host_static_assets: y,
+    environment_assets: v
+  } = R(), S = $(() => [{
+    id: 0,
+    label: d("period.years")
+  }, {
+    id: 1,
+    label: d("period.months")
+  }, {
+    id: 2,
+    label: d("period.days")
+  }], [d]);
+  return Y ? /* @__PURE__ */ c(D, {
+    readOnly: l,
+    children: [/* @__PURE__ */ n(u, {
+      variant: "text",
+      width: "50%",
+      height: h
+    }), /* @__PURE__ */ n(g, {}), /* @__PURE__ */ n(u, {
+      variant: "text",
+      width: I,
+      height: h
+    }), /* @__PURE__ */ n(u, {
+      variant: "circular",
+      width: 20,
+      sx: {
+        minWidth: "20px",
+        minHeight: "20px"
+      }
+    })]
+  }) : (l && (i.selPeriodTime, i.singleValue, A, `${y}${v}`), /* @__PURE__ */ c(M, {
+    error: C,
+    readOnly: l,
+    children: [/* @__PURE__ */ n(T, {
+      options: S,
+      value: S[f],
+      disableClearable: !0,
+      onChange: (e, o) => {
+        k(o);
+      },
+      renderInput: (e) => /* @__PURE__ */ n(b, {
+        ...e,
+        fullWidth: !0,
+        variant: "standard",
+        SelectProps: {
+          native: !0
+        },
+        InputProps: {
+          disableUnderline: !0,
+          ...e.InputProps
+        },
+        autoComplete: "off"
+      }, `tx_async_${e.id}`)
+    }), /* @__PURE__ */ n(g, {}), /* @__PURE__ */ n(b, {
+      type: "number",
+      variant: "standard",
+      value: x,
+      InputProps: {
+        disableUnderline: !0
+      },
+      onChange: (e) => {
+        m(f, e.target.value === "" ? "" : parseInt(e.target.value));
+      }
+    }), /* @__PURE__ */ n(A, {
+      src: `${y}/${v}/frontend/components/period/assets/icons/clock.svg`
+    })]
+  }));
+};
+function Q() {
+  return ["period"].concat(w());
+}
+export {
+  J as P,
+  Q as g
+};

package/components/Period/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { WrapperProps } from './types';
+import { SKTWrapperProps, WrapperProps } from './types';
 export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SKTWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FieldPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FieldValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Period/types.d.ts

@@ -8,9 +8,10 @@ export declare type PeriodTime = {
     id: number;
     label: string;
 };
-export interface WrapperProps {
+export interface WrapperProps extends Pick<PeriodProps, 'readOnly'> {
     error: boolean;
 }
+export declare type SKTWrapperProps = Pick<PeriodProps, 'readOnly'>;
 export declare type PeriodType = {
     selPeriodTime: ETimePeriods;
     singleValue: number | '';
@@ -24,6 +25,8 @@ export interface PeriodProps {
     error?: boolean;
     readOnly?: boolean;
     variant?: PeriodVariant;
+    skeletonWidth?: string | number;
+    skeletonHeight?: string | number;
 }
 export interface WrapperProps {
     error: boolean;

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

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

package/components/hook-form/RHFDateTime/index.9231a7c7.js

@@ -0,0 +1,81 @@
+import { useFormContext as c, Controller as f } from "react-hook-form";
+import { Skeleton as s, TextField as x } from "@mui/material";
+import { DateTimePicker as g } from "@mui/x-date-pickers";
+import { useModuleSkeleton as k, useEnvironment as F } from "@m4l/core";
+import { styled as v } from "@mui/material/styles";
+import { jsxs as C, jsx as t } from "react/jsx-runtime";
+const T = v("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "42.25px",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${e.palette.divider}`,
+  padding: "0 14px",
+  borderRadius: e.spacing(0.5)
+})), S = (e) => {
+  const {
+    skeletonWidth: n,
+    skeletonHeight: r
+  } = e;
+  return /* @__PURE__ */ C(T, {
+    children: [/* @__PURE__ */ t(s, {
+      variant: "text",
+      width: n,
+      height: r
+    }), /* @__PURE__ */ t(s, {
+      variant: "circular",
+      width: "20px",
+      height: "20px"
+    })]
+  });
+};
+function y(e) {
+  const {
+    name: n,
+    autoComplete: r = "off",
+    skeletonWidth: l = "50%",
+    skeletonHeight: m = 14
+  } = e, d = k(), {
+    control: p
+  } = c(), {
+    dfnsFormat: {
+      datetime_format: h,
+      datetime_mask: u
+    }
+  } = F();
+  return d ? /* @__PURE__ */ t(S, {
+    skeletonWidth: l,
+    skeletonHeight: m
+  }) : /* @__PURE__ */ t(f, {
+    name: n,
+    control: p,
+    render: ({
+      field: i,
+      fieldState: {
+        error: a
+      }
+    }) => /* @__PURE__ */ t(g, {
+      ampm: !1,
+      inputFormat: h,
+      mask: u,
+      label: "",
+      value: i.value,
+      onChange: (o) => {
+        isNaN(o) ? i.onChange(void 0) : i.onChange(o);
+      },
+      renderInput: (o) => /* @__PURE__ */ t(x, {
+        autoComplete: r,
+        fullWidth: !0,
+        error: !!a,
+        helperText: a?.message,
+        ...o
+      })
+    })
+  });
+}
+export {
+  y as R
+};

package/components/hook-form/RHFDateTime/subcomponents/Skeleton/index.d.ts

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

package/components/hook-form/RHFDateTime/subcomponents/Skeleton/types.d.ts

@@ -0,0 +1,2 @@
+import { RHFDateTimeProps } from '../../types';
+export declare type SkeletonRHFDateTimeProps = Pick<RHFDateTimeProps, 'skeletonWidth' | 'skeletonHeight'>;

package/components/hook-form/RHFPeriod/index.067790c9.js

@@ -0,0 +1,51 @@
+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 { jsx as r, jsxs as g } from "react/jsx-runtime";
+const u = d("div")(({
+  theme: e
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: e.spacing(1)
+})), k = (e) => {
+  const {
+    name: o,
+    readOnly: s,
+    skeletonWidth: n,
+    skeletonHeight: i
+  } = e, {
+    control: l
+  } = f();
+  return /* @__PURE__ */ r(p, {
+    name: o,
+    control: l,
+    render: ({
+      field: {
+        onChange: m,
+        value: a
+      },
+      fieldState: {
+        error: t
+      }
+    }) => /* @__PURE__ */ g(u, {
+      children: [/* @__PURE__ */ r(x, {
+        value: a,
+        onChange: m,
+        error: !!t,
+        readOnly: s,
+        skeletonWidth: n,
+        skeletonHeight: i
+      }), t && /* @__PURE__ */ r(c, {
+        message: t.message || ""
+      })]
+    })
+  });
+};
+export {
+  k as R
+};

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

@@ -1,5 +1,5 @@
-import { PeriodVariant } from '../../../components/Period/types';
-export declare type RHFPeriodProps = {
+import { PeriodProps, PeriodVariant } from '../../../components/Period/types';
+export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight'> {
     name: string;
     variant?: PeriodVariant;
-};
+}