@am92/react-design-system 2.9.9 → 2.9.12

package/dist/Components/DsAutocomplete/DsAutocomplete.Types.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { DsRemixIcon } from '../DsRemixIcon';
 export const DsAutocompleteDefaultProps = {
     popupIcon: _jsx(DsRemixIcon, { className: "ri-arrow-down-s-line" }),
-    clearIcon: _jsx(DsRemixIcon, { color: "secondary", className: "ri-close-line" }),
+    clearIcon: _jsx(DsRemixIcon, { className: "ri-close-fill" }),
     multiple: false,
     disableClearable: false,
     freeSolo: false,

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

@@ -9,7 +9,7 @@ import { DsDialogContent } from '../DsDialogContent';
 import { DsButton } from '../DsButton';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsPaper } from '../DsPaper';
-export const DsBottomSheet = (inProps) => {
+export const DsBottomSheet = inProps => {
     const props = { ...DsBottomSheetDefaultProps, ...inProps };
     const handleDrawerClose = (event, reason) => {
         const { onClose } = props;
@@ -23,7 +23,7 @@ export const DsBottomSheet = (inProps) => {
             onClose(event, 'backdropClick');
         }
     };
-    const { kicker, title, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, ...DrawerProps } = props;
+    const { kicker, title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, DescriptionProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, ...DrawerProps } = props;
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const isFlushed = primaryButtonText &&
         !secondaryButtonText &&
@@ -41,6 +41,7 @@ export const DsBottomSheet = (inProps) => {
             sx: {
                 background: 'transparent',
                 maxHeight: 'var(--ds-rules-bottomSheetWorkingAreaHeight)',
+                // top: 'var(--ds-spacing-bitterCold)',
                 ...PaperProps?.sx
             }
         }, onClose: handleDrawerClose, children: [showClose && (_jsx(DsIconButton, { onClick: handleCloseClick, ...CloseIconButtonProps, sx: {
@@ -58,9 +59,9 @@ export const DsBottomSheet = (inProps) => {
                     flexDirection: 'column',
                     flexGrow: 1,
                     pt: 'var(--ds-spacing-mild)',
+                    pb: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
                     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)',
@@ -71,12 +72,18 @@ export const DsBottomSheet = (inProps) => {
                             mb: 'var(--ds-spacing-zero)',
                             px: 'var(--ds-spacing-bitterCold)',
                             ...TitleProps?.sx
-                        }, children: title })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
+                        }, children: title })), description && (_jsx(DsTypography, { variant: "bodyRegularMedium", color: "text.secondary", ...DescriptionProps, sx: {
+                            px: 'var(--ds-spacing-bitterCold)',
+                            mt: 'var(--ds-spacing-quickFreeze)',
+                            ...DescriptionProps?.sx
+                        }, children: description })), 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)',
+                            mt: 'var(--ds-spacing-bitterCold)',
+                            pt: 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/DsBottomSheet/DsBottomSheet.Types.d.ts

@@ -10,11 +10,13 @@ import { DsTypographyProps } from '../DsTypography';
 export interface DsBottomSheetProps extends Omit<DsDrawerProps, 'title'> {
     kicker?: string;
     title?: string;
+    description?: string;
     showClose?: boolean;
     primaryButtonText?: DsButtonProps['children'];
     secondaryButtonText?: DsButtonProps['children'];
     ContainerProps?: DsPaperProps;
     KickerProps?: DsTypographyProps;
+    DescriptionProps?: DsTypographyProps;
     TitleProps?: DsDialogTitleProps;
     CloseIconButtonProps?: DsIconButtonProps;
     CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsDialogDefaultProps } from './DsDialog.Types';
 import { DsDialogTitle } from '../DsDialogTitle';
 import { Dialog } from '@mui/material';
 import { DsIconButton } from '../DsIconButton';
@@ -7,20 +8,15 @@ import { DsTypography } from '../DsTypography';
 import { DsDialogContent } from '../DsDialogContent';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsButton } from '../DsButton';
-export const DsDialog = (props) => {
-    const handleDialogClose = (event, reason) => {
-        const { onClose } = props;
-        if (typeof onClose === 'function') {
-            onClose(event, reason);
-        }
-    };
+export const DsDialog = inProps => {
+    const props = { ...DsDialogDefaultProps, ...inProps };
     const handleCloseClick = (event) => {
         const { onClose } = props;
         if (typeof onClose === 'function') {
             onClose(event, 'backdropClick');
         }
     };
-    const { title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
+    const { title, description, kicker, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const accessibilityProps = {};
     const isFlushed = primaryButtonText &&
@@ -48,14 +44,22 @@ export const DsDialog = (props) => {
                 },
                 ...PaperProps?.sx
             }
-        }, children: [title && (_jsx(DsDialogTitle, { ...TitleProps, sx: {
+        }, children: [kicker && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "var(--ds-colour-typoTertiary)", ...KickerProps, sx: {
+                    px: {
+                        xs: 'var(--ds-spacing-bitterCold)',
+                        md: 'var(--ds-spacing-warm)'
+                    },
+                    mb: 'var(--ds-spacing-quickFreeze)',
+                    textTransform: 'uppercase',
+                    ...KickerProps?.sx
+                }, children: kicker })), 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: {
+                }, children: title })), description && (_jsx(DsTypography, { variant: "bodyRegularMedium", color: "var(--ds-colour-typoSecondary)", ...DescriptionProps, sx: {
                     px: {
                         xs: 'var(--ds-spacing-bitterCold)',
                         md: 'var(--ds-spacing-warm)'
@@ -88,6 +92,13 @@ export const DsDialog = (props) => {
                             xs: 'var(--ds-spacing-bitterCold)',
                             md: 'var(--ds-spacing-warm)'
                         },
+                    pt: isFlushed
+                        ? undefined
+                        : {
+                            xs: 'var(--ds-spacing-bitterCold)',
+                            md: 'var(--ds-spacing-warm)'
+                        },
+                    mt: 'var(--ds-spacing-glacial)',
                     ...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 }))] }))] }));
+                }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "medium", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "medium", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
 };

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

@@ -9,12 +9,14 @@ import { DsButtonProps } from '../DsButton';
 export interface DsDialogProps extends DialogProps {
     title?: string;
     description?: string;
+    kicker?: string;
     showClose?: boolean;
     primaryButtonText?: DsButtonProps['children'];
     primaryButtonProps?: Omit<DsButtonProps, 'ref'>;
     secondaryButtonText?: DsButtonProps['children'];
     secondaryButtonProps?: Omit<DsButtonProps, 'ref'>;
     TitleProps?: DsDialogTitleProps;
+    KickerProps?: DsTypographyProps;
     DescriptionProps?: DsTypographyProps;
     CloseIconButtonProps?: DsIconButtonProps;
     CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;

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

@@ -2,7 +2,7 @@ export declare const DsDialogActionsOverrides: {
     MuiDialogActions: {
         styleOverrides: {
             root: {
-                marginTop: string;
+                boxShadow: string;
                 padding: string;
                 '> *': {
                     flex: number;

package/dist/Components/DsDialogActions/DsDialogActions.Overrides.js

@@ -2,7 +2,7 @@ export const DsDialogActionsOverrides = {
     MuiDialogActions: {
         styleOverrides: {
             root: {
-                marginTop: 'var(--ds-spacing-mild)',
+                boxShadow: 'var(--ds-elevation-1)',
                 padding: 'var(--ds-spacing-zero)',
                 '> *': {
                     flex: 1

package/dist/Theme/componentOverrides.d.ts

@@ -1084,7 +1084,7 @@ declare const componentOverrides: {
     MuiDialogActions: {
         styleOverrides: {
             root: {
-                marginTop: string;
+                boxShadow: string;
                 padding: string;
                 '> *': {
                     flex: number;

package/dist/Theme/rules.js

@@ -8,7 +8,7 @@ const dsRules = {
     drawerWidth: '240px',
     drawerMiniWidth: '56px',
     dialogMdMaxWidth: '600px',
-    bottomSheetWorkingAreaHeight: '68vh',
+    bottomSheetWorkingAreaHeight: 'calc(100vh - var(--ds-spacing-bitterCold))',
     avatarSSize: '24px',
     avatarMSize: '32px',
     avatarLSize: '40px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.9.9",
+  "version": "2.9.12",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",