@webpros/mui-theme 0.1.6 → 0.3.0

package/dist/src/tokens/legacyColors/ThemeColorTokensLegacy.d.ts

@@ -0,0 +1,74 @@
+import { AdditionalColors } from '../../tokens/legacyColors/additionalColors/additionalColors';
+export type ThemeColorTokensLegacy = {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    errorFixedDim: string;
+    primaryFixed: string;
+    primaryFixedDim: string;
+    onPrimaryFixed: string;
+    onPrimaryFixedVariant: string;
+    secondaryFixed: string;
+    secondaryFixedDim: string;
+    onSecondaryFixed: string;
+    onSecondaryFixedVariant: string;
+    tertiaryFixed: string;
+    tertiaryFixedDim: string;
+    onTertiaryFixed: string;
+    onTertiaryFixedVariant: string;
+    surface: string;
+    onSurface: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    outline: string;
+    outlineVariant: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    shadow: string;
+    scrim: string;
+    surfaceTint: string;
+    background: string;
+    onBackground: string;
+    info: string;
+    onInfo: string;
+    infoContainer: string;
+    onInfoContainer: string;
+    infoFixedDim: string;
+    success: string;
+    onSuccess: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    successFixedDim: string;
+    warning: string;
+    onWarning: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    warningFixedDim: string;
+    undefined: string;
+    onUndefined: string;
+    undefinedContainer: string;
+    onUndefinedContainer: string;
+    supportive: string;
+    additionalColors: AdditionalColors;
+};

package/dist/src/tokens/legacyColors/ThemeColorTokensLegacy.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export {};

package/dist/src/tokens/legacyColors/additionalColors/additionalColors.d.ts

@@ -0,0 +1,21 @@
+import { AdditionalColorTone } from '../../../tokens/legacyColors/Tone';
+export type AdditionalColors = {
+    red: AdditionalColorTone;
+    pink: AdditionalColorTone;
+    purple: AdditionalColorTone;
+    deepPurple: AdditionalColorTone;
+    indigo: AdditionalColorTone;
+    blue: AdditionalColorTone;
+    lightBlue: AdditionalColorTone;
+    cyan: AdditionalColorTone;
+    teal: AdditionalColorTone;
+    green: AdditionalColorTone;
+    lightGreen: AdditionalColorTone;
+    lime: AdditionalColorTone;
+    yellow: AdditionalColorTone;
+    amber: AdditionalColorTone;
+    orange: AdditionalColorTone;
+    deepOrange: AdditionalColorTone;
+    brown: AdditionalColorTone;
+};
+export type AdditionalColorKey = keyof AdditionalColors;

package/dist/src/tokens/legacyColors/additionalColors/additionalColors.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export {};

package/dist/src/tokens/{additionalColors → legacyColors/additionalColors}/index.d.ts

@@ -1 +1,2 @@
 export * as additionalColors from '@mui/material/colors';
+export * from './additionalColors';

package/dist/src/tokens/{additionalColors → legacyColors/additionalColors}/index.js

@@ -3,3 +3,4 @@
 // For now we just re-export it into the theme
 // In case of customization these colors we will create new CustomColorTone and export it here
 export * as additionalColors from '@mui/material/colors';
+export * from './additionalColors';

package/dist/src/tokens/legacyColors/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LegacyLight';
+export * from './LegacyDark';

package/dist/src/tokens/legacyColors/index.js

@@ -0,0 +1,3 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './LegacyLight';
+export * from './LegacyDark';

package/dist/src/tokens/shadows/index.d.ts

@@ -0,0 +1,12 @@
+export type M3ShadowLayer = {
+    offsetX: string;
+    offsetY: string;
+    blur: string;
+    spread: string;
+    color: string;
+};
+export type M3ShadowTokenName = 'Shadows-1' | 'Shadows-2' | 'Shadows-3' | 'Shadows-4';
+export type M3ShadowTokens = Record<M3ShadowTokenName, M3ShadowLayer[]>;
+export declare const shadowTokens: M3ShadowTokens;
+export declare const shadowCssValues: Record<M3ShadowTokenName, string>;
+export declare const muiShadows: string[];

package/dist/src/tokens/shadows/index.js

@@ -0,0 +1,112 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Auto-generated file - do not edit manually
+export const shadowTokens = {
+    'Shadows-1': [
+        {
+            offsetX: '0px',
+            offsetY: '4px',
+            blur: '3px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.03)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '2px',
+            blur: '2px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.04)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '1px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+    ],
+    'Shadows-2': [
+        {
+            offsetX: '0px',
+            offsetY: '5px',
+            blur: '3px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '2px',
+            blur: '2px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.08)',
+        },
+        { offsetX: '0px', offsetY: '1px', blur: '1px', spread: '0px', color: 'rgba(0, 0, 0, 0.1)' },
+    ],
+    'Shadows-3': [
+        {
+            offsetX: '0px',
+            offsetY: '10px',
+            blur: '6px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '4px',
+            blur: '4px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.08)',
+        },
+        { offsetX: '0px', offsetY: '1px', blur: '2px', spread: '0px', color: 'rgba(0, 0, 0, 0.1)' },
+    ],
+    'Shadows-4': [
+        {
+            offsetX: '0px',
+            offsetY: '17px',
+            blur: '14px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '11px',
+            blur: '11px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.08)',
+        },
+        { offsetX: '0px', offsetY: '0px', blur: '6px', spread: '0px', color: 'rgba(0, 0, 0, 0.1)' },
+    ],
+};
+export const shadowCssValues = {
+    'Shadows-1': '0px 4px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.05)',
+    'Shadows-2': '0px 5px 3px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.1)',
+    'Shadows-3': '0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1)',
+    'Shadows-4': '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+};
+// Preserve the array structure so we can extend shadow slots without refactoring downstream overrides.
+export const muiShadows = [
+    '0px 4px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.05)',
+    '0px 4px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.05)',
+    '0px 5px 3px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.1)',
+    '0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+];

package/dist/src/tokens/typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typescale';
+export * from './typography';

package/dist/src/tokens/typography/index.js

@@ -0,0 +1,4 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Auto-generated file - do not edit manually
+export * from './typescale';
+export * from './typography';

package/dist/src/tokens/typography/typescale.d.ts

@@ -0,0 +1,28 @@
+export interface TypescaleTypographyVariants {
+    BodyLarge: React.CSSProperties;
+    BodyLargeProminent: React.CSSProperties;
+    BodyMedium: React.CSSProperties;
+    BodyMediumProminent: React.CSSProperties;
+    BodySmall: React.CSSProperties;
+    BodySmallProminent: React.CSSProperties;
+    DisplayLarge: React.CSSProperties;
+    DisplayMedium: React.CSSProperties;
+    DisplaySmall: React.CSSProperties;
+    DisplayXLarge: React.CSSProperties;
+    HeadlineLarge: React.CSSProperties;
+    HeadlineMedium: React.CSSProperties;
+    HeadlineSmall: React.CSSProperties;
+    LabelLarge: React.CSSProperties;
+    LabelLargeProminent: React.CSSProperties;
+    LabelMedium: React.CSSProperties;
+    LabelMediumProminent: React.CSSProperties;
+    LabelSmall: React.CSSProperties;
+    LabelSmallProminent: React.CSSProperties;
+    TitleLarge: React.CSSProperties;
+    TitleMedium: React.CSSProperties;
+    TitleSmall: React.CSSProperties;
+}
+export type TypescaleTypographyVariantsBooleans = {
+    [K in keyof TypescaleTypographyVariants]: boolean;
+};
+export declare const TypographyVariantsNames: (keyof TypescaleTypographyVariants)[];

package/dist/src/tokens/typography/typescale.js

@@ -0,0 +1,26 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Auto-generated file - do not edit manually
+export const TypographyVariantsNames = [
+    'BodyLarge',
+    'BodyLargeProminent',
+    'BodyMedium',
+    'BodyMediumProminent',
+    'BodySmall',
+    'BodySmallProminent',
+    'DisplayLarge',
+    'DisplayMedium',
+    'DisplaySmall',
+    'DisplayXLarge',
+    'HeadlineLarge',
+    'HeadlineMedium',
+    'HeadlineSmall',
+    'LabelLarge',
+    'LabelLargeProminent',
+    'LabelMedium',
+    'LabelMediumProminent',
+    'LabelSmall',
+    'LabelSmallProminent',
+    'TitleLarge',
+    'TitleMedium',
+    'TitleSmall',
+];

package/dist/src/tokens/typography/typography.d.ts

@@ -0,0 +1,2 @@
+import { TypescaleTypographyVariants } from '../../tokens/typography/typescale';
+export declare const typographyVariants: TypescaleTypographyVariants;

package/dist/src/tokens/typography/typography.js

@@ -0,0 +1,156 @@
+export const typographyVariants = {
+    BodyLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '16px',
+        lineHeight: '24px',
+        letterSpacing: '0.5px',
+        fontWeight: 400,
+    },
+    BodyLargeProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '16px',
+        lineHeight: '24px',
+        letterSpacing: '0.5px',
+        fontWeight: 600,
+    },
+    BodyMedium: {
+        fontFamily: 'Roboto',
+        fontWeight: 400,
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.25px',
+    },
+    BodyMediumProminent: {
+        fontFamily: 'Roboto',
+        fontWeight: 600,
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.25px',
+    },
+    BodySmall: {
+        fontFamily: 'Roboto',
+        fontSize: '12px',
+        lineHeight: '16px',
+        letterSpacing: '0.4px',
+        fontWeight: 400,
+    },
+    BodySmallProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '12px',
+        lineHeight: '16px',
+        letterSpacing: '0.4px',
+        fontWeight: 600,
+    },
+    DisplayLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '45px',
+        lineHeight: '52px',
+        letterSpacing: '-0.25px',
+        fontWeight: 400,
+    },
+    DisplayMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '32px',
+        lineHeight: '44px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    DisplaySmall: {
+        fontFamily: 'Roboto',
+        fontSize: '24px',
+        lineHeight: '32px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    DisplayXLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '52px',
+        lineHeight: '86px',
+        letterSpacing: '-0.25px',
+        fontWeight: 400,
+    },
+    HeadlineLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '20px',
+        lineHeight: '28px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    HeadlineMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '18px',
+        lineHeight: '28px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    HeadlineSmall: {
+        fontFamily: 'Roboto',
+        fontSize: '16px',
+        lineHeight: '28px',
+        letterSpacing: '0px',
+        fontWeight: 700,
+    },
+    LabelLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '17px',
+        lineHeight: '24px',
+        letterSpacing: '0.1px',
+        fontWeight: 400,
+    },
+    LabelLargeProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '17px',
+        lineHeight: '24px',
+        letterSpacing: '0.1px',
+        fontWeight: 500,
+    },
+    LabelMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.5px',
+        fontWeight: 400,
+    },
+    LabelMediumProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.5px',
+        fontWeight: 500,
+    },
+    LabelSmall: {
+        fontFamily: 'Roboto',
+        fontSize: '13px',
+        lineHeight: '16px',
+        letterSpacing: '0.5px',
+        fontWeight: 400,
+    },
+    LabelSmallProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '13px',
+        lineHeight: '16px',
+        letterSpacing: '0.5px',
+        fontWeight: 500,
+    },
+    TitleLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '20px',
+        lineHeight: '24px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    TitleMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '15px',
+        lineHeight: '20px',
+        letterSpacing: '0.15px',
+        fontWeight: 400,
+    },
+    TitleSmall: {
+        fontFamily: 'Roboto',
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.1px',
+        fontWeight: 500,
+    },
+};

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/flatten.d.ts

@@ -0,0 +1 @@
+export declare const flatten: <T>(array: (T | T[])[]) => T[];

package/dist/src/utils/flatten.js

@@ -0,0 +1,12 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const flatten = (array) => {
+    return array.reduce((acc, el) => {
+        if (Array.isArray(el)) {
+            acc.push(...el);
+        }
+        else {
+            acc.push(el);
+        }
+        return acc;
+    }, []);
+};

package/dist/src/utils/getMUIComponents.js

@@ -1,4 +1,4 @@
-import { getAccordion, getAlert, getAppBar, getBadge, getButton, getCard, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getSwitch, getTab, getTabList, getTextField, getToggleButton, getToggleButtonGroup, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getDataGrid, getTable, getAutocomplete, getInputBase, } from '../components';
+import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCard, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getToggleButton, getToggleButtonGroup, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getDataGrid, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFormHelperText, getRadio, } 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({}, getCssBaseline(theme)), getAccordion(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getSelect(theme)), getTimePicker(theme)), getInputLabel(theme)), getButton(theme)), getCard(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getSwitch(theme)), getTab(theme)), getTabList(theme)), getTextField(theme)), getToggleButton(theme)), getToggleButtonGroup(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getDataGrid(theme)), getTable(theme)), getAutocomplete(theme)), getInputBase(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(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)), getCard(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)), getToggleButton(theme)), getToggleButtonGroup(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getDataGrid(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput()), getFormHelperText()), getRadio(theme)),
 });

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

@@ -1,14 +1,9 @@
-import { ThemeOptions } from '@mui/material';
-import { TonalPalette } from '../tokens/TonalPalette';
+import { PaletteColor, PaletteColorOptions, ThemeOptions } from '@mui/material';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { ThemeScheme } from '../tokens/ThemeScheme';
-import { AdditionalColorTone } from '../tokens/Tone';
-declare module '@mui/material/styles/createTheme' {
-    interface ThemeOptions {
-        tones?: TonalPalette;
-    }
-}
-declare module '@mui/material/styles/createPalette' {
+import { Schemes, StateLayers } from '../tokens/colors';
+import { AdditionalColorTone } from '../tokens/legacyColors/Tone';
+declare module '@mui/material/styles' {
     interface M3Palette {
         onPrimary: PaletteColor;
         primaryContainer: PaletteColor;
@@ -88,7 +83,7 @@ declare module '@mui/material/styles/createPalette' {
         deepOrange: AdditionalColorTone;
         brown: AdditionalColorTone;
     }
-    interface M3PaletteOptions extends Record<keyof M3Palette, PaletteColorOptions> {
+    interface M3PaletteOptions extends Record<keyof M3Palette, PaletteColorOptions | StateLayers | Schemes> {
         themeMode: string;
         additional: M3AdditionalColors;
     }
@@ -98,4 +93,4 @@ declare module '@mui/material/styles/createPalette' {
     interface PaletteOptions extends M3PaletteOptions {
     }
 }
-export declare const getMUIPalette: (themeMode: ThemeMode, themescheme: ThemeScheme) => ThemeOptions;
+export declare const getMUIPalette: (themeMode: ThemeMode, themeScheme: ThemeScheme) => ThemeOptions;