@m4l/components 0.1.74 → 0.1.76

package/components/Image/{index.1af119da.js → index.c18ebf5a.js}

@@ -1,8 +1,9 @@
 import { useBase, useModuleSkeleton, BaseProvider } from "@m4l/core";
 import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useMemo } from "react";
-import { T as TEST_PROP_ID } from "../../vendor.99e0c856.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { styled, Skeleton as Skeleton$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import clsx from "clsx";
 import { unstable_composeClasses } from "@mui/base";
 function isIntersectionObserverAvailable() {
   return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window;
@@ -95,9 +96,7 @@ function LazyLoadComponent(props) {
     })
   });
 }
-const ImageRoot = styled("div", {
-  shouldForwardProp: (props) => props !== "imageClasses"
-})(({
+const ImageRoot = styled("div")(({
   theme
 }) => ({
   ...theme.components?.M4LImage?.styleOverrides
@@ -145,7 +144,7 @@ const Skeleton = (props) => {
   });
 };
 const componentName = "M4LImage";
-const imageClasses = generateUtilityClasses(componentName, [
+generateUtilityClasses(componentName, [
   "root",
   "lazyLoad",
   "img",
@@ -242,7 +241,8 @@ function Image(props) {
     testingProps,
     width,
     height,
-    ratio = "1:1"
+    ratio = "1:1",
+    className
   } = props;
   const ratioImage = getRatioValues(ratio);
   const isSKeleton = useModuleSkeleton();
@@ -270,8 +270,7 @@ function Image(props) {
   const classes = useUtilityClasses(ownerState);
   const lazyLoadComponent = useMemo(() => {
     return /* @__PURE__ */ jsx(ImageRoot, {
-      className: classes.root,
-      imageClasses,
+      className: clsx(classes.root, className),
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("root")
       } : {},

package/components/Image/types.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { ImageClassesType } from './utils/classes/types';
 export declare type Effect = 'blur' | 'black-and-white' | 'opacity';
 export declare type ScrollPosition = {
     x: number;
@@ -16,9 +15,6 @@ export interface BaseImageProps {
     width?: string;
     height?: string;
 }
-export interface WrapperImageProps {
-    imageClasses: ImageClassesType;
-}
 export interface IntersectComponentProps extends BaseImageProps {
     setIsVisible: (visible: boolean) => void;
     threshold: number;
@@ -46,6 +42,7 @@ export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible'
     skeletonVariant?: SkeletonVariant;
     testingProps?: TestingProps;
     ratio?: RatioOptions;
+    className?: string;
 }
 export declare type StatusLoad = 'initial' | 'loaded' | 'removed';
 export interface OwnerState {

package/components/LanguagePopover/classes/index.d.ts

@@ -3,7 +3,7 @@ export declare const languagePopoverClasses: LanguagePopoverClassesType;
 export declare function getM4LanguagePopoverClassesUtilityClass(slot: string): string;
 export declare const useUtilityClasses: () => {
     root: string;
-    containerItems: string;
     containerProgress: string;
+    containerItems: string;
     labelItem: string;
 };

package/components/LanguagePopover/{index.4fef99ac.js → index.938c6675.js}

@@ -1,25 +1,26 @@
 import { useState, useEffect } from "react";
 import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../Image/index.1af119da.js";
+import { I as Image } from "../Image/index.c18ebf5a.js";
 import { useLocales } from "@m4l/graphics";
 import { useEnvironment, useNetwork } from "@m4l/core";
-import "../Icon/index.d214a74d.js";
-import { T as TEST_PROP_ID } from "../../vendor.99e0c856.js";
+import "../Icon/index.9dae8337.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.822cdaac.js";
-import "../mui_extended/Accordion/index.09a89d3d.js";
-import "../mui_extended/Avatar/index.fe06afd7.js";
+import "../mui_extended/IconButton/index.1a9d4fa5.js";
+import "../mui_extended/Accordion/index.3faafd8b.js";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
-import { I as ImageButton } from "../mui_extended/Button/index.f9d54780.js";
+import { I as ImageButton } from "../mui_extended/Button/index.fdb5dcbd.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
 import "@mui/lab";
-import "../mui_extended/Typography/index.e2d9e3f2.js";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.03403529.js";
-import "../mui_extended/Pager/index.6428b07c.js";
-import "../mui_extended/Tab/index.e0653a0a.js";
+import "../mui_extended/MenuActions/index.ba1da3b3.js";
+import "../mui_extended/Pager/index.67bda2c5.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const LanguagePopoverRoot = styled("div")(({
   theme

package/components/LinearProgressIndeterminate/LinearProgressIndeterminate.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LinearProgressIndeterminate: () => import("react").JSX.Element;

package/components/LinearProgressIndeterminate/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME = "M4LinearProgressIndeterminate";

package/components/LinearProgressIndeterminate/classes/index.d.ts

@@ -0,0 +1,3 @@
+import { LinearProgressIndeterminateClasses } from './types';
+export declare const linearProgressIndeterminateClasses: LinearProgressIndeterminateClasses;
+export declare const useLinearProgressIndeterminateUtilityClasses: () => Record<"root" | "windowLinearProgressBar", string>;

package/components/LinearProgressIndeterminate/classes/types.d.ts

@@ -0,0 +1,7 @@
+import { useLinearProgressIndeterminateUtilityClasses } from ".";
+export interface LinearProgressIndeterminateClasses {
+    root: string;
+    windowLinearProgressBar: string;
+}
+export declare type LinearProgressIndeterminateClassesKey = keyof LinearProgressIndeterminateClasses;
+export declare type Classes = ReturnType<typeof useLinearProgressIndeterminateUtilityClasses>;

package/components/LinearProgressIndeterminate/index.d.ts

@@ -0,0 +1 @@
+export { LinearProgressIndeterminate } from './LinearProgressIndeterminate';

package/components/LinearProgressIndeterminate/index.d34d398f.js

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import { generateUtilityClasses, styled } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../utils/index.008b4c2a.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { jsx } from "react/jsx-runtime";
+const LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME = "M4LinearProgressIndeterminate";
+generateUtilityClasses(LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME, [
+  "root",
+  "windowLinearProgressBar"
+], LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME);
+const useLinearProgressIndeterminateUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    windowLinearProgressBar: ["windowLinearProgressBar"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME), {});
+};
+const LinearProgressIndeterminateRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LinearProgressIndeterminate?.styleOverrides
+}));
+const ICON_PREFIX = "M4LinearProgressIndeterminate";
+const getNameLinearProgressIndeterminateDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+const classes = useLinearProgressIndeterminateUtilityClasses();
+const LinearProgressIndeterminate = () => {
+  return /* @__PURE__ */ jsx(LinearProgressIndeterminateRoot, {
+    className: clsx(classes.root, "borealisBar"),
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameLinearProgressIndeterminateDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsx("div", {
+      className: classes.windowLinearProgressBar,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameLinearProgressIndeterminateDataTestId("windowLinearProgressBar")
+      } : {}
+    })
+  });
+};
+export {
+  LinearProgressIndeterminate as L
+};

package/components/LinearProgressIndeterminate/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICON_PREFIX = "M4LinearProgressIndeterminate";

package/components/LinearProgressIndeterminate/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import type { LinearProgressIndeterminateClassesKey } from '../classes/types';
+export declare const getNameLinearProgressIndeterminateDataTestId: (KEY: LinearProgressIndeterminateClassesKey) => string;

package/components/Loadable/{index.117eaced.js → index.e994fc3e.js}

@@ -1,5 +1,5 @@
 import { Suspense } from "react";
-import { P as PropagateLoader } from "../animate/PropagateLoader/index.be5b02c3.js";
+import { P as PropagateLoader } from "../animate/PropagateLoader/index.7fab43c8.js";
 import { jsx } from "react/jsx-runtime";
 const Loadable = (Component) => function EmbededLoadable(props) {
   return /* @__PURE__ */ jsx(Suspense, {

package/components/ModalDialog/{index.6c35e653.js → index.d9c5d400.js}

@@ -1,16 +1,16 @@
-import { Dialog, Paper } from "@mui/material";
-import { c as cjs } from "../../react-draggable.17b4ec8a.js";
-import { u as useModal } from "../../hooks/useModal/index.c6069beb.js";
+import { useTheme, Dialog, Paper } from "@mui/material";
+import { c as cjs } from "../../react-draggable.6d7949a3.js";
+import { u as useModal } from "../../hooks/useModal/index.7b7d26ba.js";
 import { styled } from "@mui/material/styles";
-import { a as getThemeVariantColor } from "../../utils/index.aca80f3a.js";
-import { R as ResizeableWindow } from "../Resizeable/index.834a9144.js";
+import { a as getThemeVariantColor } from "../../utils/index.008b4c2a.js";
+import { R as ResizeableWindow } from "../Resizeable/index.f6e48e56.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon } from "../Icon/index.d214a74d.js";
+import { I as Icon } from "../Icon/index.9dae8337.js";
 import { useEnvironment } from "@m4l/core";
-import { I as ICONS } from "../areas/icons.3ec589d3.js";
+import { I as ICONS } from "../areas/icons.19cde4b4.js";
+import { m as modalUtilityClasses } from "../modal/index.1b25b61d.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.51b9c92a.js";
-const WrapperDialog = styled(Dialog)(() => ({}));
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.e376a68e.js";
 const Container = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -88,19 +88,28 @@ const ModalDialog = () => {
     maxWidth,
     maxHeigth,
     window,
-    fullScreen
+    fullScreen,
+    variant
   } = useModal();
   const isDesktop = useResponsiveDesktop();
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  const theme = useTheme();
+  const classes = modalUtilityClasses({
+    variant
+  });
   const contentComnponent = /* @__PURE__ */ jsx(Container, {
-    id: "Container",
+    className: classes.containerWindow,
     children: typeof window === "function" ? window() : window
   });
-  return /* @__PURE__ */ jsxs(WrapperDialog, {
+  return /* @__PURE__ */ jsxs(Dialog, {
     open,
+    className: classes.root,
+    sx: {
+      ...theme.components?.M4LModalDialog?.styleOverrides
+    },
     "aria-labelledby": "child-modal-title",
     "aria-describedby": "child-modal-description",
     PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,

package/components/NavLink/{index.9e56bcd3.js → index.21c8fd90.js}

@@ -2,23 +2,24 @@ import { NavLink as NavLink$1 } from "react-router-dom";
 import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
 import "react";
 import "@m4l/core";
-import "../Icon/index.d214a74d.js";
-import { T as TEST_PROP_ID } from "../../vendor.99e0c856.js";
+import "../Icon/index.9dae8337.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.822cdaac.js";
+import "../mui_extended/IconButton/index.1a9d4fa5.js";
 import "@m4l/graphics";
-import "../mui_extended/Accordion/index.09a89d3d.js";
-import "../mui_extended/Avatar/index.fe06afd7.js";
+import "../mui_extended/Accordion/index.3faafd8b.js";
+import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.f9d54780.js";
-import "../Image/index.1af119da.js";
+import "../mui_extended/Button/index.fdb5dcbd.js";
+import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import { T as Typography } from "../mui_extended/Typography/index.e2d9e3f2.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.03403529.js";
-import "../mui_extended/Pager/index.6428b07c.js";
-import "../mui_extended/Tab/index.e0653a0a.js";
+import "../mui_extended/MenuActions/index.ba1da3b3.js";
+import "../mui_extended/Pager/index.67bda2c5.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const componentName = "M4LNavLink";
 generateUtilityClasses(componentName, [

package/components/NoItemSelected/{index.cd842b62.js → index.23dfc897.js}

@@ -1,6 +1,6 @@
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { I as Image } from "../Image/index.1af119da.js";
+import { I as Image } from "../Image/index.c18ebf5a.js";
 import { Skeleton } from "@mui/material";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/components/ObjectLogs/{index.e1a1b27c.js → index.a2709fc2.js}

@@ -1,36 +1,46 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.dbae54dd.js";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.ffaf000e.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.57125fcf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.c6069beb.js";
-import { I as Icon } from "../Icon/index.d214a74d.js";
-import "../../react-draggable.17b4ec8a.js";
-import "../ModalDialog/index.6c35e653.js";
-import "../Resizeable/index.834a9144.js";
-import "../CommonActions/components/Actions/index.51b9c92a.js";
+import { u as useModal } from "../../hooks/useModal/index.7b7d26ba.js";
+import { I as Icon } from "../Icon/index.9dae8337.js";
+import "../../react-draggable.6d7949a3.js";
+import "../ModalDialog/index.d9c5d400.js";
+import "../Resizeable/index.f6e48e56.js";
+import "../modal/index.1b25b61d.js";
+import "../CommonActions/components/Actions/index.e376a68e.js";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.f9d54780.js";
+import "../mui_extended/Button/index.fdb5dcbd.js";
 import "clsx";
 import "react-hook-form";
-import "../mui_extended/IconButton/index.822cdaac.js";
+import "../mui_extended/IconButton/index.1a9d4fa5.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.a88b73a6.js";
-import "../areas/components/AreasAdmin/index.1eda80b9.js";
+import "../areas/contexts/AreasContext/index.f0397b7c.js";
+import "../areas/components/AreasAdmin/index.946eebb9.js";
 import "zustand/shallow";
 import "../ScrollBar/index.bbe48f4d.js";
-import "../areas/components/AreasViewer/index.eddc9945.js";
+import "../mui_extended/Accordion/index.3faafd8b.js";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.ba1da3b3.js";
+import "../mui_extended/Pager/index.67bda2c5.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import "../areas/components/AreasViewer/index.bf4191ea.js";
+import "../LinearProgressIndeterminate/index.d34d398f.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
-import "@mui/lab";
-import "../mui_extended/Typography/index.e2d9e3f2.js";
-import "../modal/WindowConfirm.7ec9dcd3.js";
-import { W as WindowBase } from "../modal/WindowBase.9b93578e.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.cb7fd1b6.js";
+import { W as WindowBase } from "../modal/WindowBase.7acb9f1d.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.d7c03a61.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",
@@ -241,28 +251,28 @@ function ObjectLogs(props) {
         automatic: false,
         fields: [{
           name: "user_logs.created_at",
-          dictionaryId: getLabel("object_logs.created_at"),
+          dictionaryId: "object_logs.created_at",
           type: "datetime",
           multiple: false,
           presence: "fixed",
           urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
         }, {
           name: "users.email",
-          dictionaryId: getLabel("object_logs.email"),
+          dictionaryId: "object_logs.email",
           type: "string",
           multiple: true,
           presence: "optional",
           urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
         }, {
           name: "user_logs.log_preview",
-          dictionaryId: getLabel("object_logs.log_preview"),
+          dictionaryId: "object_logs.log_preview",
           type: "string",
           multiple: true,
           presence: "optional",
           urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
         }, {
           name: "user_logs.log_detail",
-          dictionaryId: getLabel("object_logs.log_detail"),
+          dictionaryId: "object_logs.log_detail",
           type: "string",
           multiple: true,
           presence: "optional",

package/components/PaperForm/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LPaperForm";

package/components/PaperForm/classes/index.d.ts

@@ -0,0 +1,11 @@
+import { PaperFormClassesType } from './types';
+export declare const periodClasses: PaperFormClassesType;
+export declare function getPaperFormUtilityClass(slot: string): string;
+export declare const paperFormUtilityClasses: () => {
+    root: string;
+    content: string;
+    headerContainer: string;
+    iconTitleContainer: string;
+    iconHeaderContainer: string;
+    skeletonContainer: string;
+};

package/components/PaperForm/classes/types.d.ts

@@ -0,0 +1,10 @@
+import { paperFormUtilityClasses } from ".";
+export interface PaperFormClassesType {
+    root: string;
+    headerContainer: string;
+    iconTitleContainer: string;
+    iconHeaderContainer: string;
+    skeletonContainer: string;
+}
+export declare type PaperFormClassesKey = keyof PaperFormClassesType;
+export declare type Classes = ReturnType<typeof paperFormUtilityClasses>;

package/components/PaperForm/{index.76bd3a6d.js → index.5e1bc99f.js}

@@ -1,9 +1,10 @@
 import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
-import { Skeleton } from "@mui/material";
-import { I as Icon } from "../Icon/index.d214a74d.js";
-import { jsxs, jsx } from "react/jsx-runtime";
-const WrapperPaper = styled("div")(({
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { I as Icon } from "../Icon/index.9dae8337.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { unstable_composeClasses } from "@mui/base";
+const PaperFormRoot = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -15,7 +16,8 @@ const WrapperPaper = styled("div")(({
     boxShadow: theme.shadows[8],
     padding: theme.spacing(3),
     backgroundColor: theme.palette.background.paper
-  }
+  },
+  ...theme.components?.M4LPaperForm?.styleOverrides
 }));
 const HeaderContainer = styled("div")(({
   theme
@@ -65,44 +67,75 @@ const SkTPaperFormHeader = styled("div")(({
 const Header = (props) => {
   const {
     urlIcon,
-    title
+    title,
+    classes
   } = 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, {
+  return /* @__PURE__ */ jsx(HeaderContainer, {
     id: "Header",
-    children: /* @__PURE__ */ jsxs(IconTitleContainer, {
-      className: "m4l_draggable_handle",
-      children: [/* @__PURE__ */ jsx(IconHeader, {
+    className: classes.headerContainer,
+    children: !isSkeleton ? /* @__PURE__ */ jsxs(IconTitleContainer, {
+      className: classes.iconTitleContainer,
+      children: [urlIcon ? /* @__PURE__ */ jsx(IconHeader, {
+        className: classes.iconHeaderContainer,
         children: /* @__PURE__ */ jsx(Icon, {
           src: urlIcon
         })
-      }), title]
+      }) : null, title]
+    }) : /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
+      className: classes.skeletonContainer,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: 68,
+        height: 14
+      })]
     })
   });
 };
+const componentName = "M4LPaperForm";
+generateUtilityClasses(componentName, [
+  "root",
+  "headerContainer",
+  "iconTitleContainer",
+  "iconHeaderContainer",
+  "skeletonContainer"
+]);
+function getPaperFormUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const paperFormUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    headerContainer: ["headerContainer"],
+    iconTitleContainer: ["iconTitleContainer"],
+    iconHeaderContainer: ["iconHeaderContainer"],
+    skeletonContainer: ["skeletonContainer"],
+    content: ["content"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPaperFormUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 function PaperForm(props) {
   const {
     urlIcon,
     title,
     children
   } = props;
-  return /* @__PURE__ */ jsxs(WrapperPaper, {
-    id: "ContainerPropertyValue",
+  const classes = paperFormUtilityClasses();
+  return /* @__PURE__ */ jsxs(PaperFormRoot, {
+    className: classes.root,
     children: [/* @__PURE__ */ jsx(Header, {
       urlIcon,
-      title
+      title,
+      classes
     }), /* @__PURE__ */ jsx(Content, {
-      id: "Content",
+      className: classes.content,
       children
     })]
   });

package/components/PaperForm/types.d.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
+import { Classes } from './classes/types';
 export interface PaperFormProps {
-    urlIcon: string;
+    urlIcon?: string;
     title: string;
     children: ReactNode;
 }
-export declare type HeaderProps = Omit<PaperFormProps, 'children'>;
+export interface HeaderProps extends Omit<PaperFormProps, 'children'> {
+    classes: Classes;
+}

package/components/Period/Period.d.ts

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

package/components/Period/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LPeriod";

package/components/Period/classes/index.d.ts

@@ -0,0 +1,10 @@
+import { PeriodClassesType } from './types';
+import { OwnerState } from '../types';
+export declare const periodClasses: PeriodClassesType;
+export declare function getPeriodUtilityClass(slot: string): string;
+export declare const periodUtilityClasses: (ownerState: OwnerState) => {
+    root: string;
+    gap: string;
+    containerDateLabel: string;
+    containerDateValue: string;
+};

package/components/Period/classes/types.d.ts

@@ -0,0 +1,13 @@
+import { periodUtilityClasses } from ".";
+export interface PeriodClassesType {
+    root: string;
+    gap: string;
+    containerDateLabel: string;
+    containerDateValue: string;
+    stateError: string;
+    stateReadOnly: string;
+    variantMonoperiod: string;
+    variantMultiperiod: string;
+}
+export declare type PeriodClassesKey = keyof PeriodClassesType;
+export declare type Classes = ReturnType<typeof periodUtilityClasses>;