@webpros/mui-theme 0.4.9 → 0.4.10

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.4.9",
+    "version": "0.4.10",
     "license": "MIT",
     "repository": {
         "type": "git",

package/dist/src/components/feedback/Alert/Alert.theme.js

@@ -1,6 +1,6 @@
 import { iconMapping } from './alertDefaultIcons';
 export const getAlert = (theme) => {
-    const { colors } = theme;
+    const { colors, typography } = theme;
     return {
         MuiAlert: {
             defaultProps: {
@@ -9,32 +9,12 @@ export const getAlert = (theme) => {
             styleOverrides: {
                 root: {
                     borderRadius: '6px',
-                    padding: '8px',
-                    boxShadow: 'none',
-                    '.MuiAlert-action': {
-                        marginTop: '-8px',
-                        paddingTop: '6px',
-                        paddingRight: '8px',
-                        paddingLeft: '0px',
-                    },
-                    '.MuiAlert-message': {
-                        paddingLeft: '6px',
-                        paddingRight: '6px',
-                        paddingTop: '7px',
-                        paddingBottom: '7px',
-                    },
-                    '.MuiAlertTitle-root ': {
-                        marginTop: '0px',
-                        marginBottom: '0px',
-                    },
-                    '.MuiAlert-icon': {
-                        paddingLeft: '4px',
-                        paddingRight: '4px',
-                        paddingTop: '7px',
-                        marginRight: '0px',
-                    },
                 },
+                message: Object.assign(Object.assign({}, typography.BodySmall), { paddingTop: '10px', paddingBottom: '10px' }),
+                action: { paddingTop: '0.5px' },
             },
+            // TODO: Refactor this, as some of these styles have no effect on the UI
+            // and do not align with MUI Alert styling.
             variants: [
                 {
                     props: { variant: 'standard', color: 'error' },

package/dist/src/components/feedback/AlertTitle/AlertTitle.d.ts

@@ -0,0 +1,4 @@
+import { AlertTitle as MuiAlertTitle } from '@mui/material';
+import './AlertTitle.theme';
+export declare const AlertTitle: typeof MuiAlertTitle;
+export type AlertTitleComponentType = typeof AlertTitle;

package/dist/src/components/feedback/AlertTitle/AlertTitle.js

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

package/dist/src/components/feedback/AlertTitle/AlertTitle.theme.d.ts

@@ -0,0 +1,9 @@
+import { Theme, ComponentsOverrides } from '@mui/material';
+interface M3AAlertTitle {
+    MuiAlertTitle: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiAlertTitle'];
+    };
+}
+export declare const getAlertTitle: (_theme: Theme) => M3AAlertTitle;
+declare const _default: {};
+export default _default;

package/dist/src/components/feedback/AlertTitle/AlertTitle.theme.js

@@ -0,0 +1,12 @@
+export const getAlertTitle = (_theme) => {
+    return {
+        MuiAlertTitle: {
+            styleOverrides: {
+                root: {
+                    marginBottom: '2px',
+                },
+            },
+        },
+    };
+};
+export default {};

package/dist/src/components/feedback/AlertTitle/index.d.ts

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

package/dist/src/components/feedback/AlertTitle/index.js

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

package/dist/src/components/feedback/Snackbar/Snackbar.theme.d.ts

@@ -6,5 +6,5 @@ interface M3Snackbar {
         variants?: ComponentsVariants['MuiSnackbar'];
     };
 }
-export declare const getSnackbar: (theme: Theme) => M3Snackbar;
+export declare const getSnackbar: (_theme: Theme) => M3Snackbar;
 export {};

package/dist/src/components/feedback/Snackbar/Snackbar.theme.js

@@ -1,21 +1,8 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-export const getSnackbar = (theme) => {
-    const { colors } = theme;
+export const getSnackbar = (_theme) => {
     return {
         MuiSnackbar: {
-            styleOverrides: {
-                root: {
-                    borderRadius: '10px',
-                    '& .MuiSnackbarContent-root': {
-                        backgroundColor: colors.inverseSchemes.surfaces.elevatedContainerLowest,
-                        alignItems: 'baseline',
-                        paddingTop: 0,
-                    },
-                    '& .MuiSnackbarContent-action': {
-                        marginRight: 0,
-                    },
-                },
-            },
+            styleOverrides: {},
         },
     };
 };

package/dist/src/components/feedback/Snackbar/SnackbarErrorIcon.d.ts

@@ -0,0 +1 @@
+export declare const SnackbarErrorIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/feedback/Snackbar/SnackbarErrorIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useTheme } from '@mui/material';
+export const SnackbarErrorIcon = () => {
+    const { colors } = useTheme();
+    return (_jsxs("svg", { viewBox: "0 -1 20 18", width: "18px", height: "18px", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M17.7071 4.97915C17.8946 5.16668 18 5.42104 18 5.68625V12.3137C18 12.579 17.8946 12.8333 17.7071 13.0209L13.0209 17.7071C12.8333 17.8946 12.579 18 12.3137 18H5.68625C5.42104 18 5.16668 17.8946 4.97915 17.7071L0.292893 13.0209C0.105357 12.8333 0 12.579 0 12.3137V5.68625C0 5.42104 0.105357 5.16668 0.292893 4.97915L4.97915 0.292893C5.16668 0.105357 5.42104 0 5.68625 0H12.3137C12.579 0 12.8333 0.105357 13.0209 0.292893L17.7071 4.97915Z", fill: colors.inverseSchemes.status.error }), _jsx("path", { d: "M 5.5,5.5 L 12.5,12.5 M 12.5,5.5 L 5.5,12.5", stroke: colors.inverseSchemes.status.onError, strokeWidth: "1.25", strokeLinecap: "round" })] }));
+};

package/dist/src/components/feedback/Snackbar/SnackbarSuccessIcon.d.ts

@@ -0,0 +1 @@
+export declare const SnackbarSuccessIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/feedback/Snackbar/SnackbarSuccessIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useTheme } from '@mui/material';
+export const SnackbarSuccessIcon = () => {
+    const { colors } = useTheme();
+    return (_jsxs("svg", { viewBox: "0 0 20 20", width: "19px", height: "19px", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "10", cy: "10", r: "9.5", fill: colors.inverseSchemes.status.success }), _jsx("path", { d: "M14.2 7.1C14.27 7.17 14.325 7.255 14.36 7.35C14.395 7.445 14.415 7.545 14.415 7.645C14.415 7.745 14.395 7.845 14.36 7.94C14.325 8.035 14.27 8.12 14.2 8.19L8.95 13.44C8.88 13.51 8.795 13.565 8.7 13.6C8.605 13.635 8.505 13.655 8.405 13.655C8.305 13.655 8.205 13.635 8.11 13.6C8.015 13.565 7.93 13.51 7.86 13.44L5.36 10.94C5.22 10.8 5.145 10.61 5.145 10.415C5.145 10.22 5.22 10.03 5.36 9.89C5.5 9.75 5.69 9.675 5.885 9.675C6.08 9.675 6.27 9.75 6.41 9.89L8.405 11.885L13.15 7.1C13.22 7.03 13.305 6.975 13.4 6.94C13.495 6.905 13.595 6.885 13.695 6.885C13.795 6.885 13.895 6.905 13.99 6.94C14.085 6.975 14.17 7.03 14.2 7.1Z", fill: colors.inverseSchemes.status.onSuccess })] }));
+};

package/dist/src/components/feedback/Snackbar/SnackbarWarningIcon.d.ts

@@ -0,0 +1 @@
+export declare const SnackbarWarningIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/feedback/Snackbar/SnackbarWarningIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useTheme } from '@mui/material';
+export const SnackbarWarningIcon = () => {
+    const { colors } = useTheme();
+    return (_jsxs("svg", { viewBox: "0 0 21 21", width: "20px", height: "20px", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0.585843 11.8218C-0.195205 11.0408 -0.195204 9.77443 0.585844 8.99338L8.99345 0.585771C9.7745 -0.195278 11.0408 -0.195277 11.8219 0.585772L20.2295 8.99338C21.0105 9.77443 21.0105 11.0408 20.2295 11.8218L11.8219 20.2294C11.0408 21.0105 9.7745 21.0105 8.99345 20.2294L0.585843 11.8218Z", fill: colors.inverseSchemes.status.warning }), _jsxs("g", { fill: colors.inverseSchemes.status.onWarning, children: [_jsx("rect", { x: "9.75", y: "6", width: "1.5", height: "6.5", rx: "1" }), _jsx("circle", { cx: "10.5", cy: "14.5", r: "1" })] })] }));
+};

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

@@ -1,6 +1,7 @@
 export * from './utils/CssBaseline';
 export * from './utils/Backdrop';
 export * from './feedback/Alert';
+export * from './feedback/AlertTitle';
 export * from './feedback/Snackbar';
 export * from './feedback/CircularProgress';
 export * from './feedback/LinearProgress';
@@ -46,6 +47,7 @@ export * from './inputs/InputBase';
 export * from './data-display/Skeleton';
 export * from './inputs/FormLabel';
 export * from './inputs/OutlinedInput';
+export * from './inputs/FilledInput';
 export * from './inputs/FormHelperText';
 export * from './inputs/Radio';
 export * from './inputs/Filter';

package/dist/src/components/index.js

@@ -1,7 +1,8 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Copyright 2026 WebPros International GmbH. All rights reserved.
 export * from './utils/CssBaseline';
 export * from './utils/Backdrop';
 export * from './feedback/Alert';
+export * from './feedback/AlertTitle';
 export * from './feedback/Snackbar';
 export * from './feedback/CircularProgress';
 export * from './feedback/LinearProgress';
@@ -47,6 +48,7 @@ export * from './inputs/InputBase';
 export * from './data-display/Skeleton';
 export * from './inputs/FormLabel';
 export * from './inputs/OutlinedInput';
+export * from './inputs/FilledInput';
 export * from './inputs/FormHelperText';
 export * from './inputs/Radio';
 export * from './inputs/Filter';

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

@@ -0,0 +1,8 @@
+import { ComponentsOverrides, Theme } from '@mui/material';
+interface M3FilledInput {
+    MuiFilledInput: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiFilledInput'];
+    };
+}
+export declare const getFilledInput: (theme: Theme) => M3FilledInput;
+export {};

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

@@ -0,0 +1,118 @@
+// Copyright 2026 WebPros International GmbH. All rights reserved.
+export const getFilledInput = (theme) => {
+    const { colors } = theme;
+    return {
+        MuiFilledInput: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: colors.schemes.surfaces.surfaceContainerHighest,
+                    borderRadius: '4px 4px 0 0',
+                    '&:hover': {
+                        // Figma: state-layers/on-surface/opacity-06 over surfaceContainerHighest
+                        backgroundColor: colors.blendSchemaWithStateLayer('schemes.surfaces.surfaceContainerHighest', 'stateLayers.surfaces.onSurface.opacity06'),
+                    },
+                    '&.Mui-focused': {
+                        backgroundColor: colors.schemes.surfaces.surfaceContainerHighest,
+                    },
+                    '&.Mui-disabled': {
+                        // Figma: 4% onSurface overlay; opacity06 (6%) is the closest available token
+                        backgroundColor: colors.blendSchemaWithStateLayer('schemes.surfaces.surfaceContainerHighest', 'stateLayers.surfaces.onSurface.opacity06'),
+                    },
+                    // Inactive underline
+                    '&::before': {
+                        borderBottomColor: colors.schemes.surfaces.onSurfaceVariant,
+                    },
+                    // Hover underline
+                    '&:hover:not(.Mui-disabled, .Mui-error)::before': {
+                        borderBottomColor: colors.schemes.surfaces.onSurface,
+                    },
+                    '&::after': {
+                        borderBottomColor: colors.schemes.base.primary,
+                        borderBottomWidth: 3,
+                    },
+                    // Error underline
+                    '&.Mui-error::before': {
+                        borderBottomColor: colors.schemes.status.error,
+                    },
+                    '&.Mui-error::after': {
+                        borderBottomColor: colors.schemes.status.error,
+                    },
+                    // Disabled underline
+                    '&.Mui-disabled::before': {
+                        borderBottomStyle: 'solid',
+                        borderBottomColor: colors.stateLayers.surfaces.onSurface.opacity38,
+                    },
+                    // Multiline size variants (padding goes on root for multiline)
+                    variants: [
+                        {
+                            props: {},
+                            style: {
+                                paddingTop: 0,
+                                paddingBottom: 0,
+                            },
+                        },
+                        {
+                            props: ({ multiline }) => !!multiline,
+                            style: {
+                                paddingTop: 20,
+                                paddingBottom: 8,
+                            },
+                        },
+                        {
+                            props: ({ multiline, size }) => !!multiline && size === 'small',
+                            style: {
+                                paddingTop: 15,
+                                paddingBottom: 4,
+                            },
+                        },
+                        {
+                            // Figma lg: 56px total → padding distributes to match label area
+                            props: ({ multiline, size }) => !!multiline && size === 'large',
+                            style: {
+                                paddingTop: 24,
+                                paddingBottom: 12,
+                            },
+                        },
+                    ],
+                },
+                input: {
+                    height: '20px',
+                    // Figma: px-[16px] horizontal padding on state-layer
+                    paddingLeft: 16,
+                    paddingRight: 16,
+                    // the order matters
+                    variants: [
+                        {
+                            props: {},
+                            style: {
+                                paddingTop: 20,
+                                paddingBottom: 8,
+                            },
+                        },
+                        {
+                            props: { size: 'small' },
+                            style: {
+                                paddingTop: 15,
+                                paddingBottom: 4,
+                            },
+                        },
+                        {
+                            // Figma lg: 56px = 24 (paddingTop) + 20 (input height) + 12 (paddingBottom)
+                            props: { size: 'large' },
+                            style: {
+                                paddingTop: 24,
+                                paddingBottom: 12,
+                            },
+                        },
+                        {
+                            props: ({ ownerState }) => !!ownerState.multiline,
+                            style: {
+                                padding: 0,
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    };
+};

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

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

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

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

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

@@ -1,4 +1,4 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Copyright 2026 WebPros International GmbH. All rights reserved.
 export const getInputLabel = () => {
     return {
         MuiInputLabel: {
@@ -28,6 +28,43 @@ export const getInputLabel = () => {
                         transform: 'translate(14px, -10px) scale(0.8)',
                     },
                 },
+                // Filled variant label positioning
+                {
+                    props: ({ variant }) => variant === 'filled',
+                    style: {
+                        transform: 'translate(14px, 12px) scale(1)',
+                    },
+                },
+                {
+                    props: { variant: 'filled', size: 'small' },
+                    style: {
+                        transform: 'translate(14px, 8px) scale(1)',
+                    },
+                },
+                {
+                    props: { variant: 'filled', size: 'large' },
+                    style: {
+                        transform: 'translate(14px, 16px) scale(1)',
+                    },
+                },
+                {
+                    props: ({ variant, ownerState }) => variant === 'filled' && !!ownerState.shrink,
+                    style: {
+                        transform: 'translate(14px, 4px) scale(0.8)',
+                    },
+                },
+                {
+                    props: ({ variant, size, ownerState }) => variant === 'filled' && size === 'small' && !!ownerState.shrink,
+                    style: {
+                        transform: 'translate(14px, 2px) scale(0.8)',
+                    },
+                },
+                {
+                    props: ({ variant, size, ownerState }) => variant === 'filled' && size === 'large' && !!ownerState.shrink,
+                    style: {
+                        transform: 'translate(14px, 5px) scale(0.8)',
+                    },
+                },
             ],
         },
     };

package/dist/src/utils/getMUIComponents.js

@@ -1,4 +1,4 @@
-import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFormHelperText, getRadio, } from '../components';
+import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFilledInput, getFormHelperText, getRadio, getAlertTitle, } from '../components';
 export const getMUIComponents = (theme, _mode) => ({
-    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getBackdrop(theme)), getAccordion(theme)), getAccordionSummary(theme)), getAccordionDetails(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getBreadcrumbs(theme)), getSelect()), getTimePicker(theme)), getInputLabel()), getButton(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getList(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getPopover(theme)), getSwitch(theme)), getTab(theme)), getTabs(theme)), getTextField(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput(theme)), getFormHelperText()), getRadio(theme)),
+    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getBackdrop(theme)), getAccordion(theme)), getAccordionSummary(theme)), getAccordionDetails(theme)), getAlert(theme)), getAlertTitle(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getBreadcrumbs(theme)), getSelect()), getTimePicker(theme)), getInputLabel()), getButton(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getList(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getPopover(theme)), getSwitch(theme)), getTab(theme)), getTabs(theme)), getTextField(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput(theme)), getFilledInput(theme)), getFormHelperText()), getRadio(theme)),
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
   "description": "MUI v7 theme for WebPros products",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "license": "MIT",
   "repository": {
     "type": "git",