@am92/react-design-system 2.7.7 → 2.8.0

package/dist/Components/DsDialog/DsDialog.Component.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { DsDialogDefaultProps } from './DsDialog.Types';
 import { DsDialogTitle } from '../DsDialogTitle';
 import { Dialog } from '@mui/material';
 import { DsIconButton } from '../DsIconButton';
@@ -9,90 +7,88 @@ import { DsTypography } from '../DsTypography';
 import { DsDialogContent } from '../DsDialogContent';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsButton } from '../DsButton';
-export class DsDialog extends React.Component {
-    static defaultProps = DsDialogDefaultProps;
-    handleDialogClose = (event, reason) => {
-        const { onClose } = this.props;
+export const DsDialog = (props) => {
+    const handleDialogClose = (event, reason) => {
+        const { onClose } = props;
         if (typeof onClose === 'function') {
             onClose(event, reason);
         }
     };
-    handleCloseClick = (event) => {
-        const { onClose } = this.props;
+    const handleCloseClick = (event) => {
+        const { onClose } = props;
         if (typeof onClose === 'function') {
             onClose(event, 'backdropClick');
         }
     };
-    render() {
-        const { title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, ...DialogProps } = this.props;
-        const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
-        const accessibilityProps = {};
-        const isFlushed = primaryButtonText &&
-            !secondaryButtonText &&
-            primaryButtonProps &&
-            primaryButtonProps?.variant === 'flushed';
-        if (title) {
-            accessibilityProps['aria-labelledby'] = title;
-        }
-        if (description) {
-            accessibilityProps['aria-describedby'] = description;
-        }
-        return (_jsxs(Dialog, { keepMounted: true, ...accessibilityProps, ...DialogProps, PaperProps: {
-                ...PaperProps,
-                sx: {
-                    pb: isFlushed
-                        ? undefined
-                        : {
-                            xs: 'var(--ds-spacing-bitterCold)',
-                            md: 'var(--ds-spacing-warm)'
-                        },
-                    pt: {
+    const { title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
+    console.log('props', props);
+    const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
+    const accessibilityProps = {};
+    const isFlushed = primaryButtonText &&
+        !secondaryButtonText &&
+        primaryButtonProps &&
+        primaryButtonProps?.variant === 'flushed';
+    if (title) {
+        accessibilityProps['aria-labelledby'] = title;
+    }
+    if (description) {
+        accessibilityProps['aria-describedby'] = description;
+    }
+    return (_jsxs(Dialog, { keepMounted: true, ...accessibilityProps, ...DialogProps, PaperProps: {
+            ...PaperProps,
+            sx: {
+                pb: isFlushed
+                    ? undefined
+                    : {
+                        xs: 'var(--ds-spacing-bitterCold)',
+                        md: 'var(--ds-spacing-warm)'
+                    },
+                pt: {
+                    xs: 'var(--ds-spacing-mild)',
+                    md: 'var(--ds-spacing-warm)'
+                },
+                ...PaperProps?.sx
+            }
+        }, children: [title && (_jsx(DsDialogTitle, { ...TitleProps, sx: {
+                    width: showClose ? 'calc(100% - 44px)' : '100%',
+                    px: {
+                        xs: 'var(--ds-spacing-bitterCold)',
+                        md: 'var(--ds-spacing-warm)'
+                    },
+                    ...TitleProps?.sx
+                }, children: title })), description && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "text.secondary", ...DescriptionProps, sx: {
+                    px: {
+                        xs: 'var(--ds-spacing-bitterCold)',
+                        md: 'var(--ds-spacing-warm)'
+                    },
+                    ...DescriptionProps?.sx
+                }, children: description })), showClose && (_jsx(DsIconButton, { onClick: handleCloseClick, ...CloseIconButtonProps, sx: {
+                    position: 'absolute',
+                    padding: 'var(--ds-spacing-quickFreeze)',
+                    borderRadius: 'var(--ds-radius-mild)',
+                    top: {
                         xs: 'var(--ds-spacing-mild)',
                         md: 'var(--ds-spacing-warm)'
                     },
-                    ...PaperProps?.sx
-                }
-            }, children: [title && (_jsx(DsDialogTitle, { ...TitleProps, sx: {
-                        width: showClose ? 'calc(100% - 44px)' : '100%',
-                        px: {
-                            xs: 'var(--ds-spacing-bitterCold)',
-                            md: 'var(--ds-spacing-warm)'
-                        },
-                        ...TitleProps?.sx
-                    }, children: title })), description && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "text.secondary", ...DescriptionProps, sx: {
-                        px: {
-                            xs: 'var(--ds-spacing-bitterCold)',
-                            md: 'var(--ds-spacing-warm)'
-                        },
-                        ...DescriptionProps?.sx
-                    }, children: description })), showClose && (_jsx(DsIconButton, { onClick: this.handleCloseClick, ...CloseIconButtonProps, sx: {
-                        position: 'absolute',
-                        padding: 'var(--ds-spacing-quickFreeze)',
-                        borderRadius: 'var(--ds-radius-mild)',
-                        top: {
-                            xs: 'var(--ds-spacing-mild)',
-                            md: 'var(--ds-spacing-warm)'
-                        },
-                        right: {
-                            xs: 'var(--ds-spacing-bitterCold)',
-                            md: 'var(--ds-spacing-warm)'
-                        },
-                        ...CloseIconButtonProps?.sx
-                    }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
-                        px: {
+                    right: {
+                        xs: 'var(--ds-spacing-bitterCold)',
+                        md: 'var(--ds-spacing-warm)'
+                    },
+                    ...CloseIconButtonProps?.sx
+                }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
+                    px: {
+                        xs: 'var(--ds-spacing-bitterCold)',
+                        md: 'var(--ds-spacing-warm)'
+                    },
+                    marginTop: 'var(--ds-spacing-mild)',
+                    ...ContentProps?.sx
+                }, children: children })), actionsAvailable && (_jsxs(DsDialogActions, { ...ActionsProps, sx: {
+                    px: isFlushed
+                        ? undefined
+                        : {
                             xs: 'var(--ds-spacing-bitterCold)',
                             md: 'var(--ds-spacing-warm)'
                         },
-                        marginTop: 'var(--ds-spacing-mild)',
-                        ...ContentProps?.sx
-                    }, children: children })), actionsAvailable && (_jsxs(DsDialogActions, { ...ActionsProps, sx: {
-                        px: isFlushed
-                            ? undefined
-                            : {
-                                xs: 'var(--ds-spacing-bitterCold)',
-                                md: 'var(--ds-spacing-warm)'
-                            },
-                        ...ActionsProps?.sx
-                    }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "large", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "large", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
-    }
-}
+                    ...ActionsProps?.sx
+                }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "large", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "large", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
+};

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

@@ -1,5 +1,6 @@
 export declare const DsDialogOverrides: {
     MuiDialog: {
+        defaultProps: import("./DsDialog.Types").DsDialogProps;
         styleOverrides: {
             paper: {
                 backgroundColor: string;

package/dist/Components/DsDialog/DsDialog.Overrides.js

@@ -1,5 +1,7 @@
+import { DsDialogDefaultProps } from "./DsDialog.Types";
 export const DsDialogOverrides = {
     MuiDialog: {
+        defaultProps: DsDialogDefaultProps,
         styleOverrides: {
             paper: {
                 backgroundColor: 'var(--ds-colour-surfaceBackground)',

package/dist/Components/DsDivider/DsDivider.Overrides.js

@@ -19,6 +19,9 @@ export const DsDividerOverrides = {
                     },
                     '&::after': {
                         borderWidth: '0.5px'
+                    },
+                    '&:not(.MuiDivider-withChildren)': {
+                        borderWidth: '0.5px'
                     }
                 }
             },
@@ -30,6 +33,9 @@ export const DsDividerOverrides = {
                     },
                     '&::after': {
                         borderWidth: '6px'
+                    },
+                    '&:not(.MuiDivider-withChildren)': {
+                        borderWidth: '6px'
                     }
                 }
             }

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

@@ -1,16 +1,3 @@
-import React, { DragEvent } from 'react';
-import { DsFileUploaderProps, DsFileUploaderState } from './DsFileUploader.Types';
-export declare class DsFileUploader extends React.Component<DsFileUploaderProps, DsFileUploaderState> {
-    static defaultProps: DsFileUploaderProps;
-    inputRef: React.RefObject<HTMLInputElement>;
-    state: DsFileUploaderState;
-    humaniseSize: (bytes: number, decimals?: number) => string;
-    getFileIconClass: (mimeType: string) => "ri-image-2-line" | "ri-video-line" | "ri-file-list-2-line";
-    handleOnClick: (event: React.MouseEvent<HTMLElement>) => void;
-    handleRemoveFile: (index: number) => () => void;
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    handleDrop: (event: DragEvent) => void;
-    handleDragOverHandler: (event: DragEvent) => void;
-    renderFiles: () => false | import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsFileUploaderProps } from './DsFileUploader.Types';
+export declare const DsFileUploader: FC<DsFileUploaderProps>;

package/dist/Components/DsFileUploader/DsFileUploader.Component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
+import { useRef, useState } from 'react';
 import { DsBox } from '../DsBox';
 import { DsButton } from '../DsButton';
 import { DsIconButton } from '../DsIconButton';
@@ -7,12 +7,12 @@ import { DsInput } from '../DsInput';
 import { DsRemixIcon } from '../DsRemixIcon';
 import { DsStack } from '../DsStack';
 import { DsTypography } from '../DsTypography';
-import { DsFileUploaderDefaultProps, DsFileUploaderDefaultState } from './DsFileUploader.Types';
-export class DsFileUploader extends React.Component {
-    static defaultProps = DsFileUploaderDefaultProps;
-    inputRef = React.createRef();
-    state = DsFileUploaderDefaultState;
-    humaniseSize = (bytes, decimals = 2) => {
+import { DsFileUploaderDefaultProps } from './DsFileUploader.Types';
+export const DsFileUploader = (inProps) => {
+    const props = { ...DsFileUploaderDefaultProps, ...inProps };
+    const inputRef = useRef();
+    const [files, setFiles] = useState([]);
+    const humaniseSize = (bytes, decimals = 2) => {
         if (!+bytes)
             return '0 Bytes';
         const k = 1024;
@@ -21,7 +21,7 @@ export class DsFileUploader extends React.Component {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
     };
-    getFileIconClass = (mimeType) => {
+    const getFileIconClass = (mimeType) => {
         if (mimeType.includes('image/')) {
             return 'ri-image-2-line';
         }
@@ -30,35 +30,35 @@ export class DsFileUploader extends React.Component {
         }
         return 'ri-file-list-2-line';
     };
-    handleOnClick = (event) => {
-        this.inputRef?.current?.click();
+    const handleOnClick = (event) => {
+        inputRef?.current?.click();
     };
-    handleRemoveFile = (index) => () => {
-        const { onChange, name } = this.props;
-        const { files } = this.state;
-        files.splice(index, 1);
-        this.setState({ files });
+    const handleRemoveFile = (index) => () => {
+        const { onChange, name } = props;
+        const tempFiles = [...files];
+        tempFiles.splice(index, 1);
+        setFiles(tempFiles);
         if (onChange && typeof onChange === 'function') {
-            onChange(name, [...files]);
+            onChange(name, [...tempFiles]);
         }
     };
-    handleChange = (event) => {
-        const { onChange, name } = this.props;
-        const { files: stateFiles } = this.state;
+    const handleChange = (event) => {
+        const { onChange, name } = props;
+        const stateFiles = files;
         const { target } = event;
-        const { files } = target;
-        if (files) {
-            const newFiles = [...stateFiles, ...files];
-            this.setState({ files: newFiles });
+        const { files: selectedFiles } = target;
+        if (selectedFiles) {
+            const newFiles = [...stateFiles, ...selectedFiles];
+            setFiles(newFiles);
             if (onChange && typeof onChange === 'function') {
                 onChange(name, newFiles);
             }
         }
     };
-    handleDrop = (event) => {
+    const handleDrop = (event) => {
         // Prevent default behavior (Prevent file from being opened)
         event.preventDefault();
-        const { InputProps = {}, onChange, name } = this.props;
+        const { InputProps = {}, onChange, name } = props;
         const { accept, multiple } = InputProps;
         if (!event.dataTransfer) {
             return;
@@ -89,21 +89,20 @@ export class DsFileUploader extends React.Component {
                 files.push(file);
             }
         });
-        const { files: stateFiles } = this.state;
+        const stateFiles = files;
         const newFiles = multiple
             ? [...stateFiles, ...files]
             : (files[0] && [files[0]]) || (stateFiles[0] && [stateFiles[0]]) || [];
-        this.setState({ files: newFiles });
+        setFiles(newFiles);
         if (onChange && typeof onChange === 'function') {
             onChange(name, newFiles);
         }
     };
-    handleDragOverHandler = (event) => {
+    const handleDragOverHandler = (event) => {
         // Prevent default behavior (Prevent file from being opened)
         event.preventDefault();
     };
-    renderFiles = () => {
-        const { files } = this.state;
+    const renderFiles = () => {
         if (!files.length) {
             return false;
         }
@@ -127,59 +126,57 @@ export class DsFileUploader extends React.Component {
                             borderRadius: 'var(--ds-radius-quickFreeze)',
                             backgroundColor: 'var(--ds-colour-neutral2)',
                             color: 'var(--ds-colour-actionTertiary)'
-                        }, className: this.getFileIconClass(file.type) }), _jsxs(DsBox, { sx: {
+                        }, className: getFileIconClass(file.type) }), _jsxs(DsBox, { sx: {
                             display: 'flex',
                             flexGrow: 1,
                             minWidth: 0,
                             flexDirection: 'column'
                         }, children: [_jsx(DsTypography, { component: "div", variant: "subheadingSemiboldDefault", noWrap: true, children: file.name }), _jsx(DsTypography, { component: "div", variant: "bodyRegularSmall", noWrap: true, sx: {
                                     color: 'var(--ds-colour-typoTertiary)'
-                                }, children: this.humaniseSize(file.size) })] }), _jsx(DsIconButton, { onClick: this.handleRemoveFile(index), children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }, `${file.name}-${index}`));
+                                }, children: humaniseSize(file.size) })] }), _jsx(DsIconButton, { onClick: handleRemoveFile(index), children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }, `${file.name}-${index}`));
         }
         return (_jsx(DsStack, { sx: {
                 mt: 'var(--ds-spacing-warm)',
                 width: '100%'
             }, spacing: "var(--ds-spacing-glacial)", direction: "column", children: Files }));
     };
-    render() {
-        const { IconProps, titleButtonText, TitleButtonProps, descriptionTypograpghyText, DescriptionTypograpghyProps, InputProps } = this.props;
-        return (_jsxs(_Fragment, { children: [_jsxs(DsStack, { sx: {
-                        width: '100%',
-                        position: 'relative',
-                        p: 'var(--ds-spacing-bitterCold)',
-                        borderRadius: 'var(--ds-radius-glacial)',
-                        borderWidth: '1px',
-                        borderStyle: 'dashed',
-                        borderColor: 'var(--ds-colour-strokeDefault)',
-                        backgroundColor: 'var(--ds-colour-surfacePrimary)',
-                        cursor: 'pointer',
-                        '&:hover': {
-                            borderColor: 'var(--ds-colour-strokeSecondarySelected)',
-                            backgroundColor: 'var(--ds-colour-stateSelectedSecondaryHover)'
-                        }
-                    }, direction: "column", spacing: "var(--ds-spacing-glacial)", children: [_jsx(DsRemixIcon, { className: "ri-upload-cloud-2-line", color: "secondary", ...IconProps }), _jsx(DsButton, { variant: "text", color: "secondary", ...TitleButtonProps, children: titleButtonText }), _jsx(DsTypography, { variant: "bodyRegularSmall", align: "center", ...DescriptionTypograpghyProps, sx: {
-                                color: 'var(--ds-colour-typoTertiary)',
-                                ...DescriptionTypograpghyProps?.sx
-                            }, children: descriptionTypograpghyText }), _jsx(DsInput, { type: "file", sx: {
-                                position: 'absolute',
-                                top: 0,
-                                left: 0,
+    const { IconProps, titleButtonText, TitleButtonProps, descriptionTypograpghyText, DescriptionTypograpghyProps, InputProps } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(DsStack, { sx: {
+                    width: '100%',
+                    position: 'relative',
+                    p: 'var(--ds-spacing-bitterCold)',
+                    borderRadius: 'var(--ds-radius-glacial)',
+                    borderWidth: '1px',
+                    borderStyle: 'dashed',
+                    borderColor: 'var(--ds-colour-strokeDefault)',
+                    backgroundColor: 'var(--ds-colour-surfacePrimary)',
+                    cursor: 'pointer',
+                    '&:hover': {
+                        borderColor: 'var(--ds-colour-strokeSecondarySelected)',
+                        backgroundColor: 'var(--ds-colour-stateSelectedSecondaryHover)'
+                    }
+                }, direction: "column", spacing: "var(--ds-spacing-glacial)", children: [_jsx(DsRemixIcon, { className: "ri-upload-cloud-2-line", color: "secondary", ...IconProps }), _jsx(DsButton, { variant: "text", color: "secondary", ...TitleButtonProps, children: titleButtonText }), _jsx(DsTypography, { variant: "bodyRegularSmall", align: "center", ...DescriptionTypograpghyProps, sx: {
+                            color: 'var(--ds-colour-typoTertiary)',
+                            ...DescriptionTypograpghyProps?.sx
+                        }, children: descriptionTypograpghyText }), _jsx(DsInput, { type: "file", sx: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            height: '100%',
+                            width: '100%',
+                            opacity: 0,
+                            cursor: 'pointer',
+                            margin: 'var(--ds-spacing-zero) !important'
+                        }, onChange: handleChange, onDrop: handleDrop, onDragOver: handleDragOverHandler, disableUnderline: true, inputProps: {
+                            title: titleButtonText,
+                            ref: inputRef,
+                            value: '',
+                            ...InputProps,
+                            style: {
                                 height: '100%',
                                 width: '100%',
-                                opacity: 0,
                                 cursor: 'pointer',
-                                margin: 'var(--ds-spacing-zero) !important'
-                            }, onChange: this.handleChange, onDrop: this.handleDrop, onDragOver: this.handleDragOverHandler, disableUnderline: true, inputProps: {
-                                title: titleButtonText,
-                                ref: this.inputRef,
-                                value: '',
-                                ...InputProps,
-                                style: {
-                                    height: '100%',
-                                    width: '100%',
-                                    cursor: 'pointer',
-                                    ...InputProps?.style
-                                }
-                            } })] }), this.renderFiles()] }));
-    }
-}
+                                ...InputProps?.style
+                            }
+                        } })] }), renderFiles()] }));
+};

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

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

package/dist/Components/DsHeader/DsHeader.Component.js

@@ -1,37 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import { DsBox } from '../DsBox';
 import { DsStack } from '../DsStack';
 import { DsImage } from '../DsImage';
 import { DsHeaderDefaultProps } from './DsHeader.Types';
-export class DsHeader extends PureComponent {
-    static defaultProps = DsHeaderDefaultProps;
-    render() {
-        const { logoUrl, logo, children, BoxProps, StackProps, ...HeaderProps } = this.props;
-        return (_jsxs(DsBox, { ...HeaderProps, sx: {
-                height: {
-                    xs: 'var(--ds-rules-headerMobileHeight)',
-                    lg: 'var(--ds-rules-headerDesktopHeight)'
-                },
-                backgroundColor: 'var(--ds-colour-surfacePrimary)',
-                display: 'flex',
-                boxShadow: 'var(--ds-elevation-3)',
-                position: 'relative',
-                overflow: 'hidden',
-                ...HeaderProps.sx
-            }, children: [_jsx(DsBox, { ...BoxProps, sx: {
-                        position: 'absolute',
-                        right: 0,
-                        bottom: 0,
-                        pr: {
-                            xs: 'var(--ds-spacing-cool)',
-                            md: 'var(--ds-spacing-mild)'
-                        },
-                        pb: {
-                            xs: 'var(--ds-spacing-glacial)',
-                            md: 'var(--ds-spacing-frostbite)'
-                        },
-                        ...BoxProps.sx
-                    }, children: _jsx(DsStack, { ...StackProps, children: children }) }), logoUrl && (_jsx(DsImage, { srcSet: [{ src: logoUrl, alt: 'logo' }], WrapperProps: { height: '100%' }, style: { height: '100%' } })), logo && logo] }));
-    }
-}
+export const DsHeader = (inProps) => {
+    const props = { ...DsHeaderDefaultProps, ...inProps };
+    const { logoUrl, logo, children, BoxProps, StackProps, ...HeaderProps } = props;
+    return (_jsxs(DsBox, { ...HeaderProps, sx: {
+            height: {
+                xs: 'var(--ds-rules-headerMobileHeight)',
+                lg: 'var(--ds-rules-headerDesktopHeight)'
+            },
+            backgroundColor: 'var(--ds-colour-surfacePrimary)',
+            display: 'flex',
+            boxShadow: 'var(--ds-elevation-3)',
+            position: 'relative',
+            overflow: 'hidden',
+            ...HeaderProps.sx
+        }, children: [_jsx(DsBox, { ...BoxProps, sx: {
+                    position: 'absolute',
+                    right: 0,
+                    bottom: 0,
+                    pr: {
+                        xs: 'var(--ds-spacing-cool)',
+                        md: 'var(--ds-spacing-mild)'
+                    },
+                    pb: {
+                        xs: 'var(--ds-spacing-glacial)',
+                        md: 'var(--ds-spacing-frostbite)'
+                    },
+                    ...BoxProps.sx
+                }, children: _jsx(DsStack, { ...StackProps, children: children }) }), logoUrl && (_jsx(DsImage, { srcSet: [{ src: logoUrl, alt: 'logo' }], WrapperProps: { height: '100%' }, style: { height: '100%' } })), logo && logo] }));
+};

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

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

package/dist/Components/DsHelperText/DsHelperText.Component.js

@@ -1,26 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
-import { DsHelperTextDefaultProps } from './DsHelperText.Types';
 import { DsFormHelperText } from '../DsFormHelperText';
 import { DsBox } from '../DsBox';
 import { DsTypography } from '../DsTypography';
 import { DsRemixIcon } from '../DsRemixIcon';
-export class DsHelperText extends PureComponent {
-    static defaultProps = DsHelperTextDefaultProps;
-    render() {
-        const { helperText, color, success, error, ...formHelperTextProps } = this.props;
-        const customColor = success ? 'success' : color;
-        const iconClassName = (error && 'ri-error-warning-fill') ||
-            (success && 'ri-checkbox-circle-fill') ||
-            false;
-        return (helperText && (_jsx(DsFormHelperText, { component: "div", color: customColor, error: error, ...formHelperTextProps, children: _jsxs(DsBox, { sx: {
-                    display: 'flex',
-                    justifyContent: 'start',
-                    alignItems: 'center',
-                    color: `${customColor}.main`
-                }, children: [iconClassName && (_jsx(DsRemixIcon, { className: iconClassName, color: "inherit", fontSize: "cool", sx: {
-                            mr: 'var(--ds-spacing-quickFreeze)',
-                            padding: 'var(--ds-spacing-deepFreeze)'
-                        } })), _jsxs(DsTypography, { variant: "bodyRegularSmall", color: "inherit", sx: { pl: 'var(--ds-spacing-deepFreeze)' }, children: [helperText, "\u200B"] })] }) })));
-    }
-}
+export const DsHelperText = (props) => {
+    const { helperText, color, success, error, ...formHelperTextProps } = props;
+    const customColor = success ? 'success' : color;
+    const iconClassName = (error && 'ri-error-warning-fill') ||
+        (success && 'ri-checkbox-circle-fill') ||
+        false;
+    return (helperText && (_jsx(DsFormHelperText, { component: "div", color: customColor, error: error, ...formHelperTextProps, children: _jsxs(DsBox, { sx: {
+                display: 'flex',
+                justifyContent: 'start',
+                alignItems: 'center',
+                color: `${customColor}.main`
+            }, children: [iconClassName && (_jsx(DsRemixIcon, { className: iconClassName, color: "inherit", fontSize: "cool", sx: {
+                        mr: 'var(--ds-spacing-quickFreeze)',
+                        padding: 'var(--ds-spacing-deepFreeze)'
+                    } })), _jsxs(DsTypography, { variant: "bodyRegularSmall", color: "inherit", sx: { pl: 'var(--ds-spacing-deepFreeze)' }, children: [helperText, "\u200B"] })] }) })));
+};

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

@@ -1 +1,5 @@
-export declare const DsHelperTextOverrides: {};
+export declare const DsHelperTextOverrides: {
+    MuiFormHelperText: {
+        defaultProps: import("./DsHelperText.Types").DsHelperTextProps;
+    };
+};

package/dist/Components/DsHelperText/DsHelperText.Overrides.js

@@ -1 +1,6 @@
-export const DsHelperTextOverrides = {};
+import { DsHelperTextDefaultProps } from "./DsHelperText.Types";
+export const DsHelperTextOverrides = {
+    MuiFormHelperText: {
+        defaultProps: DsHelperTextDefaultProps
+    }
+};

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

@@ -1,12 +1,3 @@
-import * as React from 'react';
-import { DsImageProps, DsImageState } from './DsImage.Types';
-export declare class DsImage extends React.Component<DsImageProps, DsImageState> {
-    state: DsImageState;
-    handleSetLoadedStage: () => void;
-    handleSetErrorStage: () => void;
-    hasSource: () => boolean;
-    renderLoadingComponent: () => false | import("react/jsx-runtime").JSX.Element;
-    renderErrorComponent: () => false | import("react/jsx-runtime").JSX.Element;
-    renderPictureComponent: () => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsImageProps } from './DsImage.Types';
+export declare const DsImage: FC<DsImageProps>;