@am92/react-design-system 2.7.8 → 2.8.1

package/dist/Components/DsCarousel/DsCarousel.Component/DsCarouselPagination.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DsBox } from '../../DsBox';
-export default class DsCarouselPagination extends React.PureComponent {
-    paginationRef = React.createRef();
-    componentDidMount() {
-        this.handleFirstTransition();
-    }
-    handleFirstTransition = () => {
-        const firstActiveBullet = this.paginationRef.current?.getElementsByClassName('swiper-pagination-bullet-active')[0];
+const DsCarouselPagination = (props) => {
+    const paginationRef = React.useRef();
+    React.useEffect(() => {
+        handleFirstTransition();
+    }, []);
+    const handleFirstTransition = () => {
+        const firstActiveBullet = paginationRef.current?.getElementsByClassName('swiper-pagination-bullet-active')[0];
         if (firstActiveBullet) {
             firstActiveBullet.classList.remove('swiper-pagination-bullet-active');
             setTimeout(() => {
@@ -15,117 +15,116 @@ export default class DsCarouselPagination extends React.PureComponent {
             }, 0);
         }
     };
-    render() {
-        const { uid, isEnabled, isAutoplayEnabled, PaginationSettings, AutoplaySettings, PaginationProps } = this.props;
-        if (!isEnabled) {
-            return false;
-        }
-        let className = `swiper-pagination-${uid}`;
-        let transitionSpeed = 0;
-        if (isAutoplayEnabled) {
-            className = `swiper-pagination-${uid} rds-pilled`;
-            transitionSpeed =
-                (typeof AutoplaySettings !== 'boolean' && AutoplaySettings?.delay) ||
-                    3000;
-        }
-        return (_jsx(DsBox, { ref: this.paginationRef, className: className, ...PaginationProps, sx: {
-                position: 'absolute',
-                textAlign: 'center',
-                transition: '300ms opacity',
-                transform: 'translate3d(0, 0, 0)',
-                zIndex: 1,
-                '&.swiper-pagination-hidden': {
-                    opacity: 0
-                },
+    const { uid, isEnabled, isAutoplayEnabled, PaginationSettings, AutoplaySettings, PaginationProps } = props;
+    if (!isEnabled) {
+        return false;
+    }
+    let className = `swiper-pagination-${uid}`;
+    let transitionSpeed = 0;
+    if (isAutoplayEnabled) {
+        className = `swiper-pagination-${uid} rds-pilled`;
+        transitionSpeed =
+            (typeof AutoplaySettings !== 'boolean' && AutoplaySettings?.delay) ||
+                3000;
+    }
+    return (_jsx(DsBox, { ref: paginationRef, className: className, ...PaginationProps, sx: {
+            position: 'absolute',
+            textAlign: 'center',
+            transition: '300ms opacity',
+            transform: 'translate3d(0, 0, 0)',
+            zIndex: 1,
+            '&.swiper-pagination-hidden': {
+                opacity: 0
+            },
+            '&.swiper-pagination-disabled': {
                 '&.swiper-pagination-disabled': {
-                    '&.swiper-pagination-disabled': {
+                    display: 'none !important'
+                }
+            },
+            '&.swiper-pagination-bullets': {
+                '> .swiper-pagination-bullet': {
+                    width: '6px',
+                    height: '6px',
+                    display: 'inline-block',
+                    borderRadius: 'var(--ds-radius-bitterCold)',
+                    opacity: 1,
+                    mx: 'var(--ds-spacing-deepFreeze)',
+                    background: 'linear-gradient(to right, var(--ds-colour-actionSecondary), var(--ds-colour-actionSecondary)) no-repeat, linear-gradient(to right, var(--ds-colour-stateUnselectedDefault), var(--ds-colour-stateUnselectedDefault)) no-repeat',
+                    backgroundSize: '0% 100%, 100% 100%',
+                    backgroundPosition: '0 0, 0 0',
+                    '&:only-child': {
                         display: 'none !important'
+                    },
+                    '&.swiper-pagination-bullet-active': {
+                        width: '16px',
+                        background: 'var(--ds-colour-actionSecondary)',
+                        opacity: 1
                     }
-                },
-                '&.swiper-pagination-bullets': {
-                    '> .swiper-pagination-bullet': {
-                        width: '6px',
-                        height: '6px',
-                        display: 'inline-block',
-                        borderRadius: 'var(--ds-radius-bitterCold)',
-                        opacity: 1,
-                        mx: 'var(--ds-spacing-deepFreeze)',
+                }
+            },
+            '&.swiper-pagination-bullets.rds-pilled': {
+                '> .swiper-pagination-bullet': {
+                    '&.swiper-pagination-bullet-active': {
+                        width: '20px',
                         background: 'linear-gradient(to right, var(--ds-colour-actionSecondary), var(--ds-colour-actionSecondary)) no-repeat, linear-gradient(to right, var(--ds-colour-stateUnselectedDefault), var(--ds-colour-stateUnselectedDefault)) no-repeat',
-                        backgroundSize: '0% 100%, 100% 100%',
-                        backgroundPosition: '0 0, 0 0',
-                        '&:only-child': {
-                            display: 'none !important'
-                        },
-                        '&.swiper-pagination-bullet-active': {
-                            width: '16px',
-                            background: 'var(--ds-colour-actionSecondary)',
-                            opacity: 1
-                        }
+                        borderRadius: 'var(--ds-radius-bitterCold)',
+                        backgroundSize: '100% 100%, 100% 100%',
+                        backgroundPosition: '0 0 , 100% 0',
+                        transition: `width 0.5s, background-size ${transitionSpeed / 1000}s`
                     }
-                },
-                '&.swiper-pagination-bullets.rds-pilled': {
-                    '> .swiper-pagination-bullet': {
-                        '&.swiper-pagination-bullet-active': {
-                            width: '20px',
-                            background: 'linear-gradient(to right, var(--ds-colour-actionSecondary), var(--ds-colour-actionSecondary)) no-repeat, linear-gradient(to right, var(--ds-colour-stateUnselectedDefault), var(--ds-colour-stateUnselectedDefault)) no-repeat',
-                            borderRadius: 'var(--ds-radius-bitterCold)',
-                            backgroundSize: '100% 100%, 100% 100%',
-                            backgroundPosition: '0 0 , 100% 0',
-                            transition: `width 0.5s, background-size ${transitionSpeed / 1000}s`
-                        }
+                }
+            },
+            '&.swiper-pagination-clickable': {
+                '> .swiper-pagination-bullet': {
+                    cursor: 'pointer'
+                }
+            },
+            '&.swiper-pagination-bullets-dynamic': {
+                overflow: 'hidden',
+                fontSize: 0,
+                '> .swiper-pagination-bullet': {
+                    transform: 'scale(0.33)',
+                    position: 'relative',
+                    '&.swiper-pagination-bullet-active': {
+                        transform: 'scale(1)'
+                    },
+                    '&.swiper-pagination-bullet-active-main': {
+                        transform: 'scale(1)'
+                    },
+                    '&.swiper-pagination-bullet-active-prev': {
+                        transform: 'scale(0.66)'
+                    },
+                    '&.swiper-pagination-bullet-active-prev-prev': {
+                        transform: 'scale(0.33)'
+                    },
+                    '&.swiper-pagination-bullet-active-next': {
+                        transform: 'scale(0.66)'
+                    },
+                    '&.swiper-pagination-bullet-active-next-next': {
+                        transform: 'scale(0.33)'
                     }
-                },
-                '&.swiper-pagination-clickable': {
-                    '> .swiper-pagination-bullet': {
-                        cursor: 'pointer'
-                    }
-                },
+                }
+            },
+            '&.swiper-pagination-horizontal.swiper-pagination-bullets': {
+                bottom: PaginationSettings?.mode === 'internal'
+                    ? 'var(--ds-spacing-frostbite)'
+                    : 'var(--ds-spacing-zero)',
+                top: 'auto',
+                left: 0,
+                width: '100%',
                 '&.swiper-pagination-bullets-dynamic': {
-                    overflow: 'hidden',
-                    fontSize: 0,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    whiteSpace: 'nowrap',
                     '> .swiper-pagination-bullet': {
-                        transform: 'scale(0.33)',
-                        position: 'relative',
+                        transition: `200ms transform, 200ms left`,
                         '&.swiper-pagination-bullet-active': {
-                            transform: 'scale(1)'
-                        },
-                        '&.swiper-pagination-bullet-active-main': {
-                            transform: 'scale(1)'
-                        },
-                        '&.swiper-pagination-bullet-active-prev': {
-                            transform: 'scale(0.66)'
-                        },
-                        '&.swiper-pagination-bullet-active-prev-prev': {
-                            transform: 'scale(0.33)'
-                        },
-                        '&.swiper-pagination-bullet-active-next': {
-                            transform: 'scale(0.66)'
-                        },
-                        '&.swiper-pagination-bullet-active-next-next': {
-                            transform: 'scale(0.33)'
-                        }
-                    }
-                },
-                '&.swiper-pagination-horizontal.swiper-pagination-bullets': {
-                    bottom: PaginationSettings?.mode === 'internal'
-                        ? 'var(--ds-spacing-frostbite)'
-                        : 'var(--ds-spacing-zero)',
-                    top: 'auto',
-                    left: 0,
-                    width: '100%',
-                    '&.swiper-pagination-bullets-dynamic': {
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        whiteSpace: 'nowrap',
-                        '> .swiper-pagination-bullet': {
-                            transition: `200ms transform, 200ms left`,
-                            '&.swiper-pagination-bullet-active': {
-                                transition: `width 0.5s, background-size ${transitionSpeed / 1000}s, 200ms transform, 200ms left`
-                            }
+                            transition: `width 0.5s, background-size ${transitionSpeed / 1000}s, 200ms transform, 200ms left`
                         }
                     }
-                },
-                ...PaginationProps?.sx
-            } }));
-    }
-}
+                }
+            },
+            ...PaginationProps?.sx
+        } }));
+};
+export default DsCarouselPagination;

package/dist/Components/DsCarousel/DsCarousel.Component/index.d.ts

@@ -1,19 +1,3 @@
-import React from 'react';
-import { SwiperContainer } from 'swiper/element';
-import { SwiperProps } from 'swiper/swiper-react';
-import { DsCaroselPaginationSettings, DsCarouselProps } from '../DsCarousel.Types';
-export declare class DsCarousel extends React.PureComponent<DsCarouselProps> {
-    SwiperContainer: SwiperContainer | null;
-    uid: string;
-    componentDidMount(): void;
-    _isNavigationEnabled: () => boolean;
-    _isPaginationEnabled: () => boolean;
-    _isAutoplayEnabled: () => boolean;
-    _getNavigationSettings: () => DsCarouselProps["navigation"] | undefined;
-    _getPaginationSettings: () => DsCaroselPaginationSettings | undefined;
-    _getAutoPlaySettings: () => DsCarouselProps["autoplay"] | undefined;
-    _sanitizeModuleProps: (modules: SwiperProps["modules"]) => SwiperProps["modules"];
-    initialize: () => void;
-    setRef: (swiperRef: unknown) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsCarouselProps } from '../DsCarousel.Types';
+export declare const DsCarousel: FC<DsCarouselProps>;

package/dist/Components/DsCarousel/DsCarousel.Component/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Autoplay, Navigation, Pagination } from 'swiper/modules';
 import { register } from 'swiper/element';
 import { CAROUSEL_DEFAULT_SETTINGS, SWIPER_AUTOPLAY_SETTINGS, SWIPER_NAVIGATION_SETTINGS, SWIPER_PAGINATION_SETTINGS } from '../DsCarousel.Types';
@@ -13,58 +13,58 @@ const generateUid = () => {
     const random = Math.trunc((Math.random() + 1) * 1000000);
     return `${random.toString(36)}`;
 };
-export class DsCarousel extends React.PureComponent {
-    SwiperContainer = null;
-    uid = generateUid();
-    componentDidMount() {
-        this.initialize();
-    }
-    _isNavigationEnabled = () => {
-        const { navigation } = this.props;
+export const DsCarousel = (props) => {
+    let SwiperContainer = null;
+    const uid = generateUid();
+    useEffect(() => {
+        initialize();
+    }, []);
+    const _isNavigationEnabled = () => {
+        const { navigation } = props;
         return !(navigation === false ||
             (navigation &&
                 typeof navigation !== 'boolean' &&
                 navigation.enabled === false));
     };
-    _isPaginationEnabled = () => {
-        const { pagination } = this.props;
+    const _isPaginationEnabled = () => {
+        const { pagination } = props;
         return !(pagination === false ||
             (pagination &&
                 typeof pagination !== 'boolean' &&
                 pagination.enabled === false));
     };
-    _isAutoplayEnabled = () => {
-        const { autoplay } = this.props;
+    const _isAutoplayEnabled = () => {
+        const { autoplay } = props;
         return !(autoplay === false);
     };
-    _getNavigationSettings = () => {
-        const { navigation } = this.props;
-        const isEnabled = this._isNavigationEnabled();
+    const _getNavigationSettings = () => {
+        const { navigation } = props;
+        const isEnabled = _isNavigationEnabled();
         const defaultSettings = {
             ...SWIPER_NAVIGATION_SETTINGS,
-            nextEl: `${SWIPER_NAVIGATION_SETTINGS.nextEl}-${this.uid}`,
-            prevEl: `${SWIPER_NAVIGATION_SETTINGS.prevEl}-${this.uid}`
+            nextEl: `${SWIPER_NAVIGATION_SETTINGS.nextEl}-${uid}`,
+            prevEl: `${SWIPER_NAVIGATION_SETTINGS.prevEl}-${uid}`
         };
         if (typeof navigation !== 'boolean') {
             return isEnabled ? { ...defaultSettings, ...navigation } : undefined;
         }
         return (isEnabled && { ...defaultSettings }) || undefined;
     };
-    _getPaginationSettings = () => {
-        const { pagination } = this.props;
-        const isEnabled = this._isPaginationEnabled();
+    const _getPaginationSettings = () => {
+        const { pagination } = props;
+        const isEnabled = _isPaginationEnabled();
         const defaultSettings = {
             ...SWIPER_PAGINATION_SETTINGS,
-            el: `${SWIPER_PAGINATION_SETTINGS.el}-${this.uid}`
+            el: `${SWIPER_PAGINATION_SETTINGS.el}-${uid}`
         };
         if (typeof pagination !== 'boolean') {
             return isEnabled ? { ...defaultSettings, ...pagination } : undefined;
         }
         return (isEnabled && { ...defaultSettings }) || undefined;
     };
-    _getAutoPlaySettings = () => {
-        const { autoplay } = this.props;
-        const isEnabled = this._isAutoplayEnabled();
+    const _getAutoPlaySettings = () => {
+        const { autoplay } = props;
+        const isEnabled = _isAutoplayEnabled();
         if (typeof autoplay !== 'boolean') {
             return isEnabled
                 ? { ...SWIPER_AUTOPLAY_SETTINGS, ...autoplay }
@@ -72,25 +72,25 @@ export class DsCarousel extends React.PureComponent {
         }
         return (isEnabled && { ...SWIPER_AUTOPLAY_SETTINGS }) || undefined;
     };
-    _sanitizeModuleProps = (modules) => {
+    const _sanitizeModuleProps = (modules) => {
         let sanitizedModule = modules?.filter(module => !['Pagination', 'Navigation'].includes(module.name)) || [];
-        const isNavigationEnabled = this._isNavigationEnabled();
+        const isNavigationEnabled = _isNavigationEnabled();
         if (isNavigationEnabled) {
             sanitizedModule = [...sanitizedModule, Navigation];
         }
-        const isPaginationEnabled = this._isPaginationEnabled();
+        const isPaginationEnabled = _isPaginationEnabled();
         if (isPaginationEnabled) {
             sanitizedModule = [...sanitizedModule, Pagination];
         }
-        const isAutoplayEnabled = this._isAutoplayEnabled();
+        const isAutoplayEnabled = _isAutoplayEnabled();
         if (isAutoplayEnabled) {
             sanitizedModule = [...sanitizedModule, Autoplay];
         }
         return sanitizedModule;
     };
-    initialize = () => {
-        const { children, PaginationProps, NavigationProps, PaginationWrapperProps, SwiperConatinerStyles, SwiperConatinerWrapperProps, modules, ...swiperProps } = this.props;
-        const sanitizedModule = this._sanitizeModuleProps(modules);
+    const initialize = () => {
+        const { children, PaginationProps, NavigationProps, PaginationWrapperProps, SwiperConatinerStyles, SwiperConatinerWrapperProps, modules, ...swiperProps } = props;
+        const sanitizedModule = _sanitizeModuleProps(modules);
         // swiper parameters
         const swiperParams = {
             ...CAROUSEL_DEFAULT_SETTINGS,
@@ -98,35 +98,33 @@ export class DsCarousel extends React.PureComponent {
             // Vertical mode not supported
             direction: 'horizontal',
             modules: sanitizedModule,
-            navigation: this._getNavigationSettings() || false,
-            pagination: this._getPaginationSettings() || false,
-            autoplay: this._getAutoPlaySettings() || false
+            navigation: _getNavigationSettings() || false,
+            pagination: _getPaginationSettings() || false,
+            autoplay: _getAutoPlaySettings() || false
         };
-        // swiperParams = this.handleNavigationModule(swiperParams)
+        // swiperParams = handleNavigationModule(swiperParams)
         // now we need to assign all parameters to Swiper element
-        Object.assign(this.SwiperContainer || {}, swiperParams);
+        Object.assign(SwiperContainer || {}, swiperParams);
         // and now initialize it
-        this.SwiperContainer?.initialize();
+        SwiperContainer?.initialize();
         // set the default theme
         document.documentElement.style.setProperty('--swiper-theme-color', 'var(--ds-colour-actionSecondary)');
     };
-    setRef = (swiperRef) => {
-        this.SwiperContainer = swiperRef;
+    const setRef = (swiperRef) => {
+        SwiperContainer = swiperRef;
     };
-    render() {
-        const { PaginationWrapperProps, SwiperConatinerWrapperProps, SwiperConatinerStyles, children, NavigationProps, PaginationProps } = this.props;
-        const paginationSettings = this._getPaginationSettings();
-        return (_jsxs(DsBox, { ...PaginationWrapperProps, sx: {
-                position: 'relative',
-                pb: paginationSettings?.mode === 'external' ? '44px' : undefined,
-                ...PaginationWrapperProps?.sx
-            }, children: [_jsxs(DsBox, { ...SwiperConatinerWrapperProps, sx: {
-                        position: 'relative',
-                        ...SwiperConatinerWrapperProps?.sx
-                    }, children: [_jsx("swiper-container", { ref: this.setRef, init: false, style: {
-                                ...SwiperConatinerStyles
-                            }, children: React.Children.map(children, (child, index) => {
-                                return (_jsx("swiper-slide", { children: child }, `${name}-${index}`));
-                            }) }), _jsx(DsCarouselNavigation, { uid: this.uid, isEnabled: this._isNavigationEnabled(), NavigationProps: NavigationProps })] }), _jsx(DsCarouselPagination, { uid: this.uid, isEnabled: this._isPaginationEnabled(), isAutoplayEnabled: this._isAutoplayEnabled(), AutoplaySettings: this._getAutoPlaySettings(), PaginationSettings: paginationSettings, PaginationProps: PaginationProps })] }));
-    }
-}
+    const { PaginationWrapperProps, SwiperConatinerWrapperProps, SwiperConatinerStyles, children, NavigationProps, PaginationProps } = props;
+    const paginationSettings = _getPaginationSettings();
+    return (_jsxs(DsBox, { ...PaginationWrapperProps, sx: {
+            position: 'relative',
+            pb: paginationSettings?.mode === 'external' ? '44px' : undefined,
+            ...PaginationWrapperProps?.sx
+        }, children: [_jsxs(DsBox, { ...SwiperConatinerWrapperProps, sx: {
+                    position: 'relative',
+                    ...SwiperConatinerWrapperProps?.sx
+                }, children: [_jsx("swiper-container", { ref: setRef, init: false, style: {
+                            ...SwiperConatinerStyles
+                        }, children: React.Children.map(children, (child, index) => {
+                            return (_jsx("swiper-slide", { children: child }, `${name}-${index}`));
+                        }) }), _jsx(DsCarouselNavigation, { uid: uid, isEnabled: _isNavigationEnabled(), NavigationProps: NavigationProps })] }), _jsx(DsCarouselPagination, { uid: uid, isEnabled: _isPaginationEnabled(), isAutoplayEnabled: _isAutoplayEnabled(), AutoplaySettings: _getAutoPlaySettings(), PaginationSettings: paginationSettings, PaginationProps: PaginationProps })] }));
+};

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

@@ -1,6 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsChipProps } from './DsChip.Types';
-export declare class DsChip extends PureComponent<DsChipProps> {
-    static defaultProps: DsChipProps;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsChip: FC<DsChipProps>;

package/dist/Components/DsChip/DsChip.Component.js

@@ -1,10 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import Chip from '@mui/material/Chip';
-import { DsChipDefaultProps } from './DsChip.Types';
-export class DsChip extends PureComponent {
-    static defaultProps = DsChipDefaultProps;
-    render() {
-        return _jsx(Chip, { ...this.props, "ds-variant": "chip" });
-    }
-}
+export const DsChip = props => {
+    return _jsx(Chip, { ...props, variant: "chip" });
+};

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

@@ -7,13 +7,6 @@ export declare const DsChipOverrides: {
             props: Partial<DsChipProps>;
             style: CSSInterpolation;
         }[];
-        styleOverrides: {
-            root: CSSInterpolation;
-            filled: CSSInterpolation;
-            filledSecondary: CSSInterpolation;
-            label: CSSInterpolation;
-            icon: CSSInterpolation;
-            deleteIcon: CSSInterpolation;
-        };
+        styleOverrides: {};
     };
 };

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

@@ -1,11 +1,10 @@
-import STATE_STYLES from '../../Theme/STATE_STYLES';
 import { DsChipDefaultProps } from './DsChip.Types';
 export const DsChipOverrides = {
     MuiChip: {
         defaultProps: DsChipDefaultProps,
         variants: [
             {
-                props: { 'ds-variant': 'chip' },
+                props: { variant: 'chip' },
                 style: {
                     border: 'none',
                     borderRadius: 'var(--ds-radius-quickFreeze)',
@@ -25,7 +24,7 @@ export const DsChipOverrides = {
                 }
             },
             {
-                props: { 'ds-variant': 'chip', type: 'status' },
+                props: { variant: 'chip', type: 'status' },
                 style: {
                     fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
                     fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
@@ -40,7 +39,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'success'
                 },
@@ -50,7 +49,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'warning'
                 },
@@ -60,7 +59,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'error'
                 },
@@ -70,7 +69,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'status',
                     color: 'info'
                 },
@@ -80,7 +79,7 @@ export const DsChipOverrides = {
                 }
             },
             {
-                props: { 'ds-variant': 'chip', type: 'nudge' },
+                props: { variant: 'chip', type: 'nudge' },
                 style: {
                     fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
                     fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',
@@ -95,7 +94,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'success'
                 },
@@ -106,7 +105,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'warning'
                 },
@@ -117,7 +116,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'error'
                 },
@@ -128,7 +127,7 @@ export const DsChipOverrides = {
             },
             {
                 props: {
-                    'ds-variant': 'chip',
+                    variant: 'chip',
                     type: 'nudge',
                     color: 'info'
                 },
@@ -138,50 +137,6 @@ export const DsChipOverrides = {
                 }
             }
         ],
-        styleOverrides: {
-            root: {
-                paddingTop: 'var(--ds-spacing-quickFreeze)',
-                paddingBottom: 'var(--ds-spacing-quickFreeze)',
-                fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
-                fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
-                lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)'
-            },
-            filled: {
-                backgroundColor: 'var(--ds-colour-surfacePrimary)',
-                border: '1px solid var(--ds-colour-strokeDefault)',
-                '> .MuiIcon-root': {
-                    color: 'var(--ds-colour-iconDefault)'
-                }
-            },
-            filledSecondary: {
-                backgroundColor: 'var(--ds-colour-actionSecondary)',
-                border: '1px solid var(--ds-colour-strokeSelected)',
-                fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
-                fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
-                lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)',
-                '> .MuiIcon-root': {
-                    color: 'inherit'
-                },
-                ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
-            },
-            label: {
-                paddingTop: 'var(--ds-spacing-deepFreeze)',
-                paddingBottom: 'var(--ds-spacing-deepFreeze)',
-                paddingLeft: 'var(--ds-spacing-frostbite)',
-                paddingRight: 'var(--ds-spacing-frostbite)'
-            },
-            icon: {
-                fontSize: 'var(--ds-typo-fontSizeBitterCold)',
-                marginLeft: 'var(--ds-spacing-frostbite)',
-                marginRight: 'calc(var(--ds-spacing-quickFreeze) * -1)'
-            },
-            deleteIcon: {
-                fontSize: 'var(--ds-typo-fontSizeBitterCold)',
-                marginRight: 'var(--ds-spacing-frostbite)',
-                marginLeft: 'calc(var(--ds-spacing-quickFreeze) * -1)'
-            }
-        }
+        styleOverrides: {}
     }
 };