@webpros/mui-theme 0.1.6 → 0.3.0

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

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

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

@@ -0,0 +1,67 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getOutlinedInput = () => {
+    return {
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    // the order matters
+                    variants: [
+                        {
+                            props: ({ multiline }) => !!multiline,
+                            style: {
+                                paddingTop: 11,
+                                paddingBottom: 11,
+                            },
+                        },
+                        {
+                            props: ({ multiline, size }) => !!multiline && size === 'small',
+                            style: {
+                                paddingTop: 7,
+                                paddingBottom: 7,
+                            },
+                        },
+                        {
+                            props: ({ multiline, size }) => !!multiline && size === 'large',
+                            style: {
+                                paddingTop: 14,
+                                paddingBottom: 14,
+                            },
+                        },
+                    ],
+                },
+                input: {
+                    height: '20px',
+                    variants: [
+                        {
+                            props: {},
+                            style: {
+                                paddingTop: 11,
+                                paddingBottom: 11,
+                            },
+                        },
+                        {
+                            props: { size: 'small' },
+                            style: {
+                                paddingTop: 7,
+                                paddingBottom: 7,
+                            },
+                        },
+                        {
+                            props: { size: 'large' },
+                            style: {
+                                paddingTop: 14,
+                                paddingBottom: 14,
+                            },
+                        },
+                        {
+                            props: ({ ownerState }) => !!ownerState.multiline,
+                            style: {
+                                padding: 0,
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    };
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getRadio = (theme) => {
+    const { colors } = theme;
+    return {
+        MuiRadio: {
+            defaultProps: { size: 'small', color: 'default' },
+            styleOverrides: {
+                root: {
+                    color: colors.schemes.surfaces.onSurfaceVariant,
+                    '&.Mui-checked': {
+                        color: colors.schemes.base.primary,
+                    },
+                    '&.Mui-disabled': {
+                        color: colors.stateLayers.surfaces.onSurfaceVariant.opacity38,
+                    },
+                    '&.Mui-disabled.Mui-checked': {
+                        color: colors.stateLayers.surfaces.onSurface.opacity38,
+                    },
+                },
+            },
+            variants: [
+                {
+                    props: { color: 'error' },
+                    style: {
+                        color: colors.schemes.status.error,
+                        '&.Mui-checked': {
+                            color: colors.schemes.status.error,
+                        },
+                    },
+                },
+            ],
+        },
+    };
+};
+export default {};

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

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

package/dist/src/components/{navigation/TabList → inputs/Radio}/index.js

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

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

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

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

@@ -1,46 +1,19 @@
 // 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;
+export const getSelect = () => {
     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),
-                    },
+                icon: {
+                    top: 'calc(50% - 10px)',
+                    right: 13,
+                    width: 20,
+                    height: 20,
                 },
             },
-            variants: [
-                {
-                    props: { variant: 'outlined' },
-                    style: {
-                        borderRadius: 8,
-                    },
-                },
-            ],
         },
     };
 };

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

@@ -1,93 +1,169 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha, } from '@mui/material';
+import { switchClasses, touchRippleClasses, } from '@mui/material';
 export const getSwitch = (theme) => {
-    const { palette } = theme;
+    const { colors, transitions } = theme;
+    const activeThumbScale = 1.67;
+    const activeThumbScaleChecked = 1.15;
+    const createTransitionStrings = (props, options) => props.map((prop) => transitions.create(prop, options));
+    const thumbActiveTransition = [
+        transitions.create('transform', { duration: 300, easing: 'linear' }),
+        transitions.create('color', { duration: 150, easing: 'linear' }),
+    ].join(', ');
+    const rippleInsetTransitions = createTransitionStrings(['top', 'left', 'right', 'bottom'], {
+        duration: 150,
+        easing: 'ease',
+    });
+    const rippleInsetTransition = rippleInsetTransitions.join(', ');
+    const rippleBackgroundTransition = [
+        transitions.create('background', { duration: 150 }),
+        ...rippleInsetTransitions,
+    ].join(', ');
+    const rippleBackgroundTransformTransition = [
+        transitions.create('background', { duration: 150 }),
+        ...rippleInsetTransitions,
+        transitions.create('transform', { duration: 150, easing: 'ease' }),
+    ].join(', ');
+    const hoverThumbTransition = [
+        transitions.create('color', { duration: 150 }),
+        transitions.create('background', { duration: 150 }),
+        ...rippleInsetTransitions,
+        transitions.create('transform', { duration: 150, easing: 'ease' }),
+    ].join(', ');
+    const colorTransitionShort = transitions.create('color', { duration: 150 });
+    const backgroundTransitionMedium = transitions.create('background', { duration: 200 });
     return {
         MuiSwitch: {
+            defaultProps: {
+                size: 'medium',
+            },
             styleOverrides: {
                 root: {
                     overflow: 'visible',
-                    width: 42,
-                    height: 26,
+                    width: 36,
+                    height: 24,
                     padding: 0,
                     marginLeft: 12,
                     marginRight: 8,
-                    borderColor: palette.outline.main,
-                    '& .MuiSwitch-switchBase': {
+                    borderColor: colors.stateLayers.base.primary.opacity38,
+                    [`& .${switchClasses.switchBase}`]: {
                         padding: 0,
-                        margin: 7,
+                        top: '50%',
+                        left: '6px',
+                        transform: 'translateY(-50%)',
                         transitionDuration: '100ms',
+                        [`&:active .${switchClasses.thumb}`]: {
+                            color: colors.schemes.base.primaryContainer,
+                            transform: `scale(${activeThumbScale})`,
+                            transition: thumbActiveTransition,
+                        },
                         '&.Mui-checked': {
-                            transform: 'translateX(16px)',
-                            margin: 4,
-                            '& + .MuiSwitch-track': {
-                                backgroundColor: palette.primary.main,
+                            transform: 'translateY(-50%) translateX(8px)',
+                            [`& + .${switchClasses.track}`]: {
+                                backgroundColor: colors.schemes.base.primary,
                                 opacity: 1,
                                 border: 0,
                             },
-                            '& .MuiSwitch-thumb': {
-                                color: palette.onPrimary.main,
+                            [`& .${switchClasses.thumb}`]: {
+                                color: colors.schemes.base.onPrimary,
                                 width: 18,
                                 height: 18,
                             },
-                            '&.Mui-disabled + .MuiSwitch-track': {
-                                backgroundColor: alpha(palette.onSurface.main, 0.1),
+                            [`&:active .${switchClasses.thumb}`]: {
+                                color: colors.schemes.base.primaryContainer,
+                                transform: `scale(${activeThumbScaleChecked})`,
+                                transition: thumbActiveTransition,
+                            },
+                            [`&.Mui-disabled + .${switchClasses.track}`]: {
+                                backgroundColor: colors.stateLayers.surfaces.onSurface.opacity28,
                             },
-                            '&.Mui-disabled .MuiSwitch-thumb': {
-                                color: alpha(palette.surface.main, 0.8),
+                            [`&.Mui-disabled .${switchClasses.thumb}`]: {
+                                color: colors.stateLayers.surfaces.surfaceContainerLowest,
                             },
-                            '& .MuiTouchRipple-root': {
+                            [`& .${touchRippleClasses.root}`]: {
                                 top: '-8px',
                                 left: '-8px',
                                 right: '-8px',
                                 bottom: '-8px',
+                                transition: rippleInsetTransition,
                             },
-                            '.MuiTouchRipple-ripple': {
-                                color: palette.primary.main,
-                                opacity: 0.08,
+                            [`& .${touchRippleClasses.ripple}`]: {
+                                color: colors.stateLayers.base.primary.opacity38,
                             },
                         },
-                        '&.Mui-focusVisible .MuiSwitch-thumb': {
-                            color: palette.primary.main,
-                            border: `6px solid ${palette.onPrimary.main}`,
+                        [`&.Mui-disabled:not(.Mui-checked) + .${switchClasses.track}`]: {
+                            backgroundColor: colors.stateLayers.surfaces.onSurface.opacity06,
+                            border: `2px solid ${colors.stateLayers.surfaces.onSurface.opacity12}`,
+                            opacity: 1,
                         },
-                        '&.Mui-disabled .MuiSwitch-thumb': {
-                            color: alpha(palette.onSurface.main, 0.3),
+                        [`&.Mui-disabled:not(.Mui-checked) .${switchClasses.thumb}`]: {
+                            color: colors.stateLayers.surfaces.onSurfaceVariant.opacity38,
+                        },
+                        [`& .${touchRippleClasses.root}`]: {
+                            top: '-12px',
+                            left: '-12px',
+                            right: '-12px',
+                            bottom: '-12px',
+                            transition: rippleInsetTransition,
+                        },
+                        [`&:active:not(.Mui-checked) .${touchRippleClasses.root}`]: {
+                            top: '-10px',
+                            left: '-10px',
+                            right: '-10px',
+                            bottom: '-10px',
+                            transition: rippleInsetTransition,
                         },
                     },
-                    '& .MuiSwitch-thumb': {
+                    [`& .${switchClasses.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',
+                        transition: thumbActiveTransition,
+                    },
+                    [`& .${switchClasses.switchBase}:not(.Mui-disabled):not(.Mui-checked) .${switchClasses.thumb}`]: {
+                        color: colors.stateLayers.base.primary.opacity72,
+                    },
+                    [`& .${switchClasses.switchBase}:hover .${touchRippleClasses.root}`]: {
+                        backgroundColor: colors.stateLayers.base.primary.opacity12,
+                        transition: rippleBackgroundTransition,
+                    },
+                    [`& .${switchClasses.switchBase}:not(.Mui-checked):hover .${switchClasses.thumb}`]: {
+                        color: colors.schemes.base.primary,
+                        transition: hoverThumbTransition,
+                    },
+                    '.MuiFormControlLabel-root:hover &': {
+                        [`& .${switchClasses.switchBase}:not(.Mui-disabled) .${touchRippleClasses.root}`]: {
+                            backgroundColor: colors.stateLayers.base.primary.opacity08,
+                            transition: rippleBackgroundTransformTransition,
                         },
+                        [`& .${switchClasses.switchBase}:not(.Mui-checked):not(.Mui-disabled) .${switchClasses.thumb}`]: {
+                            color: colors.schemes.base.primary,
+                            transition: colorTransitionShort,
+                        },
+                    },
+                    [`&:active .Mui-checked .${touchRippleClasses.root}`]: {
+                        top: '-7px',
+                        left: '-7px',
+                        right: '-7px',
+                        bottom: '-7px',
+                        transition: rippleInsetTransition,
                     },
-                    '& .MuiTouchRipple-root': {
-                        top: '-12px',
-                        left: '-12px',
-                        right: '-12px',
-                        bottom: '-12px',
+                    [`& .${touchRippleClasses.root}`]: {
+                        top: '-8px',
+                        left: '-8px',
+                        right: '-8px',
+                        bottom: '-8px',
+                        transition: rippleInsetTransition,
                     },
-                    '.MuiTouchRipple-ripple': {
-                        color: palette.onSurface.main,
-                        opacity: 0.06,
+                    [`& .${touchRippleClasses.ripple}`]: {
+                        color: colors.stateLayers.surfaces.onSurface.opacity06,
                     },
-                    '& .MuiSwitch-track': {
+                    [`& .${switchClasses.track}`]: {
                         borderRadius: 20,
-                        border: `2px solid ${palette.outline.main}`,
-                        backgroundColor: palette.surfaceContainerHighest.main,
+                        border: `2px solid ${colors.stateLayers.base.primary.opacity08}`,
+                        backgroundColor: colors.schemes.base.primaryContainer,
                         opacity: 1,
-                        transition: 'background .2s',
+                        transition: backgroundTransitionMedium,
                     },
                 },
             },

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

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

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

@@ -1,32 +1,8 @@
 // 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',
-                },
-            },
+        defaultProps: {
+            variant: 'outlined',
         },
-        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/navigation/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import './Breadcrumbs.theme';
+export declare const Breadcrumbs: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BreadcrumbsTypeMap<{}, "nav">>;
+export type BreadcrumbsComponentType = typeof Breadcrumbs;
+export * from './Crumb';

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

@@ -0,0 +1,5 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { Breadcrumbs as MuiBreadcrumbs } from '@mui/material';
+import './Breadcrumbs.theme';
+export const Breadcrumbs = MuiBreadcrumbs;
+export * from './Crumb';

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

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

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

@@ -0,0 +1,23 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { typographyVariants } from '../../../tokens/typography';
+export const getBreadcrumbs = (theme) => {
+    const { spacing, colors } = theme;
+    return {
+        MuiBreadcrumbs: {
+            defaultProps: {
+                separator: '/',
+            },
+            styleOverrides: {
+                root: {
+                    color: colors.schemes.typography.onSurface,
+                },
+                separator: Object.assign({ marginLeft: spacing(1), marginRight: spacing(1), color: colors.schemes.surfaces.onSurfaceVariant }, typographyVariants.BodySmall),
+                li: {
+                    // Collapsed ellipsis button
+                    '& button': Object.assign({ color: colors.schemes.surfaces.onSurfaceVariant }, typographyVariants.BodySmall),
+                },
+            },
+        },
+    };
+};
+export default {};

package/dist/src/components/navigation/Breadcrumbs/Crumb.d.ts

@@ -0,0 +1,10 @@
+import { LinkProps } from '@mui/material';
+import { ReactNode } from 'react';
+export interface CrumbProps extends Omit<LinkProps, 'variant' | 'underlineInversed' | 'visited'> {
+    icon?: ReactNode;
+    children: ReactNode;
+    underlineInversed?: boolean;
+    visited?: boolean;
+}
+export declare const Crumb: ({ icon, children, underlineInversed, visited, sx, ...props }: CrumbProps) => import("react/jsx-runtime").JSX.Element;
+export type CrumbComponentType = typeof Crumb;

package/dist/src/components/navigation/Breadcrumbs/Crumb.js

@@ -0,0 +1,10 @@
+import { __rest } from "tslib";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { Link } from '@mui/material';
+export const Crumb = (_a) => {
+    var { icon, children, underlineInversed = true, visited = false, sx } = _a, props = __rest(_a, ["icon", "children", "underlineInversed", "visited", "sx"]);
+    return (_jsxs(Link, Object.assign({ variant: "BodySmall", underline: "hover", underlineInversed: underlineInversed, visited: visited, color: "primary", sx: Object.assign({ display: 'flex', alignItems: 'center', gap: 1, '& svg': {
+                color: 'currentColor',
+            } }, sx) }, props, { children: [icon, children] })));
+};

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

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

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

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

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

@@ -5,6 +5,6 @@ interface M3Drawer {
         styleOverrides?: ComponentsOverrides<Theme>['MuiDrawer'];
     };
 }
-export declare const getDrawer: (theme: Theme) => M3Drawer;
+export declare const getDrawer: (_theme: Theme) => M3Drawer;
 declare const _default: {};
 export default _default;

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

@@ -1,12 +1,56 @@
-export const getDrawer = (theme) => {
-    const { palette } = theme;
+import { drawerClasses } from '@mui/material/Drawer';
+const anchorLeftSelector = `&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`;
+const anchorLeftDockedSelector = `&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`;
+const anchorRightSelector = `&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`;
+const anchorRightDockedSelector = `&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`;
+const anchorTopSelector = `&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`;
+const anchorTopDockedSelector = `&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`;
+const anchorBottomSelector = `&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`;
+const anchorBottomDockedSelector = `&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`;
+export const getDrawer = (_theme) => {
     return {
         MuiDrawer: {
+            defaultProps: {
+                slotProps: {
+                    paper: {
+                        elevation: 3,
+                    },
+                },
+            },
             styleOverrides: {
-                paper: {
-                    border: 0,
-                    background: palette.surface.main,
-                    color: palette.onSurfaceVariant.main,
+                root: {
+                    [anchorLeftSelector]: {
+                        borderTopLeftRadius: 0,
+                        borderBottomLeftRadius: 0,
+                    },
+                    [anchorLeftDockedSelector]: {
+                        borderTopLeftRadius: 0,
+                        borderBottomLeftRadius: 0,
+                    },
+                    [anchorRightSelector]: {
+                        borderTopRightRadius: 0,
+                        borderBottomRightRadius: 0,
+                    },
+                    [anchorRightDockedSelector]: {
+                        borderTopRightRadius: 0,
+                        borderBottomRightRadius: 0,
+                    },
+                    [anchorTopSelector]: {
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: 0,
+                    },
+                    [anchorTopDockedSelector]: {
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: 0,
+                    },
+                    [anchorBottomSelector]: {
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
+                    },
+                    [anchorBottomDockedSelector]: {
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
+                    },
                 },
             },
         },