@m4l/components 0.1.62 → 0.1.63

package/components/hook-form/RHFTextFieldPassword/tests/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const RHFTEXTFIELDPASSWORD_ROOT_TEST_ID = "RHFTextFieldPasswordRoot";
+export declare const RHFTEXTFIELDPASSWORD_PREFIX = "RHFTextFieldPassword";

package/components/hook-form/RHFTextFieldPassword/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import { RHFTextFieldPasswordClassesType } from "../classes/types";
+export declare const getNameDataTestId: (KEY: keyof RHFTextFieldPasswordClassesType) => string;

package/components/hook-form/RHFUpload/RHFUploadImage/styles.d.ts

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

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const WrapperUploadImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropZoneStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PlaceholderStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerUploadBody: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Containermessage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerDescription: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerConditions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperFileImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/subcomponents/Skeleton/styles.d.ts

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

package/components/hook-form/RHFUpload/{index.7fdff30f.js → index.798eb11d.js}

@@ -4,7 +4,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import isString from "lodash/isString";
 import { useDropzone } from "react-dropzone";
 import { styled, alpha } from "@mui/material/styles";
-import { I as Image } from "../../Image/index.aa24e982.js";
+import { I as Image } from "../../Image/index.1a9c0327.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 const WrapperUploadImage = styled("div")(({
@@ -188,8 +188,7 @@ function UploadImage({
           children: /* @__PURE__ */ jsx(Image, {
             alt: "avatar",
             src: isString(file) ? file : file.preview || "",
-            width: "auto",
-            height: "100%"
+            ratio: "1:1"
           })
         }), /* @__PURE__ */ jsx(PlaceholderStyle, {
           id: "PlaceholderStyle",
@@ -213,8 +212,7 @@ function UploadImage({
             children: [/* @__PURE__ */ jsx(WrapperImage, {
               children: /* @__PURE__ */ jsx(Image, {
                 src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
-                width: "100px",
-                height: "100px"
+                ratio: "1:1"
               })
             }), /* @__PURE__ */ jsxs(Containermessage, {
               children: [/* @__PURE__ */ jsx(ContainerTitle, {

package/components/hook-form/index.d.ts

@@ -1,6 +1,6 @@
-export { RHFAutocomplete } from './RHFAutocomplete';
+export { RHFAutocomplete } from './RHFAutocomplete/RHFAutocomplete';
 export { getRHFAutocompleteComponentsDictionary } from './RHFAutocomplete/dictionary';
-export { RHFAutocompleteAsync } from './RHFAutocompleteAsync';
+export { RHFAutocompleteAsync } from './RHFAutocompleteAsync/RHFAutocompleteAsync';
 export { getRHFAutocompleteAsyncComponentsDictionary } from './RHFAutocompleteAsync/dictionary';
 export * from './RHFCheckbox/RHFCheckbox';
 export { RHFDateTime } from './RHFDateTime';

package/components/index.d.ts

@@ -12,8 +12,10 @@ export type { RowKey } from './DataGrid/types';
 export { getDataGridComponentsDictionary as getGridComponentsDictionary } from './DataGrid/dictionary';
 export { TextEditor, NumberEditor } from './DataGrid/subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './DataGrid/utils/getDataGridRowsFromSet';
-export * from './DynamicFilter/index';
-export * from './ErrorLabel';
+export * from './DynamicFilter';
+export * from './DynamicFilter/dictionary';
+export * from './HelperText';
+export type { RawFilterFieldApply, } from './DynamicFilter/types';
 export * from './CommonActions/';
 export * from './CommonActions/dictionary';
 export * from './DraggableWindow';
@@ -22,6 +24,7 @@ export * from './LanguagePopover';
 export * from './Image/Image';
 export * from './Loadable';
 export * from './modal';
+export { NavLink } from './NavLink';
 export * from './NoItemSelected';
 export * from './NoItemSelected/dictionary';
 export * from './ObjectLogs';
@@ -35,4 +38,8 @@ export * from './ResizeableWindow';
 export * from './ScrollBar';
 export { ScrollToTop } from './ScrollToTop';
 export * from './SplitLayout';
+export * from './SideBar';
+export * from './AppBar';
+export * from './AccountPopover';
+export * from './AppBar/AppBar';
 export type { SplitPosition } from './SplitLayout/types';

package/components/modal/ModalDialog/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { VariantProps } from './types';
+export declare const WrapperDialog: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/modal/WindowBase/styles.d.ts

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

package/components/modal/WindowBase/subcomponents/Header/styles.d.ts

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

package/components/modal/{WindowBase.7828e042.js → WindowBase.59f50553.js}

@@ -1,10 +1,10 @@
 import { useEnvironment } from "@m4l/core";
 import "react";
-import { u as useModal } from "../../hooks/useModal/index.77b3415c.js";
+import { u as useModal } from "../../hooks/useModal/index.5c159ed2.js";
 import { styled } from "@mui/material/styles";
-import { b as getThemeVariantColor } from "../../utils/index.b6ae791a.js";
+import { a as getThemeVariantColor } from "../../utils/index.e199226a.js";
 import { IconButton } from "@mui/material";
-import { I as Icon } from "../Icon/index.b29ff2d9.js";
+import { I as Icon } from "../Icon/index.0f9b360e.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperWindowBase = styled("div")(({ theme }) => ({
   display: "flex",

package/components/modal/WindowConfirm/subcomponents/MessageIlustration/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VariantProps } from './types';
+export declare const WrapperMessageIlustration: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IllustrationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MessageContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/modal/{WindowConfirm.42ec4dcd.js → WindowConfirm.c1339cf8.js}

@@ -1,34 +1,36 @@
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import "react";
-import { u as useModal } from "../../hooks/useModal/index.77b3415c.js";
-import { A as Actions } from "../CommonActions/components/Actions/index.6eb24c0b.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.3f75a205.js";
+import { u as useModal } from "../../hooks/useModal/index.5c159ed2.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.433cd345.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.2eb2c1e1.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.0d138cb3.js";
 import "react-hook-form";
 import { Typography } from "@mui/material";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.8406ed5b.js";
+import "../mui_extended/Button/index.d9e0ae2e.js";
+import "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "../../react-draggable.6471b07e.js";
-import "../ModalDialog/index.dc7ebe06.js";
-import "../Resizeable/index.04fa8de5.js";
+import "../../react-draggable.1aa81436.js";
+import "../ModalDialog/index.3efe049b.js";
+import "../Resizeable/index.b5d42efb.js";
 import "@m4l/graphics";
 import { styled } from "@mui/material/styles";
-import { I as Icon } from "../Icon/index.b29ff2d9.js";
-import { c as getVariantColor } from "../../utils/index.b6ae791a.js";
-import { W as WindowBase } from "./WindowBase.7828e042.js";
-import "../areas/components/index.9f62ca8e.js";
-import "../areas/components/AreasAdmin/index.645bd2c7.js";
-import "../mui_extended/IconButton/index.afa201a7.js";
+import { I as Icon } from "../Icon/index.0f9b360e.js";
+import { b as getVariantColor } from "../../utils/index.e199226a.js";
+import { W as WindowBase } from "./WindowBase.59f50553.js";
+import "../areas/components/index.eace295a.js";
+import "../areas/components/AreasAdmin/index.51e28f63.js";
+import "../mui_extended/IconButton/index.be9c2ce5.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.f3d6e728.js";
+import "../areas/contexts/AreasContext/index.0792a8d1.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.3e74c849.js";
+import "../areas/components/AreasContainer/index.1e5e6e91.js";
 import "react-grid-layout/css/styles.css";
-import "../../react-resizable.b620abed.js";
-import "../areas/contexts/index.3623b460.js";
+import "../../react-resizable.e86cb01e.js";
+import "../areas/contexts/index.2a915acf.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
+import "../mui_extended/Typography/index.41b60a6b.js";
 const WrapperMessageIlustration = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -88,7 +90,7 @@ const MessageIlustration = (props) => {
         variant,
         children: /* @__PURE__ */ jsx(Icon, {
           src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
-          size: "230px"
+          size: "small"
         })
       }), /* @__PURE__ */ jsx(MessageContainer, {
         children: /* @__PURE__ */ jsx(Typography, {

package/components/modal/index.7a84f64d.js

@@ -0,0 +1,30 @@
+import "@mui/material";
+import "../../react-draggable.1aa81436.js";
+import "react";
+import "../../contexts/ModalContext/index.ae8041f3.js";
+import "../ModalDialog/index.3efe049b.js";
+import "../Resizeable/index.b5d42efb.js";
+import "react/jsx-runtime";
+import "@m4l/graphics";
+import "@m4l/core";
+import "../CommonActions/components/Actions/index.433cd345.js";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.d9e0ae2e.js";
+import "clsx";
+import "react-hook-form";
+import "./WindowBase.59f50553.js";
+import "../Icon/index.0f9b360e.js";
+import "../areas/components/index.eace295a.js";
+import "../areas/components/AreasAdmin/index.51e28f63.js";
+import "../mui_extended/IconButton/index.be9c2ce5.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.0792a8d1.js";
+import "zustand/shallow";
+import "../areas/components/AreasContainer/index.1e5e6e91.js";
+import "react-grid-layout/css/styles.css";
+import "../../react-resizable.e86cb01e.js";
+import "../areas/contexts/index.2a915acf.js";
+import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
+import "@mui/lab";
+import "../mui_extended/Typography/index.41b60a6b.js";
+import "./WindowConfirm.c1339cf8.js";

package/components/mui_extended/Accordion/{index.725a10af.js → index.b7487e37.js}

@@ -1,7 +1,7 @@
 import { Skeleton, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.afa201a7.js";
+import { I as IconButton } from "../IconButton/index.be9c2ce5.js";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.b29ff2d9.js";
+import { I as Icon } from "../../Icon/index.0f9b360e.js";
 import { styled } from "@mui/material/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
 styled("div")(({

package/components/mui_extended/Accordion/styles.d.ts

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

package/components/mui_extended/Button/classes/index.d.ts

@@ -1,7 +1,8 @@
 import { ButtonClassesType } from './types';
+import { OwnerState } from '../types';
 export declare const buttonClasses: ButtonClassesType;
 export declare function getButtonUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useUtilityClasses: (onwerState: OwnerState) => {
     root: string;
     skeleton: string;
 };

package/components/mui_extended/Button/classes/types.d.ts

@@ -1,5 +1,11 @@
 export interface ButtonClassesType {
     root: string;
     skeleton: string;
+    sizeSmall: string;
+    sizeMedium: String;
+    variantOutlined: string;
+    variantContained: string;
+    variantText: string;
+    isDisabled: string;
 }
-export declare type buttonClassesKey = keyof ButtonClassesType;
+export declare type ButtonClassesKey = keyof ButtonClassesType;

package/components/mui_extended/Button/index.d9e0ae2e.js

@@ -0,0 +1,208 @@
+import { useModuleSkeleton } from "@m4l/core";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, IconButton, Tooltip } from "@mui/material";
+import MuiButton from "@mui/material/Button";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I as Image } from "../../Image/index.1a9c0327.js";
+import { unstable_composeClasses } from "@mui/base";
+import { T as TEST_PROP_ID } from "../../../vendor.a15d263e.js";
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { T as Typography } from "../Typography/index.41b60a6b.js";
+const ButtonRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LButton?.styleOverrides
+}));
+styled(Skeleton)(({
+  theme
+}) => ({
+  borderRadius: theme.spacing(0.5)
+}));
+const componentName$2 = "M4LButton";
+generateUtilityClasses(componentName$2, [
+  "root",
+  "skeleton",
+  "sizeSmall",
+  "sizeMedium",
+  "variantOutlined",
+  "variantContained",
+  "variantText",
+  "isDisabled"
+]);
+function getButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName$2, slot);
+}
+const useUtilityClasses$2 = (onwerState) => {
+  const slots = {
+    root: ["root", onwerState.size === "small" && "sizeSmall", onwerState.size === "medium" && "sizeMedium", onwerState.variant === "outlined" && "variantOutlined", onwerState.variant === "contained" && "variantContained", onwerState.variant === "text" && "variantText", onwerState.isDisabled && "isDisabled"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const Button = (props) => {
+  const {
+    size = "small",
+    variant = "contained",
+    className,
+    disabled,
+    ...others
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    size,
+    variant,
+    isDisabled: disabled
+  };
+  const classes = useUtilityClasses$2(ownerState);
+  return /* @__PURE__ */ jsx(ButtonRoot, {
+    className: clsx(classes.root, className),
+    "data-testid": "ButtonRoot",
+    children: !isSkeleton ? /* @__PURE__ */ jsx(MuiButton, {
+      ...others,
+      variant,
+      size,
+      disableRipple: true
+    }) : /* @__PURE__ */ jsx(Skeleton, {
+      className: classes.skeleton,
+      "data-testid": "MuiSkeleton",
+      variant: "rectangular",
+      width: "100px"
+    })
+  });
+};
+const WrapperImageButton = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LImageButton?.styleOverrides
+}));
+const componentName$1 = "M4LImageButton";
+generateUtilityClasses(componentName$1, [
+  "root"
+]);
+function getImageButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName$1, slot);
+}
+const useUtilityClasses$1 = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getImageButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const IMAGEBUTTON_PREFIX = "ImageButton";
+const getNameDataTestId$1 = (KEY) => {
+  return `${IMAGEBUTTON_PREFIX}-${KEY}`;
+};
+function ImageButton({
+  src,
+  width,
+  height,
+  useIntersectionObserver,
+  skeletonVariant = "circle",
+  tooltip,
+  sx = {
+    width,
+    height
+  },
+  ...other
+}) {
+  const finalTooltip = tooltip;
+  const classes = useUtilityClasses$1();
+  const imageButton = useMemo(() => {
+    return /* @__PURE__ */ jsx(IconButton, {
+      sx,
+      ...other,
+      children: /* @__PURE__ */ jsx(Image, {
+        src,
+        useIntersectionObserver,
+        skeletonVariant
+      })
+    });
+  }, [src, width, height, useIntersectionObserver, skeletonVariant, sx]);
+  return /* @__PURE__ */ jsx(WrapperImageButton, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId$1("root")
+    } : {},
+    children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+      title: finalTooltip || "",
+      children: imageButton
+    }) : imageButton
+  });
+}
+const componentName = "M4LoadingButton";
+generateUtilityClasses(componentName, [
+  "root",
+  "skeleton",
+  "sizeSmall",
+  "sizeMedium",
+  "variantOutlined",
+  "variantContained",
+  "variantText",
+  "isDisabled"
+]);
+function getLoadingButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (onwerState) => {
+  const slots = {
+    root: ["root", onwerState.size === "small" && "sizeSmall", onwerState.size === "medium" && "sizeMedium", onwerState.variant === "outlined" && "variantOutlined", onwerState.variant === "contained" && "variantContained", onwerState.variant === "text" && "variantText", onwerState.isDisabled && "isDisabled"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getLoadingButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const LoadingButtonRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LoadingButton?.styleOverrides
+}));
+const LOADINGBUTTON_PREFIX = "LoadingButton";
+const getNameDataTestId = (KEY) => {
+  return `${LOADINGBUTTON_PREFIX}-${KEY}`;
+};
+const LoadingButton = (props) => {
+  const {
+    children,
+    skeletonWidth = "100%",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    size: other.size,
+    variant: other.variant,
+    isDisabled: other.disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(LoadingButtonRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, {
+      ...other,
+      children: /* @__PURE__ */ jsx(Typography, {
+        variant: "action",
+        children
+      })
+    }) : /* @__PURE__ */ jsx(Skeleton, {
+      className: classes.skeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("skeleton")
+      } : {},
+      variant: "rectangular",
+      width: skeletonWidth
+    })
+  });
+};
+export {
+  Button as B,
+  ImageButton as I,
+  LoadingButton as L
+};

package/components/mui_extended/Button/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const ButtonRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTButton: import("@emotion/styled").StyledComponent<{
+    animation?: false | "pulse" | "wave" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SkeletonClasses> | undefined;
+    height?: string | number | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "rectangular" | "rounded" | "circular" | undefined;
+    width?: string | number | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "width" | "height" | keyof import("@mui/material/OverridableComponent").CommonProps | "animation" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/mui_extended/Button/types.d.ts

@@ -1,2 +1,7 @@
 import { ButtonProps } from '@mui/material';
-export declare type ExtendButtonProps = ButtonProps;
+export interface ExtendButtonProps extends Omit<ButtonProps, 'size'> {
+    size?: 'small' | 'medium';
+}
+export interface OwnerState extends Pick<ExtendButtonProps, 'size' | 'variant'> {
+    isDisabled?: boolean;
+}

package/components/mui_extended/IconButton/IconButton.d.ts

@@ -1,8 +1,7 @@
-import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
 import { IconButtonProps } from './types';
 /**
  * Provee un botón con un icono para que los clientes ejecuten acciones en la plataforma web. Aporta su versión provisional de carga en red.
  * @param props
  * @returns
  */
-export declare const IconButton: (props: IconButtonProps & MUIIconButtonProps) => JSX.Element;
+export declare const IconButton: (props: IconButtonProps) => JSX.Element;

package/components/mui_extended/IconButton/classes/index.d.ts

@@ -1,7 +1,8 @@
 import { IconButtonClassesType } from './types';
+import { OwnerState } from '../types';
 export declare const IconButtonClasses: IconButtonClassesType;
 export declare function getIconButtonUtilityClass(slot: string): string;
-export declare const useUtilityClasses: () => {
+export declare const useUtilityClasses: (ownerState: OwnerState) => {
     root: string;
     skeleton: string;
 };

package/components/mui_extended/IconButton/classes/types.d.ts

@@ -1,5 +1,13 @@
 export interface IconButtonClassesType {
     root: string;
     skeleton: string;
+    sizeExtraSmall: string;
+    sizemSall: string;
+    sizeMedium: string;
+    variantPrimary: string;
+    variantSecondary: string;
+    variantLine: string;
+    isFocus: string;
+    isDisabled: string;
 }
 export declare type IconButtonClassesKey = keyof IconButtonClassesType;