@webpros/mui-theme 0.2.0 → 0.3.0

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
-    "description": "MUI v6 theme for WebPros products",
-    "version": "0.2.0",
+    "description": "MUI v7 theme for WebPros products",
+    "version": "0.3.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -20,6 +20,10 @@
         ".": {
             "import": "./dist/src/index.js",
             "types": "./dist/src/index.d.ts"
+        },
+        "./icons": {
+            "import": "./dist/src/icons/index.js",
+            "types": "./dist/src/icons/index.d.ts"
         }
     },
     "type": "module",
@@ -43,15 +47,16 @@
         "prettier:test": "prettier --check \"**/*.{ts,tsx}\"",
         "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
         "typecheck": "tsc --noEmit",
-        "extract-tokens": "node tools/extractM3Tokens.js"
+        "extract-tokens": "node tools/extractM3Tokens.js",
+        "generate:icons": "node scripts/generate-icons.cjs"
     },
     "peerDependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@fontsource/roboto": "^5.2.6",
         "@material/material-color-utilities": "^0.3.0",
-        "@mui/material": "^6.4.0",
-        "@mui/utils": "^6.4.0",
+        "@mui/material": "^7.3.6",
+        "@mui/utils": "^7.3.6",
         "@mui/x-data-grid": "^7.29.0",
         "@mui/x-date-pickers": "^7.29.0",
         "@phosphor-icons/react": "^2.1.0",
@@ -67,8 +72,8 @@
         "@eslint/js": "^9.38.0",
         "@fontsource/roboto": "^5.2.6",
         "@material/material-color-utilities": "^0.3.0",
-        "@mui/material": "^6.4.0",
-        "@mui/utils": "^6.4.0",
+        "@mui/material": "^7.3.6",
+        "@mui/utils": "^7.3.6",
         "@mui/x-data-grid": "^7.29.0",
         "@mui/x-date-pickers": "^7.29.0",
         "@phosphor-icons/react": "^2.1.0",
@@ -80,8 +85,8 @@
         "@storybook/react-vite": "^9.1.16",
         "@stylistic/eslint-plugin": "^5.5.0",
         "@types/node": "^24.8.1",
-        "@types/react": "^19.2.2",
-        "@types/react-dom": "^19.2.2",
+        "@types/react": "18.3.1",
+        "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^5.0.4",
         "eslint": "^9.38.0",
         "eslint-config-prettier": "^10.1.8",
@@ -112,5 +117,8 @@
         "extends": [
             "plugin:storybook/recommended"
         ]
+    },
+    "resolutions": {
+        "react-is": "^18.3.1"
     }
 }

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

@@ -11,6 +11,7 @@ export const getAlert = (theme) => {
             styleOverrides: {
                 root: {
                     borderRadius: '6px',
+                    padding: '8px',
                     '& svg': {
                         width: '20px',
                         height: '20px',

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

@@ -1,4 +1,9 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+declare module '@mui/material/DialogActions' {
+    interface DialogActionsProps {
+        alignment?: 'left' | 'right';
+    }
+}
 interface M3Dialog {
     MuiDialog: {
         defaultProps?: ComponentsProps['MuiDialog'];

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

@@ -1,7 +1,12 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { modalClasses, dialogContentClasses, dialogClasses, } from '@mui/material';
+import { modalClasses, dialogContentClasses, dialogClasses, iconButtonClasses, } from '@mui/material';
 export const getDialog = (theme) => {
-    const { spacing, palette } = theme;
+    const { spacing, palette, colors } = theme;
+    const closeButtonPosition = {
+        position: 'absolute',
+        right: spacing(3),
+        top: 25,
+    };
     return {
         MuiDialogTitle: {
             defaultProps: {
@@ -9,21 +14,29 @@ export const getDialog = (theme) => {
             },
             styleOverrides: {
                 root: {
-                    padding: `${spacing(2)} ${spacing(3)} ${spacing(1.5)}`,
-                    // By default, MUI removes top padding from DialogContent when it follows DialogTitle,
-                    // which can cause content to appear 'behind' the title. We're changing default padding to
-                    // create proper spacing between title and content without adjusting design of all dialogs
-                    //  important set because with value 1 it does not work
+                    padding: spacing(3.75, 8.25, 2.375, 4.5),
+                    color: palette.onSurface.main,
                     [`& + .${dialogContentClasses.root}`]: {
-                        paddingTop: `${spacing(1)} !important`,
+                        paddingTop: '0 !important',
                     },
+                    [`& .${iconButtonClasses.root}`]: closeButtonPosition,
                 },
             },
         },
         MuiDialog: {
+            defaultProps: {
+                PaperProps: {
+                    elevation: 3,
+                },
+            },
             styleOverrides: {
                 paper: {
-                    borderRadius: spacing(3.5),
+                    borderRadius: 10,
+                    backgroundColor: colors.schemes.surfaces.elevatedContainer,
+                    [`& > .${iconButtonClasses.root}`]: closeButtonPosition,
+                    [`& > .${iconButtonClasses.root} + .${dialogContentClasses.root}`]: {
+                        paddingTop: spacing(5.125),
+                    },
                     [`&.${dialogClasses.paperFullScreen}`]: {
                         borderRadius: 0,
                         maxWidth: 'none',
@@ -34,9 +47,8 @@ export const getDialog = (theme) => {
                     height: 'auto',
                     [`&.${modalClasses.root}.${dialogClasses.root} .${dialogClasses.paper}`]: {
                         height: 'auto',
-                        minHeight: '200px',
+                        minHeight: spacing(25),
                     },
-                    borderRadius: spacing(1),
                 },
             },
         },
@@ -44,17 +56,34 @@ export const getDialog = (theme) => {
             styleOverrides: {
                 root: {
                     color: palette.onSurfaceVariant.main,
-                    padding: `0 ${spacing(3)} ${spacing(3)}`,
+                    padding: spacing(0, 4.5, 1, 4.5),
+                },
+                dividers: {
+                    padding: spacing(2, 4.5),
+                    borderColor: colors.schemes.surfaces.outlineVariant,
                 },
             },
         },
         MuiDialogActions: {
             styleOverrides: {
                 root: {
-                    padding: `${spacing(1)} ${spacing(3)} ${spacing(3)}`,
-                    justifyContent: 'flex-start',
+                    padding: spacing(2, 4.25, 2.5, 2.375),
+                    justifyContent: 'flex-end',
+                    gap: spacing(0.5),
+                    '& > :not(style) ~ :not(style)': {
+                        marginLeft: 0,
+                    },
                 },
             },
+            variants: [
+                {
+                    props: { alignment: 'left' },
+                    style: {
+                        justifyContent: 'flex-start',
+                        padding: spacing(2, 2.375, 2.5, 4.25),
+                    },
+                },
+            ],
         },
         MuiDialogContentText: {
             styleOverrides: {

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

@@ -7,31 +7,40 @@ export const getLinearProgress = (theme) => {
         const palette = colors[schemesPath];
         const layers = colors[layersPath];
         const colorMap = {
-            primary: { primary: palette.base.primary, secondary: layers.base.primary.opacity28 },
+            primary: {
+                primary: palette.base.primary,
+                secondary: layers.base.primary.opacity28,
+            },
             secondary: {
                 primary: palette.base.secondary,
                 secondary: layers.base.secondary.opacity12,
             },
-            error: { primary: palette.status.error, secondary: layers.status.error.opacity28 },
-            info: { primary: palette.status.info, secondary: layers.status.undefined.opacity28 },
+            error: {
+                primary: palette.status.error,
+                secondary: layers.status.error.opacity28,
+            },
+            info: {
+                primary: palette.status.info,
+                secondary: layers.status.info.opacity28,
+            },
             success: {
                 primary: palette.status.success,
                 secondary: layers.status.success.opacity28,
             },
             warning: {
                 primary: palette.status.warning,
-                secondary: layers.status.undefined.opacity28,
+                secondary: layers.status.warning.opacity28,
+            },
+            inherit: {
+                primary: palette.surfaces.onSurface,
+                secondary: layers.surfaces.onSurface.opacity28,
             },
-            inherit: { primary: 'inherit', secondary: 'inherit' },
         };
         const simpleVariants = ['determinate', 'indeterminate', 'query'].map((variant) => ({
             props: { color, viewContext, variant },
             style: {
                 background: colorMap[color].secondary,
-                '.MuiLinearProgress-bar1': {
-                    background: colorMap[color].primary,
-                },
-                '.MuiLinearProgress-bar2': {
+                '.MuiLinearProgress-bar': {
                     background: colorMap[color].primary,
                 },
             },
@@ -58,14 +67,13 @@ export const getLinearProgress = (theme) => {
         MuiLinearProgress: {
             styleOverrides: {
                 root: {
-                    borderRadius: '20px',
+                    borderRadius: '2px',
                     '.MuiLinearProgress-bar': {
                         strokeLinecap: 'round',
-                        borderRadius: '20px',
+                        borderRadius: '2px',
                     },
                 },
             },
-            // @ts-expect-error
             variants: [
                 ...getLinearProgressColors('primary'),
                 ...getLinearProgressColors('secondary'),

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

@@ -9,6 +9,10 @@ export const getSnackbar = (theme) => {
                     '& .MuiSnackbarContent-root': {
                         backgroundColor: colors.inverseSchemes.surfaces.elevatedContainerLowest,
                         alignItems: 'baseline',
+                        paddingTop: 0,
+                    },
+                    '& .MuiSnackbarContent-action': {
+                        marginRight: 0,
                     },
                 },
             },

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

@@ -54,7 +54,7 @@ export const getOutlinedInput = () => {
                             },
                         },
                         {
-                            props: ({ ownerState }) => ownerState.multiline,
+                            props: ({ ownerState }) => !!ownerState.multiline,
                             style: {
                                 padding: 0,
                             },

package/dist/src/components/navigation/Tabs/Tabs.theme.js

@@ -28,7 +28,7 @@ export const getTabs = (theme) => ({
             root: {
                 [`&.${tabsClasses.vertical}`]: {
                     [`& .${tabClasses.root}`]: {
-                        padding: '10px 16px 10px 10px',
+                        padding: '10px 52px 10px 10px',
                         flexDirection: 'row',
                         justifyContent: 'flex-start',
                         textAlign: 'left',

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

@@ -0,0 +1,4 @@
+export declare const CaretDoubleRightSmall: import("@phosphor-icons/react").Icon;
+export declare const CloseSmall: import("@phosphor-icons/react").Icon;
+export declare const Domino: import("@phosphor-icons/react").Icon;
+export declare const Error: import("@phosphor-icons/react").Icon;

package/dist/src/icons/index.js

@@ -0,0 +1,12 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// This file is auto-generated by scripts/generate-icons.cjs
+// Do not edit manually. Run "yarn generate:icons" to regenerate.
+import { createIcon, createStaticIcon } from '../utils/createIcon';
+import caretDoubleRightSmallSvg from './svg/caret-double-right-small.svg?raw';
+import closeSmallSvg from './svg/close-small.svg?raw';
+import dominoSvg from './svg/domino.svg?raw';
+import errorSvg from './svg/error.svg?raw';
+export const CaretDoubleRightSmall = createIcon('CaretDoubleRightSmall', caretDoubleRightSmallSvg);
+export const CloseSmall = createIcon('CloseSmall', closeSmallSvg);
+export const Domino = createIcon('Domino', dominoSvg);
+export const Error = createStaticIcon('Error', errorSvg);

package/dist/src/style/additional-color-palette.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import Grid from '@mui/material/Grid2/Grid2';
+import Grid from '@mui/material/Grid';
 import { ColorItem } from '@storybook/addon-docs/blocks';
 import { LegacyDarkTokensDefault } from '../tokens/legacyColors';
 export const AdditionalColorPalette = () => {

package/dist/src/style/custom-color-palette.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import Grid from '@mui/material/Grid2/Grid2';
+import Grid from '@mui/material/Grid';
 import { ColorItem } from '@storybook/addon-docs/blocks';
 import { LegacyDarkTokensDefault, LegacyLightTokensDefault, } from '../tokens/legacyColors';
 export const CustomColorPalette = ({ mode }) => {

package/dist/src/tokens/colors/Dark.js

@@ -319,7 +319,7 @@ export const DarkStateLayers = {
             opacity08: 'rgba(86, 150, 206, 0.08)',
             opacity12: 'rgba(86, 150, 206, 0.12)',
             opacity16: 'rgba(86, 150, 206, 0.16)',
-            opacity28: 'rgba(86, 150, 206, 0.2)',
+            opacity28: 'rgba(86, 150, 206, 0.28)',
             opacity48: 'rgba(86, 150, 206, 0.48)',
         },
         success: {
@@ -780,6 +780,20 @@ export const DarkInverseStateLayers = {
             opacity28: 'rgba(191, 197, 202, 0.28)',
             opacity38: 'rgba(191, 197, 202, 0.38)',
         },
+        info: {
+            opacity08: 'rgba(71, 189, 243, 0.08)',
+            opacity12: 'rgba(71, 189, 243, 0.12)',
+            opacity16: 'rgba(71, 189, 243, 0.2)',
+            opacity28: 'rgba(71, 189, 243, 0.28)',
+            opacity38: 'rgba(68, 119, 187, 0.38)',
+        },
+        warning: {
+            opacity08: 'rgba(242, 154, 66, 0.08)',
+            opacity12: 'rgba(242, 154, 66, 0.12)',
+            opacity16: 'rgba(242, 154, 66, 0.2)',
+            opacity28: 'rgba(242, 154, 66, 0.28)',
+            opacity38: 'rgba(242, 154, 66, 0.38)',
+        },
     },
 };
 export const DarkSchemesGenerated = {
@@ -1025,7 +1039,7 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.info.opacity08': { r: 86, g: 150, b: 206, a: 0.08 },
     'stateLayers.status.info.opacity12': { r: 86, g: 150, b: 206, a: 0.12 },
     'stateLayers.status.info.opacity16': { r: 86, g: 150, b: 206, a: 0.16 },
-    'stateLayers.status.info.opacity28': { r: 86, g: 150, b: 206, a: 0.2 },
+    'stateLayers.status.info.opacity28': { r: 86, g: 150, b: 206, a: 0.28 },
     'stateLayers.status.info.opacity48': { r: 86, g: 150, b: 206, a: 0.48 },
     'stateLayers.status.success.opacity08': { r: 110, g: 187, b: 114, a: 0.08 },
     'stateLayers.status.success.opacity12': { r: 110, g: 187, b: 114, a: 0.12 },
@@ -1395,4 +1409,14 @@ export const DarkInverseStateLayersGenerated = {
     'inverseStateLayers.status.onUndefinedContainer.opacity16': { r: 191, g: 197, b: 202, a: 0.16 },
     'inverseStateLayers.status.onUndefinedContainer.opacity28': { r: 191, g: 197, b: 202, a: 0.28 },
     'inverseStateLayers.status.onUndefinedContainer.opacity38': { r: 191, g: 197, b: 202, a: 0.38 },
+    'inverseStateLayers.status.info.opacity08': { r: 71, g: 189, b: 243, a: 0.08 },
+    'inverseStateLayers.status.info.opacity12': { r: 71, g: 189, b: 243, a: 0.12 },
+    'inverseStateLayers.status.info.opacity16': { r: 71, g: 189, b: 243, a: 0.2 },
+    'inverseStateLayers.status.info.opacity28': { r: 71, g: 189, b: 243, a: 0.28 },
+    'inverseStateLayers.status.info.opacity38': { r: 68, g: 119, b: 187, a: 0.38 },
+    'inverseStateLayers.status.warning.opacity08': { r: 242, g: 154, b: 66, a: 0.08 },
+    'inverseStateLayers.status.warning.opacity12': { r: 242, g: 154, b: 66, a: 0.12 },
+    'inverseStateLayers.status.warning.opacity16': { r: 242, g: 154, b: 66, a: 0.2 },
+    'inverseStateLayers.status.warning.opacity28': { r: 242, g: 154, b: 66, a: 0.28 },
+    'inverseStateLayers.status.warning.opacity38': { r: 242, g: 154, b: 66, a: 0.38 },
 };

package/dist/src/tokens/colors/Light.js

@@ -319,7 +319,7 @@ export const LightStateLayers = {
             opacity08: 'rgba(33, 110, 172, 0.08)',
             opacity12: 'rgba(33, 110, 172, 0.12)',
             opacity16: 'rgba(33, 110, 172, 0.16)',
-            opacity28: 'rgba(33, 110, 172, 0.2)',
+            opacity28: 'rgba(33, 110, 172, 0.28)',
             opacity48: 'rgba(33, 110, 172, 0.48)',
         },
         success: {
@@ -536,28 +536,28 @@ export const LightStateLayers = {
     },
     stateLayers: {
         basePrimary: {
-            opacity08: 'rgba(255, 255, 255, 0.08)',
-            opacity12: 'rgba(255, 255, 255, 0.12)',
-            opacity16: 'rgba(255, 255, 255, 0.2)',
-            opacity64: 'rgba(255, 255, 255, 0.64)',
+            opacity08: 'rgba(14, 9, 0, 0.08)',
+            opacity12: 'rgba(14, 9, 0, 0.12)',
+            opacity16: 'rgba(14, 9, 0, 0.2)',
+            opacity64: 'rgba(14, 9, 0, 0.64)',
         },
         surfacesOnSurface: {
-            opacity08: 'rgba(255, 255, 255, 0.08)',
-            opacity12: 'rgba(255, 255, 255, 0.12)',
-            opacity16: 'rgba(255, 255, 255, 0.16)',
-            opacity28: 'rgba(255, 255, 255, 0.28)',
-            opacity38: 'rgba(255, 255, 255, 0.38)',
-            opacity48: 'rgba(255, 255, 255, 0.48)',
-            opacity64: 'rgba(255, 255, 255, 0.64)',
-            opacity10: 'rgba(255, 255, 255, 0.1)',
+            opacity08: 'rgba(14, 9, 0, 0.08)',
+            opacity12: 'rgba(14, 9, 0, 0.12)',
+            opacity16: 'rgba(14, 9, 0, 0.16)',
+            opacity28: 'rgba(14, 9, 0, 0.28)',
+            opacity38: 'rgba(14, 9, 0, 0.38)',
+            opacity48: 'rgba(14, 9, 0, 0.48)',
+            opacity64: 'rgba(14, 9, 0, 0.64)',
+            opacity10: 'rgba(14, 9, 0, 0.1)',
         },
         surfacesOnSurfaceVariant: {
-            opacity08: 'rgba(255, 255, 255, 0.08)',
-            opacity12: 'rgba(255, 255, 255, 0.12)',
-            opacity16: 'rgba(255, 255, 255, 0.16)',
-            opacity28: 'rgba(255, 255, 255, 0.28)',
-            opacity48: 'rgba(255, 255, 255, 0.48)',
-            opacity64: 'rgba(255, 255, 255, 0.64)',
+            opacity08: 'rgba(14, 9, 0, 0.08)',
+            opacity12: 'rgba(14, 9, 0, 0.12)',
+            opacity16: 'rgba(14, 9, 0, 0.16)',
+            opacity28: 'rgba(14, 9, 0, 0.28)',
+            opacity48: 'rgba(14, 9, 0, 0.48)',
+            opacity64: 'rgba(14, 9, 0, 0.64)',
         },
     },
 };
@@ -780,6 +780,20 @@ export const LightInverseStateLayers = {
             opacity28: 'rgba(206, 211, 214, 0.28)',
             opacity38: 'rgba(206, 211, 214, 0.38)',
         },
+        info: {
+            opacity08: 'rgba(107, 180, 239, 0.08)',
+            opacity12: 'rgba(107, 180, 239, 0.12)',
+            opacity16: 'rgba(107, 180, 239, 0.2)',
+            opacity28: 'rgba(107, 180, 239, 0.28)',
+            opacity38: 'rgba(107, 180, 239, 0.38)',
+        },
+        warning: {
+            opacity08: 'rgba(222, 144, 66, 0.08)',
+            opacity12: 'rgba(222, 144, 66, 0.12)',
+            opacity16: 'rgba(222, 144, 66, 0.2)',
+            opacity28: 'rgba(222, 144, 66, 0.28)',
+            opacity38: 'rgba(222, 144, 66, 0.38)',
+        },
     },
 };
 export const LightSchemesGenerated = {
@@ -1025,7 +1039,7 @@ export const LightStateLayersGenerated = {
     'stateLayers.status.info.opacity08': { r: 33, g: 110, b: 172, a: 0.08 },
     'stateLayers.status.info.opacity12': { r: 33, g: 110, b: 172, a: 0.12 },
     'stateLayers.status.info.opacity16': { r: 33, g: 110, b: 172, a: 0.16 },
-    'stateLayers.status.info.opacity28': { r: 33, g: 110, b: 172, a: 0.2 },
+    'stateLayers.status.info.opacity28': { r: 33, g: 110, b: 172, a: 0.28 },
     'stateLayers.status.info.opacity48': { r: 33, g: 110, b: 172, a: 0.48 },
     'stateLayers.status.success.opacity08': { r: 67, g: 125, b: 70, a: 0.08 },
     'stateLayers.status.success.opacity12': { r: 67, g: 125, b: 70, a: 0.12 },
@@ -1174,54 +1188,24 @@ export const LightStateLayersGenerated = {
     'stateLayers.surfaces.surfaceDim.opacity12': { r: 206, g: 208, b: 224, a: 0.12 },
     'stateLayers.surfaces.surfaceDim.opacity16': { r: 206, g: 208, b: 224, a: 0.16 },
     'stateLayers.surfaces.surfaceDim.opacity10': { r: 206, g: 208, b: 224, a: 0.1 },
-    'stateLayers.stateLayers.basePrimary.opacity08': { r: 255, g: 255, b: 255, a: 0.08 },
-    'stateLayers.stateLayers.basePrimary.opacity12': { r: 255, g: 255, b: 255, a: 0.12 },
-    'stateLayers.stateLayers.basePrimary.opacity16': { r: 255, g: 255, b: 255, a: 0.2 },
-    'stateLayers.stateLayers.basePrimary.opacity64': { r: 255, g: 255, b: 255, a: 0.64 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity08': { r: 255, g: 255, b: 255, a: 0.08 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity12': { r: 255, g: 255, b: 255, a: 0.12 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity16': { r: 255, g: 255, b: 255, a: 0.16 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity28': { r: 255, g: 255, b: 255, a: 0.28 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity38': { r: 255, g: 255, b: 255, a: 0.38 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity48': { r: 255, g: 255, b: 255, a: 0.48 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity64': { r: 255, g: 255, b: 255, a: 0.64 },
-    'stateLayers.stateLayers.surfacesOnSurface.opacity10': { r: 255, g: 255, b: 255, a: 0.1 },
-    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity08': {
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 0.08,
-    },
-    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity12': {
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 0.12,
-    },
-    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity16': {
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 0.16,
-    },
-    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity28': {
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 0.28,
-    },
-    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity48': {
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 0.48,
-    },
-    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity64': {
-        r: 255,
-        g: 255,
-        b: 255,
-        a: 0.64,
-    },
+    'stateLayers.stateLayers.basePrimary.opacity08': { r: 14, g: 9, b: 0, a: 0.08 },
+    'stateLayers.stateLayers.basePrimary.opacity12': { r: 14, g: 9, b: 0, a: 0.12 },
+    'stateLayers.stateLayers.basePrimary.opacity16': { r: 14, g: 9, b: 0, a: 0.2 },
+    'stateLayers.stateLayers.basePrimary.opacity64': { r: 14, g: 9, b: 0, a: 0.64 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity08': { r: 14, g: 9, b: 0, a: 0.08 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity12': { r: 14, g: 9, b: 0, a: 0.12 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity16': { r: 14, g: 9, b: 0, a: 0.16 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity28': { r: 14, g: 9, b: 0, a: 0.28 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity38': { r: 14, g: 9, b: 0, a: 0.38 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity48': { r: 14, g: 9, b: 0, a: 0.48 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity64': { r: 14, g: 9, b: 0, a: 0.64 },
+    'stateLayers.stateLayers.surfacesOnSurface.opacity10': { r: 14, g: 9, b: 0, a: 0.1 },
+    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity08': { r: 14, g: 9, b: 0, a: 0.08 },
+    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity12': { r: 14, g: 9, b: 0, a: 0.12 },
+    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity16': { r: 14, g: 9, b: 0, a: 0.16 },
+    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity28': { r: 14, g: 9, b: 0, a: 0.28 },
+    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity48': { r: 14, g: 9, b: 0, a: 0.48 },
+    'stateLayers.stateLayers.surfacesOnSurfaceVariant.opacity64': { r: 14, g: 9, b: 0, a: 0.64 },
 };
 export const LightInverseSchemesGenerated = {
     'inverseSchemes.surfaces.surface': { r: 49, g: 48, b: 54, a: 1 },
@@ -1395,4 +1379,14 @@ export const LightInverseStateLayersGenerated = {
     'inverseStateLayers.status.onUndefinedContainer.opacity16': { r: 206, g: 211, b: 214, a: 0.16 },
     'inverseStateLayers.status.onUndefinedContainer.opacity28': { r: 206, g: 211, b: 214, a: 0.28 },
     'inverseStateLayers.status.onUndefinedContainer.opacity38': { r: 206, g: 211, b: 214, a: 0.38 },
+    'inverseStateLayers.status.info.opacity08': { r: 107, g: 180, b: 239, a: 0.08 },
+    'inverseStateLayers.status.info.opacity12': { r: 107, g: 180, b: 239, a: 0.12 },
+    'inverseStateLayers.status.info.opacity16': { r: 107, g: 180, b: 239, a: 0.2 },
+    'inverseStateLayers.status.info.opacity28': { r: 107, g: 180, b: 239, a: 0.28 },
+    'inverseStateLayers.status.info.opacity38': { r: 107, g: 180, b: 239, a: 0.38 },
+    'inverseStateLayers.status.warning.opacity08': { r: 222, g: 144, b: 66, a: 0.08 },
+    'inverseStateLayers.status.warning.opacity12': { r: 222, g: 144, b: 66, a: 0.12 },
+    'inverseStateLayers.status.warning.opacity16': { r: 222, g: 144, b: 66, a: 0.2 },
+    'inverseStateLayers.status.warning.opacity28': { r: 222, g: 144, b: 66, a: 0.28 },
+    'inverseStateLayers.status.warning.opacity38': { r: 222, g: 144, b: 66, a: 0.38 },
 };

package/dist/src/tokens/colors/inverseStateLayers.d.ts

@@ -168,6 +168,20 @@ export type InverseStateLayers = {
             opacity28: string;
             opacity38: string;
         };
+        info: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity38: string;
+        };
+        warning: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity38: string;
+        };
     };
 };
 export type InverseStateLayersKey = `inverseStateLayers.${RecursiveKeyOf<InverseStateLayers>}`;

package/dist/src/utils/createIcon.d.ts

@@ -0,0 +1,12 @@
+import { Icon, IconWeight, IconProps } from '@phosphor-icons/react';
+import { SxProps, Theme } from '@mui/material/styles';
+type MuiColorToken = 'inherit' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' | 'action' | 'disabled';
+export type CustomIconProps = Omit<IconProps, 'color'> & {
+    color?: string | MuiColorToken;
+    sx?: SxProps<Theme>;
+};
+export type CustomIcon = Icon;
+type WeightPaths = Partial<Record<IconWeight, string>>;
+export declare function createStaticIcon(displayName: string, svg: string): CustomIcon;
+export declare function createIcon(displayName: string, svgOrPath: string | WeightPaths): CustomIcon;
+export {};

package/dist/src/utils/createIcon.js

@@ -0,0 +1,94 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { forwardRef } from 'react';
+import { SSRBase } from '@phosphor-icons/react/dist/ssr';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+function extractPath(svg) {
+    const cleanedSvg = svg.replace(/fill="[^"]*"/g, '');
+    const match = cleanedSvg.match(/d="([^"]+)"/);
+    if (!(match === null || match === void 0 ? void 0 : match[1])) {
+        throw new Error('createIcon: No path found in SVG. Make sure SVG contains a <path d="..."> element.');
+    }
+    return match[1];
+}
+const StyledIconWrapper = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'iconColor',
+})(({ theme, iconColor }) => {
+    if (!iconColor || iconColor === 'inherit') {
+        return { display: 'inline-flex', color: 'inherit' };
+    }
+    const paletteColors = [
+        'primary',
+        'secondary',
+        'error',
+        'warning',
+        'info',
+        'success',
+    ];
+    if (paletteColors.includes(iconColor)) {
+        return {
+            display: 'inline-flex',
+            color: theme.palette[iconColor].main,
+        };
+    }
+    if (iconColor === 'action') {
+        return { display: 'inline-flex', color: theme.palette.action.active };
+    }
+    if (iconColor === 'disabled') {
+        return { display: 'inline-flex', color: theme.palette.action.disabled };
+    }
+    return { display: 'inline-flex', color: iconColor };
+});
+function extractPathsData(svg) {
+    var _a, _b;
+    const pathRegex = /<path[^>]*d="([^"]+)"[^>]*\/?>/g;
+    const paths = [];
+    let match;
+    while ((match = pathRegex.exec(svg)) !== null) {
+        const fullMatch = match[0];
+        const d = (_a = match[1]) !== null && _a !== void 0 ? _a : '';
+        const fillMatch = fullMatch.match(/fill="([^"]*)"/);
+        const fill = (_b = fillMatch === null || fillMatch === void 0 ? void 0 : fillMatch[1]) !== null && _b !== void 0 ? _b : 'currentColor';
+        paths.push({ d, fill });
+    }
+    return paths;
+}
+export function createStaticIcon(displayName, svg) {
+    const pathsData = extractPathsData(svg);
+    const IconComponent = forwardRef((props, ref) => {
+        const _a = props, { sx, size = 24, variant = 'outline', color } = _a, rest = __rest(_a, ["sx", "size", "variant", "color"]);
+        const paths = pathsData.map((p, i) => {
+            if (variant === 'outline') {
+                if (i === 0) {
+                    return (_jsx("path", { d: p.d, fill: "transparent", stroke: "currentColor", strokeWidth: 8 }, i));
+                }
+                return _jsx("path", { d: p.d, fill: "currentColor" }, i);
+            }
+            return _jsx("path", { d: p.d, fill: p.fill }, i);
+        });
+        return (_jsx(Box, { component: "span", ref: ref, sx: Object.assign({ display: 'inline-flex', verticalAlign: 'middle', width: size, height: size }, sx), children: _jsx(StyledIconWrapper, { iconColor: variant === 'outline' ? color : undefined, children: _jsx("svg", Object.assign({ viewBox: "0 0 256 256", width: "100%", height: "100%" }, rest, { children: paths })) }) }));
+    });
+    IconComponent.displayName = displayName;
+    return IconComponent;
+}
+export function createIcon(displayName, svgOrPath) {
+    const weights = new Map();
+    if (typeof svgOrPath === 'string') {
+        const pathData = svgOrPath.includes('<svg') ? extractPath(svgOrPath) : svgOrPath;
+        weights.set('regular', _jsx("path", { d: pathData }));
+    }
+    else {
+        Object.entries(svgOrPath).forEach(([weight, pathOrSvg]) => {
+            const pathData = pathOrSvg.includes('<svg') ? extractPath(pathOrSvg) : pathOrSvg;
+            weights.set(weight, _jsx("path", { d: pathData }));
+        });
+    }
+    const IconComponent = forwardRef((props, ref) => {
+        const _a = props, { color, sx } = _a, rest = __rest(_a, ["color", "sx"]);
+        return (_jsx(Box, { component: "span", sx: Object.assign({ display: 'inline-flex', verticalAlign: 'middle' }, sx), children: _jsx(StyledIconWrapper, { iconColor: color, children: _jsx(SSRBase, Object.assign({ ref: ref }, rest, { color: "currentColor", weights: weights })) }) }));
+    });
+    IconComponent.displayName = displayName;
+    return IconComponent;
+}

package/dist/src/utils/getMUIPalette.d.ts

@@ -1,9 +1,9 @@
-import { ThemeOptions } from '@mui/material';
+import { PaletteColor, PaletteColorOptions, ThemeOptions } from '@mui/material';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { ThemeScheme } from '../tokens/ThemeScheme';
 import { Schemes, StateLayers } from '../tokens/colors';
 import { AdditionalColorTone } from '../tokens/legacyColors/Tone';
-declare module '@mui/material/styles/createPalette' {
+declare module '@mui/material/styles' {
     interface M3Palette {
         onPrimary: PaletteColor;
         primaryContainer: PaletteColor;

package/dist/src/utils/getMUIThemeCustoimzationType.d.ts

@@ -7,7 +7,7 @@ declare module '@mui/material/styles' {
     interface TypographyVariantsOptions extends TypescaleTypographyVariants {
     }
 }
-declare module '@mui/material/styles/createTheme' {
+declare module '@mui/material/styles' {
     interface Theme {
         colors: {
             schemes: Schemes;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
-  "description": "MUI v6 theme for WebPros products",
-  "version": "0.2.0",
+  "description": "MUI v7 theme for WebPros products",
+  "version": "0.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,6 +20,10 @@
     ".": {
       "import": "./dist/src/index.js",
       "types": "./dist/src/index.d.ts"
+    },
+    "./icons": {
+      "import": "./dist/src/icons/index.js",
+      "types": "./dist/src/icons/index.d.ts"
     }
   },
   "type": "module",
@@ -43,15 +47,16 @@
     "prettier:test": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
     "typecheck": "tsc --noEmit",
-    "extract-tokens": "node tools/extractM3Tokens.js"
+    "extract-tokens": "node tools/extractM3Tokens.js",
+    "generate:icons": "node scripts/generate-icons.cjs"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource/roboto": "^5.2.6",
     "@material/material-color-utilities": "^0.3.0",
-    "@mui/material": "^6.4.0",
-    "@mui/utils": "^6.4.0",
+    "@mui/material": "^7.3.6",
+    "@mui/utils": "^7.3.6",
     "@mui/x-data-grid": "^7.29.0",
     "@mui/x-date-pickers": "^7.29.0",
     "@phosphor-icons/react": "^2.1.0",
@@ -67,8 +72,8 @@
     "@eslint/js": "^9.38.0",
     "@fontsource/roboto": "^5.2.6",
     "@material/material-color-utilities": "^0.3.0",
-    "@mui/material": "^6.4.0",
-    "@mui/utils": "^6.4.0",
+    "@mui/material": "^7.3.6",
+    "@mui/utils": "^7.3.6",
     "@mui/x-data-grid": "^7.29.0",
     "@mui/x-date-pickers": "^7.29.0",
     "@phosphor-icons/react": "^2.1.0",
@@ -80,8 +85,8 @@
     "@storybook/react-vite": "^9.1.16",
     "@stylistic/eslint-plugin": "^5.5.0",
     "@types/node": "^24.8.1",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.0.4",
     "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
@@ -112,5 +117,8 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "resolutions": {
+    "react-is": "^18.3.1"
   }
 }