@am92/react-design-system 2.10.1 → 3.0.1-beta.0

package/dist/Components/DsChip/DsChip.Overrides.js

@@ -2,141 +2,144 @@ import { DsChipDefaultProps } from './DsChip.Types';
 export const DsChipOverrides = {
     MuiChip: {
         defaultProps: DsChipDefaultProps,
-        variants: [
-            {
-                props: { variant: 'chip' },
-                style: {
-                    border: 'none',
-                    borderRadius: 'var(--ds-radius-quickFreeze)',
-                    paddingLeft: 'var(--ds-spacing-glacial)',
-                    paddingRight: 'var(--ds-spacing-glacial)',
-                    height: '20px',
-                    '.MuiChip-icon': {
-                        fontSize: 'var(--ds-typo-fontSizeIceAge)',
-                        marginRight: 'var(--ds-spacing-quickFreeze)',
-                        marginLeft: 'var(--ds-spacing-zero)',
-                        color: 'inherit'
+        styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { variant: 'chip' },
+                        style: {
+                            border: 'none',
+                            borderRadius: 'var(--ds-radius-quickFreeze)',
+                            paddingLeft: 'var(--ds-spacing-glacial)',
+                            paddingRight: 'var(--ds-spacing-glacial)',
+                            height: '20px',
+                            '.MuiChip-icon': {
+                                fontSize: 'var(--ds-typo-fontSizeIceAge)',
+                                marginRight: 'var(--ds-spacing-quickFreeze)',
+                                marginLeft: 'var(--ds-spacing-zero)',
+                                color: 'inherit'
+                            },
+                            '> .MuiChip-label': {
+                                paddingLeft: 'var(--ds-spacing-zero)',
+                                paddingRight: 'var(--ds-spacing-zero)'
+                            }
+                        }
                     },
-                    '> .MuiChip-label': {
-                        paddingLeft: 'var(--ds-spacing-zero)',
-                        paddingRight: 'var(--ds-spacing-zero)'
+                    {
+                        props: { variant: 'chip', type: 'status' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
+                            fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
+                            lineHeight: 'var(--ds-typo-supportRegularMetadata-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-supportRegularMetadata-letterSpacing)',
+                            textTransform: 'uppercase',
+                            paddingTop: 'var(--ds-spacing-quickFreeze)',
+                            paddingBottom: 'var(--ds-spacing-quickFreeze)',
+                            backgroundColor: 'var(--ds-colour-supportTypical)',
+                            color: 'var(--ds-colour-typoOnSurface)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'success'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportPositive)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'warning'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportWarning)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'error'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportNegative)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'status',
+                            color: 'info'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-neutral1)',
+                            color: 'var(--ds-colour-typoPrimary)'
+                        }
+                    },
+                    {
+                        props: { variant: 'chip', type: 'nudge' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
+                            fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',
+                            lineHeight: 'var(--ds-typo-supportRegularInfo-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-supportRegularInfo-letterSpacing)',
+                            textTransform: 'none',
+                            paddingTop: 'var(--ds-spacing-deepFreeze)',
+                            paddingBottom: 'var(--ds-spacing-deepFreeze)',
+                            backgroundColor: 'var(--ds-colour-supportTypicalNeutral)',
+                            color: 'var(--ds-colour-supportTypical)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'success'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportPositiveNeutral)',
+                            color: 'var(--ds-colour-supportPositive)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'warning'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportWarningNeutral)',
+                            color: 'var(--ds-colour-supportWarning)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'error'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-supportNegativeNeutral)',
+                            color: 'var(--ds-colour-supportNegative)'
+                        }
+                    },
+                    {
+                        props: {
+                            variant: 'chip',
+                            type: 'nudge',
+                            color: 'info'
+                        },
+                        style: {
+                            backgroundColor: 'var(--ds-colour-neutral1)',
+                            color: 'var(--ds-colour-typoPrimary)'
+                        }
                     }
-                }
-            },
-            {
-                props: { variant: 'chip', type: 'status' },
-                style: {
-                    fontWeight: 'var(--ds-typo-supportRegularMetadata-fontWeight)',
-                    fontSize: 'var(--ds-typo-supportRegularMetadata-fontSize)',
-                    lineHeight: 'var(--ds-typo-supportRegularMetadata-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-supportRegularMetadata-letterSpacing)',
-                    textTransform: 'uppercase',
-                    paddingTop: 'var(--ds-spacing-quickFreeze)',
-                    paddingBottom: 'var(--ds-spacing-quickFreeze)',
-                    backgroundColor: 'var(--ds-colour-supportTypical)',
-                    color: 'var(--ds-colour-typoOnSurface)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'success'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportPositive)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'warning'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportWarning)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'error'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportNegative)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'status',
-                    color: 'info'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-neutral1)',
-                    color: 'var(--ds-colour-typoPrimary)'
-                }
-            },
-            {
-                props: { variant: 'chip', type: 'nudge' },
-                style: {
-                    fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
-                    fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',
-                    lineHeight: 'var(--ds-typo-supportRegularInfo-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-supportRegularInfo-letterSpacing)',
-                    textTransform: 'none',
-                    paddingTop: 'var(--ds-spacing-deepFreeze)',
-                    paddingBottom: 'var(--ds-spacing-deepFreeze)',
-                    backgroundColor: 'var(--ds-colour-supportTypicalNeutral)',
-                    color: 'var(--ds-colour-supportTypical)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'success'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportPositiveNeutral)',
-                    color: 'var(--ds-colour-supportPositive)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'warning'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportWarningNeutral)',
-                    color: 'var(--ds-colour-supportWarning)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'error'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-supportNegativeNeutral)',
-                    color: 'var(--ds-colour-supportNegative)'
-                }
-            },
-            {
-                props: {
-                    variant: 'chip',
-                    type: 'nudge',
-                    color: 'info'
-                },
-                style: {
-                    backgroundColor: 'var(--ds-colour-neutral1)',
-                    color: 'var(--ds-colour-typoPrimary)'
-                }
+                ]
             }
-        ],
-        styleOverrides: {}
+        }
     }
 };

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

@@ -8,6 +8,7 @@ import { DsTypography } from '../DsTypography';
 import { DsDialogContent } from '../DsDialogContent';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsButton } from '../DsButton';
+import { mergeSlotProps } from '../../utils';
 export const DsDialog = inProps => {
     const props = { ...DsDialogDefaultProps, ...inProps };
     const handleCloseClick = (event) => {
@@ -16,7 +17,7 @@ export const DsDialog = inProps => {
             onClose(event, 'backdropClick');
         }
     };
-    const { title, description, kicker, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
+    const { title, description, kicker, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, children, slotProps, ...DialogProps } = props;
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const accessibilityProps = {};
     const isFlushed = primaryButtonText &&
@@ -29,21 +30,26 @@ export const DsDialog = inProps => {
     if (description) {
         accessibilityProps['aria-describedby'] = description;
     }
-    return (_jsxs(Dialog, { keepMounted: true, ...accessibilityProps, ...DialogProps, PaperProps: {
-            ...PaperProps,
-            sx: {
-                pb: isFlushed
-                    ? undefined
-                    : {
-                        xs: 'var(--ds-spacing-bitterCold)',
+    const paperProps = {
+        ...PaperProps,
+        ...slotProps?.paper
+    };
+    return (_jsxs(Dialog, { keepMounted: true, ...accessibilityProps, ...DialogProps, slotProps: {
+            ...slotProps,
+            paper: mergeSlotProps(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)'
                     },
-                pt: {
-                    xs: 'var(--ds-spacing-mild)',
-                    md: 'var(--ds-spacing-warm)'
                 },
-                ...PaperProps?.sx
-            }
+            }),
         }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoTertiary)', ...KickerProps, sx: {
                     px: {
                         xs: 'var(--ds-spacing-bitterCold)',

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

@@ -1,4 +1,4 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 import { DsDividerProps } from './DsDivider.Types';
 export declare const DsDividerOverrides: {
     MuiDivider: {
@@ -6,14 +6,14 @@ export declare const DsDividerOverrides: {
         styleOverrides: {
             root: {
                 borderColor: string;
+                variants: {
+                    props: Partial<DsDividerProps>;
+                    style: CSSObject;
+                }[];
             };
             light: {
                 borderColor: string;
             };
         };
-        variants: {
-            props: Partial<DsDividerProps>;
-            style: CSSInterpolation;
-        }[];
     };
 };

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

@@ -4,41 +4,41 @@ export const DsDividerOverrides = {
         defaultProps: DsDividerDefaultProps,
         styleOverrides: {
             root: {
-                borderColor: 'var(--ds-colour-strokeDefault)'
-            },
-            light: {
-                borderColor: 'var(--ds-colour-strokeDisabled)'
-            }
-        },
-        variants: [
-            {
-                props: { 'ds-size': 'M' },
-                style: {
-                    '&::before': {
-                        borderWidth: '0.5px'
-                    },
-                    '&::after': {
-                        borderWidth: '0.5px'
+                borderColor: 'var(--ds-colour-strokeDefault)',
+                variants: [
+                    {
+                        props: { 'ds-size': 'M' },
+                        style: {
+                            '&::before': {
+                                borderWidth: '0.5px'
+                            },
+                            '&::after': {
+                                borderWidth: '0.5px'
+                            },
+                            '&:not(.MuiDivider-withChildren)': {
+                                borderWidth: '0.5px'
+                            }
+                        }
                     },
-                    '&:not(.MuiDivider-withChildren)': {
-                        borderWidth: '0.5px'
+                    {
+                        props: { 'ds-size': 'L' },
+                        style: {
+                            '&::before': {
+                                borderWidth: '6px'
+                            },
+                            '&::after': {
+                                borderWidth: '6px'
+                            },
+                            '&:not(.MuiDivider-withChildren)': {
+                                borderWidth: '6px'
+                            }
+                        }
                     }
-                }
+                ]
             },
-            {
-                props: { 'ds-size': 'L' },
-                style: {
-                    '&::before': {
-                        borderWidth: '6px'
-                    },
-                    '&::after': {
-                        borderWidth: '6px'
-                    },
-                    '&:not(.MuiDivider-withChildren)': {
-                        borderWidth: '6px'
-                    }
-                }
+            light: {
+                borderColor: 'var(--ds-colour-strokeDisabled)'
             }
-        ]
+        }
     }
 };

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

@@ -1,2 +1,2 @@
-import type { IDsFileUploaderProps, TContentType, TMultiple } from './DsFileUploader.Types';
-export declare const DsFileUploader: <Multiple extends TMultiple, ContentType extends TContentType>(inProps: IDsFileUploaderProps<Multiple, ContentType>) => import("react/jsx-runtime").JSX.Element;
+import type { DsFileUploaderProps, TContentType, TMultiple } from './DsFileUploader.Types';
+export declare const DsFileUploader: <Multiple extends TMultiple, ContentType extends TContentType>(inProps: DsFileUploaderProps<Multiple, ContentType>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 export declare const DsFileUploaderOverrides: {
     DsFileUploader: {
-        defaultProps: import("./DsFileUploader.Types").IDsFileUploaderProps<import("./DsFileUploader.Types").TMultiple, "FILE">;
+        defaultProps: import("./DsFileUploader.Types").DsFileUploaderProps<import("./DsFileUploader.Types").TMultiple, "FILE">;
     };
 };

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

@@ -58,7 +58,7 @@ export type TErrorFile<CONTENT_TYPE> = {
     errorCode: TErrorCodes;
 };
 export type TErrorValue<Multiple, CONTENT_TYPE> = Multiple extends false ? TErrorFile<CONTENT_TYPE> | null : TErrorFile<CONTENT_TYPE>[];
-export interface IDsFileUploaderProps<Multiple extends TMultiple = true, ContentType extends TContentType = 'FILE'> {
+export interface DsFileUploaderProps<Multiple extends TMultiple = true, ContentType extends TContentType = 'FILE'> {
     InputLabelProps?: Omit<DsInputLabelProps, 'ref' | 'error' | 'success' | 'htmlFor' | 'disabled'>;
     /**
      * Name attribute of the input element.
@@ -177,7 +177,7 @@ export interface IDsFileUploaderDropZoneProps extends DsStackProps {
      * @param {TFileUploaderVariant} variant The variant of file uploader component.
      * @default 'FULL'
      */
-    variant?: IDsFileUploaderProps['variant'];
+    variant?: DsFileUploaderProps['variant'];
     /**
      * The `iconProps` component to be used for the file uploader.
      */
@@ -226,29 +226,29 @@ export interface IDsFileUploaderItemSegmentProps extends DsStackProps {
      * @param {string} name The name provided to the component.
      * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
      */
-    onPreview?: IDsFileUploaderProps['onPreview'];
+    onPreview?: DsFileUploaderProps['onPreview'];
     /**
      * Callback fired when an existing file is removed.
      *
      * @param {string} name The name provided to the component.
      * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
      */
-    onDelete?: IDsFileUploaderProps['onDelete'];
+    onDelete?: DsFileUploaderProps['onDelete'];
     /**
      * Callback fired when an download button is clicked for an existing file.
      *
      * @param {string} name The name provided to the component.
      * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
      */
-    onDownload?: IDsFileUploaderProps['onDownload'];
+    onDownload?: DsFileUploaderProps['onDownload'];
     /**
      slots prop is used to provide custom slots components to the file uploader
      */
-    slots?: IDsFileUploaderProps['slots'];
+    slots?: DsFileUploaderProps['slots'];
     /**
      slotPros used to provide custom props to the individual slots of the file uploader
      */
-    slotProps?: IDsFileUploaderProps['slotProps'];
+    slotProps?: DsFileUploaderProps['slotProps'];
 }
 export interface IDsFileUploaderActionButtonProps extends DsIconButtonProps {
     /**
@@ -308,5 +308,5 @@ export type TDsFileUploaderSlotProps = {
      */
     DownloadButton?: IDsFileUploaderActionButtonProps;
 };
-export declare const DsFileUploaderDefaultProps: IDsFileUploaderProps<TMultiple, 'FILE'>;
+export declare const DsFileUploaderDefaultProps: DsFileUploaderProps<TMultiple, 'FILE'>;
 export declare const DsFileUploaderDropzoneDefaultProps: IDsFileUploaderDropZoneProps;

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

@@ -1,8 +1,8 @@
-import type { IDsFileUploaderProps, TContentType, TErrorValue, TFile, TMultiple, TFileValue } from './DsFileUploader.Types';
+import type { DsFileUploaderProps, TContentType, TErrorValue, TFile, TMultiple, TFileValue } from './DsFileUploader.Types';
 export declare const mergeProps: <T extends Record<string, any>>(inProps: Partial<T>, defaultProps: T) => T;
 export declare const getFileTypeIcon: <ContentType extends TContentType>(file: TFile<ContentType>) => import("react/jsx-runtime").JSX.Element;
 export declare const humanizeFileSize: (bytes: number, decimals?: number) => string;
-export declare const getDefaultValue: <Multiple extends TMultiple, ContentType extends TContentType>(props: IDsFileUploaderProps<Multiple, ContentType>) => TFileValue<Multiple, ContentType> | null;
+export declare const getDefaultValue: <Multiple extends TMultiple, ContentType extends TContentType>(props: DsFileUploaderProps<Multiple, ContentType>) => TFileValue<Multiple, ContentType> | null;
 export declare const getValidProcessedFile: <Multiple extends TMultiple, ContentType extends TContentType>(filesToProcess: FileList, files: TFileValue<Multiple, ContentType> | null, accept: string, minSize?: number, maxSize?: number, contentType?: TContentType) => Promise<{
     valid: TFileValue<Multiple, ContentType>;
     invalid: TErrorValue<Multiple, ContentType>;

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

@@ -1,15 +1,11 @@
-import { CSSInterpolation } from '@mui/system';
+import { CSSObject } from '@mui/system';
 import { DsInputBaseProps } from './DsInputBase.Types';
 export declare const DsInputBaseOverrides: {
     MuiInputBase: {
         defaultProps: DsInputBaseProps;
-        variants: {
-            props: Partial<DsInputBaseProps>;
-            style: CSSInterpolation;
-        }[];
         styleOverrides: {
-            root: CSSInterpolation;
-            input: CSSInterpolation;
+            root: CSSObject;
+            input: CSSObject;
         };
     };
 };