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

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/DsFab/DsFab.Overrides.js

@@ -40,6 +40,7 @@ export const DsFabOverrides = {
                 ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
             },
             default: {
+                color: 'var(--ds-colour-typoPrimary)',
                 backgroundColor: 'var(--ds-colour-surfacePrimary)',
                 borderWidth: '1px',
                 borderStyle: 'solid',

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) }));

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 { DsTabsProps } from './DsTabs.Types';
+import type { CSSObject } from "@mui/system";
+import type { 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

@@ -1,52 +1,92 @@
-import { DsTabsDefaultProps } from './DsTabs.Types';
+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)'
-                            },
-                            '&.Mui-disabled': {
-                                backgroundColor: 'none',
-                                borderColor: 'none',
-                                color: 'var(--ds-colour-typoDisabled)'
-                            }
-                        }
-                    }
-                }
-            }
-        ],
         styleOverrides: {
             root: {
-                minHeight: '36px'
+                minHeight: "36px",
+                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)",
+                                    },
+                                    "&.Mui-disabled": {
+                                        backgroundColor: "transparent",
+                                        borderColor: "transparent",
+                                        color: "var(--ds-colour-typoDisabled)",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                    {
+                        props: { "ds-variant": "segmented" },
+                        style: {
+                            "& .MuiTabs-scroller": {
+                                backgroundColor: "var(--ds-colour-neutral1)",
+                                borderRadius: "var(--ds-radius-glacial)",
+                                padding: "var(--ds-spacing-quickFreeze)",
+                                boxSizing: "border-box",
+                                position: "relative",
+                                "& .MuiTabs-indicator": {
+                                    height: "calc(100% - var(--ds-spacing-glacial))",
+                                    top: "var(--ds-spacing-quickFreeze)",
+                                    borderRadius: "var(--ds-radius-gelid)",
+                                    backgroundColor: "var(--ds-colour-surfaceBackground)",
+                                    zIndex: 1,
+                                },
+                                "& .MuiTabs-flexContainer": {
+                                    gap: "var(--ds-spacing-zero)",
+                                    position: "relative",
+                                    zIndex: 2,
+                                },
+                                "& .MuiTab-root": {
+                                    position: "relative",
+                                    borderBottom: "none",
+                                    padding: "var(--ds-spacing-gelid) var(--ds-spacing-frostbite)",
+                                    minHeight: "unset",
+                                    color: "var(--ds-colour-typoPrimary)",
+                                    "&.Mui-selected:not(.Mui-disabled)": {
+                                        boxShadow: "var(--ds-elevation-2)",
+                                        borderRadius: "var(--ds-radius-gelid)",
+                                    },
+                                    "&.Mui-disabled": {
+                                        backgroundColor: "var(--ds-colour-neutral1)",
+                                        color: "var(--ds-colour-typoDisabled)",
+                                        fontWeight: "var(--ds-typo-bodyRegularMedium-fontWeight)",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                ],
             },
             indicator: {
-                height: '2px',
-                borderRadius: '2px 2px 0px 0px'
-            }
-        }
-    }
+                height: "2px",
+                borderRadius: "2px 2px 0px 0px",
+            },
+        },
+    },
 };

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

@@ -1,5 +1,5 @@
-import { TabsProps } from '@mui/material';
+import { TabsProps } from "@mui/material";
 export interface DsTabsProps extends TabsProps {
-    'ds-variant'?: 'container';
+    "ds-variant"?: "container" | "segmented";
 }
 export declare const DsTabsDefaultProps: DsTabsProps;

package/dist/Components/DsTabs/DsTabs.Types.js

@@ -1,4 +1,4 @@
 export const DsTabsDefaultProps = {
-    indicatorColor: 'secondary',
-    textColor: 'secondary'
+    indicatorColor: "secondary",
+    textColor: "secondary",
 };