@am92/react-design-system 2.7.7 → 2.8.0

package/dist/Components/DsImage/DsImage.Component.js

@@ -1,22 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { useState } from 'react';
 import { DsBox } from '../DsBox';
 import { DsFade } from '../DsFade';
 import { DsRemixIcon } from '../DsRemixIcon';
 import { DsSkeleton } from '../DsSkeleton';
-import { DsImageDefaultState, DEFULT_ERROR_ICON_PROPS, INNER_COMPONENT_STYLE } from './DsImage.Types';
-export class DsImage extends React.Component {
-    state = DsImageDefaultState;
-    handleSetLoadedStage = () => this.setState({ stage: 'LOADED' });
-    handleSetErrorStage = () => this.setState({ stage: 'ERROR' });
-    hasSource = () => {
-        const { srcSet = [] } = this.props;
+import { DEFULT_ERROR_ICON_PROPS, INNER_COMPONENT_STYLE } from './DsImage.Types';
+export const DsImage = (props) => {
+    const [stage, setStage] = useState('LOADING');
+    const handleSetLoadedStage = () => setStage('LOADED');
+    const handleSetErrorStage = () => setStage('ERROR');
+    const checkHasSource = () => {
+        const { srcSet = [] } = props;
         return srcSet && srcSet.length > 0;
     };
-    renderLoadingComponent = () => {
-        const { stage } = this.state;
-        const { aspectRatio, LoaderProps } = this.props;
-        const hasSource = this.hasSource();
+    const renderLoadingComponent = () => {
+        const { aspectRatio, LoaderProps } = props;
+        const hasSource = checkHasSource();
         const isLoading = hasSource && stage === 'LOADING';
         if (!isLoading) {
             return false;
@@ -26,10 +25,9 @@ export class DsImage extends React.Component {
                 ...LoaderProps?.sx
             } }));
     };
-    renderErrorComponent = () => {
-        const { stage } = this.state;
-        const { aspectRatio, ErrorIconProps } = this.props;
-        const hasSource = this.hasSource();
+    const renderErrorComponent = () => {
+        const { aspectRatio, ErrorIconProps } = props;
+        const hasSource = checkHasSource();
         const isError = !hasSource || stage === 'ERROR';
         if (!isError) {
             return false;
@@ -39,13 +37,13 @@ export class DsImage extends React.Component {
                 ...ErrorIconProps?.sx
             } }));
     };
-    renderPictureComponent = () => {
-        const { srcSet, aspectRatio, ErrorIconProps, WrapperProps, ...ImageProps } = this.props;
-        const hasSource = this.hasSource();
+    const renderPictureComponent = () => {
+        const { srcSet, aspectRatio, ErrorIconProps, WrapperProps, ...ImageProps } = props;
+        const hasSource = checkHasSource();
         if (!hasSource) {
             return _jsx(_Fragment, {});
         }
-        return (_jsx("picture", { onLoad: this.handleSetLoadedStage, onError: this.handleSetErrorStage, children: srcSet?.map((src, index) => {
+        return (_jsx("picture", { onLoad: handleSetLoadedStage, onError: handleSetErrorStage, children: srcSet?.map((src, index) => {
                 const { src: imageSrc, style, ...restProps } = src;
                 const isLast = index === srcSet.length - 1;
                 if (isLast) {
@@ -59,29 +57,26 @@ export class DsImage extends React.Component {
                 return _jsx("source", { srcSet: imageSrc, ...restProps }, index);
             }) }));
     };
-    render() {
-        const { stage } = this.state;
-        const { srcSet, aspectRatio, WrapperProps } = this.props;
-        const hasSource = srcSet && srcSet.length > 0;
-        const isError = !hasSource || stage === 'ERROR';
-        const isLoading = !isError && stage === 'LOADING';
-        return (_jsxs(DsBox, { ...WrapperProps, sx: {
-                position: 'relative',
+    const { srcSet, aspectRatio, WrapperProps } = props;
+    const hasSource = srcSet && srcSet.length > 0;
+    const isError = !hasSource || stage === 'ERROR';
+    const isLoading = !isError && stage === 'LOADING';
+    return (_jsxs(DsBox, { ...WrapperProps, sx: {
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            ...((aspectRatio && {
+                aspectRatio: `${aspectRatio} auto`,
+                overflow: 'hidden',
                 width: '100%',
-                height: '100%',
-                ...((aspectRatio && {
-                    aspectRatio: `${aspectRatio} auto`,
-                    overflow: 'hidden',
-                    width: '100%',
-                    height: 'auto',
-                    maxWidth: '100%',
-                    [`@supports not (aspect-ratio: ${aspectRatio})`]: {
-                        paddingTop: `calc((1 / ${aspectRatio}) * 100%)`,
-                        height: 0
-                    }
-                }) ||
-                    {}),
-                ...WrapperProps?.sx
-            }, children: [this.renderLoadingComponent(), this.renderErrorComponent(), _jsx(DsFade, { in: !isLoading && !isError, children: this.renderPictureComponent() })] }));
-    }
-}
+                height: 'auto',
+                maxWidth: '100%',
+                [`@supports not (aspect-ratio: ${aspectRatio})`]: {
+                    paddingTop: `calc((1 / ${aspectRatio}) * 100%)`,
+                    height: 0
+                }
+            }) ||
+                {}),
+            ...WrapperProps?.sx
+        }, children: [renderLoadingComponent(), renderErrorComponent(), _jsx(DsFade, { in: !isLoading && !isError, children: renderPictureComponent() })] }));
+};

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

@@ -17,7 +17,6 @@ export interface DsImageProps extends Omit<React.ImgHTMLAttributes<any>, 'srcSet
 export interface DsImageState {
     stage: 'LOADING' | 'LOADED' | 'ERROR';
 }
-export declare const DsImageDefaultState: DsImageState;
 export declare const DEFULT_ERROR_ICON_PROPS: IErrorIconProps;
 export declare const INNER_COMPONENT_STYLE: React.CSSProperties;
 export {};

package/dist/Components/DsImage/DsImage.Types.js

@@ -1,6 +1,3 @@
-export const DsImageDefaultState = {
-    stage: 'LOADING'
-};
 export const DEFULT_ERROR_ICON_PROPS = {
     fontSize: 'mild',
     className: 'ri-image-2-line'

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

@@ -1,5 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsInputLabelProps } from './DsInputLabel.Types';
-export declare class DsInputLabel extends PureComponent<DsInputLabelProps> {
-    render(): import("react/jsx-runtime").JSX.Element | null;
-}
+export declare const DsInputLabel: FC<DsInputLabelProps>;

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

@@ -1,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import InputLabel from '@mui/material/InputLabel';
 import { DsTypography } from '../DsTypography';
-export class DsInputLabel extends PureComponent {
-    render() {
-        const { label, labelSupportText, success, error, ...inputLabelProps } = this.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 })] }));
+export const DsInputLabel = (props) => {
+    const { label, labelSupportText, success, error, ...inputLabelProps } = 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 })] }));
+};

package/dist/Components/DsNotistack/AlertMessage.Component.js

@@ -1,17 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Component } from 'react';
+import React from 'react';
 import { closeSnackbar } from 'notistack';
 import { DsToast } from '../DsToast';
-class AlertMessage extends Component {
-    handleClose = () => {
-        const { id } = this.props;
+const AlertMessage = (props) => {
+    const handleClose = () => {
+        const { id } = props;
         closeSnackbar(id);
     };
-    render() {
-        const { ref, toastVariant, variant, message, id, autoHideDuration, hideIconVariant, anchorOrigin, persist, iconVariant, ...restProps } = this.props;
-        return (_jsx(DsToast, { ...restProps, variant: toastVariant, color: variant, onClose: this.handleClose, children: message }));
-    }
-}
+    const { ref, toastVariant, variant, message, id, autoHideDuration, hideIconVariant, anchorOrigin, persist, iconVariant, ...restProps } = props;
+    return (_jsx(DsToast, { ...restProps, variant: toastVariant, color: variant, onClose: handleClose, children: message }));
+};
 export const DsNotistackAlertDefault = React.forwardRef((props, ref) => {
     return _jsx(AlertMessage, { forwardedRef: ref, ...props, variant: "default" });
 });

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

@@ -1,14 +1,9 @@
-import { Component } from 'react';
+import { FC } from 'react';
 import { SnackbarProviderProps, useSnackbar } from 'notistack';
 import { DsNotistackKey, EnqueNotistackProps } from './DsNotistack.Types';
 declare const useNotistack: typeof useSnackbar;
 export { closeNotistack, useNotistack, enqueueNotistack, generateKeyNotistack };
-export declare class DsNotistackProvider extends Component<SnackbarProviderProps> {
-    static defaultProps: {
-        hideIconVariant: boolean;
-    };
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsNotistackProvider: FC<SnackbarProviderProps>;
 declare function generateKeyNotistack(message?: string): string;
 declare function enqueueNotistack(notistackOptions: EnqueNotistackProps): void;
 declare function closeNotistack(key?: DsNotistackKey | undefined): void;

package/dist/Components/DsNotistack/DsNotistack.Component.js

@@ -1,24 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Component } from 'react';
 import { SnackbarProvider, closeSnackbar, enqueueSnackbar, useSnackbar } from 'notistack';
 import { DsNotistackAlertDefault, DsNotistackAlertSuccess, DsNotistackAlertError, DsNotistackAlertWarning, DsNotistackAlertInfo } from './AlertMessage.Component';
+import { DsNotistackProviderDefaultProps } from './DsNotistack.Types';
 const useNotistack = useSnackbar;
 export { closeNotistack, useNotistack, enqueueNotistack, generateKeyNotistack };
-export class DsNotistackProvider extends Component {
-    static defaultProps = {
-        hideIconVariant: true
-    };
-    render() {
-        return (_jsx(SnackbarProvider, { preventDuplicate: true, anchorOrigin: { vertical: 'top', horizontal: 'center' }, ...this.props, Components: {
-                default: DsNotistackAlertDefault,
-                success: DsNotistackAlertSuccess,
-                error: DsNotistackAlertError,
-                warning: DsNotistackAlertWarning,
-                info: DsNotistackAlertInfo,
-                ...this.props.Components
-            } }));
-    }
-}
+export const DsNotistackProvider = (inProps) => {
+    const props = { ...DsNotistackProviderDefaultProps, ...inProps };
+    return (_jsx(SnackbarProvider, { preventDuplicate: true, anchorOrigin: { vertical: 'top', horizontal: 'center' }, ...props, Components: {
+            default: DsNotistackAlertDefault,
+            success: DsNotistackAlertSuccess,
+            error: DsNotistackAlertError,
+            warning: DsNotistackAlertWarning,
+            info: DsNotistackAlertInfo,
+            ...props.Components
+        } }));
+};
 function generateKeyNotistack(message) {
     const key = `${message || ''}-${new Date().getTime()}`;
     return key;

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

@@ -8,3 +8,4 @@ export interface NotiStackMessage {
 }
 export interface EnqueNotistackProps extends OptionsObject, NotiStackMessage, Pick<DsToastProps, Exclude<keyof DsToastProps, keyof OptionsObject>> {
 }
+export declare const DsNotistackProviderDefaultProps: SnackbarProviderProps;

package/dist/Components/DsNotistack/DsNotistack.Types.js

@@ -1 +1,3 @@
-export {};
+export const DsNotistackProviderDefaultProps = {
+    hideIconVariant: true
+};

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

@@ -1,15 +1,3 @@
-import React, { Component } from 'react';
-import { DsOtpProps, DsOtpState } from './DsOtp.Types';
-export declare class DsOtp extends Component<DsOtpProps, DsOtpState> {
-    static defaultProps: DsOtpProps;
-    optInputRefs: Map<any, any>;
-    constructor(props: DsOtpProps);
-    handleFocus: (event: React.FocusEvent<HTMLInputElement, Element>) => void;
-    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    _handleNavigation: (index: number, isBackPressed?: boolean) => void;
-    handlePaste: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-    resetOtpValues: () => void;
-    renderOtpBoxes: () => import("react/jsx-runtime").JSX.Element[];
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsOtpProps } from './DsOtp.Types';
+export declare const DsOtp: FC<DsOtpProps>;

package/dist/Components/DsOtp/DsOtp.Component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component } from 'react';
+import { useState } from 'react';
 import { DsBox } from '../DsBox';
 import { DsStack } from '../DsStack';
 import { DsInputLabel } from '../DsInputLabel';
@@ -9,41 +9,35 @@ import { DsOtpDefaultProps } from './DsOtp.Types';
 const KEY_CODES = {
     BACK_SPACE: 'Backspace'
 };
-export class DsOtp extends Component {
-    static defaultProps = DsOtpDefaultProps;
-    optInputRefs = new Map();
-    constructor(props) {
-        super(props);
-        const { initialOtp = '', length } = this.props;
-        this.state = {
-            otp: initialOtp ? [...initialOtp].slice(0, length) : []
-        };
-    }
-    handleFocus = (event) => {
-        const { onFocus } = this.props;
+export const DsOtp = (inProps) => {
+    const props = { ...DsOtpDefaultProps, ...inProps };
+    const optInputRefs = new Map();
+    const { initialOtp = '', length } = props;
+    const [otp, setOtp] = useState(initialOtp ? [...initialOtp].slice(0, length) : []);
+    const handleFocus = (event) => {
+        const { onFocus } = props;
         const { target } = event;
         target.select();
         if (typeof onFocus === 'function') {
             onFocus(event);
         }
     };
-    handleKeyDown = (event) => {
-        const { onKeyDown } = this.props;
+    const handleKeyDown = (event) => {
+        const { onKeyDown } = props;
         const { key, currentTarget } = event;
         const { name, value } = currentTarget;
         const indexString = name.split('.').pop() || '';
         const index = parseInt(indexString, 10);
         // Call _handleNavigation on back button pressed
         if (key === KEY_CODES.BACK_SPACE && !value) {
-            this._handleNavigation(index, true);
+            _handleNavigation(index, true);
         }
         if (typeof onKeyDown === 'function') {
             onKeyDown(event);
         }
     };
-    handleChange = (event) => {
-        const { onChange, onComplete, length } = this.props;
-        const { otp } = this.state;
+    const handleChange = (event) => {
+        const { onChange, onComplete, length } = props;
         const { target } = event;
         const { name, value = '' } = target;
         const indexString = name.split('.').pop() || '';
@@ -53,37 +47,36 @@ export class DsOtp extends Component {
         otp[index] = filteredValue;
         const shouldNavigate = filteredValue;
         const _this = this;
-        this.setState({ otp: [...otp] }, () => {
-            if (shouldNavigate) {
-                _this._handleNavigation(index, false);
-            }
-            if (typeof onChange === 'function') {
-                onChange(event);
-            }
-            const otpString = otp.join('');
-            if (otpString.length === length && typeof onComplete === 'function') {
-                onComplete(otpString);
-            }
-        });
+        setOtp([...otp]);
+        if (shouldNavigate) {
+            _handleNavigation(index, false);
+        }
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        const otpString = otp.join('');
+        if (otpString.length === length && typeof onComplete === 'function') {
+            onComplete(otpString);
+        }
     };
-    _handleNavigation = (index, isBackPressed) => {
+    const _handleNavigation = (index, isBackPressed) => {
         const nextFocussedIndex = isBackPressed ? --index : ++index;
-        const nextFocussedInput = this.optInputRefs.get(nextFocussedIndex);
+        const nextFocussedInput = optInputRefs.get(nextFocussedIndex);
         if (nextFocussedInput) {
             nextFocussedInput.focus();
         }
     };
-    handlePaste = (event) => {
+    const handlePaste = (event) => {
         event.preventDefault();
-        const { onPaste, onComplete, length } = this.props;
+        const { onPaste, onComplete, length } = props;
         const { clipboardData, currentTarget } = event;
         const pastedData = clipboardData.getData('text');
         const filteredValue = pastedData.replace(/\D/g, '') || '';
         const otp = filteredValue.split('').slice(0, length);
-        this.setState({ otp });
+        setOtp(otp);
         currentTarget.blur();
         const focusIndex = otp.length - 1;
-        this._handleNavigation(focusIndex);
+        _handleNavigation(focusIndex);
         if (typeof onPaste === 'function') {
             onPaste(event);
         }
@@ -92,12 +85,11 @@ export class DsOtp extends Component {
             onComplete(otpString);
         }
     };
-    resetOtpValues = () => {
-        this.setState({ otp: [] });
+    const resetOtpValues = () => {
+        setOtp([]);
     };
-    renderOtpBoxes = () => {
-        const { otp } = this.state;
-        const { label, labelSupportText, name, length, helperText, inputProps = {}, HelperTextProps, BoxProps, InputLabelProps, ...restProps } = this.props;
+    const renderOtpBoxes = () => {
+        const { label, labelSupportText, name, length, helperText, inputProps = {}, HelperTextProps, BoxProps, InputLabelProps, ...restProps } = props;
         const lengthArray = Array(length).fill('');
         const otpInputProps = {
             ...inputProps,
@@ -107,14 +99,12 @@ export class DsOtp extends Component {
                 textAlign: 'center'
             }
         };
-        return lengthArray.map((value, index) => (_jsx(DsTextField, { type: "tel", inputMode: "tel", ...restProps, name: `${name}.${index}`, "ds-variant": "otp", inputProps: otpInputProps, onPaste: this.handlePaste, onFocus: this.handleFocus, onChange: this.handleChange, onKeyDown: this.handleKeyDown, value: otp[index] || '', inputRef: ref => {
-                this.optInputRefs.set(index, ref);
+        return lengthArray.map((value, index) => (_jsx(DsTextField, { type: "tel", inputMode: "tel", ...restProps, name: `${name}.${index}`, "ds-variant": "otp", inputProps: otpInputProps, onPaste: handlePaste, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, value: otp[index] || '', inputRef: ref => {
+                optInputRefs.set(index, ref);
             } }, index)));
     };
-    render() {
-        const { id, name, label, labelSupportText, helperText, success, color, error, inputProps, disabled, InputLabelProps, HelperTextProps, BoxProps } = this.props;
-        return (_jsxs(DsBox, { ...BoxProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, 
-                    // error={error}
-                    success: success, htmlFor: id || name, disabled: disabled, ...InputLabelProps }), _jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-glacial)", style: {}, children: this.renderOtpBoxes() }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...HelperTextProps })] }));
-    }
-}
+    const { id, name, label, labelSupportText, helperText, success, color, error, inputProps, disabled, InputLabelProps, HelperTextProps, BoxProps } = props;
+    return (_jsxs(DsBox, { ...BoxProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, 
+                // error={error}
+                success: success, htmlFor: id || name, disabled: disabled, ...InputLabelProps }), _jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-glacial)", style: {}, children: renderOtpBoxes() }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...HelperTextProps })] }));
+};

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

@@ -14,7 +14,7 @@ interface DsBottomSheetPropsCustom extends Omit<DsBottomSheetProps, 'ref' | 'ope
     open?: DsBottomSheetProps['open'];
 }
 export interface DsPopupProps extends Pick<DsDialogProps, 'onClose'> {
-    open?: DsDialogProps['open'];
+    open: DsDialogProps['open'];
     title?: string;
     description?: string;
     showClose?: boolean;

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

@@ -1,7 +1,3 @@
-import { Component } from 'react';
+import { FC } from 'react';
 import { DsProgressIndicatorProps } from './DsProgressIndicator.Types';
-export declare class DsProgressIndicator extends Component<DsProgressIndicatorProps> {
-    static defaultProps: DsProgressIndicatorProps;
-    getFillText: () => string | import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsProgressIndicator: FC<DsProgressIndicatorProps>;

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

@@ -1,37 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component } from 'react';
 import { DsProgressIndicatorDefaultProps } from './DsProgressIndicator.Types';
 import { DsBox } from '../DsBox';
 import { DsCircularProgress } from '../DsCircularProgress';
 import { DsTypography } from '../DsTypography';
 import { DsRemixIcon } from '../DsRemixIcon';
-export class DsProgressIndicator extends Component {
-    static defaultProps = DsProgressIndicatorDefaultProps;
-    getFillText = () => {
-        const { activeStep, steps, isSuccess, isError } = this.props;
+export const DsProgressIndicator = (inProps) => {
+    const props = { ...DsProgressIndicatorDefaultProps, ...inProps };
+    const getFillText = () => {
+        const { activeStep, steps, isSuccess, isError } = props;
         if (isSuccess) {
             return (_jsx(DsRemixIcon, { sx: { color: 'var(--ds-colour-iconPositive)' }, className: "ri-check-line" }));
         }
         if (isError) {
             return (_jsx(DsRemixIcon, { sx: { color: 'var(--ds-colour-iconNegative)' }, className: "ri-error-warning-line" }));
         }
-        if (this.props['ds-variant'] === 'fraction') {
+        if (props['ds-variant'] === 'fraction') {
             return `${activeStep}/${steps}`;
         }
         return `${Math.round((activeStep / steps) * 100)}%`;
     };
-    render() {
-        const { activeStep, steps, isSuccess, isError } = this.props;
-        const squareSize = this.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: {
-                        position: 'absolute'
-                    } }), _jsx(DsTypography, { variant: "subheadingSemiboldDefault", sx: {
-                        position: 'absolute',
-                        left: '50%',
-                        top: '50%',
-                        transform: 'translate(-50%,-50%)'
-                    }, children: this.getFillText() })] }));
-    }
-}
+    const { activeStep, steps, isSuccess, isError } = props;
+    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: {
+                    position: 'absolute'
+                } }), _jsx(DsTypography, { variant: "subheadingSemiboldDefault", sx: {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translate(-50%,-50%)'
+                }, children: getFillText() })] }));
+};

package/dist/Components/DsProgressTracker/DsProgressStepper.Component.d.ts

@@ -1,9 +1,3 @@
-import { PureComponent } from 'react';
-import { DsProgressStepperProps, DsProgressStepperStepProps } from './DsProgressStepper.Types';
-import { StepIconProps } from '@mui/material';
-export declare class DsProgressStepper extends PureComponent<DsProgressStepperProps> {
-    static defaultProps: DsProgressStepperProps;
-    renderStepIcon: (stepProps: StepIconProps) => import("react/jsx-runtime").JSX.Element;
-    renderStep: (step: DsProgressStepperStepProps, index: number) => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsProgressStepperProps } from './DsProgressStepper.Types';
+export declare const DsProgressStepper: FC<DsProgressStepperProps>;

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

@@ -1,13 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import { DsProgressStepperDefaultProps } from './DsProgressStepper.Types';
 import { DsStepper } from '../DsStepper';
 import { DsStep } from '../DsStep';
 import { DsStepLabel } from '../DsStepLabel';
 import { DsRemixIcon } from '../DsRemixIcon';
-export class DsProgressStepper extends PureComponent {
-    static defaultProps = DsProgressStepperDefaultProps;
-    renderStepIcon = (stepProps) => {
+export const DsProgressStepper = (inProps) => {
+    const props = { ...DsProgressStepperDefaultProps, ...inProps };
+    const renderStepIcon = (stepProps) => {
         const { active, error, completed, icon } = stepProps;
         if (error) {
             return (_jsx(DsRemixIcon, { className: "ri-close-circle-fill", sx: { color: 'var(--ds-colour-iconNegative)' } }));
@@ -20,7 +19,7 @@ export class DsProgressStepper extends PureComponent {
         }
         return _jsx(_Fragment, { children: icon });
     };
-    renderStep = (step, index) => {
+    const renderStep = (step, index) => {
         const { stepName, error, icon, optional, completed, disabled } = step;
         const stepProps = { completed, disabled };
         const stepLabelProps = { error, icon, optional };
@@ -31,10 +30,8 @@ export class DsProgressStepper extends PureComponent {
                 }
             };
         }
-        return (_jsx(DsStep, { ...stepProps, children: _jsx(DsStepLabel, { ...stepLabelProps, StepIconComponent: this.renderStepIcon, children: stepName }) }, index));
+        return (_jsx(DsStep, { ...stepProps, children: _jsx(DsStepLabel, { ...stepLabelProps, StepIconComponent: renderStepIcon, children: stepName }) }, index));
     };
-    render() {
-        const { steps, ...stepperProps } = this.props;
-        return (_jsx(DsStepper, { ...stepperProps, alternativeLabel: stepperProps.orientation === 'horizontal', children: steps.map(this.renderStep) }));
-    }
-}
+    const { steps, ...stepperProps } = props;
+    return (_jsx(DsStepper, { ...stepperProps, alternativeLabel: stepperProps.orientation === 'horizontal', children: steps.map(renderStep) }));
+};

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

@@ -1,21 +1,3 @@
-import React, { PureComponent } from 'react';
-import { DsProgressTrackerProps, DsProgressTrackerState } from './DsProgressTracker.Types';
-export declare class DsProgressTracker extends PureComponent<DsProgressTrackerProps, DsProgressTrackerState> {
-    static defaultProps: DsProgressTrackerProps;
-    constructor(props: DsProgressTrackerProps);
-    getMergedProps: () => {
-        StepperProps: {
-            sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
-            orientation?: import("@mui/material").Orientation;
-        };
-        'ds-variant': "default" | "header" | "steps";
-        steps: import("./DsProgressStepper.Types").DsProgressStepperStepProps[];
-        activeStep: number;
-        sx?: import("../DsBox").DsBoxProps;
-        nextStepLabelPrefix: React.ReactNode;
-    };
-    handleToggleCollapse: () => void;
-    renderStepper: () => import("react/jsx-runtime").JSX.Element | null;
-    renderHeader: () => import("react/jsx-runtime").JSX.Element | null;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsProgressTrackerProps } from './DsProgressTracker.Types';
+export declare const DsProgressTracker: FC<DsProgressTrackerProps>;