@am92/react-design-system 2.7.8 → 2.8.0

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

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

package/dist/Components/DsAppBar/DsAppBar.Component.js

@@ -1,30 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import { DsBox } from '../DsBox';
 import { DsTypography } from '../DsTypography';
 import { DsStack } from '../DsStack';
-import { DsAppBarDefaultProps } from './DsAppBar.Types';
-export class DsAppBar extends PureComponent {
-    static defaultProps = DsAppBarDefaultProps;
-    render() {
-        const { navigation, appBarTitle, actions, ...appBarProps } = this.props;
-        const contentJSX = typeof appBarTitle === 'string' ? (_jsx(DsTypography, { variant: "headingBoldSmall", color: "inherit", children: appBarTitle })) : (appBarTitle);
-        return (_jsx(AppBar, { ...appBarProps, children: _jsxs(Toolbar, { children: [navigation && (_jsx(DsBox, { sx: {
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            pr: 'var(--ds-spacing-bitterCold)'
-                        }, children: navigation })), _jsx(DsBox, { sx: {
-                            display: 'inline-flex',
-                            justifyContent: 'start',
-                            alignItems: 'center',
-                            flexGrow: 1
-                        }, children: contentJSX }), actions && (_jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-bitterCold)", sx: {
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            ml: 'var(--ds-spacing-bitterCold)'
-                        }, children: actions }))] }) }));
-    }
-}
+export const DsAppBar = (props) => {
+    const { navigation, appBarTitle, actions, ...appBarProps } = props;
+    const contentJSX = typeof appBarTitle === 'string' ? (_jsx(DsTypography, { variant: "headingBoldSmall", color: "inherit", children: appBarTitle })) : (appBarTitle);
+    return (_jsx(AppBar, { ...appBarProps, children: _jsxs(Toolbar, { children: [navigation && (_jsx(DsBox, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        pr: 'var(--ds-spacing-bitterCold)'
+                    }, children: navigation })), _jsx(DsBox, { sx: {
+                        display: 'inline-flex',
+                        justifyContent: 'start',
+                        alignItems: 'center',
+                        flexGrow: 1
+                    }, children: contentJSX }), actions && (_jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-bitterCold)", sx: {
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        ml: 'var(--ds-spacing-bitterCold)'
+                    }, children: actions }))] }) }));
+};

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

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

package/dist/Components/DsBottomSheet/DsBottomSheet.Component.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import { DsRemixIcon } from '../DsRemixIcon';
 import { DsTypography } from '../DsTypography';
 import { DsIconButton } from '../DsIconButton';
@@ -10,76 +9,74 @@ import { DsDialogContent } from '../DsDialogContent';
 import { DsButton } from '../DsButton';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsPaper } from '../DsPaper';
-export class DsBottomSheet extends PureComponent {
-    static defaultProps = DsBottomSheetDefaultProps;
-    handleDrawerClose = (event, reason) => {
-        const { onClose } = this.props;
+export const DsBottomSheet = (inProps) => {
+    const props = { ...DsBottomSheetDefaultProps, ...inProps };
+    const handleDrawerClose = (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 { kicker, title, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, ...DrawerProps } = this.props;
-        const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
-        const isFlushed = primaryButtonText &&
-            !secondaryButtonText &&
-            primaryButtonProps &&
-            primaryButtonProps?.variant === 'flushed';
-        const accessibilityProps = {};
-        if (title) {
-            accessibilityProps['aria-labelledby'] = title;
-        }
-        if (kicker) {
-            accessibilityProps['aria-describedby'] = kicker;
-        }
-        return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: "bottom", PaperProps: {
-                ...PaperProps,
-                sx: {
-                    background: 'transparent',
-                    maxHeight: 'var(--ds-rules-bottomSheetWorkingAreaHeight)',
-                    ...PaperProps?.sx
-                }
-            }, onClose: this.handleDrawerClose, children: [showClose && (_jsx(DsIconButton, { onClick: this.handleCloseClick, ...CloseIconButtonProps, sx: {
-                        flexGrow: 0,
-                        alignSelf: 'center',
-                        backgroundColor: 'var(--ds-colour-iconDefault)',
-                        color: 'var(--ds-colour-iconDisabled)',
-                        borderRadius: '50%',
-                        p: 'var(--ds-spacing-glacial)',
-                        mb: 'var(--ds-spacing-bitterCold)',
-                        ...CloseIconButtonProps?.sx
-                    }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), _jsxs(DsPaper, { ...ContainerProps, sx: {
-                        minHeight: 0,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        flexGrow: 1,
-                        pt: 'var(--ds-spacing-mild)',
-                        borderTopLeftRadius: 'var(--ds-radius-bitterCold)',
-                        borderTopRightRadius: 'var(--ds-radius-bitterCold)',
-                        pb: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
-                        ...ContainerProps?.sx
-                    }, children: [kicker && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "text.tertiary", ...KickerProps, sx: {
-                                px: 'var(--ds-spacing-bitterCold)',
-                                mb: 'var(--ds-spacing-quickFreeze)',
-                                textTransform: 'uppercase',
-                                ...KickerProps?.sx
-                            }, children: kicker })), title && (_jsx(DsDialogTitle, { ...TitleProps, sx: {
-                                mb: 'var(--ds-spacing-zero)',
-                                px: 'var(--ds-spacing-bitterCold)',
-                                ...TitleProps?.sx
-                            }, children: title })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
-                                px: 'var(--ds-spacing-bitterCold)',
-                                marginTop: 'var(--ds-spacing-mild)',
-                                ...ContentProps?.sx
-                            }, children: children })), actionsAvailable && (_jsxs(DsDialogActions, { ...ActionsProps, sx: {
-                                px: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
-                                ...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 }))] }))] })] }));
+    const { kicker, title, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, ...DrawerProps } = props;
+    const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
+    const isFlushed = primaryButtonText &&
+        !secondaryButtonText &&
+        primaryButtonProps &&
+        primaryButtonProps?.variant === 'flushed';
+    const accessibilityProps = {};
+    if (title) {
+        accessibilityProps['aria-labelledby'] = title;
+    }
+    if (kicker) {
+        accessibilityProps['aria-describedby'] = kicker;
     }
-}
+    return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: "bottom", PaperProps: {
+            ...PaperProps,
+            sx: {
+                background: 'transparent',
+                maxHeight: 'var(--ds-rules-bottomSheetWorkingAreaHeight)',
+                ...PaperProps?.sx
+            }
+        }, onClose: handleDrawerClose, children: [showClose && (_jsx(DsIconButton, { onClick: handleCloseClick, ...CloseIconButtonProps, sx: {
+                    flexGrow: 0,
+                    alignSelf: 'center',
+                    backgroundColor: 'var(--ds-colour-iconDefault)',
+                    color: 'var(--ds-colour-iconDisabled)',
+                    borderRadius: '50%',
+                    p: 'var(--ds-spacing-glacial)',
+                    mb: 'var(--ds-spacing-bitterCold)',
+                    ...CloseIconButtonProps?.sx
+                }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), _jsxs(DsPaper, { ...ContainerProps, sx: {
+                    minHeight: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    pt: 'var(--ds-spacing-mild)',
+                    borderTopLeftRadius: 'var(--ds-radius-bitterCold)',
+                    borderTopRightRadius: 'var(--ds-radius-bitterCold)',
+                    pb: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
+                    ...ContainerProps?.sx
+                }, children: [kicker && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "text.tertiary", ...KickerProps, sx: {
+                            px: 'var(--ds-spacing-bitterCold)',
+                            mb: 'var(--ds-spacing-quickFreeze)',
+                            textTransform: 'uppercase',
+                            ...KickerProps?.sx
+                        }, children: kicker })), title && (_jsx(DsDialogTitle, { ...TitleProps, sx: {
+                            mb: 'var(--ds-spacing-zero)',
+                            px: 'var(--ds-spacing-bitterCold)',
+                            ...TitleProps?.sx
+                        }, children: title })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
+                            px: 'var(--ds-spacing-bitterCold)',
+                            marginTop: 'var(--ds-spacing-mild)',
+                            ...ContentProps?.sx
+                        }, children: children })), actionsAvailable && (_jsxs(DsDialogActions, { ...ActionsProps, sx: {
+                            px: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
+                            ...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/DsButton/DsButton.Component.d.ts

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

package/dist/Components/DsButton/DsButton.Component.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import Button from '@mui/material/Button';
-export class DsButton extends PureComponent {
-    render() {
-        const { children, ...buttonProps } = this.props;
-        return (_jsx(Button, { ...buttonProps, children: _jsx("span", { children: children }) }));
-    }
-}
+export const DsButton = (props) => {
+    const { children, ...buttonProps } = props;
+    return (_jsx(Button, { ...buttonProps, children: _jsx("span", { children: children }) }));
+};

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

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

package/dist/Components/DsButtonGroup/DsButtonGroup.Component.js

@@ -1,22 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { DsStack } from '../DsStack';
 import { DsButtonGroupDefaultProps } from './DsButtonGroup.Types';
-export class DsButtonGroup extends PureComponent {
-    static defaultProps = DsButtonGroupDefaultProps;
-    getMergedProps = () => {
-        return { ...DsButtonGroupDefaultProps, ...this.props };
+export const DsButtonGroup = (inProps) => {
+    const props = { ...DsButtonGroupDefaultProps, ...inProps };
+    const getMergedProps = () => {
+        return { ...DsButtonGroupDefaultProps, ...props };
     };
-    render() {
-        const mergedProps = this.getMergedProps();
-        const { fullWidth, noPadding, size, sx, children, ...restProps } = mergedProps;
-        const childrenArray = children instanceof Array ? children : [children];
-        return (_jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-frostbite)", sx: {
-                bgcolor: 'var(--ds-colour-surfacePrimary)',
-                p: noPadding
-                    ? 'var(--ds-spacing-zero)'
-                    : 'var(--ds-spacing-bitterCold)',
-                ...sx
-            }, ...restProps, children: childrenArray.map((child, key) => child && React.cloneElement(child, { key, size, fullWidth })) }));
-    }
-}
+    const mergedProps = getMergedProps();
+    const { fullWidth, noPadding, size, sx, children, ...restProps } = mergedProps;
+    const childrenArray = children instanceof Array ? children : [children];
+    return (_jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-frostbite)", sx: {
+            bgcolor: 'var(--ds-colour-surfacePrimary)',
+            p: noPadding
+                ? 'var(--ds-spacing-zero)'
+                : 'var(--ds-spacing-bitterCold)',
+            ...sx
+        }, ...restProps, children: childrenArray.map((child, key) => child && React.cloneElement(child, { key, size, fullWidth })) }));
+};

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
 import { DsCarouselNavigationProps } from '../DsCarousel.Types';
-export default class DsCarouselNavigation extends React.PureComponent<DsCarouselNavigationProps> {
-    render(): false | import("react/jsx-runtime").JSX.Element;
-}
+declare const DsCarouselNavigation: React.FC<DsCarouselNavigationProps>;
+export default DsCarouselNavigation;

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

@@ -1,48 +1,46 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { DsIconButton } from '../../DsIconButton';
 import { DsRemixIcon } from '../../DsRemixIcon';
-export default class DsCarouselNavigation extends React.PureComponent {
-    render() {
-        const { uid, isEnabled, NavigationProps = {} } = this.props;
-        if (!isEnabled) {
-            return false;
-        }
-        const { PrevButtonProps = {}, NextButtonProps = {} } = NavigationProps;
-        const { IconProps: PrevIconProps, ...PrevIconButtonProps } = PrevButtonProps;
-        const { IconProps: NextIconProps, ...NextIconButtonProps } = NextButtonProps;
-        return (_jsxs(_Fragment, { children: [_jsx(DsIconButton, { className: `swiper-button-prev-${uid}`, ...PrevIconButtonProps, sx: {
-                        position: 'absolute',
-                        top: '50%',
-                        transform: 'translateY(-50%)',
-                        left: 'var(--ds-spacing-mild)',
-                        p: 'var(--ds-spacing-quickFreeze)',
-                        borderRadius: 'var(--ds-radius-bitterCold)',
-                        backgroundColor: 'var(--ds-colour-surfaceSecondary)',
-                        zIndex: 1,
-                        '&:hover': {
-                            backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
-                        },
-                        '&.Mui-disabled': {
-                            pointerEvents: 'unset'
-                        },
-                        ...PrevIconButtonProps?.sx
-                    }, children: _jsx(DsRemixIcon, { className: "ri-arrow-left-s-line", ...PrevIconProps }) }), _jsx(DsIconButton, { className: `swiper-button-next-${uid}`, ...NextIconButtonProps, sx: {
-                        position: 'absolute',
-                        top: '50%',
-                        transform: 'translateY(-50%)',
-                        right: 'var(--ds-spacing-mild)',
-                        p: 'var(--ds-spacing-quickFreeze)',
-                        borderRadius: 'var(--ds-radius-bitterCold)',
-                        backgroundColor: 'var(--ds-colour-surfaceSecondary)',
-                        zIndex: 1,
-                        '&:hover': {
-                            backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
-                        },
-                        '&.Mui-disabled': {
-                            pointerEvents: 'unset'
-                        },
-                        ...NextIconButtonProps?.sx
-                    }, children: _jsx(DsRemixIcon, { className: "ri-arrow-right-s-line", ...NextIconProps }) })] }));
+const DsCarouselNavigation = (props) => {
+    const { uid, isEnabled, NavigationProps = {} } = props;
+    if (!isEnabled) {
+        return false;
     }
-}
+    const { PrevButtonProps = {}, NextButtonProps = {} } = NavigationProps;
+    const { IconProps: PrevIconProps, ...PrevIconButtonProps } = PrevButtonProps;
+    const { IconProps: NextIconProps, ...NextIconButtonProps } = NextButtonProps;
+    return (_jsxs(_Fragment, { children: [_jsx(DsIconButton, { className: `swiper-button-prev-${uid}`, ...PrevIconButtonProps, sx: {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    left: 'var(--ds-spacing-mild)',
+                    p: 'var(--ds-spacing-quickFreeze)',
+                    borderRadius: 'var(--ds-radius-bitterCold)',
+                    backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+                    zIndex: 1,
+                    '&:hover': {
+                        backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
+                    },
+                    '&.Mui-disabled': {
+                        pointerEvents: 'unset'
+                    },
+                    ...PrevIconButtonProps?.sx
+                }, children: _jsx(DsRemixIcon, { className: "ri-arrow-left-s-line", ...PrevIconProps }) }), _jsx(DsIconButton, { className: `swiper-button-next-${uid}`, ...NextIconButtonProps, sx: {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    right: 'var(--ds-spacing-mild)',
+                    p: 'var(--ds-spacing-quickFreeze)',
+                    borderRadius: 'var(--ds-radius-bitterCold)',
+                    backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+                    zIndex: 1,
+                    '&:hover': {
+                        backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
+                    },
+                    '&.Mui-disabled': {
+                        pointerEvents: 'unset'
+                    },
+                    ...NextIconButtonProps?.sx
+                }, children: _jsx(DsRemixIcon, { className: "ri-arrow-right-s-line", ...NextIconProps }) })] }));
+};
+export default DsCarouselNavigation;

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

@@ -1,8 +1,4 @@
 import * as React from 'react';
 import { DsCarouselPaginationProps } from '../DsCarousel.Types';
-export default class DsCarouselPagination extends React.PureComponent<DsCarouselPaginationProps> {
-    paginationRef: React.RefObject<HTMLDivElement>;
-    componentDidMount(): void;
-    handleFirstTransition: () => void;
-    render(): false | import("react/jsx-runtime").JSX.Element;
-}
+declare const DsCarouselPagination: React.FC<DsCarouselPaginationProps>;
+export default DsCarouselPagination;