@m4l/components 0.1.8 → 0.1.10

package/commonjs.js

@@ -1,6 +1,6 @@
 import "react";
-import "react-dom";
 import "prop-types";
+import "react-dom";
 import "clsx";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {

package/components/CommonActions/components/Actions/index.js

@@ -1,11 +1,17 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
-import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
-import { P as Pager } from "../../../mui_extended/Pager/index.js";
+import "@mui/material/Button";
+import "../../../mui_extended/Button/index.js";
+import "react-hook-form";
+import "react-router-dom";
 import { IconButton, Tooltip, MenuItem, Skeleton, Checkbox } from "@mui/material";
 import { useState, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import "../../../../contexts/ModalContext/index.js";
+import "@mui/lab";
+import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
+import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
+import { P as Pager } from "../../../mui_extended/Pager/index.js";
 import { D as DataGrid$1 } from "../../../../react-data-grid.js";
 import { u as useModal } from "../../../../hooks/useModal/index.js";
 import { A as ActionCancel } from "../ActionCancel/index.js";
@@ -13,12 +19,38 @@ import { A as ActionIntro } from "../ActionIntro/index.js";
 import { M as MenuPopover } from "../../../mui_extended/MenuPopover/index.js";
 import { I as Icon } from "../../../Icon/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import "@mui/material/Button";
-import "../../../mui_extended/Button/index.js";
-import "react-hook-form";
-import "react-router-dom";
-import "../../../../contexts/ModalContext/index.js";
-import "@mui/lab";
+const WrapperStandarActions = styled("div")(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(3),
+  margin: theme.spacing(0, 1.5),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
+const Actions$1 = (props) => {
+  const {
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperStandarActions, {
+    id: "WrapperStandarActions",
+    children
+  });
+};
+function getCommonActionsDictionary() {
+  return ["common_actions"];
+}
+const defaultCommonActionsDictionary = {
+  common_actions: {
+    cancel: "Cancel",
+    intro: "Intro",
+    confirm_quit_title: "Confirm",
+    confirm_quit_msg: "Are your sure exit?"
+  }
+};
 const WrapperMenuActions = styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
   theme
@@ -574,26 +606,6 @@ const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
   minWidth: theme.spacing(3.75),
   height: theme.spacing(3.75)
 }));
-const WrapperStandarActions = styled("div")(({
-  theme
-}) => ({
-  paddingTop: theme.spacing(3),
-  display: "flex",
-  flexDirection: "row",
-  justifyContent: "flex-end",
-  "& > button": {
-    marginLeft: "10px"
-  }
-}));
-const Actions$1 = (props) => {
-  const {
-    children
-  } = props;
-  return /* @__PURE__ */ jsx(WrapperStandarActions, {
-    id: "WrapperStandarActions",
-    children
-  });
-};
 function Settings() {
   const {
     openModal,
@@ -844,15 +856,4 @@ function Actions(props) {
     })]
   });
 }
-function getCommonActionsDictionary() {
-  return ["common_actions"];
-}
-const defaultCommonActionsDictionary = {
-  common_actions: {
-    cancel: "Cancel",
-    intro: "Intro",
-    confirm_quit_title: "Confirm",
-    confirm_quit_msg: "Are your sure exit?"
-  }
-};
 export { ActionsColumn as A, LabelMemuItem as L, MenuActions as M, PagerActions as P, Actions as a, Actions$1 as b, defaultCommonActionsDictionary as d, getCommonActionsDictionary as g };

package/components/DataGrid/formatters/columnBooleanFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnBooleanFormatterProps } from './types';
+export declare function columnBooleanFormatter(props: ColumnBooleanFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnBooleanFormatter/types.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+import { PresentationType } from '../../../../components/formatters/BooleanFormatter/types';
+export interface ColumnBooleanFormatterProps {
+    Component?: ComponentType;
+    presentationType: PresentationType;
+    fieldValue: string;
+}

package/components/DataGrid/formatters/columnDateFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ColumnDateFormatterProps } from './types';
+export declare function columnDateFormatter(props: ColumnDateFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnDateFormatter/types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { PresentationType } from '../../../formatters/DateFormatter/types';
+export interface ColumnDateFormatterProps {
+    Component?: ComponentType;
+    presentationType: PresentationType;
+    format?: string;
+    fieldValue: string;
+}

package/components/DataGrid/formatters/columnNestedValueFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnNestedValueFormatterProps } from './types';
+export declare function columnNestedValueFormatter(props: ColumnNestedValueFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnNestedValueFormatter/types.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+export interface ColumnNestedValueFormatterProps {
+    Component?: ComponentType;
+    fieldValue: string;
+}

package/components/DataGrid/formatters/columnPointsFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnPointsFormatterProps } from './types';
+export declare function columnPointsFormatter(props: ColumnPointsFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnPointsFormatter/types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from 'react';
+export interface ColumnPointsFormatterProps {
+    Component?: ComponentType;
+    fieldValue: string;
+    fieldUnit: string;
+}

package/components/DataGrid/formatters/columnUncertaintyFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnUncertaintyFormatterProps } from './types';
+export declare function columnUncertaintyFormatter(props: ColumnUncertaintyFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnUncertaintyFormatter/types.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+export interface ColumnUncertaintyFormatterProps {
+    Component?: ComponentType;
+    fieldValue: string;
+    fieldUnit: string;
+    fieldSymbol: string;
+}

package/components/DataGrid/formatters/index.d.ts

@@ -0,0 +1,6 @@
+export { columnUncertaintyFormatter } from './columnUncertaintyFormatter';
+export { columnPointsFormatter } from './columnPointsFormatter';
+export { columnNestedValueFormatter } from './columnNestedValueFormatter';
+export { columnBooleanFormatter } from './columnBooleanFormatter';
+export { columnDateFormatter } from './columnDateFormatter';
+export type { ColumnUncertaintyFormatterProps } from './columnUncertaintyFormatter/types';

package/components/DataGrid/index.js

@@ -82,6 +82,9 @@ const OriginalDataGridWrapperStyled = styled("div")(({
       right: "0px",
       top: "25%",
       bottom: "25%"
+    },
+    "& .m4l_icon": {
+      height: "100%"
     }
   },
   "& .rdg-cell.rdg-cell-align-left": {

package/components/DataGrid/types.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { Maybe } from '@m4l/core';
-import type { Column, RowsChangeData } from 'react-data-grid';
+import type { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
 import type { MenuAction } from '../mui_extended/MenuActions/types';
 import { ActionsProps } from './components/Actions/types';
+export declare type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
+export type { columnUncertaintyFormatter, columnPointsFormatter, columnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'text' | 'date' | 'number' | 'boolean' | 'custom';
 export declare type ColumnAlign = 'left' | 'center' | 'right';
 export declare interface GridRow {

package/components/DynamicFilter/index.js

@@ -1,6 +1,6 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
 import { styled } from "@mui/material/styles";
-import require$$0, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
+import React, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
 import { useModuleDictionary, useHostTools, useEnvironment, voidFunction, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -13,6 +13,15 @@ import "../hook-form/RHFCheckbox/index.js";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.js";
 import "@mui/x-date-pickers";
 import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
+import "../hook-form/RHFPeriod/index.js";
+import { I as Icon } from "../Icon/index.js";
+import "../../index.js";
+import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
+import "@mui/material/Button";
+import { F as FilterButton } from "../mui_extended/Button/index.js";
+import "react-router-dom";
+import "../../contexts/ModalContext/index.js";
+import "@mui/lab";
 import "../../lodash.js";
 import "react-dropzone";
 import "../../react-lazy-load-image-component.js";
@@ -20,16 +29,9 @@ import "../Image/index.js";
 import "../hook-form/RHFUpload/index.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.js";
 import "simplebar/dist/simplebar.min.css";
-import { F as FilterButton } from "../mui_extended/Button/index.js";
-import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
 import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
-import { I as Icon } from "../Icon/index.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.js";
 import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.js";
-import "react-router-dom";
-import "@mui/material/Button";
-import "../../contexts/ModalContext/index.js";
-import "@mui/lab";
 import { useResponsiveDesktop } from "@m4l/graphics";
 const WrapperApplyedFilters = styled("div")(({
   theme
@@ -689,7 +691,7 @@ const strategiesEditFilterComponent = {
   number: NumberFilter,
   boolean: BooleanFilter,
   datetime: DateTimeFilter,
-  __default__: require$$0.Fragment
+  __default__: React.Fragment
 };
 const PopupEditFilterComponent = (props) => {
   const {

package/components/ErrorLabel/index.d.ts

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

package/components/ErrorLabel/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

package/components/ErrorLabel/types.d.ts

@@ -0,0 +1,3 @@
+export interface ErrorLabelProps {
+    message: string;
+}

package/components/Icon/index.js

@@ -66,7 +66,7 @@ function Icon(props) {
   }, [src]);
   const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
   return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
-    id: "IconReact",
+    className: "m4l_icon",
     children: resource ? /* @__PURE__ */ jsx(DivIcon, {
       src: resource,
       size: finalSize,

package/components/LanguagePopover/index.js

@@ -6,6 +6,7 @@ import { useModuleSkeleton } from "@m4l/core";
 import "../Icon/index.js";
 import "@mui/material/styles";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../mui_extended/Accordion/index.js";
 import "../mui_extended/Avatar/index.js";
 import "react-router-dom";
 import "@mui/material/Button";

package/components/PaperForm/components/Header.d.ts

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

package/components/PaperForm/index.js

@@ -1,8 +1,8 @@
-import { Skeleton } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { I as Icon } from "../Icon/index.js";
 import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton } from "@mui/material";
+import { I as Icon } from "../Icon/index.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperPaper = styled("div")(({
   theme
 }) => ({
@@ -17,7 +17,7 @@ const WrapperPaper = styled("div")(({
     backgroundColor: theme.palette.background.paper
   }
 }));
-const Header = styled("div")(({
+const HeaderContainer = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -51,7 +51,7 @@ const Content = styled("div")(() => ({
   flexGrow: 1,
   position: "relative"
 }));
-const SkPaperFormHeader = styled("div")(({
+const SkTPaperFormHeader = styled("div")(({
   theme
 }) => ({
   width: "auto",
@@ -62,58 +62,49 @@ const SkPaperFormHeader = styled("div")(({
   borderBottom: `1px solid ${theme.palette.divider}`,
   marginBottom: `${theme.spacing(3)}`
 }));
-const PaperFormBoddy = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: "1"
-}));
-function SKTPaperForm(prop) {
+const Header = (props) => {
   const {
-    children
-  } = prop;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(SkPaperFormHeader, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 16,
-        height: 16
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: 68,
-        height: 14
-      })]
-    }), /* @__PURE__ */ jsx(PaperFormBoddy, {
-      children
+    urlIcon,
+    title
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  return isSkeleton ? /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: 16,
+      height: 16
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 68,
+      height: 14
     })]
+  }) : /* @__PURE__ */ jsx(HeaderContainer, {
+    id: "Header",
+    children: /* @__PURE__ */ jsxs(IconTitleContainer, {
+      className: "draggable-dialog-title",
+      children: [/* @__PURE__ */ jsx(IconHeader, {
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: urlIcon
+        })
+      }), title]
+    })
   });
-}
+};
 function PaperForm(props) {
   const {
     urlIcon,
     title,
     children
   } = props;
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(WrapperPaper, {
+  return /* @__PURE__ */ jsxs(WrapperPaper, {
     id: "ContainerPropertyValue",
-    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(Header, {
-        id: "Header",
-        children: /* @__PURE__ */ jsxs(IconTitleContainer, {
-          className: "draggable-dialog-title",
-          children: [/* @__PURE__ */ jsx(IconHeader, {
-            children: /* @__PURE__ */ jsx(Icon, {
-              src: urlIcon
-            })
-          }), title]
-        })
-      }), /* @__PURE__ */ jsx(Content, {
-        id: "Content",
-        children
-      })]
-    }) : /* @__PURE__ */ jsx(SKTPaperForm, {
+    children: [/* @__PURE__ */ jsx(Header, {
+      urlIcon,
+      title
+    }), /* @__PURE__ */ jsx(Content, {
+      id: "Content",
       children
-    })
+    })]
   });
 }
 export { PaperForm as P };

package/components/PaperForm/styles.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 export declare const WrapperPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SkPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PaperFormBoddy: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkTPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PaperForm/types.d.ts

@@ -4,3 +4,4 @@ export interface PaperFormProps {
     title: string;
     children: ReactNode;
 }
+export declare type HeaderProps = Omit<PaperFormProps, 'children'>;

package/components/PropertyValue/index.js

@@ -6,50 +6,58 @@ import { useModuleSkeleton } from "@m4l/core";
 const WrapperPropertyValue = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
-  propertyHeight,
+  propertyWidth,
   isForm,
   theme
 }) => ({
-  display: "flex",
+  display: "grid",
+  gridTemplateColumns: "1fr",
   alignItems: "flex-start",
   width: "100%",
   padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-  maxHeight: propertyHeight || "auto",
   ":hover": {
     backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
   },
   borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
   flexDirection: "column",
   [theme.breakpoints.up("sm")]: {
-    flexDirection: "row",
+    gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
+    gap: theme.spacing(2),
     alignItems: "center"
   }
 }));
-const Property = styled("span", {
+const Property = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
   propertyWidth,
   isForm,
   theme
 }) => ({
-  width: propertyWidth || "150px",
-  minWidth: propertyWidth || "150px",
+  width: "100%",
+  minWidth: "100%",
   ...theme.typography.subtitle2,
   color: theme.palette.text.primary,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
   position: "relative",
   [theme.breakpoints.up("sm")]: {
     borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
     paddingRight: theme.spacing(2),
-    textAlign: "right"
+    textAlign: "right",
+    width: propertyWidth || "150px",
+    minWidth: propertyWidth || "150px",
+    justifyContent: "flex-end"
   },
   overflow: "hidden",
   overflowWrap: "break-word"
 }));
 const Value = styled("div", {
-  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "valueWidth"
+  shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
 })(({
-  width,
-  propertyHeight,
+  valueWidth,
+  valueHeight,
   theme
 }) => ({
   flexGrow: "1",
@@ -57,11 +65,12 @@ const Value = styled("div", {
   color: theme.palette.text.secondary,
   position: "relative",
   padding: "1px",
-  width: width ? `${width}%` : "100%",
-  height: propertyHeight ? propertyHeight : "auto",
+  maxWidth: `${valueWidth}%`,
+  width: `${valueWidth}%`,
+  height: valueHeight,
   marginTop: theme.spacing(1),
   [theme.breakpoints.up("sm")]: {
-    marginLeft: theme.spacing(2),
+    marginLeft: theme.spacing(0),
     marginTop: "0px"
   },
   overflow: "hidden",
@@ -84,8 +93,8 @@ function PropertyValue(props) {
   const {
     property,
     value,
-    propertyWidth,
-    propertyHeight,
+    propertyWidth = 200,
+    valueHeight = "auto",
     valueWidth = "100",
     isForm
   } = props;
@@ -103,28 +112,30 @@ function PropertyValue(props) {
       return "100";
     }
     if (valueWidth === "25" && isDesktop || valueWidth === "12.5" && isDesktop) {
-      return parseFloat(valueWidth).toString(10);
-    } else if (valueWidth === "25" && !isDesktop || valueWidth === "12.5" && !isDesktop) {
-      return (parseFloat(valueWidth) * 2).toString(10);
+      return `${valueWidth}`;
+    }
+    if (valueWidth === "25" && !isDesktop) {
+      return "50";
+    }
+    if (valueWidth === "12.5" && !isDesktop) {
+      return "25";
     }
     return "100";
   };
   const valueW = getValueW();
   return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
-    id: "ContainerPropertyValue",
+    id: "WrapperPropertyValue",
     isForm,
     propertyWidth,
-    propertyHeight,
     children: [/* @__PURE__ */ jsx(Property, {
       id: "Property",
       isForm,
       propertyWidth,
-      propertyHeight,
       children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
     }), /* @__PURE__ */ jsx(Value, {
       id: "Value",
-      width: valueW,
-      propertyHeight,
+      valueWidth: valueW,
+      valueHeight,
       children: value
     })]
   });

package/components/PropertyValue/styles.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { PropertyProps, ValueProps } from './types';
-export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, 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> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+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 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

@@ -1,17 +1,17 @@
 import type { ReactNode } from 'react';
 export interface PropertyProps {
     propertyWidth?: number;
-    propertyHeight?: number | string;
-    isForm?: boolean;
 }
 export interface ValueProps {
-    width: string;
-    propertyHeight?: number | string;
+    valueHeight?: number | string;
+    valueWidth?: valueWidthType;
 }
-export interface PropertyValueProps extends PropertyProps, ValueTypeProps {
+export declare type valueWidthType = '100' | '75' | '50' | '25' | '12.5';
+export interface PropertyValueProps extends PropertyProps, ValueProps {
     property: string;
     value: number | string | ReactNode;
+    isForm?: boolean;
 }
-export interface ValueTypeProps {
-    valueWidth?: '100' | '75' | '50' | '25' | '12.5';
-}
+export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
+export declare type WrapperPropertyProps = WrapperProps;
+export declare type WrapperValueProps = ValueProps;

package/components/animate/variants/bounce.d.ts

@@ -1,5 +1,5 @@
 import { VariantsType } from '../type';
-export declare const varBounce: (props?: VariantsType | undefined) => {
+export declare const varBounce: (props?: VariantsType) => {
     in: {
         initial: {};
         animate: {