@am92/react-design-system 3.0.1-beta.2 → 3.0.1-beta.3

package/dist/Components/DsAddItem/DsAddItem.Component.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { DsAddItemDefaultProps, DEFAULT_STEP_VALUE, } from "./DsAddItem.Types";
+import { DsAddItemDefaultProps } from "./DsAddItem.Types";
+import { calculateNewValue, isBelowMinValue } from "./DsAddItem.helpers";
 import STATE_STYLES from "../../Theme/STATE_STYLES";
-import { DsButtonBase } from "../DsButtonBase";
-import { DsBox } from "../DsBox";
+import { DsStack } from "../DsStack";
+import { DsFab } from "../DsFab";
 export const DsAddItem = (inProps) => {
     const mergedSlots = {
         ...DsAddItemDefaultProps.slots,
@@ -12,6 +13,22 @@ export const DsAddItem = (inProps) => {
     const mergedSlotProps = {
         ...DsAddItemDefaultProps.slotProps,
         ...(inProps.slotProps || {}),
+        LeftIconButton: {
+            ...DsAddItemDefaultProps.slotProps?.LeftIconButton,
+            ...inProps.slotProps?.LeftIconButton,
+            IconProps: {
+                ...DsAddItemDefaultProps.slotProps?.LeftIconButton?.IconProps,
+                ...inProps.slotProps?.LeftIconButton?.IconProps,
+            },
+        },
+        RightIconButton: {
+            ...DsAddItemDefaultProps.slotProps?.RightIconButton,
+            ...inProps.slotProps?.RightIconButton,
+            IconProps: {
+                ...DsAddItemDefaultProps.slotProps?.RightIconButton?.IconProps,
+                ...inProps.slotProps?.RightIconButton?.IconProps,
+            },
+        },
     };
     const props = {
         ...DsAddItemDefaultProps,
@@ -19,7 +36,7 @@ export const DsAddItem = (inProps) => {
         slots: mergedSlots,
         slotProps: mergedSlotProps,
     };
-    const { value, label, maxValue, minValue, step, slots, slotProps, disabled, onChange, name, loading, ...restProps } = props;
+    const { value, label, maxValue, minValue, step, slots, slotProps, disabled, onChange, name, color, wrapperProps, ...restProps } = props;
     const isControlled = typeof value === "number";
     const { LeftIconButton, RightIconButton, CounterText } = slots;
     // Internal state for count value, initialized based on control mode
@@ -31,25 +48,14 @@ export const DsAddItem = (inProps) => {
             setCountValue(value);
         }
     }, [value]);
-    const isAddDisabled = disabled || loading || (maxValue !== undefined && countValue >= maxValue);
-    const isSubtractDisabled = disabled || loading;
-    // Helper function to check if value is below minValue threshold
-    const isBelowMinValue = (value) => {
-        return minValue !== undefined && value < minValue;
-    };
-    // Helper function to calculate new value based on operation
-    const calculateNewValue = (operation) => {
-        const stepValue = step ?? DEFAULT_STEP_VALUE;
-        return operation === "add"
-            ? countValue + stepValue
-            : countValue - stepValue;
-    };
+    const isAddDisabled = disabled || (maxValue !== undefined && countValue >= maxValue);
+    const isSubtractDisabled = disabled;
     const handleAdd = (e) => {
         e.stopPropagation();
         if (!isAddDisabled) {
-            let newValue = calculateNewValue("add");
+            let newValue = calculateNewValue(countValue, step, "add");
             // Jump to minValue if increment would result in a value below minimum threshold
-            if (isBelowMinValue(newValue)) {
+            if (isBelowMinValue(newValue, minValue)) {
                 newValue = minValue;
             }
             if (!isControlled) {
@@ -62,9 +68,9 @@ export const DsAddItem = (inProps) => {
     const handleSubtract = (e) => {
         e.stopPropagation();
         if (!isSubtractDisabled) {
-            let newValue = calculateNewValue("subtract");
+            let newValue = calculateNewValue(countValue, step, "subtract");
             // Reset to 0 if would go negative or below minValue (back to "add" state)
-            if (newValue < 0 || isBelowMinValue(newValue)) {
+            if (newValue < 0 || isBelowMinValue(newValue, minValue)) {
                 newValue = 0;
             }
             if (!isControlled) {
@@ -74,32 +80,37 @@ export const DsAddItem = (inProps) => {
                 onChange(name, newValue, "decrement");
         }
     };
-    const fabSx = useMemo(() => ({
-        px: "var(--ds-spacing-glacial)",
-        pt: isEmptyCount ? "var(--ds-spacing-quickFreeze)" : 0,
-        pb: isEmptyCount ? "var(--ds-spacing-quickFreeze)" : 0,
+    const stackSx = useMemo(() => ({
         minWidth: "90px",
-        minHeight: "var(--ds-spacing-tepid)",
+        minHeight: "36px",
+        padding: "var(--ds-spacing-glacial)",
         borderRadius: "var(--ds-radius-cool)",
         boxShadow: "var(--ds-elevation-8)",
         background: "var(--ds-colour-surfacePrimary)",
-        "&:hover": {
-            background: "var(--ds-colour-surfacePrimary) !important",
-        },
-        ...STATE_STYLES.SURFACE_SECONDARY_STATE_PRIMARY,
-        pointerEvents: !isEmptyCount && disabled ? "none" : "auto",
-        "&.Mui-disabled": {
-            background: "var(--ds-colour-stateDisabledSurface) !important",
-        },
-        ...restProps.sx,
-    }), [isEmptyCount, disabled, restProps.sx]);
-    const boxSx = useMemo(() => ({
-        ...fabSx,
-        display: "flex",
+        pointerEvents: disabled ? "none" : "auto",
+        ...(disabled && {
+            background: "var(--ds-colour-stateDisabledSurface)",
+        }),
+        display: "inline-flex",
         justifyContent: "center",
         alignItems: "center",
-        ...restProps.sx,
-    }), [fabSx, restProps.sx]);
-    const counterTextElement = CounterText && (_jsx(CounterText, { value: countValue, label: label ?? "", disabled: disabled ?? false, ...slotProps?.CounterText }));
-    return isEmptyCount ? (_jsx(DsButtonBase, { "aria-label": label, "aria-disabled": disabled, color: "default", ...restProps, onClick: isEmptyCount ? handleAdd : undefined, sx: fabSx, disableRipple: !isEmptyCount || disabled, children: counterTextElement })) : (_jsxs(DsBox, { component: "div", "aria-label": label, "aria-disabled": disabled, color: "default", ...restProps, onClick: isEmptyCount ? handleAdd : undefined, sx: boxSx, children: [!isEmptyCount && LeftIconButton && (_jsx(LeftIconButton, { disabled: isSubtractDisabled, onClick: handleSubtract, "aria-label": "Decrease value", ...slotProps?.LeftIconButton })), counterTextElement, !isEmptyCount && RightIconButton && (_jsx(RightIconButton, { onClick: handleAdd, disabled: isAddDisabled, "aria-label": "Increase value", ...slotProps?.RightIconButton }))] }));
+        verticalAlign: "middle",
+    }), [disabled]);
+    const counterTextElement = CounterText && (_jsx(CounterText, { value: countValue, label: label ?? "", disabled: disabled ?? false, color: color, ...slotProps?.CounterText }));
+    return (_jsx(DsStack, { ...wrapperProps, sx: { display: "inline-flex", verticalAlign: "middle", ...wrapperProps?.sx }, children: isEmptyCount ? (_jsx(DsFab, { disabled: disabled, color: "default", size: "small", onClick: handleAdd, disableRipple: disabled, ...restProps, sx: {
+                ...STATE_STYLES.SURFACE_PRIMARY_STATE_PRIMARY,
+                border: "none",
+                padding: "var(--ds-spacing-frostbite) var(--ds-spacing-glacial)",
+                minWidth: "90px",
+                minHeight: "36px",
+                "&.Mui-disabled": {
+                    background: "var(--ds-colour-stateDisabledSurface)",
+                    boxShadow: "var(--ds-elevation-8)",
+                },
+                "& .MuiTypography-root": {
+                    fontSize: "var(--ds-typo-supportBoldTextButton-fontSize)",
+                    lineHeight: "var(--ds-typo-supportBoldTextButton-lineHeight)",
+                },
+                ...restProps.sx,
+            }, children: counterTextElement })) : (_jsxs(DsStack, { direction: "row", sx: { ...stackSx, ...restProps.sx }, children: [LeftIconButton && (_jsx(LeftIconButton, { disabled: isSubtractDisabled, onClick: handleSubtract, "aria-label": "Decrease value", color: color, ...slotProps?.LeftIconButton })), counterTextElement, RightIconButton && (_jsx(RightIconButton, { onClick: handleAdd, disabled: isAddDisabled, "aria-label": "Increase value", color: color, ...slotProps?.RightIconButton }))] })) }));
 };

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

@@ -1,8 +1,8 @@
-import type { ComponentType } from "react";
-import { DsButtonBaseProps } from "../DsButtonBase";
-import { DsTypographyProps } from "../DsTypography";
-import { DsIconButtonProps } from "../DsIconButton";
-import { DsRemixIconProps } from "../DsRemixIcon";
+import type { ComponentType } from 'react';
+import { DsTypographyProps } from '../DsTypography';
+import { DsIconButtonProps } from '../DsIconButton';
+import { DsRemixIconProps } from '../DsRemixIcon';
+import { DsStackProps } from '../DsStack';
 /**
  * Default step value for increment/decrement operations
  */
@@ -13,15 +13,15 @@ export declare const DEFAULT_STEP_VALUE = 1;
  */
 export interface DsAddItemActionButtonProps extends DsIconButtonProps {
     /** Props for the icon within the action button */
-    IconProps?: Omit<DsRemixIconProps, "ref">;
+    IconProps?: Omit<DsRemixIconProps, 'ref'>;
 }
 /**
  * Props for the counter text display showing current count
  */
 export interface DsAddItemCounterTextProps extends DsTypographyProps {
-    label: string;
-    value: number;
-    disabled: boolean;
+    label?: string;
+    value?: number;
+    disabled?: boolean;
 }
 /**
  * Slots configuration for customizing components
@@ -49,7 +49,7 @@ export interface DsAddItemSlotProps {
  * Main props interface for the DsAddItem component
  * Extends DsFabProps while omitting the onChange prop to define custom signature
  */
-export interface DsAddItemProps extends Omit<DsButtonBaseProps, "onChange" | "value"> {
+export interface DsAddItemProps {
     /** The current count value */
     value?: number;
     /** The maximum allowed value */
@@ -61,15 +61,27 @@ export interface DsAddItemProps extends Omit<DsButtonBaseProps, "onChange" | "va
     /** The label to show when count is 0 */
     label?: string;
     /** Handler called when count changes */
-    onChange: (name: string, value: number, reason: "increment" | "decrement") => void;
+    onChange: (name: string, value: number, reason: 'increment' | 'decrement') => void;
     /** Custom components to use for slots */
     slots?: DsAddItemSlots;
     /** Props to pass to slot components */
     slotProps?: DsAddItemSlotProps;
     /** Name of the counter field */
     name: string;
-    /** Whether the counter is in loading state */
-    loading?: boolean;
+    /** Whether the counter is in disabled state */
+    disabled?: boolean;
+    /** Custom styles to apply to the component */
+    sx?: DsStackProps['sx'];
+    /**
+     * Props to pass to the root Stack wrapper component.
+     * Allows full control over the Stack component properties.
+     */
+    wrapperProps?: DsStackProps;
+    /**
+     * Color variant for the icon buttons and empty state text.
+     * @default 'secondary'
+     */
+    color?: DsIconButtonProps['color'];
 }
 /**
  * Default props configuration for DsAddItem component

package/dist/Components/DsAddItem/DsAddItem.Types.js

@@ -1,5 +1,5 @@
-import { DsAddItemIconButton } from "./Slots/DsAddItemActionIcon.Slot";
-import { DsAddItemCounterText } from "./Slots/DsAddItemCounterText.Slot";
+import { DsAddItemIconButton } from './Slots/DsAddItemActionIcon.Slot';
+import { DsAddItemCounterText } from './Slots/DsAddItemCounterText.Slot';
 /**
  * Default step value for increment/decrement operations
  */
@@ -9,27 +9,26 @@ export const DEFAULT_STEP_VALUE = 1;
  * Provides sensible defaults for count, label, and slot styling
  */
 export const DsAddItemDefaultProps = {
-    label: "Add",
+    label: 'Add',
     step: DEFAULT_STEP_VALUE,
     minValue: 0,
+    color: 'secondary',
     onChange: () => { },
     slots: {
         LeftIconButton: DsAddItemIconButton,
         RightIconButton: DsAddItemIconButton,
-        CounterText: DsAddItemCounterText,
+        CounterText: DsAddItemCounterText
     },
     slotProps: {
         LeftIconButton: {
-            color: "secondary",
             IconProps: {
-                className: "ri-subtract-line",
-            },
+                className: 'ri-subtract-line'
+            }
         },
         RightIconButton: {
-            color: "secondary",
             IconProps: {
-                className: "ri-add-line",
-            },
-        },
-    },
+                className: 'ri-add-line'
+            }
+        }
+    }
 };

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

@@ -0,0 +1,3 @@
+export type DsAddItemOperation = 'add' | 'subtract';
+export declare const isBelowMinValue: (value: number, minValue?: number) => boolean;
+export declare const calculateNewValue: (countValue: number, step: number | undefined, operation: DsAddItemOperation) => number;

package/dist/Components/DsAddItem/DsAddItem.helpers.js

@@ -0,0 +1,8 @@
+import { DEFAULT_STEP_VALUE } from './DsAddItem.Types';
+export const isBelowMinValue = (value, minValue) => {
+    return minValue !== undefined && value < minValue;
+};
+export const calculateNewValue = (countValue, step, operation) => {
+    const stepValue = step ?? DEFAULT_STEP_VALUE;
+    return operation === 'add' ? countValue + stepValue : countValue - stepValue;
+};

package/dist/Components/DsAddItem/Slots/DsAddItemActionIcon.Slot.js

@@ -4,6 +4,7 @@ import { DsRemixIcon } from "../../DsRemixIcon";
 export const DsAddItemIconButton = ({ onClick, disabled, IconProps, ...iconButtonProps }) => {
     return (_jsx(DsIconButton, { disabled: disabled, onClick: onClick, ...iconButtonProps, children: _jsx(DsRemixIcon, { sx: {
                 fontSize: "20px",
+                color: disabled ? 'var(--ds-colour-iconDisabled)' : 'inherit',
                 ...IconProps?.sx,
             }, ...IconProps }) }));
 };

package/dist/Components/DsAddItem/Slots/DsAddItemCounterText.Slot.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DsTypography } from "../../DsTypography";
-export const DsAddItemCounterText = ({ label, value, disabled, ...textProps }) => {
+export const DsAddItemCounterText = ({ label, value, disabled, color, ...textProps }) => {
     const isEmptyCount = value === 0;
     return (_jsx(DsTypography, { variant: isEmptyCount ? "supportBoldTextButton" : "bodyBoldMedium", color: disabled
             ? "var(--ds-colour-typoDisabled)"
             : isEmptyCount
-                ? "var(--ds-colour-typoActionSecondary)"
+                ? color
                 : "var(--ds-colour-typoPrimary)", sx: {
             mx: isEmptyCount
                 ? "var(--ds-spacing-cool)"

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

@@ -24,7 +24,7 @@ export const DsBottomSheet = (inProps) => {
             onClose(event, 'backdropClick');
         }
     };
-    const { kicker, title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, DescriptionProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, slotProps, ...DrawerProps } = props;
+    const { kicker, title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, DescriptionProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, slotProps, illustration, IllustrationProps, ...DrawerProps } = props;
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const isFlushed = primaryButtonText &&
         !secondaryButtonText &&
@@ -53,7 +53,7 @@ export const DsBottomSheet = (inProps) => {
                     flexGrow: 0,
                     alignSelf: 'center',
                     backgroundColor: 'var(--ds-colour-iconDefault)',
-                    color: 'var(--ds-colour-iconDisabled)',
+                    color: 'var(--ds-colour-iconOnSurfaceDynamic)',
                     borderRadius: '50%',
                     p: 'var(--ds-spacing-glacial)',
                     mb: 'var(--ds-spacing-bitterCold)',
@@ -68,7 +68,11 @@ export const DsBottomSheet = (inProps) => {
                     borderTopLeftRadius: 'var(--ds-radius-bitterCold)',
                     borderTopRightRadius: 'var(--ds-radius-bitterCold)',
                     ...ContainerProps?.sx
-                }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', ...KickerProps, sx: {
+                }, children: [illustration && (_jsx(DsDialogContent, { ...IllustrationProps, sx: {
+                            px: 'var(--ds-spacing-bitterCold)',
+                            marginBottom: 'var(--ds-spacing-mild)',
+                            ...IllustrationProps?.sx
+                        }, children: illustration })), kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', ...KickerProps, sx: {
                             color: 'text.tertiary',
                             px: 'var(--ds-spacing-bitterCold)',
                             mb: 'var(--ds-spacing-quickFreeze)',

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

@@ -8,21 +8,41 @@ import { DsPaperProps } from '../DsPaper';
 import { DsRemixIconProps } from '../DsRemixIcon';
 import { DsTypographyProps } from '../DsTypography';
 export interface DsBottomSheetProps extends Omit<DsDrawerProps, 'title'> {
+    /** Small contextual text displayed above the title (e.g., "Confirm Action", "Settings") */
     kicker?: string;
+    /** Main heading text for the bottom sheet content */
     title?: string;
+    /** Supporting text content displayed below the title for additional context */
     description?: string;
+    /** Whether to display the close (×) button in the header. @default true */
     showClose?: boolean;
+    /** Content for the primary action button (typically the main action) */
     primaryButtonText?: DsButtonProps['children'];
+    /** Content for the secondary action button (typically cancel or dismiss) */
     secondaryButtonText?: DsButtonProps['children'];
+    /** Custom React element to display as an illustration (icons, images, etc.) */
+    illustration?: React.ReactNode;
+    /** Root container Paper customization */
     ContainerProps?: DsPaperProps;
+    /** Kicker text Typography customization */
     KickerProps?: DsTypographyProps;
+    /** Description text Typography customization */
     DescriptionProps?: DsTypographyProps;
+    /** Header title DialogTitle customization */
     TitleProps?: DsDialogTitleProps;
+    /** Close button IconButton customization */
     CloseIconButtonProps?: DsIconButtonProps;
+    /** Close icon RemixIcon customization (ref omitted) */
     CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;
+    /** Illustration container DialogContent customization */
+    IllustrationProps?: DsDialogContentProps;
+    /** Main content area DialogContent customization */
     ContentProps?: DsDialogContentProps;
+    /** Action buttons container DialogActions customization */
     ActionsProps?: DsDialogActionsProps;
+    /** Primary action Button customization (ref omitted) */
     primaryButtonProps?: Omit<DsButtonProps, 'ref'>;
+    /** Secondary action Button customization (ref omitted) */
     secondaryButtonProps?: Omit<DsButtonProps, 'ref'>;
 }
 export declare const DsBottomSheetDefaultProps: DsBottomSheetProps;

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

@@ -5,6 +5,8 @@ export declare const DsButtonOverrides: {
         defaultProps: DsButtonProps;
         styleOverrides: {
             root: CSSObject;
+            loading: CSSObject;
+            loadingIndicator: CSSObject;
             contained: CSSObject;
             sizeLarge: CSSObject;
             sizeMedium: CSSObject;

package/dist/Components/DsButton/DsButton.Overrides.js

@@ -38,6 +38,14 @@ export const DsButtonOverrides = {
                     }
                 ],
             },
+            loading: {
+                '& > span:not(.MuiButton-loadingWrapper)': {
+                    visibility: 'hidden'
+                },
+            },
+            loadingIndicator: {
+                color: 'inherit'
+            },
             contained: {
                 "&.MuiButton-contained.MuiButton-colorPrimary": {
                     color: 'var(--ds-colour-typoOnSurface)',
@@ -66,21 +74,30 @@ export const DsButtonOverrides = {
                 fontWeight: 'var(--ds-typo-bodyBoldLarge-fontWeight)',
                 fontSize: 'var(--ds-typo-bodyBoldLarge-fontSize)',
                 lineHeight: 'var(--ds-typo-bodyBoldLarge-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyBoldLarge-letterSpacing)'
+                letterSpacing: 'var(--ds-typo-bodyBoldLarge-letterSpacing)',
+                '.MuiButton-loadingIndicator': {
+                    width: 'var(--ds-rules-buttonLargeLoaderWidth)'
+                },
             },
             sizeMedium: {
                 padding: 'var(--ds-spacing-frostbite) var(--ds-spacing-bitterCold)',
                 fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
                 fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
                 lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)'
+                letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)',
+                '.MuiButton-loadingIndicator': {
+                    width: 'var(--ds-rules-buttonMediumLoaderWidth)'
+                },
             },
             sizeSmall: {
                 padding: 'var(--ds-spacing-glacial) var(--ds-spacing-bitterCold)',
                 fontWeight: 'var(--ds-typo-bodyBoldSmall-fontWeight)',
                 fontSize: 'var(--ds-typo-bodyBoldSmall-fontSize)',
                 lineHeight: 'var(--ds-typo-bodyBoldSmall-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyBoldSmall-letterSpacing)'
+                letterSpacing: 'var(--ds-typo-bodyBoldSmall-letterSpacing)',
+                '.MuiButton-loadingIndicator': {
+                    width: 'var(--ds-rules-buttonSmallLoaderWidth)',
+                },
             },
             icon: {
                 '&.MuiButton-sizeLarge': {

package/dist/Components/DsButton/DsButton.Types.js

@@ -1,6 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThreeDotLoader } from '../DsLoader/ThreeDotLoader';
 export const DsButtonDefaultProps = {
     variant: 'contained',
     size: 'small',
     color: 'primary',
-    disableElevation: true
+    disableElevation: true,
+    loadingIndicator: _jsx(ThreeDotLoader, {})
 };

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

@@ -17,7 +17,7 @@ export const DsDialog = inProps => {
             onClose(event, reason ? reason : 'backdropClick');
         }
     };
-    const { title, description, kicker, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, children, slotProps, ...DialogProps } = props;
+    const { title, description, kicker, illustration, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, IllustrationProps, children, slotProps, ...DialogProps } = props;
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const accessibilityProps = {};
     const isFlushed = primaryButtonText &&
@@ -50,7 +50,14 @@ export const DsDialog = inProps => {
                     },
                 },
             }),
-        }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoTertiary)', ...KickerProps, sx: {
+        }, children: [illustration && (_jsx(DsDialogContent, { ...IllustrationProps, sx: {
+                    px: {
+                        xs: "var(--ds-spacing-bitterCold)",
+                        md: "var(--ds-spacing-warm)",
+                    },
+                    mb: "var(--ds-spacing-mild)",
+                    ...IllustrationProps?.sx,
+                }, children: illustration })), kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoTertiary)', ...KickerProps, sx: {
                     px: {
                         xs: 'var(--ds-spacing-bitterCold)',
                         md: 'var(--ds-spacing-warm)'

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

@@ -11,6 +11,7 @@ export interface DsDialogProps extends Omit<DialogProps, 'onClose'> {
     title?: string;
     description?: string;
     kicker?: string;
+    illustration?: React.ReactNode;
     showClose?: boolean;
     primaryButtonText?: DsButtonProps['children'];
     primaryButtonProps?: Omit<DsButtonProps, 'ref'>;
@@ -23,6 +24,7 @@ export interface DsDialogProps extends Omit<DialogProps, 'onClose'> {
     CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;
     ContentProps?: DsDialogContentProps;
     ActionsProps?: DsDialogActionsProps;
+    IllustrationProps?: DsDialogContentProps;
     onClose?: (event: React.SyntheticEvent, reason: DsDialogCloseReason) => void;
 }
 export declare const DsDialogDefaultProps: DsDialogProps;

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

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { DsFileUploaderDefaultProps } from './DsFileUploader.Types';
 import FileUploaderFiles from './FileUploaderFiles';
 import { getDefaultValue, getValidProcessedFile, mergeProps } from './helpers';
-import { DsFileUploaderDropZone } from './Slots/DsFileUploaderDropZone';
 import { DsStack } from '../DsStack';
 import { DsInputLabel } from '../DsInputLabel';
 export const DsFileUploader = (inProps) => {
@@ -117,17 +116,17 @@ export const DsFileUploader = (inProps) => {
     const isUploadedSegmentVisible = multiple
         ? Array.isArray(uploadedValue) && uploadedValue.length > 0
         : uploadedValue;
-    const { SelectedItemSegment, UploadedItemSegment } = slots;
+    const { SelectedItemSegment, UploadedItemSegment, DropZone } = slots;
     return (_jsxs(DsStack, { direction: "column", sx: {
             gap: 'var(--ds-spacing-bitterCold)',
             width: '100%',
             p: 'var(--ds-spacing-bitterCold)'
-        }, children: [_jsx(DsInputLabel, { sx: { mb: 'var(--ds-spacing-zero)', ...InputLabelProps?.sx }, ...InputLabelProps }), _jsx(DsFileUploaderDropZone, { variant: variant, ...slotProps?.DropZone, InputProps: {
+        }, children: [_jsx(DsInputLabel, { sx: { mb: 'var(--ds-spacing-zero)', ...InputLabelProps?.sx }, ...InputLabelProps }), DropZone && (_jsx(DropZone, { variant: variant, ...slotProps?.DropZone, InputProps: {
                     accept: allowedFiles || accept,
                     multiple: multiple,
+                    ...slotProps?.DropZone?.InputProps,
                     onChange: handleFileSelect,
                     onDrop: handleDropFile,
                     onDragOver: handleDragOverHandler,
-                    ...slotProps?.DropZone?.InputProps
-                } }), isSelectedSegmentVisible && SelectedItemSegment && (_jsx(SelectedItemSegment, { onPreview: handlePreviewFileAction, onDownload: handleDownloadFileAction, onDelete: handleRemoveFile, ...slotProps?.SelectedItemSegment, children: _jsx(FileUploaderFiles, { slots: slots, slotProps: slotProps, files: files || undefined }) })), isUploadedSegmentVisible && UploadedItemSegment && (_jsx(UploadedItemSegment, { onPreview: handlePreviewFileAction, onDownload: handleDownloadFileAction, onDelete: handleRemoveFile, ...slotProps?.UploadedItemSegment, children: _jsx(FileUploaderFiles, { slots: slots, slotProps: slotProps, files: uploadedValue || undefined }) }))] }));
+                } })), isSelectedSegmentVisible && SelectedItemSegment && (_jsx(SelectedItemSegment, { onPreview: handlePreviewFileAction, onDownload: handleDownloadFileAction, onDelete: handleRemoveFile, ...slotProps?.SelectedItemSegment, children: _jsx(FileUploaderFiles, { slots: slots, slotProps: slotProps, files: files || undefined }) })), isUploadedSegmentVisible && UploadedItemSegment && (_jsx(UploadedItemSegment, { onPreview: handlePreviewFileAction, onDownload: handleDownloadFileAction, onDelete: handleRemoveFile, ...slotProps?.UploadedItemSegment, children: _jsx(FileUploaderFiles, { slots: slots, slotProps: slotProps, files: uploadedValue || undefined }) }))] }));
 };

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

@@ -193,7 +193,7 @@ export interface IDsFileUploaderDropZoneProps extends DsStackProps {
     /**
      * To override props passed to input element
      */
-    InputProps?: DsInputProps['inputProps'];
+    InputProps?: Omit<NonNullable<DsInputProps['inputProps']>, 'onChange' | 'onDrop' | 'onDragOver'>;
     /**
      * This prop can be used to toggle the disabled state of the file uploaded.
      */

package/dist/Components/DsFileUploader/Slots/DsFileUploaderSelectedFilesSegment.js

@@ -17,5 +17,5 @@ export const DsFileUploaderSelectedFilesSegment = (inProps) => {
         ...inProps
     };
     const { label, children } = props;
-    return (_jsxs(DsStack, { spacing: 'var(--ds-spacing-frostbite)', children: [_jsx(DsTypography, { py: 'var(--ds-spacing-glacial)', variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoSecondary)', children: label }), _jsx(DsStack, { spacing: 'var(--ds-spacing-frostbite)', sx: { maxHeight: '440px', overflowY: 'auto' }, children: isValidElement(children) && cloneElement(children, { ...props }) })] }));
+    return (_jsxs(DsStack, { spacing: "var(--ds-spacing-frostbite)", children: [label && (_jsx(DsTypography, { py: 'var(--ds-spacing-glacial)', variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoSecondary)', children: label })), _jsx(DsStack, { spacing: 'var(--ds-spacing-frostbite)', sx: { maxHeight: '440px', overflowY: 'auto' }, children: isValidElement(children) && cloneElement(children, { ...props }) })] }));
 };

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

@@ -18,6 +18,7 @@ export interface DsPopupProps extends Pick<DsDialogProps, 'onClose'> {
     title?: string;
     description?: string;
     showClose?: boolean;
+    illustration?: DsDialogProps['illustration'];
     primaryButtonText?: DsButtonProps['children'];
     primaryButtonProps?: Omit<DsButtonProps, 'ref'>;
     secondaryButtonText?: DsButtonProps['children'];

package/dist/Components/DsTab/DsTab.Overrides.js

@@ -12,9 +12,6 @@ export const DsTabOverrides = {
                 gap: 'var(--ds-spacing-glacial)',
                 minHeight: '36px',
                 textTransform: 'none',
-                borderBottomWidth: '1px',
-                borderBottomStyle: 'solid',
-                borderBottomColor: 'var(--ds-colour-stateDisabledSurface)',
                 '> .MuiTab-iconWrapper': {
                     fontSize: 'var(--ds-typo-fontSizeFrostbite)',
                     margin: 'var(--ds-spacing-zero)'

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

@@ -1,5 +1,5 @@
-import type { CSSObject } from "@mui/system";
-import type { DsTabsProps } from "./DsTabs.Types";
+import { CSSObject } from "@mui/system";
+import { DsTabsProps } from "./DsTabs.Types";
 export declare const DsTabsOverrides: {
     MuiTabs: {
         defaultProps: DsTabsProps;

package/dist/Components/DsTabs/DsTabs.Overrides.js

@@ -5,36 +5,36 @@ export const DsTabsOverrides = {
         styleOverrides: {
             root: {
                 minHeight: "36px",
+                borderBottom: "1px solid var(--ds-colour-strokeDefault)",
                 variants: [
                     {
                         props: { "ds-variant": "container" },
                         style: {
+                            borderBottom: "none",
                             "> .MuiTabs-scroller > .MuiTabs-indicator": {
                                 height: "0px",
                             },
                             "> .MuiTabs-scroller > .MuiTabs-flexContainer": {
-                                gap: "var(--ds-spacing-glacial)",
+                                gap: "var(--ds-spacing-frostbite)",
                                 "> .MuiTab-root": {
-                                    fontWeight: "var(--ds-typo-supportRegularMetadata-fontWeight)",
-                                    fontSize: "var(--ds-typo-supportRegularMetadata-fontSize)",
-                                    lineHeight: "var(--ds-typo-supportRegularMetadata-lineHeight)",
-                                    letterSpacing: "var(--ds-typo-supportRegularMetadata-letterSpacing)",
-                                    borderRadius: "var(--ds-radius-quickFreeze)",
-                                    paddingTop: "var(--ds-spacing-frostbite)",
-                                    paddingBottom: "var(--ds-spacing-frostbite)",
-                                    borderWidth: "1px",
-                                    borderStyle: "solid",
+                                    fontWeight: "var(--ds-typo-bodyRegularMedium-fontWeight)",
+                                    fontSize: "var(--ds-typo-bodyRegularMedium-fontSize)",
+                                    lineHeight: "var(--ds-typo-bodyRegularMedium-lineHeight)",
+                                    letterSpacing: "var(--ds-typo-bodyRegularMedium-letterSpacing)",
+                                    borderRadius: "var(--ds-radius-glacial)",
+                                    padding: "var(--ds-spacing-glacial) var(--ds-spacing-frostbite)",
+                                    border: "1px solid var(--ds-colour-strokeDefault)",
                                     backgroundColor: "var(--ds-colour-surfaceSecondary)",
-                                    borderColor: "var(--ds-colour-strokeDefault)",
                                     color: "var(--ds-colour-typoSecondary)",
                                     "&.Mui-selected": {
-                                        backgroundColor: "var(--ds-colour-stateSelectedSecondaryHover)",
-                                        borderColor: "var(--ds-colour-strokeSecondarySelected)",
+                                        backgroundColor: "var(--ds-colour-neutral2)",
+                                        borderColor: "var(--ds-colour-iconTypical)",
                                         color: "var(--ds-colour-typoActionTertiary)",
+                                        fontWeight: "var(--ds-typo-bodyBoldMedium-fontWeight)",
                                     },
                                     "&.Mui-disabled": {
-                                        backgroundColor: "transparent",
-                                        borderColor: "transparent",
+                                        backgroundColor: "var(--ds-colour-stateDisabledSurface)",
+                                        borderColor: "var(--ds-colour-strokeDisabled)",
                                         color: "var(--ds-colour-typoDisabled)",
                                     },
                                 },
@@ -44,6 +44,7 @@ export const DsTabsOverrides = {
                     {
                         props: { "ds-variant": "segmented" },
                         style: {
+                            borderBottom: "none",
                             "& .MuiTabs-scroller": {
                                 backgroundColor: "var(--ds-colour-neutral1)",
                                 borderRadius: "var(--ds-radius-glacial)",
@@ -81,6 +82,52 @@ export const DsTabsOverrides = {
                             },
                         },
                     },
+                    {
+                        props: { orientation: "vertical" },
+                        style: {
+                            borderBottom: "none",
+                            "> .MuiTabs-scroller > .MuiTabs-flexContainer": {
+                                "> .MuiTab-root": {
+                                    borderBottom: "1px solid var(--ds-colour-strokeDefault)",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        props: { "ds-size": "small" },
+                        style: {
+                            minHeight: "auto",
+                            "> .MuiTabs-scroller > .MuiTabs-flexContainer": {
+                                "> .MuiTab-root": {
+                                    minHeight: "unset",
+                                    fontWeight: "var(--ds-typo-bodyRegularSmall-fontWeight)",
+                                    fontSize: "var(--ds-typo-bodyRegularSmall-fontSize)",
+                                    lineHeight: "var(--ds-typo-bodyRegularSmall-lineHeight)",
+                                    padding: "var(--ds-spacing-gelid) var(--ds-spacing-glacial)",
+                                    letterSpacing: "var(--ds-typo-bodyRegularSmall-letterSpacing)",
+                                    "&.Mui-selected": {
+                                        fontWeight: "var(--ds-typo-bodyBoldSmall-fontWeight)",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                    {
+                        props: (props) => props["ds-textfit"] === "fixed" &&
+                            !props["ds-variant"] &&
+                            props.orientation === "horizontal",
+                        style: {
+                            "> .MuiTabs-scroller > .MuiTabs-flexContainer": {
+                                "> .MuiTab-root": {
+                                    minWidth: "unset",
+                                    paddingRight: "0",
+                                    paddingLeft: "0",
+                                    marginRight: "var(--ds-spacing-bitterCold)",
+                                    marginLeft: "var(--ds-spacing-bitterCold)",
+                                },
+                            },
+                        },
+                    },
                 ],
             },
             indicator: {

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

@@ -1,5 +1,7 @@
 import { TabsProps } from "@mui/material";
 export interface DsTabsProps extends TabsProps {
     "ds-variant"?: "container" | "segmented";
+    "ds-size"?: "small" | "medium";
+    "ds-textfit"?: "fixed" | "filled";
 }
 export declare const DsTabsDefaultProps: DsTabsProps;

package/dist/Components/DsTabs/DsTabs.Types.js

@@ -1,4 +1,6 @@
 export const DsTabsDefaultProps = {
     indicatorColor: "secondary",
     textColor: "secondary",
+    "ds-size": "medium",
+    "ds-textfit": "filled",
 };

package/dist/Theme/componentOverrides.d.ts

@@ -1201,6 +1201,8 @@ declare const componentOverrides: {
         defaultProps: import("../Components").DsButtonProps;
         styleOverrides: {
             root: import("@mui/system").CSSObject;
+            loading: import("@mui/system").CSSObject;
+            loadingIndicator: import("@mui/system").CSSObject;
             contained: import("@mui/system").CSSObject;
             sizeLarge: import("@mui/system").CSSObject;
             sizeMedium: import("@mui/system").CSSObject;

package/dist/Theme/rules.js

@@ -15,6 +15,9 @@ const dsRules = {
     avatarXLSize: '48px',
     avatarXXLSize: '64px',
     avatar3XLSize: '80px',
-    formHelperTextMinHeight: '28px'
+    formHelperTextMinHeight: '28px',
+    buttonSmallLoaderWidth: '32px',
+    buttonMediumLoaderWidth: '34px',
+    buttonLargeLoaderWidth: '42px'
 };
 export default dsRules;

package/dist/Types/DsRules.d.ts

@@ -1,4 +1,4 @@
-export type DsRulesKeys = 'headerMobileHeight' | 'headerDesktopHeight' | 'appBarMobileMinHeight' | 'stepperConnectorMinHeight' | 'searchbarMinWidth' | 'searchbarHeight' | 'drawerWidth' | 'drawerMiniWidth' | 'dialogMdMaxWidth' | 'bottomSheetWorkingAreaHeight' | 'avatarSSize' | 'avatarMSize' | 'avatarLSize' | 'avatarXLSize' | 'avatarXXLSize' | 'avatar3XLSize' | 'formHelperTextMinHeight';
+export type DsRulesKeys = 'headerMobileHeight' | 'headerDesktopHeight' | 'appBarMobileMinHeight' | 'stepperConnectorMinHeight' | 'searchbarMinWidth' | 'searchbarHeight' | 'drawerWidth' | 'drawerMiniWidth' | 'dialogMdMaxWidth' | 'bottomSheetWorkingAreaHeight' | 'avatarSSize' | 'avatarMSize' | 'avatarLSize' | 'avatarXLSize' | 'avatarXXLSize' | 'avatar3XLSize' | 'formHelperTextMinHeight' | 'buttonLargeLoaderWidth' | 'buttonMediumLoaderWidth' | 'buttonSmallLoaderWidth';
 export type DsRules = {
     [key in DsRulesKeys]: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "3.0.1-beta.2",
+  "version": "3.0.1-beta.3",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
     "date-fns": "~4.1.0",
     "notistack": "~3.0.1",
     "prop-types": "~15.8.1",
-    "swiper": "~11.0.6"
+    "swiper": "~12.1.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",
@@ -47,10 +47,11 @@
     "test": "echo 'Error: no test specified'",
     "preversion": "npm-run-all build test",
     "version": "echo 'Versioning'",
-    "postversion": "if [ \"$BETA\" = \"true\" ]; then echo 'Skipping stable publish for beta'; else git push && git push --tags && npm run publish:pkg; fi",
-    "release:beta": "BETA=true npm version prerelease --preid=beta && npm publish --tag beta && git push && git push --tags",
-    "release:beta:dry": "BETA=true npm version prerelease --preid=beta --no-git-tag-version && npm publish --tag beta --dry-run",
-    "publish:pkg": "npm publish"
+    "postversion": "git push && git push --tags",
+    "release:prerelease": "npm version prerelease --preid=beta && npm publish --tag beta",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish"
   },
   "repository": "git@github.com:heliumtank92/am92-react-design-system.git",
   "homepage": "https://github.com/heliumtank92/am92-react-design-system#readme",