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

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

@@ -1,7 +1,29 @@
+import { DsBadgeProps } from './DsBadge.Types';
 export declare const DsBadgeOverrides: {
     MuiBadge: {
-        defaultProps: import("./DsBadge.Types").DsBadgeProps;
+        defaultProps: DsBadgeProps;
         styleOverrides: {
+            root: {
+                variants: ({
+                    props: Partial<DsBadgeProps>;
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: string;
+                            color: string;
+                            pointerEvents?: undefined;
+                        };
+                    };
+                } | {
+                    props: Partial<DsBadgeProps>;
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: string;
+                            color: string;
+                            pointerEvents: string;
+                        };
+                    };
+                })[];
+            };
             standard: {
                 fontWeight: string;
                 fontSize: string;

package/dist/Components/DsBadge/DsBadge.Overrides.js

@@ -3,6 +3,29 @@ export const DsBadgeOverrides = {
     MuiBadge: {
         defaultProps: DsBadgeDefaultProps,
         styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { color: 'inverse' },
+                        style: {
+                            '& .MuiBadge-badge': {
+                                backgroundColor: 'var(--ds-colour-iconOnSurface)',
+                                color: 'var(--ds-colour-actionSecondary)',
+                            }
+                        },
+                    },
+                    {
+                        props: { disabled: true },
+                        style: {
+                            '& .MuiBadge-badge': {
+                                backgroundColor: 'var(--ds-colour-iconDisabled)',
+                                color: 'var(--ds-colour-typoOnSurface)',
+                                pointerEvents: 'none'
+                            }
+                        }
+                    }
+                ],
+            },
             standard: {
                 fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
                 fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',

package/dist/Components/DsBadge/DsBadge.Types.d.ts

@@ -1,4 +1,8 @@
 import { BadgeProps } from '@mui/material';
-export interface DsBadgeProps extends BadgeProps {
+type TDsBadgeExtendedColor = BadgeProps['color'] | 'inverse';
+export interface DsBadgeProps extends Omit<BadgeProps, 'color'> {
+    color?: TDsBadgeExtendedColor;
+    disabled?: boolean;
 }
 export declare const DsBadgeDefaultProps: DsBadgeProps;
+export {};

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;
+                }[];
+            };
+        };
     };
 };

package/dist/Components/DsChip/DsChip.Overrides.js

@@ -2,141 +2,144 @@ import { DsChipDefaultProps } from './DsChip.Types';
 export const DsChipOverrides = {
     MuiChip: {
         defaultProps: DsChipDefaultProps,
-        variants: [
-            {
-                props: { variant: 'chip' },
-                style: {
-                    border: 'none',
-                    borderRadius: 'var(--ds-radius-quickFreeze)',
-                    paddingLeft: 'var(--ds-spacing-glacial)',
-                    paddingRight: 'var(--ds-spacing-glacial)',
-                    height: '20px',
-                    '.MuiChip-icon': {
-                        fontSize: 'var(--ds-typo-fontSizeIceAge)',
-                        marginRight: 'var(--ds-spacing-quickFreeze)',
-                        marginLeft: 'var(--ds-spacing-zero)',
-                        color: 'inherit'
+        styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { variant: 'chip' },
+                        style: {
+                            border: 'none',
+                            borderRadius: 'var(--ds-radius-quickFreeze)',
+                            paddingLeft: 'var(--ds-spacing-glacial)',
+                            paddingRight: 'var(--ds-spacing-glacial)',
+                            height: '20px',
+                            '.MuiChip-icon': {
+                                fontSize: 'var(--ds-typo-fontSizeIceAge)',
+                                marginRight: 'var(--ds-spacing-quickFreeze)',
+                                marginLeft: 'var(--ds-spacing-zero)',
+                                color: 'inherit'
+                            },
+                            '> .MuiChip-label': {
+                                paddingLeft: 'var(--ds-spacing-zero)',
+                                paddingRight: 'var(--ds-spacing-zero)'
+                            }
+                        }
                     },
-                    '> .MuiChip-label': {
-                        paddingLeft: 'var(--ds-spacing-zero)',
-                        paddingRight: 'var(--ds-spacing-zero)'
+                    {
+                        props: { variant: 'chip', type: 'status' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
+                            fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
+                            lineHeight: 'var(--ds-typo-supportRegularMetadata-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-supportRegularMetadata-letterSpacing)',
+                            textTransform: 'uppercase',
+                            paddingTop: 'var(--ds-spacing-quickFreeze)',
+                            paddingBottom: 'var(--ds-spacing-quickFreeze)',
+                            backgroundColor: 'var(--ds-colour-supportTypical)',
+                            color: 'var(--ds-colour-typoOnSurface)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'success'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportPositive)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'warning'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportWarning)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'error'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportNegative)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'info'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-neutral1)',
+                            color: 'var(--ds-colour-typoPrimary)'
+                        }
+                    },
+                    {
+                        props: { variant: 'chip', type: 'nudge' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
+                            fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',
+                            lineHeight: 'var(--ds-typo-supportRegularInfo-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-supportRegularInfo-letterSpacing)',
+                            textTransform: 'none',
+                            paddingTop: 'var(--ds-spacing-deepFreeze)',
+                            paddingBottom: 'var(--ds-spacing-deepFreeze)',
+                            backgroundColor: 'var(--ds-colour-supportTypicalNeutral)',
+                            color: 'var(--ds-colour-supportTypical)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'success'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportPositiveNeutral)',
+                            color: 'var(--ds-colour-supportPositive)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'warning'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportWarningNeutral)',
+                            color: 'var(--ds-colour-supportWarning)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'error'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportNegativeNeutral)',
+                            color: 'var(--ds-colour-supportNegative)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'info'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-neutral1)',
+                            color: 'var(--ds-colour-typoPrimary)'
+                        }
                     }
-                }
-            },
-            {
-                props: { variant: 'chip', type: 'status' },
-                style: {
-                    fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
-                    fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
-                    lineHeight: 'var(--ds-typo-supportRegularMetadata-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-supportRegularMetadata-letterSpacing)',
-                    textTransform: 'uppercase',
-                    paddingTop: 'var(--ds-spacing-quickFreeze)',
-                    paddingBottom: 'var(--ds-spacing-quickFreeze)',
-                    backgroundColor: 'var(--ds-colour-supportTypical)',
-                    color: 'var(--ds-colour-typoOnSurface)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'success'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportPositive)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'warning'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportWarning)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'error'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportNegative)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'info'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-neutral1)',
-                    color: 'var(--ds-colour-typoPrimary)'
-                }
-            },
-            {
-                props: { variant: 'chip', type: 'nudge' },
-                style: {
-                    fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
-                    fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',
-                    lineHeight: 'var(--ds-typo-supportRegularInfo-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-supportRegularInfo-letterSpacing)',
-                    textTransform: 'none',
-                    paddingTop: 'var(--ds-spacing-deepFreeze)',
-                    paddingBottom: 'var(--ds-spacing-deepFreeze)',
-                    backgroundColor: 'var(--ds-colour-supportTypicalNeutral)',
-                    color: 'var(--ds-colour-supportTypical)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'success'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportPositiveNeutral)',
-                    color: 'var(--ds-colour-supportPositive)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'warning'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportWarningNeutral)',
-                    color: 'var(--ds-colour-supportWarning)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'error'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportNegativeNeutral)',
-                    color: 'var(--ds-colour-supportNegative)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'info'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-neutral1)',
-                    color: 'var(--ds-colour-typoPrimary)'
-                }
+                ]
             }
-        ],
-        styleOverrides: {}
+        }
     }
 };

package/dist/Components/DsDialog/DsDialog.Component.js

@@ -8,15 +8,16 @@ import { DsTypography } from '../DsTypography';
 import { DsDialogContent } from '../DsDialogContent';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsButton } from '../DsButton';
+import { mergeSlotProps } from '../../utils';
 export const DsDialog = inProps => {
     const props = { ...DsDialogDefaultProps, ...inProps };
-    const handleCloseClick = (event) => {
+    const handleCloseClick = (reason) => (event) => {
         const { onClose } = props;
         if (typeof onClose === 'function') {
-            onClose(event, 'backdropClick');
+            onClose(event, reason ? reason : 'backdropClick');
         }
     };
-    const { title, description, kicker, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
+    const { title, description, kicker, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, children, slotProps, ...DialogProps } = props;
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const accessibilityProps = {};
     const isFlushed = primaryButtonText &&
@@ -29,21 +30,26 @@ export const DsDialog = inProps => {
     if (description) {
         accessibilityProps['aria-describedby'] = description;
     }
-    return (_jsxs(Dialog, { keepMounted: true, ...accessibilityProps, ...DialogProps, PaperProps: {
-            ...PaperProps,
-            sx: {
-                pb: isFlushed
-                    ? undefined
-                    : {
-                        xs: 'var(--ds-spacing-bitterCold)',
+    const paperProps = {
+        ...PaperProps,
+        ...slotProps?.paper
+    };
+    return (_jsxs(Dialog, { keepMounted: true, ...accessibilityProps, ...DialogProps, slotProps: {
+            ...slotProps,
+            paper: mergeSlotProps(paperProps, {
+                sx: {
+                    pb: isFlushed
+                        ? undefined
+                        : {
+                            xs: 'var(--ds-spacing-bitterCold)',
+                            md: 'var(--ds-spacing-warm)'
+                        },
+                    pt: {
+                        xs: 'var(--ds-spacing-mild)',
                         md: 'var(--ds-spacing-warm)'
                     },
-                pt: {
-                    xs: 'var(--ds-spacing-mild)',
-                    md: 'var(--ds-spacing-warm)'
                 },
-                ...PaperProps?.sx
-            }
+            }),
         }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoTertiary)', ...KickerProps, sx: {
                     px: {
                         xs: 'var(--ds-spacing-bitterCold)',
@@ -65,7 +71,7 @@ export const DsDialog = inProps => {
                         md: 'var(--ds-spacing-warm)'
                     },
                     ...DescriptionProps?.sx
-                }, children: description })), showClose && (_jsx(DsIconButton, { onClick: handleCloseClick, ...CloseIconButtonProps, sx: {
+                }, children: description })), showClose && (_jsx(DsIconButton, { onClick: handleCloseClick('closeButtonClick'), ...CloseIconButtonProps, sx: {
                     position: 'absolute',
                     padding: 'var(--ds-spacing-quickFreeze)',
                     borderRadius: 'var(--ds-radius-mild)',

package/dist/Components/DsDialog/DsDialog.Types.d.ts

@@ -6,7 +6,8 @@ import { DsRemixIconProps } from '../DsRemixIcon';
 import { DsDialogContentProps } from '../DsDialogContent';
 import { DsDialogActionsProps } from '../DsDialogActions';
 import { DsButtonProps } from '../DsButton';
-export interface DsDialogProps extends DialogProps {
+export type DsDialogCloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
+export interface DsDialogProps extends Omit<DialogProps, 'onClose'> {
     title?: string;
     description?: string;
     kicker?: string;
@@ -22,5 +23,6 @@ export interface DsDialogProps extends DialogProps {
     CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;
     ContentProps?: DsDialogContentProps;
     ActionsProps?: DsDialogActionsProps;
+    onClose?: (event: React.SyntheticEvent, reason: DsDialogCloseReason) => void;
 }
 export declare const DsDialogDefaultProps: DsDialogProps;