@am92/react-design-system 2.7.7 → 2.8.0

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 @@
-import { PureComponent } 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 { default as DsChip } from '@mui/material/Chip';

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

@@ -1,10 +1 @@
-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 { default as DsChip } from '@mui/material/Chip';

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

@@ -2,5 +2,6 @@ import { ChipProps } from '@mui/material';
 export interface DsChipProps extends Omit<ChipProps, 'color'> {
     type?: 'status' | 'nudge';
     color?: Extract<ChipProps['color'], 'default' | 'info' | 'success' | 'warning' | 'error'>;
+    'ds-variant'?: 'chip';
 }
 export declare const DsChipDefaultProps: DsChipProps;

package/dist/Components/DsChip/DsChip.Types.js

@@ -1,3 +1,4 @@
 export const DsChipDefaultProps = {
-    type: 'status'
+    type: 'status',
+    'ds-variant': 'chip'
 };

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

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

package/dist/Components/DsChipGroup/DsChipGroup.Component.js

@@ -1,11 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import { DsStack } from '../DsStack';
 import { DsChipGroupDefaultProps } from './DsChipGroup.Types';
-export class DsChipGroup extends PureComponent {
-    static defaultProps = DsChipGroupDefaultProps;
-    render() {
-        const { children, ...restStackProps } = this.props;
-        return (_jsx(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-glacial)', ...restStackProps, children: children }));
-    }
-}
+export const DsChipGroup = (inProps) => {
+    const props = { ...DsChipGroupDefaultProps, ...inProps };
+    const { children, ...restStackProps } = props;
+    return (_jsx(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-glacial)', ...restStackProps, children: children }));
+};

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

@@ -1,8 +1,3 @@
-import { PureComponent } from 'react';
-import { DsContentSliderProps, DsContentSliderState } from './DsContentSlider.Types';
-export declare class DsContentSlider extends PureComponent<DsContentSliderProps, DsContentSliderState> {
-    constructor(props: DsContentSliderProps);
-    renderStep(index: number): import("react/jsx-runtime").JSX.Element;
-    renderSteps(): JSX.Element[];
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsContentSliderProps } from './DsContentSlider.Types';
+export declare const DsContentSlider: FC<DsContentSliderProps>;

package/dist/Components/DsContentSlider/DsContentSlider.Component.js

@@ -1,20 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
+import { useState } from 'react';
 import { DsBox } from '../DsBox';
 import { DsStack } from '../DsStack';
-export class DsContentSlider extends PureComponent {
-    constructor(props) {
-        super(props);
-        const state = {
-            active: props.activeStep
-        };
-        this.state = state;
-    }
-    renderStep(index) {
-        const { active } = this.state;
+import { DsContentSliderDefaultProps } from './DsContentSlider.Types';
+export const DsContentSlider = (inProps) => {
+    const props = { ...DsContentSliderDefaultProps, ...inProps };
+    const [active, setActive] = useState(0);
+    function renderStep(index) {
         const isActiveStep = index === active;
         if (isActiveStep) {
-            const isTimed = this.props['ds-variant'] === 'timed';
+            const isTimed = props['ds-variant'] === 'timed';
             if (isTimed) {
                 return (_jsxs(DsBox, { sx: {
                         width: '20px',
@@ -52,17 +47,15 @@ export class DsContentSlider extends PureComponent {
                 backgroundColor: 'var(--ds-colour-stateDisabledSurface)'
             } }));
     }
-    renderSteps() {
-        const { steps } = this.props;
+    function renderSteps() {
+        const { steps } = props;
         const indicators = [];
         for (let index = 0; index < steps; index++) {
-            const indicator = this.renderStep(index);
+            const indicator = renderStep(index);
             indicators.push(indicator);
         }
         return indicators;
     }
-    render() {
-        const { steps } = this.props;
-        return (_jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-quickFreeze)", children: this.renderSteps() }));
-    }
-}
+    const { steps } = props;
+    return (_jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-quickFreeze)", children: renderSteps() }));
+};

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

@@ -1,8 +1,3 @@
 import * as React from 'react';
 import { DsDialogProps } from './DsDialog.Types';
-export declare class DsDialog extends React.Component<DsDialogProps> {
-    static defaultProps: DsDialogProps;
-    handleDialogClose: (event: React.SyntheticEvent, reason: "backdropClick" | "escapeKeyDown") => void;
-    handleCloseClick: (event: React.SyntheticEvent) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsDialog: React.FC<DsDialogProps>;