@am92/react-design-system 2.10.2 → 3.0.1-beta.0

package/dist/Components/DsAvatar/DsAvatar.Overrides.d.ts

@@ -2,56 +2,60 @@ import { DsAvatarProps } from './DsAvatar.Types';
 export declare const DsAvatarOverrides: {
     MuiAvatar: {
         defaultProps: DsAvatarProps;
-        variants: ({
-            props: Partial<DsAvatarProps>;
-            style: {
-                borderWidth: string;
-                borderStyle: string;
-                borderColor: string;
-                color: string;
-                backgroundColor: string;
-                fontWeight?: undefined;
-                fontSize?: undefined;
-                lineHeight?: undefined;
-                letterSpacing?: undefined;
-                width?: undefined;
-                height?: undefined;
-                '> .MuiIcon-root'?: undefined;
+        styleOverrides: {
+            root: {
+                variants: ({
+                    props: Partial<DsAvatarProps>;
+                    style: {
+                        borderWidth: string;
+                        borderStyle: string;
+                        borderColor: string;
+                        color: string;
+                        backgroundColor: string;
+                        fontWeight?: undefined;
+                        fontSize?: undefined;
+                        lineHeight?: undefined;
+                        letterSpacing?: undefined;
+                        width?: undefined;
+                        height?: undefined;
+                        '> .MuiIcon-root'?: undefined;
+                    };
+                } | {
+                    props: Partial<DsAvatarProps>;
+                    style: {
+                        color: string;
+                        backgroundColor: string;
+                        borderWidth?: undefined;
+                        borderStyle?: undefined;
+                        borderColor?: undefined;
+                        fontWeight?: undefined;
+                        fontSize?: undefined;
+                        lineHeight?: undefined;
+                        letterSpacing?: undefined;
+                        width?: undefined;
+                        height?: undefined;
+                        '> .MuiIcon-root'?: undefined;
+                    };
+                } | {
+                    props: Partial<DsAvatarProps>;
+                    style: {
+                        fontWeight: string;
+                        fontSize: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        width: string;
+                        height: string;
+                        '> .MuiIcon-root': {
+                            fontSize: string;
+                        };
+                        borderWidth?: undefined;
+                        borderStyle?: undefined;
+                        borderColor?: undefined;
+                        color?: undefined;
+                        backgroundColor?: undefined;
+                    };
+                })[];
             };
-        } | {
-            props: Partial<DsAvatarProps>;
-            style: {
-                color: string;
-                backgroundColor: string;
-                borderWidth?: undefined;
-                borderStyle?: undefined;
-                borderColor?: undefined;
-                fontWeight?: undefined;
-                fontSize?: undefined;
-                lineHeight?: undefined;
-                letterSpacing?: undefined;
-                width?: undefined;
-                height?: undefined;
-                '> .MuiIcon-root'?: undefined;
-            };
-        } | {
-            props: Partial<DsAvatarProps>;
-            style: {
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                width: string;
-                height: string;
-                '> .MuiIcon-root': {
-                    fontSize: string;
-                };
-                borderWidth?: undefined;
-                borderStyle?: undefined;
-                borderColor?: undefined;
-                color?: undefined;
-                backgroundColor?: undefined;
-            };
-        })[];
+        };
     };
 };

package/dist/Components/DsAvatar/DsAvatar.Overrides.js

@@ -2,110 +2,114 @@ import { DsAvatarDefaultProps } from './DsAvatar.Types';
 export const DsAvatarOverrides = {
     MuiAvatar: {
         defaultProps: DsAvatarDefaultProps,
-        variants: [
-            {
-                props: { 'ds-variant': 'text' },
-                style: {
-                    borderWidth: '1px',
-                    borderStyle: 'solid',
-                    borderColor: 'var(--ds-colour-strokeDefault)',
-                    color: 'var(--ds-colour-typoPrimary)',
-                    backgroundColor: 'var(--ds-colour-surfaceSecondary)'
-                }
-            },
-            {
-                props: { 'ds-variant': 'icon' },
-                style: {
-                    color: 'var(--ds-colour-iconDefault)',
-                    backgroundColor: 'transparent'
-                }
-            },
-            {
-                props: { 'ds-size': 'S' },
-                style: {
-                    fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
-                    fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
-                    lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
-                    width: 'var(--ds-rules-avatarSSize)',
-                    height: 'var(--ds-rules-avatarSSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarSSize)'
+        styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { 'ds-variant': 'text' },
+                        style: {
+                            borderWidth: '1px',
+                            borderStyle: 'solid',
+                            borderColor: 'var(--ds-colour-strokeDefault)',
+                            color: 'var(--ds-colour-typoPrimary)',
+                            backgroundColor: 'var(--ds-colour-surfaceSecondary)'
+                        }
+                    },
+                    {
+                        props: { 'ds-variant': 'icon' },
+                        style: {
+                            color: 'var(--ds-colour-iconDefault)',
+                            backgroundColor: 'transparent'
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'S' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
+                            fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
+                            lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
+                            width: 'var(--ds-rules-avatarSSize)',
+                            height: 'var(--ds-rules-avatarSSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarSSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'M' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
+                            fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
+                            lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
+                            width: 'var(--ds-rules-avatarMSize)',
+                            height: 'var(--ds-rules-avatarMSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarMSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'L' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-bodyRegularLarge-fontWeight)',
+                            fontSize: 'var(--ds-typo-bodyRegularLarge-fontSize)',
+                            lineHeight: 'var(--ds-typo-bodyRegularLarge-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-bodyRegularLarge-letterSpacing)',
+                            width: 'var(--ds-rules-avatarLSize)',
+                            height: 'var(--ds-rules-avatarLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarLSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'XL' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-headingBoldMedium-fontWeight)',
+                            fontSize: 'var(--ds-typo-headingBoldMedium-fontSize)',
+                            lineHeight: 'var(--ds-typo-headingBoldMedium-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-headingBoldMedium-letterSpacing)',
+                            width: 'var(--ds-rules-avatarXLSize)',
+                            height: 'var(--ds-rules-avatarXLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarXLSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'XXL' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-headingBoldLarge-fontWeight)',
+                            fontSize: 'var(--ds-typo-headingBoldLarge-fontSize)',
+                            lineHeight: 'var(--ds-typo-headingBoldLarge-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-headingBoldLarge-letterSpacing)',
+                            width: 'var(--ds-rules-avatarXXLSize)',
+                            height: 'var(--ds-rules-avatarXXLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarXXLSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: {
+                            'ds-size': '3XL'
+                        },
+                        style: {
+                            fontWeight: 'var(--ds-typo-headingBoldExtraLarge-fontWeight)',
+                            fontSize: 'var(--ds-typo-headingBoldExtraLarge-fontSize)',
+                            lineHeight: 'var(--ds-typo-headingBoldExtraLarge-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-headingBoldExtraLarge-letterSpacing)',
+                            width: 'var(--ds-rules-avatar3XLSize)',
+                            height: 'var(--ds-rules-avatar3XLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatar3XLSize)'
+                            }
+                        }
                     }
-                }
-            },
-            {
-                props: { 'ds-size': 'M' },
-                style: {
-                    fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
-                    fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
-                    lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
-                    width: 'var(--ds-rules-avatarMSize)',
-                    height: 'var(--ds-rules-avatarMSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarMSize)'
-                    }
-                }
-            },
-            {
-                props: { 'ds-size': 'L' },
-                style: {
-                    fontWeight: 'var(--ds-typo-bodyRegularLarge-fontWeight)',
-                    fontSize: 'var(--ds-typo-bodyRegularLarge-fontSize)',
-                    lineHeight: 'var(--ds-typo-bodyRegularLarge-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyRegularLarge-letterSpacing)',
-                    width: 'var(--ds-rules-avatarLSize)',
-                    height: 'var(--ds-rules-avatarLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarLSize)'
-                    }
-                }
-            },
-            {
-                props: { 'ds-size': 'XL' },
-                style: {
-                    fontWeight: 'var(--ds-typo-headingBoldMedium-fontWeight)',
-                    fontSize: 'var(--ds-typo-headingBoldMedium-fontSize)',
-                    lineHeight: 'var(--ds-typo-headingBoldMedium-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-headingBoldMedium-letterSpacing)',
-                    width: 'var(--ds-rules-avatarXLSize)',
-                    height: 'var(--ds-rules-avatarXLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarXLSize)'
-                    }
-                }
-            },
-            {
-                props: { 'ds-size': 'XXL' },
-                style: {
-                    fontWeight: 'var(--ds-typo-headingBoldLarge-fontWeight)',
-                    fontSize: 'var(--ds-typo-headingBoldLarge-fontSize)',
-                    lineHeight: 'var(--ds-typo-headingBoldLarge-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-headingBoldLarge-letterSpacing)',
-                    width: 'var(--ds-rules-avatarXXLSize)',
-                    height: 'var(--ds-rules-avatarXXLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarXXLSize)'
-                    }
-                }
-            },
-            {
-                props: {
-                    'ds-size': '3XL'
-                },
-                style: {
-                    fontWeight: 'var(--ds-typo-headingBoldExtraLarge-fontWeight)',
-                    fontSize: 'var(--ds-typo-headingBoldExtraLarge-fontSize)',
-                    lineHeight: 'var(--ds-typo-headingBoldExtraLarge-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-headingBoldExtraLarge-letterSpacing)',
-                    width: 'var(--ds-rules-avatar3XLSize)',
-                    height: 'var(--ds-rules-avatar3XLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatar3XLSize)'
-                    }
-                }
+                ]
             }
-        ]
+        }
     }
 };

package/dist/Components/DsBottomSheet/DsBottomSheet.Component.js

@@ -9,6 +9,7 @@ import { DsDialogContent } from '../DsDialogContent';
 import { DsButton } from '../DsButton';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsPaper } from '../DsPaper';
+import { mergeSlotProps } from '../../utils';
 export const DsBottomSheet = (inProps) => {
     const props = { ...DsBottomSheetDefaultProps, ...inProps };
     const handleDrawerClose = (event, reason) => {
@@ -23,7 +24,7 @@ export const DsBottomSheet = (inProps) => {
             onClose(event, 'backdropClick');
         }
     };
-    const { kicker, title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, DescriptionProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, ...DrawerProps } = props;
+    const { kicker, title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, DescriptionProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, slotProps, ...DrawerProps } = props;
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const isFlushed = primaryButtonText &&
         !secondaryButtonText &&
@@ -36,14 +37,18 @@ export const DsBottomSheet = (inProps) => {
     if (kicker) {
         accessibilityProps['aria-describedby'] = kicker;
     }
-    return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: 'bottom', PaperProps: {
-            ...PaperProps,
-            sx: {
-                background: 'transparent',
-                maxHeight: 'var(--ds-rules-bottomSheetWorkingAreaHeight)',
-                // top: 'var(--ds-spacing-bitterCold)',
-                ...PaperProps?.sx
-            }
+    const paperProps = {
+        ...PaperProps,
+        ...slotProps?.paper
+    };
+    return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: 'bottom', slotProps: {
+            ...slotProps,
+            paper: mergeSlotProps(paperProps, {
+                sx: {
+                    background: 'transparent',
+                    maxHeight: 'var(--ds-rules-bottomSheetWorkingAreaHeight)',
+                },
+            }),
         }, onClose: handleDrawerClose, children: [showClose && (_jsx(DsIconButton, { onClick: handleCloseClick, ...CloseIconButtonProps, sx: {
                     flexGrow: 0,
                     alignSelf: 'center',
@@ -63,7 +68,8 @@ export const DsBottomSheet = (inProps) => {
                     borderTopLeftRadius: 'var(--ds-radius-bitterCold)',
                     borderTopRightRadius: 'var(--ds-radius-bitterCold)',
                     ...ContainerProps?.sx
-                }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'text.tertiary', ...KickerProps, sx: {
+                }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', ...KickerProps, sx: {
+                            color: 'text.tertiary',
                             px: 'var(--ds-spacing-bitterCold)',
                             mb: 'var(--ds-spacing-quickFreeze)',
                             textTransform: 'uppercase',

package/dist/Components/DsButton/DsButton.Overrides.d.ts

@@ -1,26 +1,22 @@
 import { DsButtonProps } from './DsButton.Types';
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 export declare const DsButtonOverrides: {
     MuiButton: {
         defaultProps: DsButtonProps;
-        variants: {
-            props: Partial<DsButtonProps>;
-            style: CSSInterpolation;
-        }[];
         styleOverrides: {
-            root: CSSInterpolation;
-            contained: CSSInterpolation;
-            sizeLarge: CSSInterpolation;
-            sizeMedium: CSSInterpolation;
-            sizeSmall: CSSInterpolation;
-            icon: CSSInterpolation;
+            root: CSSObject;
+            contained: CSSObject;
+            sizeLarge: CSSObject;
+            sizeMedium: CSSObject;
+            sizeSmall: CSSObject;
+            icon: CSSObject;
             startIcon: {
                 marginRight: string;
             };
             endIcon: {
                 marginLeft: string;
             };
-            text: CSSInterpolation;
+            text: CSSObject;
         };
     };
 };

package/dist/Components/DsButton/DsButton.Overrides.js

@@ -3,29 +3,6 @@ import STATE_STYLES from '../../Theme/STATE_STYLES';
 export const DsButtonOverrides = {
     MuiButton: {
         defaultProps: DsButtonDefaultProps,
-        variants: [
-            {
-                props: { variant: 'flushed' },
-                style: {
-                    borderRadius: 'var(--ds-radius-zero)'
-                }
-            },
-            {
-                props: {
-                    variant: 'flushed',
-                    color: 'primary'
-                },
-                style: {
-                    color: 'var(--ds-colour-typoOnSurface)',
-                    backgroundColor: 'var(--ds-colour-actionPrimary)',
-                    '&:disabled': {
-                        color: 'var(--ds-colour-typoOnSurface)',
-                        backgroundColor: 'var(--ds-colour-stateUnselectedDefault)'
-                    },
-                    ...STATE_STYLES.ACTION_PRIMARY_STATE_PRIMARY
-                }
-            }
-        ],
         styleOverrides: {
             root: {
                 borderRadius: 'var(--ds-radius-glacial)',
@@ -33,10 +10,33 @@ export const DsButtonOverrides = {
                 '&.Mui-disabled': {
                     cursor: 'not-allowed',
                     pointerEvents: 'all'
-                }
+                },
+                variants: [
+                    {
+                        props: { variant: 'flushed' },
+                        style: {
+                            borderRadius: 'var(--ds-radius-zero)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'flushed',
+                            color: 'primary'
+                        },
+                        style: {
+                            color: 'var(--ds-colour-typoOnSurface)',
+                            backgroundColor: 'var(--ds-colour-actionPrimary)',
+                            '&:disabled': {
+                                color: 'var(--ds-colour-typoOnSurface)',
+                                backgroundColor: 'var(--ds-colour-stateUnselectedDefault)'
+                            },
+                            ...STATE_STYLES.ACTION_PRIMARY_STATE_PRIMARY
+                        }
+                    }
+                ],
             },
             contained: {
-                '&.MuiButton-containedPrimary': {
+                "&.MuiButton-contained.MuiButton-colorPrimary": {
                     color: 'var(--ds-colour-typoOnSurface)',
                     backgroundColor: 'var(--ds-colour-actionPrimary)',
                     '&:disabled': {
@@ -45,7 +45,7 @@ export const DsButtonOverrides = {
                     },
                     ...STATE_STYLES.ACTION_PRIMARY_STATE_PRIMARY
                 },
-                '&.MuiButton-containedSecondary': {
+                "&.MuiButton-contained.MuiButton-colorSecondary": {
                     backgroundColor: 'var(--ds-colour-surfaceSecondary)',
                     borderWidth: '1px',
                     borderStyle: 'solid',

package/dist/Components/DsButtonBase/DsButtonBase.Overrides.d.ts

@@ -1 +1,10 @@
-export declare const DsButtonBaseOverrides: {};
+export declare const DsButtonBaseOverrides: {
+    MuiButtonBase: {
+        defaultProps: import("./DsButtonBase.Types").DsButtonBaseProps;
+        styleOverrides: {
+            root: {
+                fontFamily: string;
+            };
+        };
+    };
+};

package/dist/Components/DsButtonBase/DsButtonBase.Overrides.js

@@ -1 +1,11 @@
-export const DsButtonBaseOverrides = {};
+import { DsButtonBaseDefaultProps } from "./DsButtonBase.Types";
+export const DsButtonBaseOverrides = {
+    MuiButtonBase: {
+        defaultProps: DsButtonBaseDefaultProps,
+        styleOverrides: {
+            root: {
+                fontFamily: 'inherit'
+            }
+        }
+    }
+};

package/dist/Components/DsChip/DsChip.Overrides.d.ts

@@ -1,12 +1,15 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 import { DsChipProps } from './DsChip.Types';
 export declare const DsChipOverrides: {
     MuiChip: {
         defaultProps: DsChipProps;
-        variants: {
-            props: Partial<DsChipProps>;
-            style: CSSInterpolation;
-        }[];
-        styleOverrides: {};
+        styleOverrides: {
+            root: {
+                variants: {
+                    props: Partial<DsChipProps>;
+                    style: CSSObject;
+                }[];
+            };
+        };
     };
 };