@m4l/components 0.1.62 → 0.1.64

package/components/hook-form/RHFTextField/index.97485ff2.js

@@ -0,0 +1,341 @@
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
+import { forwardRef, useState, useEffect } from "react";
+import { I as IconButton } from "../../mui_extended/IconButton/index.be9c2ce5.js";
+import { T as TEST_PROP_ID } from "../../../vendor.a15d263e.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "../../Icon/index.0f9b360e.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled as styled$1 } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../utils/index.e199226a.js";
+import { T as Typography } from "../../mui_extended/Typography/index.41b60a6b.js";
+import { H as HelperText } from "../../HelperText/index.3c07ca2a.js";
+const SkeletonTextFieldRoot = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+}));
+const WrapperSkeletonRHFTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1),
+  gap: "4px"
+}));
+const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
+const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
+const RHFTEXTFIELD_PREFIX = "RHFTextField";
+const getNameDataTestId$1 = (KEY) => {
+  return `${RHFTEXTFIELD_PREFIX}-${KEY}`;
+};
+const SkeletonTextField = (props) => {
+  const {
+    skeletonWidth,
+    skeletonHeight,
+    ownerState,
+    classes,
+    hasLabel
+  } = props;
+  const {
+    type: variant
+  } = ownerState;
+  return /* @__PURE__ */ jsxs(SkeletonTextFieldRoot, {
+    children: [(hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: "30%",
+      height: "16px"
+    }), /* @__PURE__ */ jsx(WrapperSkeletonRHFTextField, {
+      className: classes.skeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId$1("skeleton")
+      } : {},
+      children: variant === "text" ? /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: skeletonWidth,
+          height: skeletonHeight
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: "16px",
+          height: "16px"
+        })]
+      })
+    })]
+  });
+};
+const RHFTextFieldRoot = styled$1("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFTextField?.styleOverrides
+}));
+styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+const componentName = "M4LRHFTextField";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "label",
+    "skeleton",
+    "variantText",
+    "variantPassword",
+    "variantInfo",
+    "isDisabled",
+    "variantSuccess",
+    "variantWarning",
+    "variantError",
+    "sizeSmall",
+    "sizeMedium",
+    "isFocus"
+  ]
+);
+const getRHFTextFieldClassesByState = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.type === "password" ? "variantPassword" : "variantText",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.focus && "isFocus",
+      ownerState.disabled && "isDisabled",
+      ownerState.variant === "info" && "variantInfo",
+      ownerState.variant === "success" && "variantSuccess",
+      ownerState.variant === "warning" && "variantWarning",
+      ownerState.variant === "error" && "variantError"
+    ],
+    label: ["label"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFTextField = forwardRef((props, ref) => {
+  const {
+    name: nameRHF,
+    autoComplete = "off",
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    type,
+    label,
+    size = "small",
+    startIcon,
+    endIcon,
+    variant,
+    helperMessage = "",
+    disabled,
+    ...other
+  } = props;
+  const {
+    control,
+    formState: {
+      errors
+    }
+  } = useFormContext();
+  const [isFocus, setIsFocus] = useState(false);
+  const [currentVariant, setCurrentVariant] = useState(null);
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const handleFocus = () => {
+    setIsFocus(true);
+  };
+  const handleBlur = () => {
+    setIsFocus(false);
+  };
+  const ownerState = {
+    type: type === "password" ? "password" : "text",
+    size,
+    focus: isFocus,
+    variant: currentVariant,
+    disabled
+  };
+  const classes = getRHFTextFieldClassesByState(ownerState);
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(RHFTextFieldRoot, {
+    className: classes.root,
+    role: "textbox",
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId$1("root")
+    } : {},
+    children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
+      name: nameRHF,
+      control,
+      render: ({
+        field: {
+          onChange,
+          value,
+          name,
+          ref: inputRef
+        },
+        fieldState: {
+          error
+        }
+      }) => {
+        const onInternalChange = (event) => {
+          if (type === "number") {
+            if (event.target.value) {
+              onChange(Number(event.target.value));
+              return;
+            }
+          }
+          onChange(event);
+        };
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [label ? /* @__PURE__ */ jsx(Typography, {
+            variant: "body",
+            className: classes.label,
+            children: label
+          }) : null, /* @__PURE__ */ jsx(TextField, {
+            variant: "outlined",
+            disabled,
+            ref,
+            inputRef,
+            InputLabelProps: {
+              shrink: true
+            },
+            autoComplete,
+            onChange: onInternalChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            value: value || "",
+            name,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}`
+            } : {},
+            fullWidth: true,
+            error: !!error,
+            type,
+            ...startIcon || endIcon ? {
+              InputProps: {
+                ...process.env.NODE_ENV !== "production" ? {
+                  [TEST_PROP_ID]: `${RHFTEXTFIELD_INPUT_TEST_ID}_${name}`
+                } : {},
+                ...{
+                  ...startIcon ? {
+                    startAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+                      position: "start",
+                      children: startIcon
+                    })
+                  } : {},
+                  ...endIcon ? {
+                    endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+                      position: "end",
+                      children: endIcon
+                    })
+                  } : {}
+                }
+              }
+            } : {},
+            ...other
+          }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
+            variant: currentVariant,
+            message: currentVariant !== "error" ? helperMessage : error?.message
+          }) : null]
+        });
+      }
+    }) : /* @__PURE__ */ jsx(SkeletonTextField, {
+      classes,
+      skeletonWidth,
+      skeletonHeight,
+      ownerState,
+      hasLabel: label
+    })
+  });
+});
+RHFTextField.displayName = "RHFTextField";
+const RHFTextFieldPasswordRoot = styled$1("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFTextFieldPassword?.styleOverrides
+}));
+generateUtilityClasses("M4LRHFTextFieldPassword", [
+  "root"
+]);
+function getRHFTextFieldPasswordUtilityClass(slot) {
+  return generateUtilityClass("M4LRHFTextFieldPassword", slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFTextFieldPasswordUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFTEXTFIELDPASSWORD_PREFIX = "RHFTextFieldPassword";
+const getNameDataTestId = (KEY) => {
+  return `${RHFTEXTFIELDPASSWORD_PREFIX}-${KEY}`;
+};
+const RHFTextFieldPassword = (props) => {
+  const {
+    name,
+    label,
+    skeletonWidth,
+    skeletonHeight,
+    size
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const classes = useUtilityClasses();
+  console.log("label----", label);
+  return /* @__PURE__ */ jsx(RHFTextFieldPasswordRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsx(RHFTextField, {
+      name,
+      label,
+      type: showPassword ? "text" : "password",
+      autoComplete: "on",
+      skeletonWidth,
+      skeletonHeight,
+      size,
+      InputProps: {
+        endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+          position: "end",
+          children: /* @__PURE__ */ jsx(IconButton, {
+            onClick: () => setShowPassword(!showPassword),
+            variant: "line",
+            src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
+          })
+        })
+      }
+    })
+  });
+};
+export {
+  RHFTextField as R,
+  RHFTextFieldPassword as a
+};

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

@@ -1,7 +1,7 @@
-import { RHFTextFieldState } from '../../classes/types';
-import { RHFTextFieldProps } from '../../types';
+import { RHFTextFieldProps, RHFTextFieldState } from '../../types';
 export interface SkeletonTextFieldProps extends Pick<RHFTextFieldProps, 'skeletonWidth' | 'skeletonHeight'> {
     ownerState: RHFTextFieldState;
     classes: any;
+    hasLabel?: string;
 }
 export declare type WrapperSkeletonRHFTextField = RHFTextFieldState;

package/components/hook-form/RHFTextField/tests/{contants.d.ts → constants.d.ts}

@@ -1,2 +1,3 @@
 export declare const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
 export declare const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
+export declare const RHFTEXTFIELD_PREFIX = "RHFTextField";

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

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

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

@@ -1,5 +1,19 @@
-export interface RHFTextFieldProps {
+import { TextFieldProps } from '@mui/material';
+import { ReactElement } from 'react';
+export declare type RHFTextFieldVariants = 'info' | 'success' | 'warning';
+export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'variant' | 'label'> {
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
     name: string;
+    size?: 'small' | 'medium';
+    startIcon?: ReactElement;
+    endIcon?: ReactElement;
+    variant?: RHFTextFieldVariants;
+    helperMessage?: string;
+    label?: string;
+}
+export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
+    type: 'password' | 'text';
+    focus: boolean;
+    variant: RHFTextFieldVariants | 'error' | null;
 }

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/{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/{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.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/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;