@webpros/mui-theme 0.1.6 → 0.2.0

package/dist/src/components/inputs/Button/get-button-colors-map.js

@@ -0,0 +1,211 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Here are extracted colors for `Button` and `IconButton` components, because they have the same color schemes.
+// Not applicable to other components
+export const getButtonColorsMap = (theme, viewContext) => {
+    const isInverseView = viewContext === 'inverse';
+    const { colors } = theme;
+    const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+    const stateLayersPath = isInverseView ? 'inverseStateLayers' : 'stateLayers';
+    const blendColors = isInverseView
+        ? colors.blendInverseSchemaWithStateLayer
+        : colors.blendSchemaWithStateLayer;
+    const PRIMARY_COLORS = {
+        filled: {
+            background: colors[schemesPath].base.primary,
+            color: colors[schemesPath].base.onPrimary,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.primary,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.onPrimary,
+            hover: blendColors(`${schemesPath}.base.primary`, `${stateLayersPath}.base.onPrimary.opacity08`),
+            active: blendColors(`${schemesPath}.base.primary`, `${stateLayersPath}.base.onPrimary.opacity12`),
+            focus: blendColors(`${schemesPath}.base.primary`, `${stateLayersPath}.base.onPrimary.opacity12`),
+            ripple: colors[stateLayersPath].base.onPrimary.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].base.primaryContainer,
+            color: colors[schemesPath].base.onPrimaryContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.primaryContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.onPrimaryContainer,
+            hover: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity08`),
+            active: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity12`),
+            ripple: colors[stateLayersPath].base.onPrimaryContainer.opacity12,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].base.primary,
+            disabledBackground: 'transparent',
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.primary,
+            hover: colors[stateLayersPath].base.primary.opacity08,
+            active: colors[stateLayersPath].base.primary.opacity12,
+            focus: colors[stateLayersPath].base.primary.opacity12,
+            ripple: colors[stateLayersPath].base.primary.opacity12,
+        },
+    };
+    const DEFAULT_COLORS = {
+        tonal: {
+            background: colors[schemesPath].surfaces.surfaceContainer,
+            color: colors[schemesPath].surfaces.onSurfaceVariant,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].surfaces.surfaceContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].surfaces.onSurfaceVariant,
+            hover: blendColors(`${schemesPath}.surfaces.surfaceContainer`, `${stateLayersPath}.surfaces.onSurfaceVariant.opacity08`),
+            active: blendColors(`${schemesPath}.surfaces.surfaceContainer`, `${stateLayersPath}.surfaces.onSurfaceVariant.opacity12`),
+            focus: blendColors(`${schemesPath}.surfaces.surfaceContainer`, `${stateLayersPath}.surfaces.onSurfaceVariant.opacity12`),
+            ripple: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].surfaces.onSurfaceVariant,
+            disabledBackground: 'transparent',
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].surfaces.onSurfaceVariant,
+            hover: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity08,
+            active: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+            focus: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+            ripple: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+        },
+    };
+    const SECONDARY_COLORS = {
+        filled: {
+            background: colors[schemesPath].base.secondary,
+            color: colors[schemesPath].base.onSecondary,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.secondary,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.onSecondary,
+            hover: blendColors(`${schemesPath}.base.secondary`, `${stateLayersPath}.base.onSecondary.opacity08`),
+            active: blendColors(`${schemesPath}.base.secondary`, `${stateLayersPath}.base.onSecondary.opacity12`),
+            focus: blendColors(`${schemesPath}.base.secondary`, `${stateLayersPath}.base.onSecondary.opacity12`),
+            ripple: colors[stateLayersPath].base.onSecondary.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].base.secondaryContainer,
+            color: colors[schemesPath].base.onSecondaryContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.secondaryContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.secondary,
+            hover: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity08`),
+            active: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity12`),
+            ripple: colors[stateLayersPath].base.onSecondaryContainer.opacity12,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].base.secondary,
+            disabledBackground: 'transparent',
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.secondary,
+            hover: colors[schemesPath].base.secondaryContainer,
+            active: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.secondary.opacity08`),
+            focus: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.secondary.opacity08`),
+            ripple: colors[stateLayersPath].base.secondary.opacity12,
+        },
+    };
+    const ERROR_COLORS = {
+        filled: {
+            background: colors[schemesPath].status.error,
+            color: colors[schemesPath].status.onError,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.error,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onError,
+            hover: blendColors(`${schemesPath}.status.error`, `${stateLayersPath}.status.onError.opacity08`),
+            active: blendColors(`${schemesPath}.status.error`, `${stateLayersPath}.status.onError.opacity12`),
+            focus: blendColors(`${schemesPath}.status.error`, `${stateLayersPath}.status.onError.opacity12`),
+            ripple: colors[stateLayersPath].status.onError.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].status.errorContainer,
+            color: colors[schemesPath].status.onErrorContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.errorContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onErrorContainer,
+            hover: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity08`),
+            active: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity12`),
+            ripple: colors[stateLayersPath].status.onErrorContainer.opacity08,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].status.onErrorContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.error,
+            hover: colors[stateLayersPath].status.error.opacity08,
+            active: colors[stateLayersPath].status.error.opacity12,
+            focus: colors[stateLayersPath].status.error.opacity12,
+            ripple: colors[stateLayersPath].status.error.opacity12,
+        },
+    };
+    const SUCCESS_COLORS = {
+        filled: {
+            background: colors[schemesPath].status.success,
+            color: colors[schemesPath].status.onSuccess,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.success,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onSuccess,
+            hover: blendColors(`${schemesPath}.status.success`, `${stateLayersPath}.status.onSuccess.opacity08`),
+            active: blendColors(`${schemesPath}.status.success`, `${stateLayersPath}.status.onSuccess.opacity12`),
+            focus: blendColors(`${schemesPath}.status.success`, `${stateLayersPath}.status.onSuccess.opacity12`),
+            ripple: colors[stateLayersPath].status.onSuccess.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].status.successContainer,
+            color: colors[schemesPath].status.onSuccessContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.successContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onSuccessContainer,
+            hover: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity08`),
+            active: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity12`),
+            ripple: colors[stateLayersPath].status.onSuccessContainer.opacity08,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].status.onSuccessContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.success,
+            hover: colors[stateLayersPath].status.success.opacity08,
+            active: colors[stateLayersPath].status.success.opacity12,
+            focus: colors[stateLayersPath].status.success.opacity12,
+            ripple: colors[stateLayersPath].status.success.opacity12,
+        },
+    };
+    return {
+        primary: PRIMARY_COLORS,
+        default: DEFAULT_COLORS,
+        secondary: SECONDARY_COLORS,
+        error: ERROR_COLORS,
+        success: SUCCESS_COLORS,
+    };
+};

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

@@ -1,8 +1,13 @@
-import { Theme, ComponentsProps, ComponentsOverrides } from '@mui/material';
+import { Theme, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Checkbox' {
+    interface CheckboxProps extends ComponentWithViewContextOwnProps {
+    }
+}
 interface M3Checkbox {
     MuiCheckbox: {
-        defaultProps?: ComponentsProps['MuiCheckbox'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiCheckbox'];
+        variants?: ComponentsVariants<Theme>['MuiCheckbox'];
     };
 }
 export declare const getCheckbox: (theme: Theme) => M3Checkbox;

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

@@ -1,19 +1,69 @@
 export const getCheckbox = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiCheckbox: {
             styleOverrides: {
                 root: {
-                    color: palette.outline.main,
-                    padding: 8,
-                    '&.Mui-checked': {
-                        color: palette.primary.main,
-                    },
                     '&.Mui-disabled': {
-                        color: palette.outline.main,
+                        color: colors.stateLayers.surfaces.onSurfaceVariant.opacity38,
                     },
                 },
             },
+            variants: [
+                {
+                    props: { color: 'default' },
+                    style: {
+                        color: colors.schemes.surfaces.onSurfaceVariant,
+                        '&.Mui-checked': {
+                            color: colors.schemes.base.primary,
+                        },
+                        '&.MuiCheckbox-indeterminate': {
+                            color: colors.schemes.base.primary,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'error' },
+                    style: {
+                        color: colors.schemes.status.error,
+                        '&.Mui-checked': {
+                            color: colors.schemes.status.error,
+                        },
+                    },
+                },
+                {
+                    props: { viewContext: 'inverse' },
+                    style: {
+                        '&.Mui-disabled': {
+                            color: colors.inverseStateLayers.surfaces.onSurfaceVariant.opacity28,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'default', viewContext: 'inverse' },
+                    style: {
+                        color: colors.inverseSchemes.surfaces.onSurfaceVariant,
+                        '&.Mui-checked': {
+                            color: colors.inverseSchemes.base.primary,
+                        },
+                        '&.MuiCheckbox-indeterminate': {
+                            color: colors.inverseSchemes.base.primary,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'error', viewContext: 'inverse' },
+                    style: {
+                        color: colors.inverseSchemes.status.error,
+                        '&.Mui-checked': {
+                            color: colors.inverseSchemes.status.error,
+                        },
+                        '&.MuiCheckbox-indeterminate': {
+                            color: colors.inverseSchemes.status.error,
+                        },
+                    },
+                },
+            ],
         },
     };
 };

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;