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

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

@@ -13,14 +13,22 @@ export const DsProgressTrackerHeader = (props) => {
     const isNextStepLastStep = nextStepIndex === steps.length;
     const fillPercentage = Math.round((nextStepIndex / steps.length) * 100);
     const renderStepsLabel = () => {
-        return (_jsx(DsTypography, { component: 'div', textAlign: 'right', color: 'var(--ds-colour-typoTertiary)', variant: 'subheadingSemiboldDefault', children: isNextStepLastStep
+        return (_jsx(DsTypography, { component: 'div', variant: 'subheadingSemiboldDefault', sx: {
+                textAlign: 'right',
+                color: 'var(--ds-colour-typoTertiary)'
+            }, children: isNextStepLastStep
                 ? lastStepLabelText
                 : `${nextStepLabelPrefix} ${nextStep.stepName}` }));
     };
     return (_jsx(_Fragment, { children: dense ? (_jsxs(DsStack, { sx: {
                 backgroundColor: 'var(--ds-colour-surfaceSecondary)',
                 ...wrapperProps?.sx
-            }, ...wrapperProps, children: [_jsxs(DsStack, { direction: 'row', justifyContent: 'space-between', px: 'var(--ds-spacing-bitterCold)', pt: 'var(--ds-spacing-frostbite)', pb: 'calc(var(--ds-spacing-frostbite) - var(--ds-spacing-deepFreeze))', onClick: onClick, children: [_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', children: `STEP ${activeStep + 1} OF ${steps.length}` }), _jsxs(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-frostbite)', children: [haveNextStep && stepLabelVisible && renderStepsLabel(), props['ds-variant'] !== 'header' && (_jsx(DsRemixIcon, { fontSize: 'bitterCold', className: 'ri-arrow-right-s-line' }))] })] }), _jsx(DsLinearProgress, { color: 'secondary', value: fillPercentage, variant: 'determinate', sx: {
+            }, ...wrapperProps, children: [_jsxs(DsStack, { direction: 'row', onClick: onClick, sx: {
+                        justifyContent: 'space-between',
+                        px: 'var(--ds-spacing-bitterCold)',
+                        pt: 'var(--ds-spacing-frostbite)',
+                        pb: 'calc(var(--ds-spacing-frostbite) - var(--ds-spacing-deepFreeze))'
+                    }, children: [_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', children: `STEP ${activeStep + 1} OF ${steps.length}` }), _jsxs(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-frostbite)', children: [haveNextStep && stepLabelVisible && renderStepsLabel(), props['ds-variant'] !== 'header' && (_jsx(DsRemixIcon, { fontSize: 'bitterCold', className: 'ri-arrow-right-s-line' }))] })] }), _jsx(DsLinearProgress, { color: 'secondary', value: fillPercentage, variant: 'determinate', sx: {
                         backgroundColor: 'transparent',
                         height: '2px',
                         '.MuiLinearProgress-bar1Determinate	': {
@@ -33,5 +41,10 @@ export const DsProgressTrackerHeader = (props) => {
                 backgroundColor: 'var(--ds-colour-surfaceBackground)',
                 cursor: props['ds-variant'] === 'default' ? 'pointer' : 'unset',
                 ...wrapperProps?.sx
-            }, spacing: 'var(--ds-spacing-bitterCold)', direction: 'row', onClick: onClick, ...wrapperProps, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { flexGrow: 1, spacing: 'var(--ds-spacing-quickFreeze)', children: [_jsx(DsTypography, { component: 'div', textAlign: 'right', color: 'var(--ds-colour-actionSecondary)', variant: 'headingBoldExtraSmall', children: currentStep.stepName }), haveNextStep && stepLabelVisible && renderStepsLabel()] })] })) }));
+            }, spacing: 'var(--ds-spacing-bitterCold)', direction: 'row', onClick: onClick, ...wrapperProps, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { spacing: 'var(--ds-spacing-quickFreeze)', sx: {
+                        flexGrow: 1
+                    }, children: [_jsx(DsTypography, { component: 'div', variant: 'headingBoldExtraSmall', sx: {
+                                textAlign: 'right',
+                                color: 'var(--ds-colour-actionSecondary)'
+                            }, children: currentStep.stepName }), haveNextStep && stepLabelVisible && renderStepsLabel()] })] })) }));
 };

package/dist/Components/DsSearchbar/DsSearchbar.Component.js

@@ -18,9 +18,12 @@ export class DsSearchbar extends Component {
     };
     render() {
         const { placeholder, startAdornmentProps, ...restProps } = this.props;
-        return (_jsx(DsAutocomplete, { fullWidth: true, autoHighlight: true, PaperComponent: PaperComponent, popupIcon: false, clearIcon: _jsx(DsRemixIcon, { className: "ri-close-line" }), ...restProps, onChange: this.handleChange, renderInput: (params) => {
+        return (_jsx(DsAutocomplete, { fullWidth: true, autoHighlight: true, popupIcon: false, clearIcon: _jsx(DsRemixIcon, { className: "ri-close-line" }), ...restProps, onChange: this.handleChange, renderInput: (params) => {
                 const { InputLabelProps, InputProps, ...restParams } = params;
                 return (_jsx(DsInputBase, { ...restParams, ...InputProps, "ds-variant": "search", placeholder: placeholder, startAdornment: this.renderStartAdornment() }));
+            }, slots: {
+                paper: PaperComponent,
+                ...restProps.slots
             } }));
     }
 }

package/dist/Components/DsSelect/DsSelect.Component.js

@@ -33,7 +33,9 @@ export const DsSelect = (props) => {
     };
     return (_jsxs(DsFormControl, { fullWidth: fullWidth, color: customColor, error: error, sx: sx, disabled: disabled, required: required, ...FormControlProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, error: error, success: success, htmlFor: id || name, disabled: disabled, ...InputLabelProps }), _jsxs(Select, { ref: selectRef, id: id, name: name, IconComponent: IconComponent, displayEmpty: true, input: _jsx(DsInputBase, {}), renderValue: value => {
                     if (!value || (value instanceof Array && !value.length)) {
-                        return (_jsx(DsTypography, { variant: "bodyRegularMedium", color: "text.disabled", children: placeholder }));
+                        return (_jsx(DsTypography, { variant: "bodyRegularMedium", sx: {
+                                color: "text.disabled"
+                            }, children: placeholder }));
                     }
                     if (value instanceof Array) {
                         return (_jsx(SelectedValueArray, { selectedValue: value, valueMap: valueMap }));

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

@@ -25,6 +25,7 @@ export interface DsSelectProps extends Omit<SelectProps, 'ref'> {
     success?: boolean;
     options: OptionProp[];
     value?: string | string[];
+    placeholder?: string;
 }
 export declare const DsSelectDefaultProps: DsSelectProps;
 export {};

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

@@ -2,19 +2,6 @@ import { DsSliderProps } from './DsSlider.Types';
 export declare const DsSliderOverrides: {
     MuiSlider: {
         defaultProps: DsSliderProps;
-        variants: {
-            props: Partial<DsSliderProps>;
-            style: {
-                '&:not(.Mui-disabled, :has(.MuiSlider-thumb:hover), :has(.Mui-focusVisible))': {
-                    '> .MuiSlider-thumb, > .MuiSlider-mark, > .MuiSlider-track': {
-                        backgroundColor: string;
-                    };
-                    '> .MuiSlider-markActive': {
-                        backgroundColor: string;
-                    };
-                };
-            };
-        }[];
         styleOverrides: {
             root: {
                 '&.Mui-disabled': {
@@ -22,6 +9,19 @@ export declare const DsSliderOverrides: {
                         color: string;
                     };
                 };
+                variants: {
+                    props: Partial<DsSliderProps>;
+                    style: {
+                        '&:not(.Mui-disabled, :has(.MuiSlider-thumb:hover), :has(.Mui-focusVisible))': {
+                            '> .MuiSlider-thumb, > .MuiSlider-mark, > .MuiSlider-track': {
+                                backgroundColor: string;
+                            };
+                            '> .MuiSlider-markActive': {
+                                backgroundColor: string;
+                            };
+                        };
+                    };
+                }[];
             };
             track: {
                 border: string;

package/dist/Components/DsSlider/DsSlider.Overrides.js

@@ -2,28 +2,28 @@ import { DsSliderDefaultProps } from './DsSlider.Types';
 export const DsSliderOverrides = {
     MuiSlider: {
         defaultProps: DsSliderDefaultProps,
-        variants: [
-            {
-                props: { 'ds-mode': 'true' },
-                style: {
-                    '&:not(.Mui-disabled, :has(.MuiSlider-thumb:hover), :has(.Mui-focusVisible))': {
-                        '> .MuiSlider-thumb, > .MuiSlider-mark, > .MuiSlider-track': {
-                            backgroundColor: 'var(--ds-colour-iconDefault)'
-                        },
-                        '> .MuiSlider-markActive': {
-                            backgroundColor: 'var(--ds-colour-iconOnSurface)'
-                        }
-                    }
-                }
-            }
-        ],
         styleOverrides: {
             root: {
                 '&.Mui-disabled': {
                     '> .MuiSlider-markLabel': {
                         color: 'var(--ds-colour-typoDisabled)'
                     }
-                }
+                },
+                variants: [
+                    {
+                        props: { 'ds-mode': 'true' },
+                        style: {
+                            '&:not(.Mui-disabled, :has(.MuiSlider-thumb:hover), :has(.Mui-focusVisible))': {
+                                '> .MuiSlider-thumb, > .MuiSlider-mark, > .MuiSlider-track': {
+                                    backgroundColor: 'var(--ds-colour-iconDefault)'
+                                },
+                                '> .MuiSlider-markActive': {
+                                    backgroundColor: 'var(--ds-colour-iconOnSurface)'
+                                }
+                            }
+                        }
+                    }
+                ]
             },
             track: {
                 border: 'none'

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

@@ -1,14 +1,10 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 import { DsTabsProps } from './DsTabs.Types';
 export declare const DsTabsOverrides: {
     MuiTabs: {
         defaultProps: DsTabsProps;
-        variants: {
-            props: Partial<DsTabsProps>;
-            style: CSSInterpolation;
-        }[];
         styleOverrides: {
-            root: CSSInterpolation;
+            root: CSSObject;
             indicator: {
                 height: string;
                 borderRadius: string;

package/dist/Components/DsTabs/DsTabs.Overrides.js

@@ -2,46 +2,46 @@ import { DsTabsDefaultProps } from './DsTabs.Types';
 export const DsTabsOverrides = {
     MuiTabs: {
         defaultProps: DsTabsDefaultProps,
-        variants: [
-            {
-                props: { 'ds-variant': 'container' },
-                style: {
-                    '> .MuiTabs-scroller > .MuiTabs-indicator': {
-                        height: '0px'
-                    },
-                    '> .MuiTabs-scroller > .MuiTabs-flexContainer': {
-                        gap: 'var(--ds-spacing-glacial)',
-                        '> .MuiTab-root': {
-                            fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
-                            fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
-                            lineHeight: 'var(--ds-typo-supportRegularMetadata-lineHeight)',
-                            letterSpacing: 'var(--ds-typo-supportRegularMetadata-letterSpacing)',
-                            borderRadius: 'var(--ds-radius-quickFreeze)',
-                            paddingTop: 'var(--ds-spacing-frostbite)',
-                            paddingBottom: 'var(--ds-spacing-frostbite)',
-                            borderWidth: '1px',
-                            borderStyle: 'solid',
-                            backgroundColor: 'var(--ds-colour-surfaceSecondary)',
-                            borderColor: 'var(--ds-colour-strokeDefault)',
-                            color: 'var(--ds-colour-typoSecondary)',
-                            '&.Mui-selected': {
-                                backgroundColor: 'var(--ds-colour-stateSelectedSecondaryHover)',
-                                borderColor: 'var(--ds-colour-strokeSecondarySelected)',
-                                color: 'var(--ds-colour-typoActionTertiary)'
+        styleOverrides: {
+            root: {
+                minHeight: '36px',
+                variants: [
+                    {
+                        props: { 'ds-variant': 'container' },
+                        style: {
+                            '> .MuiTabs-scroller > .MuiTabs-indicator': {
+                                height: '0px'
                             },
-                            '&.Mui-disabled': {
-                                backgroundColor: 'none',
-                                borderColor: 'none',
-                                color: 'var(--ds-colour-typoDisabled)'
+                            '> .MuiTabs-scroller > .MuiTabs-flexContainer': {
+                                gap: 'var(--ds-spacing-glacial)',
+                                '> .MuiTab-root': {
+                                    fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
+                                    fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
+                                    lineHeight: 'var(--ds-typo-supportRegularMetadata-lineHeight)',
+                                    letterSpacing: 'var(--ds-typo-supportRegularMetadata-letterSpacing)',
+                                    borderRadius: 'var(--ds-radius-quickFreeze)',
+                                    paddingTop: 'var(--ds-spacing-frostbite)',
+                                    paddingBottom: 'var(--ds-spacing-frostbite)',
+                                    borderWidth: '1px',
+                                    borderStyle: 'solid',
+                                    backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+                                    borderColor: 'var(--ds-colour-strokeDefault)',
+                                    color: 'var(--ds-colour-typoSecondary)',
+                                    '&.Mui-selected': {
+                                        backgroundColor: 'var(--ds-colour-stateSelectedSecondaryHover)',
+                                        borderColor: 'var(--ds-colour-strokeSecondarySelected)',
+                                        color: 'var(--ds-colour-typoActionTertiary)'
+                                    },
+                                    '&.Mui-disabled': {
+                                        backgroundColor: 'none',
+                                        borderColor: 'none',
+                                        color: 'var(--ds-colour-typoDisabled)'
+                                    }
+                                }
                             }
                         }
                     }
-                }
-            }
-        ],
-        styleOverrides: {
-            root: {
-                minHeight: '36px'
+                ]
             },
             indicator: {
                 height: '2px',

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

@@ -1,10 +1,14 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 import { DsToggleButtonGroupProps } from './DsToggleButtonGroup.Types';
 export declare const DsToggleButtonGroupOverrides: {
     MuiToggleButtonGroup: {
-        variants: {
-            props: Partial<DsToggleButtonGroupProps>;
-            style: CSSInterpolation;
-        }[];
+        styleOverrides: {
+            root: {
+                variants: {
+                    props: Partial<DsToggleButtonGroupProps>;
+                    style: CSSObject;
+                }[];
+            };
+        };
     };
 };

package/dist/Components/DsToggleButtonGroup/DsToggleButtonGroup.Overrides.js

@@ -1,53 +1,57 @@
 export const DsToggleButtonGroupOverrides = {
     MuiToggleButtonGroup: {
-        variants: [
-            {
-                props: { 'ds-variant': 'switch' },
-                style: {
-                    border: '1px solid var(--ds-colour-strokeDefault)',
-                    borderRadius: 'var(--ds-radius-glacial)',
-                    padding: 'var(--ds-spacing-deepFreeze)',
-                    backgroundColor: 'var(--ds-colour-surfaceBackground)',
-                    '> .MuiToggleButtonGroup-grouped': {
-                        border: 'none',
-                        width: '32px',
-                        height: '24px',
-                        '&:not(:first-of-type)': {
-                            borderRadius: 'var(--ds-radius-quickFreeze)',
-                            marginLeft: 'var(--ds-spacing-zero)',
-                            border: 'none'
-                        },
-                        '&:first-of-type': {
-                            borderRadius: 'var(--ds-radius-quickFreeze)'
-                        },
-                        '&:hover': {
-                            backgroundColor: 'var(--ds-colour-surfaceBackground)'
-                        },
-                        '&:not(.Mui-disabled)': {
-                            color: 'var(--ds-colour-actionSecondary)',
-                            '&.Mui-selected': {
-                                backgroundColor: 'var(--ds-colour-actionSecondary)',
-                                color: 'var(--ds-colour-typoOnSurface)',
+        styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { 'ds-variant': 'switch' },
+                        style: {
+                            border: '1px solid var(--ds-colour-strokeDefault)',
+                            borderRadius: 'var(--ds-radius-glacial)',
+                            padding: 'var(--ds-spacing-deepFreeze)',
+                            backgroundColor: 'var(--ds-colour-surfaceBackground)',
+                            '> .MuiToggleButtonGroup-grouped': {
+                                border: 'none',
+                                width: '32px',
+                                height: '24px',
+                                '&:not(:first-of-type)': {
+                                    borderRadius: 'var(--ds-radius-quickFreeze)',
+                                    marginLeft: 'var(--ds-spacing-zero)',
+                                    border: 'none'
+                                },
+                                '&:first-of-type': {
+                                    borderRadius: 'var(--ds-radius-quickFreeze)'
+                                },
                                 '&:hover': {
-                                    backgroundColor: 'var(--ds-colour-actionSecondary)'
-                                }
-                            }
-                        },
-                        '&.Mui-disabled': {
-                            color: 'var(--ds-colour-typoDisabled)',
-                            border: 'none',
-                            cursor: 'not-allowed',
-                            pointerEvents: 'all',
-                            '&.Mui-selected': {
-                                backgroundColor: 'var(--ds-colour-stateDisabledSurface)',
-                                '&:hover': {
-                                    backgroundColor: 'var(--ds-colour-stateDisabledSurface)'
+                                    backgroundColor: 'var(--ds-colour-surfaceBackground)'
+                                },
+                                '&:not(.Mui-disabled)': {
+                                    color: 'var(--ds-colour-actionSecondary)',
+                                    '&.Mui-selected': {
+                                        backgroundColor: 'var(--ds-colour-actionSecondary)',
+                                        color: 'var(--ds-colour-typoOnSurface)',
+                                        '&:hover': {
+                                            backgroundColor: 'var(--ds-colour-actionSecondary)'
+                                        }
+                                    }
+                                },
+                                '&.Mui-disabled': {
+                                    color: 'var(--ds-colour-typoDisabled)',
+                                    border: 'none',
+                                    cursor: 'not-allowed',
+                                    pointerEvents: 'all',
+                                    '&.Mui-selected': {
+                                        backgroundColor: 'var(--ds-colour-stateDisabledSurface)',
+                                        '&:hover': {
+                                            backgroundColor: 'var(--ds-colour-stateDisabledSurface)'
+                                        }
+                                    }
                                 }
                             }
                         }
                     }
-                }
+                ]
             }
-        ]
+        }
     }
 };