@webpros/mui-theme 0.1.6 → 0.3.0

package/dist/src/components/inputs/Fab/Fab.theme.d.ts

@@ -7,17 +7,13 @@ interface M3Fab {
     };
 }
 declare module '@mui/material/Fab' {
+    interface FabPropsVariantOverrides {
+        filled: true;
+        tonal: true;
+    }
     interface FabPropsColorOverrides {
         primary: true;
-        surface: true;
-        secondary: true;
-        tertiary: true;
-        success: false;
-        info: false;
-        warning: false;
-        error: false;
-        default: false;
-        inherit: false;
+        default: true;
     }
 }
 export declare const getFab: (theme: Theme) => M3Fab;

package/dist/src/components/inputs/Fab/Fab.theme.js

@@ -1,130 +1,59 @@
-import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
 export const getFab = (theme) => {
-    const { palette } = theme;
+    const { colors, typography } = theme;
     return {
         MuiFab: {
-            defaultProps: { color: 'secondary' },
+            defaultProps: { color: 'primary' },
             styleOverrides: {
-                root: {
-                    boxShadow: theme.shadows[3],
-                    borderRadius: '18px',
-                    textTransform: 'capitalize',
-                    fontWeight: 500,
-                },
+                root: Object.assign(Object.assign({}, typography.LabelMedium), { width: 'auto', height: '42px', boxShadow: theme.shadows[2], borderRadius: '17px', textTransform: 'none', padding: 11, '&:active': {
+                        boxShadow: `${theme.shadows[1]} !important`,
+                    } }),
             },
             variants: [
                 {
-                    props: { variant: 'extended', size: 'medium' },
+                    props: { variant: 'filled', color: 'primary' },
                     style: {
-                        height: '56px',
-                        borderRadius: '20px',
-                        paddingTop: 16,
-                        paddingRight: 20,
-                        paddingBottom: 16,
-                        paddingLeft: 24,
-                        '& > .MuiTypography-root': {
-                            color: palette.onPrimaryContainer.main,
-                            fontSize: '0.875rem',
-                            fontWeight: 500,
-                            lineHeight: '1.25rem',
-                            letterSpacing: '0.006rem',
-                            paddingLeft: '12px',
-                            paddingRight: '12px',
-                        },
-                        '& > .MuiSvgIcon-root': {
-                            color: palette.onPrimaryContainer.main,
-                        },
-                    },
-                },
-                {
-                    props: { size: 'medium', variant: 'circular' },
-                    style: {
-                        height: 56,
-                        width: 56,
-                    },
-                },
-                {
-                    props: { size: 'large', variant: 'circular' },
-                    style: {
-                        height: 96,
-                        width: 96,
-                        borderRadius: 28,
-                    },
-                },
-                {
-                    props: { color: 'primary' },
-                    style: {
-                        backgroundColor: palette.primaryContainer.main,
-                        color: palette.onPrimaryContainer.main,
-                        boxShadow: theme.shadows[0],
+                        background: colors.schemes.base.primary,
+                        color: colors.schemes.base.onPrimary,
                         '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.primaryContainer.main, palette.onPrimaryContainer.main),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.primaryContainer.main, palette.onPrimaryContainer.main),
-                            boxShadow: theme.shadows[0],
+                            background: colors.blendSchemaWithStateLayer('schemes.base.primary', 'stateLayers.base.onPrimary.opacity08'),
                         },
                         '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.primaryContainer.main, palette.onPrimaryContainer.main),
-                            boxShadow: theme.shadows[0],
-                        },
-                    },
-                },
-                {
-                    props: { color: 'secondary' },
-                    style: {
-                        backgroundColor: palette.secondaryContainer.main,
-                        color: palette.onSecondaryContainer.main,
-                        '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                            boxShadow: theme.shadows[4],
+                            background: colors.blendSchemaWithStateLayer('schemes.base.primary', 'stateLayers.base.onPrimary.opacity12'),
                         },
                         '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                            boxShadow: theme.shadows[3],
-                        },
-                        '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                            boxShadow: theme.shadows[3],
+                            background: colors.blendSchemaWithStateLayer('schemes.base.primary', 'stateLayers.base.onPrimary.opacity12'),
                         },
                     },
                 },
                 {
-                    props: { color: 'surface' },
+                    props: { variant: 'tonal', color: 'primary' },
                     style: {
-                        backgroundColor: palette.surfaceContainer.main,
-                        color: palette.primary.main,
+                        background: colors.schemes.base.primaryContainer,
+                        color: colors.schemes.base.primary,
                         '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainer.main, palette.primary.main),
-                            boxShadow: theme.shadows[4],
-                        },
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainer.main, palette.primary.main),
-                            boxShadow: theme.shadows[3],
+                            background: colors.blendSchemaWithStateLayer('schemes.base.primaryContainer', 'stateLayers.base.onPrimaryContainer.opacity08'),
                         },
                         '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainer.main, palette.primary.main),
-                            boxShadow: theme.shadows[3],
+                            background: colors.blendSchemaWithStateLayer('schemes.base.primaryContainer', 'stateLayers.base.onPrimaryContainer.opacity12'),
+                        },
+                        '&:focus': {
+                            background: colors.blendSchemaWithStateLayer('schemes.base.primaryContainer', 'stateLayers.base.onPrimaryContainer.opacity12'),
                         },
                     },
                 },
                 {
-                    props: { color: 'tertiary' },
+                    props: { variant: 'tonal', color: 'default' },
                     style: {
-                        backgroundColor: palette.tertiaryContainer.main,
-                        color: palette.onTertiaryContainer.main,
+                        background: colors.schemes.surfaces.surfaceContainerLowest,
+                        color: colors.schemes.surfaces.onSurfaceVariant,
                         '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
-                            boxShadow: theme.shadows[4],
-                        },
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
-                            boxShadow: theme.shadows[3],
+                            background: colors.blendSchemaWithStateLayer('schemes.surfaces.surfaceContainerLowest', 'stateLayers.surfaces.onSurfaceVariant.opacity08'),
                         },
                         '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
-                            boxShadow: theme.shadows[3],
+                            background: colors.blendSchemaWithStateLayer('schemes.surfaces.surfaceContainerLowest', 'stateLayers.surfaces.onSurfaceVariant.opacity12'),
+                        },
+                        '&:focus': {
+                            background: colors.blendSchemaWithStateLayer('schemes.surfaces.surfaceContainerLowest', 'stateLayers.surfaces.onSurfaceVariant.opacity12'),
                         },
                     },
                 },

package/dist/src/components/inputs/FormHelperText/FormHelperText.d.ts

@@ -0,0 +1,2 @@
+export declare const FormHelperText: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").FormHelperTextTypeMap<{}, "p">>;
+export type FormHelperTextComponentType = typeof FormHelperText;

package/dist/src/components/inputs/FormHelperText/FormHelperText.js

@@ -0,0 +1,3 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { FormHelperText as MuiFormHelperText } from '@mui/material';
+export const FormHelperText = MuiFormHelperText;

package/dist/src/components/inputs/FormHelperText/FormHelperText.theme.d.ts

@@ -0,0 +1,7 @@
+import { Theme, ComponentsOverrides } from '@mui/material';
+export interface M3FormHelperText {
+    MuiFormHelperText: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiFormHelperText'];
+    };
+}
+export declare const getFormHelperText: () => M3FormHelperText;

package/dist/src/components/inputs/FormHelperText/FormHelperText.theme.js

@@ -0,0 +1,8 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getFormHelperText = () => {
+    return {
+        MuiFormHelperText: {
+            styleOverrides: {},
+        },
+    };
+};

package/dist/src/components/inputs/FormHelperText/index.d.ts

@@ -0,0 +1 @@
+export * from './FormHelperText.theme';

package/dist/src/components/inputs/FormHelperText/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './FormHelperText.theme';

package/dist/src/components/inputs/FormLabel/FormLabel.d.ts

@@ -0,0 +1,2 @@
+export declare const FormLabel: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").FormLabelTypeMap<{}, "label">>;
+export type FormLabelComponentType = typeof FormLabel;

package/dist/src/components/inputs/FormLabel/FormLabel.js

@@ -0,0 +1,3 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { FormLabel as MuiFormLabel } from '@mui/material';
+export const FormLabel = MuiFormLabel;

package/dist/src/components/inputs/FormLabel/FormLabel.theme.d.ts

@@ -0,0 +1,7 @@
+import { Theme, ComponentsOverrides } from '@mui/material';
+export interface M3FormLabel {
+    MuiFormLabel: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
+    };
+}
+export declare const getFormLabel: () => M3FormLabel;

package/dist/src/components/inputs/FormLabel/FormLabel.theme.js

@@ -0,0 +1,8 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getFormLabel = () => {
+    return {
+        MuiFormLabel: {
+            styleOverrides: {},
+        },
+    };
+};

package/dist/src/components/inputs/FormLabel/index.d.ts

@@ -0,0 +1 @@
+export * from './FormLabel.theme';

package/dist/src/components/inputs/FormLabel/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './FormLabel.theme';

package/dist/src/components/inputs/IconButton/IconButton.theme.d.ts

@@ -1,7 +1,8 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
 declare module '@mui/material/IconButton' {
-    interface IconButtonOwnProps {
-        variant?: 'standard' | 'filled' | 'elevated' | 'tonal' | 'outlined';
+    interface IconButtonOwnProps extends ComponentWithViewContextOwnProps {
+        variant?: 'filled' | 'tonal' | 'ghost';
     }
     interface IconButtonPropsColorOverrides {
         asDisabled: true;

package/dist/src/components/inputs/IconButton/IconButton.theme.js

@@ -1,114 +1,109 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha, } from '@mui/material';
-import { getStateLayerColor, StateLayer } from '../../../utils/getStateLayerColor';
+import { flatten } from '../../../utils/flatten';
+import { circularProgressClasses, iconButtonClasses, touchRippleClasses, } from '@mui/material';
+import { getButtonColorsMap, } from '../../../components/inputs/Button/get-button-colors-map';
+import { rippleEnterKeyframe } from '../../../shared/rippleEnterKeyframe';
 export const getIconButton = (theme) => {
-    const { palette } = theme;
-    return {
-        MuiIconButton: {
-            styleOverrides: {
-                root: {
-                    height: 40,
-                    width: 40,
-                    borderRadius: 14,
-                    color: palette.onSurfaceVariant.main,
-                    padding: 0,
+    const sizes = [
+        {
+            props: { size: 'small' },
+            style: {
+                height: 20,
+                width: 20,
+                // `!important` is the only way in this case to rewrite loader icon size
+                [`& .${circularProgressClasses.root}`]: {
+                    width: '12px !important',
+                    height: '12px !important',
+                },
+            },
+        },
+        {
+            props: { size: 'medium' },
+            style: {
+                height: 34,
+                width: 34,
+            },
+        },
+        {
+            props: { size: 'large' },
+            style: {
+                height: 42,
+                width: 42,
+            },
+        },
+    ];
+    const getStylesByColor = (color, viewContext) => {
+        const colorsMap = getButtonColorsMap(theme);
+        const inverseColorsMap = getButtonColorsMap(theme, 'inverse');
+        const colorsPalette = viewContext === 'inverse' ? inverseColorsMap[color] : colorsMap[color];
+        // variants = [filled?, tonal, ghost]
+        const variantsStyles = Object.entries(colorsPalette).map(([variant, variantColors]) => [
+            {
+                props: { variant: variant, color, viewContext },
+                style: {
+                    background: variantColors.background,
+                    color: variantColors.color,
                     '&:hover': {
-                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main),
-                    },
-                    '&:focus': {
-                        background: getStateLayerColor(StateLayer.Focus, palette.onSurfaceVariant.main),
+                        background: variantColors.hover,
                     },
                     '&:active': {
-                        background: getStateLayerColor(StateLayer.Active, palette.onSurfaceVariant.main),
+                        background: variantColors.active,
                     },
-                    '&.Mui-disabled': {
-                        color: getStateLayerColor(StateLayer.Disabled, palette.onSurface.main),
-                    },
-                },
-            },
-            variants: [
-                {
-                    props: { size: 'small' },
-                    style: {
-                        height: 32,
-                        width: 32,
-                        borderRadius: 10,
+                    '&:focus': {
+                        background: variantColors.focus,
                     },
-                },
-                {
-                    props: { variant: 'filled' },
-                    style: {
-                        backgroundColor: palette.primary.main,
-                        color: palette.onPrimary.main,
-                        '&:hover': {
-                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.primary.main, palette.onPrimary.main),
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onPrimary.main),
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main),
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                        },
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        color: variantColors.ripple,
                     },
                 },
-                {
-                    props: { variant: 'elevated' },
-                    style: {
-                        boxShadow: theme.shadows[2],
-                        '&:active': {
-                            boxShadow: theme.shadows[3],
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                            boxShadow: theme.shadows[0],
-                        },
+            },
+            {
+                props: { variant: variant, color, viewContext, disabled: true },
+                style: {
+                    [`&.${iconButtonClasses.disabled}`]: {
+                        color: variantColors.disabledColor,
+                        background: variantColors.disabledBackground,
                     },
                 },
-                {
-                    props: { variant: 'tonal' },
-                    style: {
-                        backgroundColor: palette.secondaryContainer.main,
-                        color: palette.onSecondaryContainer.main,
-                        '&:hover': {
-                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Active, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                        },
-                        '& > svg': {
-                            color: palette.primary.main,
-                        },
+            },
+            {
+                props: { variant: variant, color, viewContext, loading: true },
+                style: {
+                    [`&.${iconButtonClasses.disabled}`]: {
+                        color: variantColors.loadingColor,
+                        background: variantColors.loadingBackground,
                     },
-                },
-                {
-                    props: { variant: 'outlined' },
-                    style: {
-                        borderColor: palette.outline.main,
-                        borderWidth: 1,
-                        borderStyle: 'solid',
-                        '&.Mui-disabled': {
-                            borderColor: getStateLayerColor(StateLayer.Disabled, palette.outline.main, palette.onSurface.main),
-                        },
+                    [`.${iconButtonClasses.loadingIndicator}`]: {
+                        color: variantColors.loadingIndicator,
                     },
                 },
-                {
-                    props: { variant: 'outlined', color: 'asDisabled' },
-                    style: {
-                        color: alpha(palette.onSurface.main, 0.38),
-                        borderColor: alpha(palette.onSurface.main, 0.12),
-                        borderWidth: 1,
-                        borderStyle: 'solid',
+            },
+        ]);
+        return flatten(variantsStyles);
+    };
+    return {
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    padding: 0,
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        opacity: 1,
+                        animationName: rippleEnterKeyframe,
                     },
                 },
+            },
+            variants: [
+                ...sizes,
+                ...getStylesByColor('primary'),
+                ...getStylesByColor('default'),
+                ...getStylesByColor('secondary'),
+                ...getStylesByColor('error'),
+                ...getStylesByColor('success'),
+                ...getStylesByColor('primary', 'inverse'),
+                ...getStylesByColor('default', 'inverse'),
+                ...getStylesByColor('secondary', 'inverse'),
+                ...getStylesByColor('error', 'inverse'),
+                ...getStylesByColor('success', 'inverse'),
             ],
         },
     };

package/dist/src/components/inputs/InputBase/InputBase.theme.d.ts

@@ -1,30 +1,13 @@
-import { ComponentsProps, ComponentsOverrides, ComponentsVariants, Theme } from '@mui/material';
-interface M3Autocomplete {
+import { ComponentsOverrides, Theme } from '@mui/material';
+declare module '@mui/material/InputBase' {
+    interface InputBasePropsSizeOverrides {
+        large: true;
+    }
+}
+interface M3InputBase {
     MuiInputBase: {
-        defaultProps?: ComponentsProps['MuiInputBase'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiInputBase'];
-        variants?: ComponentsVariants['MuiInputBase'];
-    };
-    MuiFormLabel: {
-        defaultProps?: ComponentsProps['MuiFormLabel'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
-        variants?: ComponentsVariants['MuiFormLabel'];
-    };
-    MuiOutlinedInput: {
-        defaultProps?: ComponentsProps['MuiOutlinedInput'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiOutlinedInput'];
-        variants?: ComponentsVariants['MuiOutlinedInput'];
-    };
-    MuiFormHelperText: {
-        defaultProps?: ComponentsProps['MuiFormHelperText'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiFormHelperText'];
-        variants?: ComponentsVariants['MuiFormHelperText'];
     };
 }
-/**
- * There is no separate component for usage outside of MUI, but it is used as base for several inputs
- * better to customized common things here, than in each component
- */
-export declare const getInputBase: (theme: Theme) => M3Autocomplete;
-declare const _default: {};
-export default _default;
+export declare const getInputBase: () => M3InputBase;
+export {};

package/dist/src/components/inputs/InputBase/InputBase.theme.js

@@ -1,70 +1,8 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { getOnStateLayerColor, OnStateLayer, } from '../../../utils/getStateLayerColor';
-/**
- * There is no separate component for usage outside of MUI, but it is used as base for several inputs
- * better to customized common things here, than in each component
- */
-export const getInputBase = (theme) => {
-    const { palette } = theme;
+export const getInputBase = () => {
     return {
         MuiInputBase: {
-            styleOverrides: {
-                root: {
-                    borderRadius: 8,
-                    borderColor: palette.outline.main,
-                    padding: '4px 8px',
-                    'input::placeholder': {
-                        color: palette.supportive.main,
-                        opacity: 1,
-                    },
-                    '& svg': {
-                        color: palette.onSurfaceVariant.main,
-                    },
-                },
-                input: {
-                    fontSize: '0.875rem',
-                    color: palette.onSurface.main,
-                },
-            },
-        },
-        MuiOutlinedInput: {
-            styleOverrides: {
-                root: {
-                    fieldset: {
-                        borderColor: palette.outline.main,
-                    },
-                    '&.Mui-disabled': {
-                        input: {
-                            WebkitTextFillColor: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                        },
-                        fieldset: {
-                            '&.MuiOutlinedInput-notchedOutline': {
-                                borderColor: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                        },
-                    },
-                },
-            },
-        },
-        MuiFormLabel: {
-            styleOverrides: {
-                root: {
-                    color: palette.supportive.main,
-                    '&.Mui-disabled': {
-                        color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                    },
-                },
-            },
-        },
-        MuiFormHelperText: {
-            styleOverrides: {
-                root: {
-                    '&.Mui-disabled': {
-                        color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                    },
-                },
-            },
+            styleOverrides: {},
         },
     };
 };
-export default {};

package/dist/src/components/inputs/InputLabel/InputLabel.theme.d.ts

@@ -1,9 +1,12 @@
-import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentsVariants } from '@mui/material';
+declare module '@mui/material/InputLabel' {
+    interface InputLabelPropsSizeOverrides {
+        large: true;
+    }
+}
 export interface M3InputLabel {
     MuiInputLabel: {
-        defaultProps?: ComponentsProps['MuiInputLabel'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiInputLabel'];
         variants?: ComponentsVariants['MuiInputLabel'];
     };
 }
-export declare const getInputLabel: (theme: Theme) => M3InputLabel;
+export declare const getInputLabel: () => M3InputLabel;

package/dist/src/components/inputs/InputLabel/InputLabel.theme.js

@@ -1,20 +1,34 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { inputLabelClasses, } from '@mui/material';
-export const getInputLabel = (theme) => {
-    const { palette } = theme;
+export const getInputLabel = () => {
     return {
         MuiInputLabel: {
-            styleOverrides: {
-                root: {
-                    color: palette.supportive.main,
-                    fontSize: '0.875rem',
-                    transform: 'translate(14px, 11px) scale(1)',
-                    // If label is shrunk (input has value or is focused), use normal MUI transform
-                    [`&.${inputLabelClasses.shrink}`]: {
-                        transform: 'translate(14px, -9px) scale(0.75)',
+            // the order matters
+            variants: [
+                {
+                    props: {},
+                    style: {
+                        transform: 'translate(14px, 12px) scale(1)',
                     },
                 },
-            },
+                {
+                    props: { variant: 'outlined', size: 'small' },
+                    style: {
+                        transform: 'translate(14px, 8px) scale(1)',
+                    },
+                },
+                {
+                    props: { variant: 'outlined', size: 'large' },
+                    style: {
+                        transform: 'translate(14px, 14px) scale(1)',
+                    },
+                },
+                {
+                    props: ({ variant, ownerState }) => variant === 'outlined' && !!ownerState.shrink,
+                    style: {
+                        transform: 'translate(14px, -10px) scale(0.8)',
+                    },
+                },
+            ],
         },
     };
 };