@webpros/mui-theme 0.1.1 → 0.1.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { inputLabelClasses, } from '@mui/material';
+export const getInputLabel = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiInputLabel: {
+            styleOverrides: {
+                root: {
+                    color: palette.supportive.main,
+                    fontSize: '0.875rem',
+                    transform: 'translate(14px, 11px) scale(1)',
+                    // If label is shrunk (input has value or is focused), use normal MUI transform
+                    [`&.${inputLabelClasses.shrink}`]: {
+                        transform: 'translate(14px, -9px) scale(0.75)',
+                    },
+                },
+            },
+        },
+    };
+};

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const Select: (<Value = unknown>(props: import("@mui/material").SelectProps<Value>) => React.JSX.Element) & {
+    muiName: string;
+};
+export type SelectComponentType = typeof Select;

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

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

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

@@ -0,0 +1,9 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+export interface M3Select {
+    MuiSelect: {
+        defaultProps?: ComponentsProps['MuiSelect'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiSelect'];
+        variants?: ComponentsVariants['MuiSelect'];
+    };
+}
+export declare const getSelect: (theme: Theme) => M3Select;

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

@@ -0,0 +1,46 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { CaretDownIcon } from '@phosphor-icons/react';
+import { getOnStateLayerColor, getStateLayerColor, OnStateLayer, StateLayer, } from '../../../utils/getStateLayerColor';
+export const getSelect = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiSelect: {
+            defaultProps: {
+                IconComponent: CaretDownIcon,
+            },
+            styleOverrides: {
+                root: {
+                    '& .MuiInputBase-root': {
+                        borderColor: palette.outline.main,
+                    },
+                    '> svg': {
+                        color: palette.supportive.main,
+                    },
+                    padding: '0',
+                },
+                select: {
+                    // Patch for displaying icons in input
+                    '.MuiListItem-root': {
+                        padding: 0,
+                    },
+                    '.MuiListItemText-root': {
+                        margin: 0,
+                    },
+                    '&.Mui-disabled': {
+                        // Mui by default uses -webkit-text-fill-color and if it is set then it is used instead of css color property
+                        WebkitTextFillColor: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                        borderColor: getStateLayerColor(StateLayer.Disabled, palette.outline.main),
+                    },
+                },
+            },
+            variants: [
+                {
+                    props: { variant: 'outlined' },
+                    style: {
+                        borderRadius: 8,
+                    },
+                },
+            ],
+        },
+    };
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3Switch {
+    MuiSwitch: {
+        defaultProps?: ComponentsProps['MuiSwitch'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiSwitch'];
+        variants?: ComponentsVariants['MuiSwitch'];
+    };
+}
+export declare const getSwitch: (theme: Theme) => M3Switch;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,97 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { alpha, } from '@mui/material';
+export const getSwitch = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiSwitch: {
+            styleOverrides: {
+                root: {
+                    overflow: 'visible',
+                    width: 42,
+                    height: 26,
+                    padding: 0,
+                    marginLeft: 12,
+                    marginRight: 8,
+                    borderColor: palette.outline.main,
+                    '& .MuiSwitch-switchBase': {
+                        padding: 0,
+                        margin: 7,
+                        transitionDuration: '100ms',
+                        '&.Mui-checked': {
+                            transform: 'translateX(16px)',
+                            margin: 4,
+                            '& + .MuiSwitch-track': {
+                                backgroundColor: palette.primary.main,
+                                opacity: 1,
+                                border: 0,
+                            },
+                            '& .MuiSwitch-thumb': {
+                                color: palette.onPrimary.main,
+                                width: 18,
+                                height: 18,
+                            },
+                            '&.Mui-disabled + .MuiSwitch-track': {
+                                backgroundColor: alpha(palette.onSurface.main, 0.1),
+                            },
+                            '&.Mui-disabled .MuiSwitch-thumb': {
+                                color: alpha(palette.surface.main, 0.8),
+                            },
+                            '& .MuiTouchRipple-root': {
+                                top: '-8px',
+                                left: '-8px',
+                                right: '-8px',
+                                bottom: '-8px',
+                            },
+                            '.MuiTouchRipple-ripple': {
+                                color: palette.primary.main,
+                                opacity: 0.08,
+                            },
+                        },
+                        '&.Mui-focusVisible .MuiSwitch-thumb': {
+                            color: palette.primary.main,
+                            border: `6px solid ${palette.onPrimary.main}`,
+                        },
+                        '&.Mui-disabled .MuiSwitch-thumb': {
+                            color: alpha(palette.onSurface.main, 0.3),
+                        },
+                    },
+                    '& .MuiSwitch-thumb': {
+                        boxSizing: 'border-box',
+                        color: alpha(palette.onSurfaceVariant.main, 0.72),
+                        width: 12,
+                        height: 12,
+                        boxShadow: 'none',
+                        '&:before': {
+                            content: "''",
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            left: 0,
+                            top: 0,
+                            backgroundRepeat: 'no-repeat',
+                            backgroundPosition: 'center',
+                        },
+                    },
+                    '& .MuiTouchRipple-root': {
+                        top: '-12px',
+                        left: '-12px',
+                        right: '-12px',
+                        bottom: '-12px',
+                    },
+                    '.MuiTouchRipple-ripple': {
+                        color: palette.onSurface.main,
+                        opacity: 0.06,
+                    },
+                    '& .MuiSwitch-track': {
+                        borderRadius: 20,
+                        border: `2px solid ${palette.outline.main}`,
+                        backgroundColor: palette.surfaceContainerHighest.main,
+                        opacity: 1,
+                        transition: 'background .2s',
+                    },
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { Theme, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+declare module '@mui/material/TextField' {
+    interface TextFieldPropsSizeOverrides {
+        large: true;
+    }
+}
+interface M3TextField {
+    MuiTextField: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiTextField'];
+        variants?: ComponentsVariants<Theme>['MuiTextField'];
+    };
+}
+export declare const getTextField: (_theme: Theme) => M3TextField;
+export {};

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

@@ -0,0 +1,32 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getTextField = (_theme) => ({
+    MuiTextField: {
+        styleOverrides: {
+            root: {
+                '.MuiInputBase-root': {
+                    borderRadius: 8,
+                    padding: '4px 8px',
+                },
+                '.MuiInputBase-input': {
+                    padding: '6px 8px',
+                },
+            },
+        },
+        variants: [
+            {
+                props: { size: 'large' },
+                style: {
+                    '.MuiInputBase-root': {
+                        borderRadius: 8,
+                        padding: '4px 0px',
+                    },
+                    '.MuiInputBase-input': {
+                        fontSize: '1rem',
+                        lineHeight: '1.5rem',
+                        padding: '12px 0px',
+                    },
+                },
+            },
+        ],
+    },
+});

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

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

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

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

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

@@ -0,0 +1,8 @@
+import '@mui/x-date-pickers/themeAugmentation';
+import { ComponentsOverrides, Theme } from '@mui/material';
+export interface M3TimePicker {
+    MuiPickersPopper: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiPickersPopper'];
+    };
+}
+export declare const getTimePicker: (theme: Theme) => M3TimePicker;

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

@@ -0,0 +1,23 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import '@mui/x-date-pickers/themeAugmentation';
+export const getTimePicker = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiPickersPopper: {
+            styleOverrides: {
+                paper: {
+                    background: palette.surfaceContainer.main,
+                    borderRadius: 16,
+                },
+                root: {
+                    '& .MuiDialogActions-root .MuiButtonBase-root': {
+                        padding: '8px',
+                    },
+                    '& .MuiDialogActions-root': {
+                        padding: '8px',
+                    },
+                },
+            },
+        },
+    };
+};

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

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

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

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

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

@@ -0,0 +1,3 @@
+import './ToggleButton.theme';
+export declare const ToggleButton: import("@mui/material").ExtendButtonBase<import("@mui/material").ToggleButtonTypeMap<{}, "button">>;
+export type ToggleButtonComponentType = typeof ToggleButton;

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

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

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

@@ -0,0 +1,11 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3ToggleButton {
+    MuiToggleButton: {
+        defaultProps?: ComponentsProps['MuiToggleButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButton'];
+        variants?: ComponentsVariants['MuiToggleButton'];
+    };
+}
+export declare const getToggleButton: (theme: Theme) => M3ToggleButton;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,26 @@
+export const getToggleButton = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiToggleButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '50px',
+                    textTransform: 'none',
+                    color: palette.onSurface.main,
+                    '&.Mui-selected': {
+                        color: palette.onSecondaryContainer.main,
+                        backgroundColor: palette.secondaryContainer.main,
+                    },
+                    '&.MuiToggleButton-primary': {
+                        borderColor: 'transparent',
+                    },
+                    '&.MuiToggleButton-primary.Mui-selected': {
+                        color: palette.onPrimary.main,
+                        backgroundColor: palette.primary.main,
+                    },
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3ToggleButtonGroup {
+    MuiToggleButtonGroup: {
+        defaultProps?: ComponentsProps['MuiToggleButtonGroup'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButtonGroup'];
+        variants?: ComponentsVariants['MuiToggleButtonGroup'];
+    };
+}
+export declare const getToggleButtonGroup: (theme: Theme) => M3ToggleButtonGroup;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,25 @@
+import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
+export const getToggleButtonGroup = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiToggleButtonGroup: {
+            styleOverrides: {
+                grouped: {
+                    borderRadius: '50px',
+                    borderColor: palette.outline.main,
+                    '&:not(:first-of-type)': {
+                        marginLeft: 0,
+                        borderLeft: 0,
+                    },
+                    '&:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
+                    },
+                    '&.Mui-selected:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                    },
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

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

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

package/dist/src/components/navigation/Drawer/Drawer.d.ts

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

package/dist/src/components/navigation/Drawer/Drawer.js

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

package/dist/src/components/navigation/Drawer/Drawer.theme.d.ts

@@ -0,0 +1,10 @@
+import { Theme, ComponentsProps, ComponentsOverrides } from '@mui/material';
+interface M3Drawer {
+    MuiDrawer: {
+        defaultProps?: ComponentsProps['MuiDrawer'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDrawer'];
+    };
+}
+export declare const getDrawer: (theme: Theme) => M3Drawer;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,15 @@
+export const getDrawer = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiDrawer: {
+            styleOverrides: {
+                paper: {
+                    border: 0,
+                    background: palette.surface.main,
+                    color: palette.onSurfaceVariant.main,
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

package/dist/src/components/navigation/Drawer/index.js

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