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

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

@@ -0,0 +1,2 @@
+import { type DsAddItemProps } from "./DsAddItem.Types";
+export declare const DsAddItem: (inProps: DsAddItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,105 @@
+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 STATE_STYLES from "../../Theme/STATE_STYLES";
+import { DsButtonBase } from "../DsButtonBase";
+import { DsBox } from "../DsBox";
+export const DsAddItem = (inProps) => {
+    const mergedSlots = {
+        ...DsAddItemDefaultProps.slots,
+        ...(inProps.slots || {}),
+    };
+    const mergedSlotProps = {
+        ...DsAddItemDefaultProps.slotProps,
+        ...(inProps.slotProps || {}),
+    };
+    const props = {
+        ...DsAddItemDefaultProps,
+        ...inProps,
+        slots: mergedSlots,
+        slotProps: mergedSlotProps,
+    };
+    const { value, label, maxValue, minValue, step, slots, slotProps, disabled, onChange, name, loading, ...restProps } = props;
+    const isControlled = typeof value === "number";
+    const { LeftIconButton, RightIconButton, CounterText } = slots;
+    // Internal state for count value, initialized based on control mode
+    const [countValue, setCountValue] = useState(isControlled ? value : 0);
+    // Component is in "empty" state when count is 0 (shows single Add button)
+    const isEmptyCount = countValue === 0;
+    useEffect(() => {
+        if (isControlled && value !== countValue) {
+            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 handleAdd = (e) => {
+        e.stopPropagation();
+        if (!isAddDisabled) {
+            let newValue = calculateNewValue("add");
+            // Jump to minValue if increment would result in a value below minimum threshold
+            if (isBelowMinValue(newValue)) {
+                newValue = minValue;
+            }
+            if (!isControlled) {
+                setCountValue(newValue);
+            }
+            if (typeof onChange === "function")
+                onChange(name, newValue, "increment");
+        }
+    };
+    const handleSubtract = (e) => {
+        e.stopPropagation();
+        if (!isSubtractDisabled) {
+            let newValue = calculateNewValue("subtract");
+            // Reset to 0 if would go negative or below minValue (back to "add" state)
+            if (newValue < 0 || isBelowMinValue(newValue)) {
+                newValue = 0;
+            }
+            if (!isControlled) {
+                setCountValue(newValue);
+            }
+            if (typeof onChange === "function")
+                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,
+        minWidth: "90px",
+        minHeight: "var(--ds-spacing-tepid)",
+        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",
+        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 }))] }));
+};

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

@@ -0,0 +1,5 @@
+export declare const DsAddItemOverrides: {
+    DsAddItem: {
+        defaultProps: Partial<import("./DsAddItem.Types").DsAddItemProps>;
+    };
+};

package/dist/Components/DsAddItem/DsAddItem.Overrides.js

@@ -0,0 +1,6 @@
+import { DsAddItemDefaultProps } from "./DsAddItem.Types";
+export const DsAddItemOverrides = {
+    DsAddItem: {
+        defaultProps: DsAddItemDefaultProps,
+    },
+};

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

@@ -0,0 +1,78 @@
+import type { ComponentType } from "react";
+import { DsButtonBaseProps } from "../DsButtonBase";
+import { DsTypographyProps } from "../DsTypography";
+import { DsIconButtonProps } from "../DsIconButton";
+import { DsRemixIconProps } from "../DsRemixIcon";
+/**
+ * Default step value for increment/decrement operations
+ */
+export declare const DEFAULT_STEP_VALUE = 1;
+/**
+ * Props for action buttons (left/right) within the add item component
+ * Extends DsIconButtonProps with optional icon configuration
+ */
+export interface DsAddItemActionButtonProps extends DsIconButtonProps {
+    /** Props for the icon within the action button */
+    IconProps?: Omit<DsRemixIconProps, "ref">;
+}
+/**
+ * Props for the counter text display showing current count
+ */
+export interface DsAddItemCounterTextProps extends DsTypographyProps {
+    label: string;
+    value: number;
+    disabled: boolean;
+}
+/**
+ * Slots configuration for customizing components
+ */
+export interface DsAddItemSlots {
+    /** Component for the left (subtract) icon button */
+    LeftIconButton?: ComponentType<DsAddItemActionButtonProps>;
+    /** Component for the right (add) icon button */
+    RightIconButton?: ComponentType<DsAddItemActionButtonProps>;
+    /** Component for the counter text display */
+    CounterText?: ComponentType<DsAddItemCounterTextProps>;
+}
+/**
+ * Slot props configuration for customizing different parts of the add item component
+ */
+export interface DsAddItemSlotProps {
+    /** Props for the left (subtract) icon button */
+    LeftIconButton?: DsAddItemActionButtonProps;
+    /** Props for the right (add) icon button */
+    RightIconButton?: DsAddItemActionButtonProps;
+    /** Props for the counter text display */
+    CounterText?: DsAddItemCounterTextProps;
+}
+/**
+ * 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"> {
+    /** The current count value */
+    value?: number;
+    /** The maximum allowed value */
+    maxValue?: number;
+    /** The minimum allowed value */
+    minValue?: number;
+    /** The step size for increment/decrement */
+    step?: number;
+    /** The label to show when count is 0 */
+    label?: string;
+    /** Handler called when count changes */
+    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;
+}
+/**
+ * Default props configuration for DsAddItem component
+ * Provides sensible defaults for count, label, and slot styling
+ */
+export declare const DsAddItemDefaultProps: Partial<DsAddItemProps>;

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

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

package/dist/Components/DsAddItem/Slots/DsAddItemActionIcon.Slot.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DsAddItemActionButtonProps } from "../DsAddItem.Types";
+export declare const DsAddItemIconButton: React.FC<DsAddItemActionButtonProps>;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DsIconButton } from "../../DsIconButton";
+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",
+                ...IconProps?.sx,
+            }, ...IconProps }) }));
+};

package/dist/Components/DsAddItem/Slots/DsAddItemCounterText.Slot.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DsAddItemCounterTextProps } from "../DsAddItem.Types";
+export declare const DsAddItemCounterText: React.FC<DsAddItemCounterTextProps>;

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

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

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

@@ -0,0 +1,3 @@
+export * from './DsAddItem.Component';
+export * from './DsAddItem.Overrides';
+export * from './DsAddItem.Types';

package/dist/Components/DsAddItem/index.js

@@ -0,0 +1,3 @@
+export * from './DsAddItem.Component';
+export * from './DsAddItem.Overrides';
+export * from './DsAddItem.Types';

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

@@ -1 +1,2 @@
-export { default as DsBadge } from '@mui/material/Badge';
+import { DsBadgeProps } from './DsBadge.Types';
+export declare const DsBadge: import("react").ForwardRefExoticComponent<Omit<DsBadgeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Components/DsBadge/DsBadge.Component.js

@@ -1 +1,11 @@
-export { default as DsBadge } from '@mui/material/Badge';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Badge from '@mui/material/Badge';
+import { useThemeProps } from '@mui/system';
+export const DsBadge = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MuiBadge'
+    });
+    return _jsx(Badge, { ref: ref, ...props });
+});

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

@@ -1,7 +1,29 @@
+import { DsBadgeProps } from './DsBadge.Types';
 export declare const DsBadgeOverrides: {
     MuiBadge: {
-        defaultProps: import("./DsBadge.Types").DsBadgeProps;
+        defaultProps: DsBadgeProps;
         styleOverrides: {
+            root: {
+                variants: ({
+                    props: Partial<DsBadgeProps>;
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: string;
+                            color: string;
+                            pointerEvents?: undefined;
+                        };
+                    };
+                } | {
+                    props: Partial<DsBadgeProps>;
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: string;
+                            color: string;
+                            pointerEvents: string;
+                        };
+                    };
+                })[];
+            };
             standard: {
                 fontWeight: string;
                 fontSize: string;

package/dist/Components/DsBadge/DsBadge.Overrides.js

@@ -3,6 +3,29 @@ export const DsBadgeOverrides = {
     MuiBadge: {
         defaultProps: DsBadgeDefaultProps,
         styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { color: 'inverse' },
+                        style: {
+                            '& .MuiBadge-badge': {
+                                backgroundColor: 'var(--ds-colour-iconOnSurface)',
+                                color: 'var(--ds-colour-actionSecondary)',
+                            }
+                        },
+                    },
+                    {
+                        props: { disabled: true },
+                        style: {
+                            '& .MuiBadge-badge': {
+                                backgroundColor: 'var(--ds-colour-iconDisabled)',
+                                color: 'var(--ds-colour-typoOnSurface)',
+                                pointerEvents: 'none'
+                            }
+                        }
+                    }
+                ],
+            },
             standard: {
                 fontWeight: 'var(--ds-typo-supportRegularInfo-fontWeight)',
                 fontSize: 'var(--ds-typo-supportRegularInfo-fontSize)',

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

@@ -1,4 +1,8 @@
 import { BadgeProps } from '@mui/material';
-export interface DsBadgeProps extends BadgeProps {
+type TDsBadgeExtendedColor = BadgeProps['color'] | 'inverse';
+export interface DsBadgeProps extends Omit<BadgeProps, 'color'> {
+    color?: TDsBadgeExtendedColor;
+    disabled?: boolean;
 }
 export declare const DsBadgeDefaultProps: DsBadgeProps;
+export {};

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

@@ -11,10 +11,10 @@ import { DsButton } from '../DsButton';
 import { mergeSlotProps } from '../../utils';
 export const DsDialog = inProps => {
     const props = { ...DsDialogDefaultProps, ...inProps };
-    const handleCloseClick = (event) => {
+    const handleCloseClick = (reason) => (event) => {
         const { onClose } = props;
         if (typeof onClose === 'function') {
-            onClose(event, 'backdropClick');
+            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;
@@ -71,7 +71,7 @@ export const DsDialog = inProps => {
                         md: 'var(--ds-spacing-warm)'
                     },
                     ...DescriptionProps?.sx
-                }, children: description })), showClose && (_jsx(DsIconButton, { onClick: handleCloseClick, ...CloseIconButtonProps, sx: {
+                }, children: description })), showClose && (_jsx(DsIconButton, { onClick: handleCloseClick('closeButtonClick'), ...CloseIconButtonProps, sx: {
                     position: 'absolute',
                     padding: 'var(--ds-spacing-quickFreeze)',
                     borderRadius: 'var(--ds-radius-mild)',

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

@@ -6,7 +6,8 @@ import { DsRemixIconProps } from '../DsRemixIcon';
 import { DsDialogContentProps } from '../DsDialogContent';
 import { DsDialogActionsProps } from '../DsDialogActions';
 import { DsButtonProps } from '../DsButton';
-export interface DsDialogProps extends DialogProps {
+export type DsDialogCloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
+export interface DsDialogProps extends Omit<DialogProps, 'onClose'> {
     title?: string;
     description?: string;
     kicker?: string;
@@ -22,5 +23,6 @@ export interface DsDialogProps extends DialogProps {
     CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;
     ContentProps?: DsDialogContentProps;
     ActionsProps?: DsDialogActionsProps;
+    onClose?: (event: React.SyntheticEvent, reason: DsDialogCloseReason) => void;
 }
 export declare const DsDialogDefaultProps: DsDialogProps;

package/dist/Components/DsFab/DsFab.Overrides.js

@@ -40,6 +40,7 @@ export const DsFabOverrides = {
                 ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
             },
             default: {
+                color: 'var(--ds-colour-typoPrimary)',
                 backgroundColor: 'var(--ds-colour-surfacePrimary)',
                 borderWidth: '1px',
                 borderStyle: 'solid',

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

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

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

@@ -1,52 +1,92 @@
-import { DsTabsDefaultProps } from './DsTabs.Types';
+import { DsTabsDefaultProps } from "./DsTabs.Types";
 export const DsTabsOverrides = {
     MuiTabs: {
         defaultProps: DsTabsDefaultProps,
         styleOverrides: {
             root: {
-                minHeight: '36px',
+                minHeight: "36px",
                 variants: [
                     {
-                        props: { 'ds-variant': 'container' },
+                        props: { "ds-variant": "container" },
                         style: {
-                            '> .MuiTabs-scroller > .MuiTabs-indicator': {
-                                height: '0px'
+                            "> .MuiTabs-scroller > .MuiTabs-indicator": {
+                                height: "0px",
                             },
-                            '> .MuiTabs-scroller > .MuiTabs-flexContainer': {
-                                gap: 'var(--ds-spacing-glacial)',
-                                '> .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',
-                                    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)',
-                                        color: 'var(--ds-colour-typoActionTertiary)'
+                            "> .MuiTabs-scroller > .MuiTabs-flexContainer": {
+                                gap: "var(--ds-spacing-glacial)",
+                                "> .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",
+                                    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)",
+                                        color: "var(--ds-colour-typoActionTertiary)",
                                     },
-                                    '&.Mui-disabled': {
-                                        backgroundColor: 'none',
-                                        borderColor: 'none',
-                                        color: 'var(--ds-colour-typoDisabled)'
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
+                                    "&.Mui-disabled": {
+                                        backgroundColor: "transparent",
+                                        borderColor: "transparent",
+                                        color: "var(--ds-colour-typoDisabled)",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                    {
+                        props: { "ds-variant": "segmented" },
+                        style: {
+                            "& .MuiTabs-scroller": {
+                                backgroundColor: "var(--ds-colour-neutral1)",
+                                borderRadius: "var(--ds-radius-glacial)",
+                                padding: "var(--ds-spacing-quickFreeze)",
+                                boxSizing: "border-box",
+                                position: "relative",
+                                "& .MuiTabs-indicator": {
+                                    height: "calc(100% - var(--ds-spacing-glacial))",
+                                    top: "var(--ds-spacing-quickFreeze)",
+                                    borderRadius: "var(--ds-radius-gelid)",
+                                    backgroundColor: "var(--ds-colour-surfaceBackground)",
+                                    zIndex: 1,
+                                },
+                                "& .MuiTabs-flexContainer": {
+                                    gap: "var(--ds-spacing-zero)",
+                                    position: "relative",
+                                    zIndex: 2,
+                                },
+                                "& .MuiTab-root": {
+                                    position: "relative",
+                                    borderBottom: "none",
+                                    padding: "var(--ds-spacing-gelid) var(--ds-spacing-frostbite)",
+                                    minHeight: "unset",
+                                    color: "var(--ds-colour-typoPrimary)",
+                                    "&.Mui-selected:not(.Mui-disabled)": {
+                                        boxShadow: "var(--ds-elevation-2)",
+                                        borderRadius: "var(--ds-radius-gelid)",
+                                    },
+                                    "&.Mui-disabled": {
+                                        backgroundColor: "var(--ds-colour-neutral1)",
+                                        color: "var(--ds-colour-typoDisabled)",
+                                        fontWeight: "var(--ds-typo-bodyRegularMedium-fontWeight)",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                ],
             },
             indicator: {
-                height: '2px',
-                borderRadius: '2px 2px 0px 0px'
-            }
-        }
-    }
+                height: "2px",
+                borderRadius: "2px 2px 0px 0px",
+            },
+        },
+    },
 };

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

@@ -1,5 +1,5 @@
-import { TabsProps } from '@mui/material';
+import { TabsProps } from "@mui/material";
 export interface DsTabsProps extends TabsProps {
-    'ds-variant'?: 'container';
+    "ds-variant"?: "container" | "segmented";
 }
 export declare const DsTabsDefaultProps: DsTabsProps;

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

@@ -1,4 +1,4 @@
 export const DsTabsDefaultProps = {
-    indicatorColor: 'secondary',
-    textColor: 'secondary'
+    indicatorColor: "secondary",
+    textColor: "secondary",
 };

package/dist/Components/DsTag/DsTag.Component.js

@@ -17,11 +17,13 @@ export const DsTag = inProps => {
             onDelete(value);
         }
     };
-    const { selected, onClick, onDelete, ...chipProps } = props;
+    const { selected, onClick, onDelete, sx, ...chipProps } = props;
     const color = (selected && 'secondary') || 'default';
     return (_jsx(Chip, { deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }), skipFocusWhenDisabled: true, sx: {
             paddingTop: 'var(--ds-spacing-quickFreeze)',
             paddingBottom: 'var(--ds-spacing-quickFreeze)',
+            paddingLeft: 'var(--ds-spacing-frostbite)',
+            paddingRight: 'var(--ds-spacing-frostbite)',
             fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
             fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
             lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
@@ -40,22 +42,40 @@ export const DsTag = inProps => {
                 },
                 ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
             },
+            '&.Mui-disabled': {
+                opacity: 1,
+                border: '1px solid var(--ds-colour-strokeDisabled)',
+                backgroundColor: 'var(--ds-colour-stateDisabledSurface)',
+            },
             '> .MuiChip-label': {
+                color: 'var(--ds-colour-typoPrimary)',
                 paddingTop: 'var(--ds-spacing-deepFreeze)',
                 paddingBottom: 'var(--ds-spacing-deepFreeze)',
-                paddingLeft: 'var(--ds-spacing-frostbite)',
-                paddingRight: 'var(--ds-spacing-frostbite)'
+                paddingLeft: 'var(--ds-spacing-zero)',
+                paddingRight: 'var(--ds-spacing-zero)'
             },
             '> .MuiChip-icon': {
-                color: 'var(--ds-colour-iconDefault)',
+                color: 'var(--ds-colour-typoPrimary)',
                 fontSize: 'var(--ds-typo-fontSizeBitterCold)',
-                marginLeft: 'var(--ds-spacing-frostbite)',
-                marginRight: 'calc(var(--ds-spacing-quickFreeze) * -1)'
+                marginLeft: 'var(--ds-spacing-zero)',
+                marginRight: 'var(--ds-spacing-glacial)',
             },
             '> .MuiChip-deleteIcon': {
                 fontSize: 'var(--ds-typo-fontSizeBitterCold)',
-                marginRight: 'var(--ds-spacing-frostbite)',
-                marginLeft: 'calc(var(--ds-spacing-quickFreeze) * -1)'
-            }
+                marginRight: 'var(--ds-spacing-zero)',
+                marginLeft: 'var(--ds-spacing-glacial)',
+                color: 'var(--ds-colour-typoPrimary)',
+            },
+            '&.MuiChip-colorSecondary .MuiChip-label, &.MuiChip-colorSecondary .MuiChip-deleteIcon': {
+                color: 'var(--ds-colour-typoOnSurface)'
+            },
+            '&.Mui-disabled .MuiChip-icon, &.Mui-disabled .MuiChip-deleteIcon': {
+                color: 'var(--ds-colour-iconDisabled)'
+            },
+            '&.Mui-disabled .MuiChip-label': {
+                color: 'var(--ds-colour-typoDisabled)',
+                fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
+            },
+            ...sx
         }, ...chipProps, variant: "tag", clickable: true, color: color, onDelete: (onDelete && handleDelete) || undefined, onClick: handleClick }));
 };

package/dist/Components/index.d.ts

@@ -2,6 +2,7 @@ export * from './DsAccordion';
 export * from './DsAccordionActions';
 export * from './DsAccordionDetails';
 export * from './DsAccordionSummary';
+export * from './DsAddItem';
 export * from './DsAppBar';
 export * from './DsAutocomplete';
 export * from './DsAvatar';

package/dist/Components/index.js

@@ -2,6 +2,7 @@ export * from './DsAccordion';
 export * from './DsAccordionActions';
 export * from './DsAccordionDetails';
 export * from './DsAccordionSummary';
+export * from './DsAddItem';
 export * from './DsAppBar';
 export * from './DsAutocomplete';
 export * from './DsAvatar';

package/dist/Theme/componentOverrides.d.ts

@@ -1268,6 +1268,27 @@ declare const componentOverrides: {
     MuiBadge: {
         defaultProps: import("../Components").DsBadgeProps;
         styleOverrides: {
+            root: {
+                variants: ({
+                    props: Partial<import("../Components").DsBadgeProps>;
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: string;
+                            color: string;
+                            pointerEvents?: undefined;
+                        };
+                    };
+                } | {
+                    props: Partial<import("../Components").DsBadgeProps>;
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: string;
+                            color: string;
+                            pointerEvents: string;
+                        };
+                    };
+                })[];
+            };
             standard: {
                 fontWeight: string;
                 fontSize: string;
@@ -1432,6 +1453,9 @@ declare const componentOverrides: {
             };
         };
     };
+    DsAddItem: {
+        defaultProps: Partial<import("../Components").DsAddItemProps>;
+    };
     MuiAccordionDetails: {
         styleOverrides: {
             root: {

package/dist/Theme/componentOverrides.js

@@ -1,9 +1,10 @@
-import { DsAccordionOverrides, DsAccordionActionsOverrides, DsAccordionDetailsOverrides, DsAccordionSummaryOverrides, DsAppBarOverrides, DsAutocompleteOverrides, DsAvatarOverrides, DsAvatarGroupOverrides, DsBackdropOverrides, DsBadgeOverrides, DsBottomNavigationOverrides, DsBottomNavigationActionOverrides, DsBottomSheetOverrides, DsBoxOverrides, DsBreadcrumbsOverrides, DsButtonOverrides, DsButtonBaseOverrides, DsButtonGroupOverrides, DsCardOverrides, DsCardActionAreaOverrides, DsCardActionsOverrides, DsCardContentOverrides, DsCardHeaderOverrides, DsCardMediaOverrides, DsCarouselOverrides, DsCheckboxOverrides, DsChipOverrides, DsChipGroupOverrides, DsCircularProgressOverrides, DsClickAwayListenerOverrides, DsCollapseOverrides, DsCssBaselineOverrides, DsContainerOverrides, DsDialogOverrides, DsDialogActionsOverrides, DsDialogContentOverrides, DsDialogContentTextOverrides, DsDialogTitleOverrides, DsDividerOverrides, DsDrawerOverrides, DsFabOverrides, DsFadeOverrides, DsFileUploaderOverrides, DsFilledInputOverrides, DsFormControlOverrides, DsFormControlLabelOverrides, DsFormGroupOverrides, DsFormHelperTextOverrides, DsFormLabelOverrides, DsGlobalStylesOverrides, DsGridOverrides, DsGrowOverrides, DsHeaderOverrides, DsHelperTextOverrides, DsIconOverrides, DsIconButtonOverrides, DsImageOverrides, DsImageListOverrides, DsImageListItemOverrides, DsImageListItemBarOverrides, DsInputOverrides, DsInputAdornmentOverrides, DsInputBaseOverrides, DsInputLabelOverrides, DsLinearProgressOverrides, DsLinkOverrides, DsListOverrides, DsListItemOverrides, DsListItemAvatarOverrides, DsListItemButtonOverrides, DsListItemIconOverrides, DsListItemSecondaryActionOverrides, DsListItemTextOverrides, DsListSubheaderOverrides, DsLoaderOverrides, DsMenuOverrides, DsMenuItemOverrides, DsMenuListOverrides, DsMobileStepperOverrides, DsModalOverrides, DsNativeSelectOverrides, DsNoSsrOverrides, DsNotistackOverrides, DsOtpOverrides, DsOutlinedInputOverrides, DsPaginationOverrides, DsPaginationItemOverrides, DsPaperOverrides, DsPopoverOverrides, DsPopperOverrides, DsPopupOverrides, DsPortalOverrides, DsProgressIndicatorOverrides, DsProgressTrackerOverrides, DsRadioOverrides, DsRadioGroupOverrides, DsRatingOverrides, DsRemixIconOverrides, DsScopedCssBaselineOverrides, DsSearchbarOverrides, DsSelectOverrides, DsSkeletonOverrides, DsSlideOverrides, DsSliderOverrides, DsSpeedDialOverrides, DsSpeedDialActionOverrides, DsSpeedDialIconOverrides, DsStackOverrides, DsStepOverrides, DsStepButtonOverrides, DsStepConnectorOverrides, DsStepContentOverrides, DsStepIconOverrides, DsStepLabelOverrides, DsStepperOverrides, DsSvgIconOverrides, DsSwipeableDrawerOverrides, DsSwitchOverrides, DsTabOverrides, DsTabScrollButtonOverrides, DsTableOverrides, DsTableBodyOverrides, DsTableCellOverrides, DsTableContainerOverrides, DsTableFooterOverrides, DsTableHeadOverrides, DsTablePaginationOverrides, DsTableRowOverrides, DsTableSortLabelOverrides, DsTabsOverrides, DsTagOverrides, DsTagGroupOverrides, DsTextAreaOverrides, DsTextFieldOverrides, DsTextFieldPasswordOverrides, DsTextareaAutosizeOverrides, DsToastOverrides, DsToggleOverrides, DsToggleButtonOverrides, DsToggleButtonGroupOverrides, DsToolbarOverrides, DsTooltipOverrides, DsTypographyOverrides, DsZoomOverrides } from '../Components';
+import { DsAccordionOverrides, DsAccordionActionsOverrides, DsAccordionDetailsOverrides, DsAccordionSummaryOverrides, DsAddItemOverrides, DsAppBarOverrides, DsAutocompleteOverrides, DsAvatarOverrides, DsAvatarGroupOverrides, DsBackdropOverrides, DsBadgeOverrides, DsBottomNavigationOverrides, DsBottomNavigationActionOverrides, DsBottomSheetOverrides, DsBoxOverrides, DsBreadcrumbsOverrides, DsButtonOverrides, DsButtonBaseOverrides, DsButtonGroupOverrides, DsCardOverrides, DsCardActionAreaOverrides, DsCardActionsOverrides, DsCardContentOverrides, DsCardHeaderOverrides, DsCardMediaOverrides, DsCarouselOverrides, DsCheckboxOverrides, DsChipOverrides, DsChipGroupOverrides, DsCircularProgressOverrides, DsClickAwayListenerOverrides, DsCollapseOverrides, DsCssBaselineOverrides, DsContainerOverrides, DsDialogOverrides, DsDialogActionsOverrides, DsDialogContentOverrides, DsDialogContentTextOverrides, DsDialogTitleOverrides, DsDividerOverrides, DsDrawerOverrides, DsFabOverrides, DsFadeOverrides, DsFileUploaderOverrides, DsFilledInputOverrides, DsFormControlOverrides, DsFormControlLabelOverrides, DsFormGroupOverrides, DsFormHelperTextOverrides, DsFormLabelOverrides, DsGlobalStylesOverrides, DsGridOverrides, DsGrowOverrides, DsHeaderOverrides, DsHelperTextOverrides, DsIconOverrides, DsIconButtonOverrides, DsImageOverrides, DsImageListOverrides, DsImageListItemOverrides, DsImageListItemBarOverrides, DsInputOverrides, DsInputAdornmentOverrides, DsInputBaseOverrides, DsInputLabelOverrides, DsLinearProgressOverrides, DsLinkOverrides, DsListOverrides, DsListItemOverrides, DsListItemAvatarOverrides, DsListItemButtonOverrides, DsListItemIconOverrides, DsListItemSecondaryActionOverrides, DsListItemTextOverrides, DsListSubheaderOverrides, DsLoaderOverrides, DsMenuOverrides, DsMenuItemOverrides, DsMenuListOverrides, DsMobileStepperOverrides, DsModalOverrides, DsNativeSelectOverrides, DsNoSsrOverrides, DsNotistackOverrides, DsOtpOverrides, DsOutlinedInputOverrides, DsPaginationOverrides, DsPaginationItemOverrides, DsPaperOverrides, DsPopoverOverrides, DsPopperOverrides, DsPopupOverrides, DsPortalOverrides, DsProgressIndicatorOverrides, DsProgressTrackerOverrides, DsRadioOverrides, DsRadioGroupOverrides, DsRatingOverrides, DsRemixIconOverrides, DsScopedCssBaselineOverrides, DsSearchbarOverrides, DsSelectOverrides, DsSkeletonOverrides, DsSlideOverrides, DsSliderOverrides, DsSpeedDialOverrides, DsSpeedDialActionOverrides, DsSpeedDialIconOverrides, DsStackOverrides, DsStepOverrides, DsStepButtonOverrides, DsStepConnectorOverrides, DsStepContentOverrides, DsStepIconOverrides, DsStepLabelOverrides, DsStepperOverrides, DsSvgIconOverrides, DsSwipeableDrawerOverrides, DsSwitchOverrides, DsTabOverrides, DsTabScrollButtonOverrides, DsTableOverrides, DsTableBodyOverrides, DsTableCellOverrides, DsTableContainerOverrides, DsTableFooterOverrides, DsTableHeadOverrides, DsTablePaginationOverrides, DsTableRowOverrides, DsTableSortLabelOverrides, DsTabsOverrides, DsTagOverrides, DsTagGroupOverrides, DsTextAreaOverrides, DsTextFieldOverrides, DsTextFieldPasswordOverrides, DsTextareaAutosizeOverrides, DsToastOverrides, DsToggleOverrides, DsToggleButtonOverrides, DsToggleButtonGroupOverrides, DsToolbarOverrides, DsTooltipOverrides, DsTypographyOverrides, DsZoomOverrides } from '../Components';
 import XDatePickerComponentOverrides from '../x-datepicker/componentOverrides';
 const componentOverrides = {
     ...DsAccordionOverrides,
     ...DsAccordionActionsOverrides,
     ...DsAccordionDetailsOverrides,
+    ...DsAddItemOverrides,
     ...DsAccordionSummaryOverrides,
     ...DsAppBarOverrides,
     ...DsAutocompleteOverrides,

package/dist/Theme/index.d.ts

@@ -23,3 +23,8 @@ declare module '@mui/material/styles' {
         shadows: DsShadows;
     }
 }
+declare module '@mui/material/Badge' {
+    interface BadgePropsColorOverrides {
+        inverse: true;
+    }
+}

package/dist/Theme/radius.js

@@ -2,6 +2,7 @@ const dsRadius = {
     zero: '0px',
     deepFreeze: '2px',
     quickFreeze: '4px',
+    gelid: '6px',
     glacial: '8px',
     frostbite: '12px',
     bitterCold: '16px',

package/dist/Theme/spacing.js

@@ -3,6 +3,7 @@ const dsSpacingCssVars = {
     zero: 0,
     deepFreeze: 2,
     quickFreeze: 4,
+    gelid: 6,
     glacial: 8,
     frostbite: 12,
     bitterCold: 16,

package/dist/Types/DsRadius.d.ts

@@ -1,4 +1,4 @@
-export type DsRadiusKeys = 'zero' | 'deepFreeze' | 'quickFreeze' | 'glacial' | 'frostbite' | 'bitterCold' | 'cool' | 'mild' | 'pleasant';
+export type DsRadiusKeys = 'zero' | 'deepFreeze' | 'quickFreeze' | 'gelid' | 'glacial' | 'frostbite' | 'bitterCold' | 'cool' | 'mild' | 'pleasant';
 export type DsRadius = {
     [key in DsRadiusKeys]: string;
 };

package/dist/Types/DsSpacing.d.ts

@@ -1,4 +1,4 @@
-export type DsSpacingKeys = 'zero' | 'deepFreeze' | 'quickFreeze' | 'glacial' | 'frostbite' | 'bitterCold' | 'cool' | 'mild' | 'pleasant' | 'warm' | 'tepid' | 'tropical' | 'hot' | 'blazing' | 'molten' | 'superheated' | 'meltdown' | 'whiteHot' | 'plasma';
+export type DsSpacingKeys = 'zero' | 'deepFreeze' | 'quickFreeze' | 'gelid' | 'glacial' | 'frostbite' | 'bitterCold' | 'cool' | 'mild' | 'pleasant' | 'warm' | 'tepid' | 'tropical' | 'hot' | 'blazing' | 'molten' | 'superheated' | 'meltdown' | 'whiteHot' | 'plasma';
 export type DsSpacing = {
     [key in DsSpacingKeys]: number;
 };

package/dist/x-charts/Hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@mui/x-charts/hooks';
+export { useItemTooltip } from '@mui/x-charts';
+export { useAxisTooltip } from '@mui/x-charts';

package/dist/x-charts/Hooks/index.js

@@ -0,0 +1,5 @@
+// Re-export all hooks from @mui/x-charts
+export * from '@mui/x-charts/hooks';
+// Chart-specific tooltip hooks
+export { useItemTooltip } from '@mui/x-charts';
+export { useAxisTooltip } from '@mui/x-charts';

package/dist/x-charts/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Components';
 export * from './Constants';
+export * from './Hooks';
 export * from './Types';

package/dist/x-charts/index.js

@@ -1,3 +1,4 @@
 export * from './Components';
 export * from './Constants';
+export * from './Hooks';
 export * from './Types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "3.0.1-beta.0",
+  "version": "3.0.1-beta.1",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",
@@ -37,8 +37,8 @@
     "utility-types": "^3.11.0"
   },
   "peerDependencies": {
-    "react": "^17.x.x || ^18.x.x",
-    "react-dom": "^17.x.x || ^18.x.x"
+    "react": "^17.x.x || ^18.x.x || ^19.x.x",
+    "react-dom": "^17.x.x || ^18.x.x || ^19.x.x"
   },
   "scripts": {
     "compile": "tsc",