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

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,6 +8,7 @@ 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) => {
@@ -16,7 +17,7 @@ export const DsDialog = inProps => {
             onClose(event, '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)',

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

@@ -1,4 +1,4 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 import { DsDividerProps } from './DsDivider.Types';
 export declare const DsDividerOverrides: {
     MuiDivider: {
@@ -6,14 +6,14 @@ export declare const DsDividerOverrides: {
         styleOverrides: {
             root: {
                 borderColor: string;
+                variants: {
+                    props: Partial<DsDividerProps>;
+                    style: CSSObject;
+                }[];
             };
             light: {
                 borderColor: string;
             };
         };
-        variants: {
-            props: Partial<DsDividerProps>;
-            style: CSSInterpolation;
-        }[];
     };
 };

package/dist/Components/DsDivider/DsDivider.Overrides.js

@@ -4,41 +4,41 @@ export const DsDividerOverrides = {
         defaultProps: DsDividerDefaultProps,
         styleOverrides: {
             root: {
-                borderColor: 'var(--ds-colour-strokeDefault)'
-            },
-            light: {
-                borderColor: 'var(--ds-colour-strokeDisabled)'
-            }
-        },
-        variants: [
-            {
-                props: { 'ds-size': 'M' },
-                style: {
-                    '&::before': {
-                        borderWidth: '0.5px'
-                    },
-                    '&::after': {
-                        borderWidth: '0.5px'
+                borderColor: 'var(--ds-colour-strokeDefault)',
+                variants: [
+                    {
+                        props: { 'ds-size': 'M' },
+                        style: {
+                            '&::before': {
+                                borderWidth: '0.5px'
+                            },
+                            '&::after': {
+                                borderWidth: '0.5px'
+                            },
+                            '&:not(.MuiDivider-withChildren)': {
+                                borderWidth: '0.5px'
+                            }
+                        }
                     },
-                    '&:not(.MuiDivider-withChildren)': {
-                        borderWidth: '0.5px'
+                    {
+                        props: { 'ds-size': 'L' },
+                        style: {
+                            '&::before': {
+                                borderWidth: '6px'
+                            },
+                            '&::after': {
+                                borderWidth: '6px'
+                            },
+                            '&:not(.MuiDivider-withChildren)': {
+                                borderWidth: '6px'
+                            }
+                        }
                     }
-                }
+                ]
             },
-            {
-                props: { 'ds-size': 'L' },
-                style: {
-                    '&::before': {
-                        borderWidth: '6px'
-                    },
-                    '&::after': {
-                        borderWidth: '6px'
-                    },
-                    '&:not(.MuiDivider-withChildren)': {
-                        borderWidth: '6px'
-                    }
-                }
+            light: {
+                borderColor: 'var(--ds-colour-strokeDisabled)'
             }
-        ]
+        }
     }
 };

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

@@ -1,15 +1,11 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 import { DsInputBaseProps } from './DsInputBase.Types';
 export declare const DsInputBaseOverrides: {
     MuiInputBase: {
         defaultProps: DsInputBaseProps;
-        variants: {
-            props: Partial<DsInputBaseProps>;
-            style: CSSInterpolation;
-        }[];
         styleOverrides: {
-            root: CSSInterpolation;
-            input: CSSInterpolation;
+            root: CSSObject;
+            input: CSSObject;
         };
     };
 };

package/dist/Components/DsInputBase/DsInputBase.Overrides.js

@@ -2,67 +2,6 @@ import { DsInputBaseDefaultProps } from './DsInputBase.Types';
 export const DsInputBaseOverrides = {
     MuiInputBase: {
         defaultProps: DsInputBaseDefaultProps,
-        variants: [
-            {
-                props: { 'ds-variant': 'otp' },
-                style: {
-                    textAlign: 'center',
-                    '> input': {
-                        padding: 'var(--ds-spacing-zero)',
-                        fontWeight: 'var(--ds-typo-headingBoldMedium-fontWeight)',
-                        fontSize: 'var(--ds-typo-headingBoldMedium-fontSize)',
-                        lineHeight: 'var(--ds-typo-headingBoldMedium-lineHeight)',
-                        letterSpacing: 'var(--ds-typo-headingBoldMedium-letterSpacing)'
-                    }
-                }
-            },
-            {
-                props: {
-                    'ds-variant': 'otp',
-                    size: 'medium'
-                },
-                style: {
-                    height: '56px',
-                    width: '56px',
-                    padding: 'calc(var(--ds-spacing-quickFreeze) + var(--ds-spacing-deepFreeze)) var(--ds-spacing-bitterCold)'
-                }
-            },
-            {
-                props: {
-                    'ds-variant': 'otp',
-                    size: 'small'
-                },
-                style: {
-                    height: '40px',
-                    width: '40px',
-                    padding: 'calc(var(--ds-spacing-quickFreeze) + var(--ds-spacing-deepFreeze)) var(--ds-spacing-glacial)'
-                }
-            },
-            {
-                props: { 'ds-variant': 'search' },
-                style: {
-                    borderRadius: 'var(--ds-radius-pleasant)',
-                    paddingLeft: 'var(--ds-spacing-frostbite)',
-                    paddingRight: 'var(--ds-spacing-bitterCold)',
-                    paddingTop: 'var(--ds-spacing-glacial)',
-                    paddingBottom: 'var(--ds-spacing-glacial)',
-                    // height: 'var(--ds-rules-searchbarHeight)',
-                    minWidth: 'var(--ds-rules-searchbarMinWidth)',
-                    fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
-                    fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
-                    lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
-                    '> input': {
-                        padding: 'var(--ds-spacing-zero)',
-                        ml: 'var(--ds-spacing-frostbite)'
-                    },
-                    '> input::placeholder': {
-                        color: 'var(--ds-colour-typoSecondary)',
-                        opacity: 1
-                    }
-                }
-            }
-        ],
         styleOverrides: {
             root: {
                 padding: 'var(--ds-spacing-glacial)',
@@ -118,6 +57,67 @@ export const DsInputBaseOverrides = {
                 '> :first-of-type + *': {
                     marginLeft: 'var(--ds-spacing-quickFreeze)'
                 },
+                variants: [
+                    {
+                        props: { 'ds-variant': 'otp' },
+                        style: {
+                            textAlign: 'center',
+                            '> input': {
+                                padding: 'var(--ds-spacing-zero)',
+                                fontWeight: 'var(--ds-typo-headingBoldMedium-fontWeight)',
+                                fontSize: 'var(--ds-typo-headingBoldMedium-fontSize)',
+                                lineHeight: 'var(--ds-typo-headingBoldMedium-lineHeight)',
+                                letterSpacing: 'var(--ds-typo-headingBoldMedium-letterSpacing)'
+                            }
+                        }
+                    },
+                    {
+                        props: {
+                            'ds-variant': 'otp',
+                            size: 'medium'
+                        },
+                        style: {
+                            height: '56px',
+                            width: '56px',
+                            padding: 'calc(var(--ds-spacing-quickFreeze) + var(--ds-spacing-deepFreeze)) var(--ds-spacing-bitterCold)'
+                        }
+                    },
+                    {
+                        props: {
+                            'ds-variant': 'otp',
+                            size: 'small'
+                        },
+                        style: {
+                            height: '40px',
+                            width: '40px',
+                            padding: 'calc(var(--ds-spacing-quickFreeze) + var(--ds-spacing-deepFreeze)) var(--ds-spacing-glacial)'
+                        }
+                    },
+                    {
+                        props: { 'ds-variant': 'search' },
+                        style: {
+                            borderRadius: 'var(--ds-radius-pleasant)',
+                            paddingLeft: 'var(--ds-spacing-frostbite)',
+                            paddingRight: 'var(--ds-spacing-bitterCold)',
+                            paddingTop: 'var(--ds-spacing-glacial)',
+                            paddingBottom: 'var(--ds-spacing-glacial)',
+                            // height: 'var(--ds-rules-searchbarHeight)',
+                            minWidth: 'var(--ds-rules-searchbarMinWidth)',
+                            fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
+                            fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
+                            lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
+                            '> input': {
+                                padding: 'var(--ds-spacing-zero)',
+                                ml: 'var(--ds-spacing-frostbite)'
+                            },
+                            '> input::placeholder': {
+                                color: 'var(--ds-colour-typoSecondary)',
+                                opacity: 1
+                            }
+                        }
+                    }
+                ],
             },
             input: {
                 padding: 'var(--ds-spacing-quickFreeze) var(--ds-spacing-zero)',

package/dist/Components/DsInputLabel/DsInputLabel.Component.js

@@ -6,5 +6,9 @@ export const DsInputLabel = (props) => {
     if (!label && !labelSupportText) {
         return null;
     }
-    return (_jsxs(InputLabel, { error: error, ...inputLabelProps, children: [_jsx(DsTypography, { component: "span", variant: "bodyRegularMedium", sx: { float: 'left' }, children: label }), _jsx(DsTypography, { component: "span", variant: "bodyRegularSmall", color: "text.secondary", sx: { float: 'right', width: '100%' }, children: labelSupportText })] }));
+    return (_jsxs(InputLabel, { error: error, ...inputLabelProps, children: [_jsx(DsTypography, { component: "span", variant: "bodyRegularMedium", sx: { float: 'left' }, children: label }), _jsx(DsTypography, { component: "span", variant: "bodyRegularSmall", sx: {
+                    color: 'text.secondary',
+                    float: 'right',
+                    width: '100%'
+                }, children: labelSupportText })] }));
 };

package/dist/Components/DsProgressIndicator/DsProgressIndicator.Component.js

@@ -23,7 +23,12 @@ export const DsProgressIndicator = (inProps) => {
     const squareSize = props['ds-variant'] === 'fraction' ? '48px' : '32px';
     const fillPercentage = Math.round((activeStep / steps) * 100);
     const fillColor = isSuccess ? 'success' : isError ? 'error' : 'secondary';
-    return (_jsxs(DsBox, { display: "flex", position: "relative", height: squareSize, width: squareSize, children: [_jsx(DsCircularProgress, { variant: "determinate", value: 100, sx: { color: 'var(--ds-colour-stateDisabledSurface)' }, size: squareSize, thickness: 4 }), _jsx(DsCircularProgress, { variant: "determinate", color: fillColor, value: fillPercentage, size: squareSize, thickness: 4, style: {
+    return (_jsxs(DsBox, { sx: {
+            display: "flex",
+            position: "relative",
+            height: squareSize,
+            width: squareSize
+        }, children: [_jsx(DsCircularProgress, { variant: "determinate", value: 100, sx: { color: 'var(--ds-colour-stateDisabledSurface)' }, size: squareSize, thickness: 4 }), _jsx(DsCircularProgress, { variant: "determinate", color: fillColor, value: fillPercentage, size: squareSize, thickness: 4, style: {
                     position: 'absolute'
                 } }), _jsx(DsTypography, { variant: "subheadingSemiboldDefault", sx: {
                     position: 'absolute',

package/dist/Components/DsProgressTracker/Components/DsProgressStepper.Component.js

@@ -35,7 +35,10 @@ export const DsProgressStepper = inProps => {
                 }
             };
         }
-        return (_jsx(DsStep, { ...stepProps, children: _jsx(DsStepLabel, { ...stepLabelProps, StepIconComponent: renderStepIcon, children: stepName }) }, index));
+        return (_jsx(DsStep, { ...stepProps, children: _jsx(DsStepLabel, { ...stepLabelProps, slots: {
+                    stepIcon: renderStepIcon,
+                    ...stepLabelProps.slots
+                }, children: stepName }) }, index));
     };
     const { steps, ...stepperProps } = props;
     return (_jsx(DsStepper, { ...stepperProps, alternativeLabel: stepperProps.orientation === 'horizontal', children: steps.map(renderStep) }));