@am92/react-design-system 2.10.2 → 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/DsAvatar/DsAvatar.Overrides.d.ts

@@ -2,56 +2,60 @@ import { DsAvatarProps } from './DsAvatar.Types';
 export declare const DsAvatarOverrides: {
     MuiAvatar: {
         defaultProps: DsAvatarProps;
-        variants: ({
-            props: Partial<DsAvatarProps>;
-            style: {
-                borderWidth: string;
-                borderStyle: string;
-                borderColor: string;
-                color: string;
-                backgroundColor: string;
-                fontWeight?: undefined;
-                fontSize?: undefined;
-                lineHeight?: undefined;
-                letterSpacing?: undefined;
-                width?: undefined;
-                height?: undefined;
-                '> .MuiIcon-root'?: undefined;
+        styleOverrides: {
+            root: {
+                variants: ({
+                    props: Partial<DsAvatarProps>;
+                    style: {
+                        borderWidth: string;
+                        borderStyle: string;
+                        borderColor: string;
+                        color: string;
+                        backgroundColor: string;
+                        fontWeight?: undefined;
+                        fontSize?: undefined;
+                        lineHeight?: undefined;
+                        letterSpacing?: undefined;
+                        width?: undefined;
+                        height?: undefined;
+                        '> .MuiIcon-root'?: undefined;
+                    };
+                } | {
+                    props: Partial<DsAvatarProps>;
+                    style: {
+                        color: string;
+                        backgroundColor: string;
+                        borderWidth?: undefined;
+                        borderStyle?: undefined;
+                        borderColor?: undefined;
+                        fontWeight?: undefined;
+                        fontSize?: undefined;
+                        lineHeight?: undefined;
+                        letterSpacing?: undefined;
+                        width?: undefined;
+                        height?: undefined;
+                        '> .MuiIcon-root'?: undefined;
+                    };
+                } | {
+                    props: Partial<DsAvatarProps>;
+                    style: {
+                        fontWeight: string;
+                        fontSize: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        width: string;
+                        height: string;
+                        '> .MuiIcon-root': {
+                            fontSize: string;
+                        };
+                        borderWidth?: undefined;
+                        borderStyle?: undefined;
+                        borderColor?: undefined;
+                        color?: undefined;
+                        backgroundColor?: undefined;
+                    };
+                })[];
             };
-        } | {
-            props: Partial<DsAvatarProps>;
-            style: {
-                color: string;
-                backgroundColor: string;
-                borderWidth?: undefined;
-                borderStyle?: undefined;
-                borderColor?: undefined;
-                fontWeight?: undefined;
-                fontSize?: undefined;
-                lineHeight?: undefined;
-                letterSpacing?: undefined;
-                width?: undefined;
-                height?: undefined;
-                '> .MuiIcon-root'?: undefined;
-            };
-        } | {
-            props: Partial<DsAvatarProps>;
-            style: {
-                fontWeight: string;
-                fontSize: string;
-                lineHeight: string;
-                letterSpacing: string;
-                width: string;
-                height: string;
-                '> .MuiIcon-root': {
-                    fontSize: string;
-                };
-                borderWidth?: undefined;
-                borderStyle?: undefined;
-                borderColor?: undefined;
-                color?: undefined;
-                backgroundColor?: undefined;
-            };
-        })[];
+        };
     };
 };

package/dist/Components/DsAvatar/DsAvatar.Overrides.js

@@ -2,110 +2,114 @@ import { DsAvatarDefaultProps } from './DsAvatar.Types';
 export const DsAvatarOverrides = {
     MuiAvatar: {
         defaultProps: DsAvatarDefaultProps,
-        variants: [
-            {
-                props: { 'ds-variant': 'text' },
-                style: {
-                    borderWidth: '1px',
-                    borderStyle: 'solid',
-                    borderColor: 'var(--ds-colour-strokeDefault)',
-                    color: 'var(--ds-colour-typoPrimary)',
-                    backgroundColor: 'var(--ds-colour-surfaceSecondary)'
-                }
-            },
-            {
-                props: { 'ds-variant': 'icon' },
-                style: {
-                    color: 'var(--ds-colour-iconDefault)',
-                    backgroundColor: 'transparent'
-                }
-            },
-            {
-                props: { 'ds-size': 'S' },
-                style: {
-                    fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
-                    fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
-                    lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
-                    width: 'var(--ds-rules-avatarSSize)',
-                    height: 'var(--ds-rules-avatarSSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarSSize)'
+        styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { 'ds-variant': 'text' },
+                        style: {
+                            borderWidth: '1px',
+                            borderStyle: 'solid',
+                            borderColor: 'var(--ds-colour-strokeDefault)',
+                            color: 'var(--ds-colour-typoPrimary)',
+                            backgroundColor: 'var(--ds-colour-surfaceSecondary)'
+                        }
+                    },
+                    {
+                        props: { 'ds-variant': 'icon' },
+                        style: {
+                            color: 'var(--ds-colour-iconDefault)',
+                            backgroundColor: 'transparent'
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'S' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
+                            fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
+                            lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
+                            width: 'var(--ds-rules-avatarSSize)',
+                            height: 'var(--ds-rules-avatarSSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarSSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'M' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
+                            fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
+                            lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
+                            width: 'var(--ds-rules-avatarMSize)',
+                            height: 'var(--ds-rules-avatarMSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarMSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'L' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-bodyRegularLarge-fontWeight)',
+                            fontSize: 'var(--ds-typo-bodyRegularLarge-fontSize)',
+                            lineHeight: 'var(--ds-typo-bodyRegularLarge-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-bodyRegularLarge-letterSpacing)',
+                            width: 'var(--ds-rules-avatarLSize)',
+                            height: 'var(--ds-rules-avatarLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarLSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'XL' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-headingBoldMedium-fontWeight)',
+                            fontSize: 'var(--ds-typo-headingBoldMedium-fontSize)',
+                            lineHeight: 'var(--ds-typo-headingBoldMedium-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-headingBoldMedium-letterSpacing)',
+                            width: 'var(--ds-rules-avatarXLSize)',
+                            height: 'var(--ds-rules-avatarXLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarXLSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: { 'ds-size': 'XXL' },
+                        style: {
+                            fontWeight: 'var(--ds-typo-headingBoldLarge-fontWeight)',
+                            fontSize: 'var(--ds-typo-headingBoldLarge-fontSize)',
+                            lineHeight: 'var(--ds-typo-headingBoldLarge-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-headingBoldLarge-letterSpacing)',
+                            width: 'var(--ds-rules-avatarXXLSize)',
+                            height: 'var(--ds-rules-avatarXXLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatarXXLSize)'
+                            }
+                        }
+                    },
+                    {
+                        props: {
+                            'ds-size': '3XL'
+                        },
+                        style: {
+                            fontWeight: 'var(--ds-typo-headingBoldExtraLarge-fontWeight)',
+                            fontSize: 'var(--ds-typo-headingBoldExtraLarge-fontSize)',
+                            lineHeight: 'var(--ds-typo-headingBoldExtraLarge-lineHeight)',
+                            letterSpacing: 'var(--ds-typo-headingBoldExtraLarge-letterSpacing)',
+                            width: 'var(--ds-rules-avatar3XLSize)',
+                            height: 'var(--ds-rules-avatar3XLSize)',
+                            '> .MuiIcon-root': {
+                                fontSize: 'var(--ds-rules-avatar3XLSize)'
+                            }
+                        }
                     }
-                }
-            },
-            {
-                props: { 'ds-size': 'M' },
-                style: {
-                    fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
-                    fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
-                    lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
-                    width: 'var(--ds-rules-avatarMSize)',
-                    height: 'var(--ds-rules-avatarMSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarMSize)'
-                    }
-                }
-            },
-            {
-                props: { 'ds-size': 'L' },
-                style: {
-                    fontWeight: 'var(--ds-typo-bodyRegularLarge-fontWeight)',
-                    fontSize: 'var(--ds-typo-bodyRegularLarge-fontSize)',
-                    lineHeight: 'var(--ds-typo-bodyRegularLarge-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyRegularLarge-letterSpacing)',
-                    width: 'var(--ds-rules-avatarLSize)',
-                    height: 'var(--ds-rules-avatarLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarLSize)'
-                    }
-                }
-            },
-            {
-                props: { 'ds-size': 'XL' },
-                style: {
-                    fontWeight: 'var(--ds-typo-headingBoldMedium-fontWeight)',
-                    fontSize: 'var(--ds-typo-headingBoldMedium-fontSize)',
-                    lineHeight: 'var(--ds-typo-headingBoldMedium-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-headingBoldMedium-letterSpacing)',
-                    width: 'var(--ds-rules-avatarXLSize)',
-                    height: 'var(--ds-rules-avatarXLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarXLSize)'
-                    }
-                }
-            },
-            {
-                props: { 'ds-size': 'XXL' },
-                style: {
-                    fontWeight: 'var(--ds-typo-headingBoldLarge-fontWeight)',
-                    fontSize: 'var(--ds-typo-headingBoldLarge-fontSize)',
-                    lineHeight: 'var(--ds-typo-headingBoldLarge-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-headingBoldLarge-letterSpacing)',
-                    width: 'var(--ds-rules-avatarXXLSize)',
-                    height: 'var(--ds-rules-avatarXXLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatarXXLSize)'
-                    }
-                }
-            },
-            {
-                props: {
-                    'ds-size': '3XL'
-                },
-                style: {
-                    fontWeight: 'var(--ds-typo-headingBoldExtraLarge-fontWeight)',
-                    fontSize: 'var(--ds-typo-headingBoldExtraLarge-fontSize)',
-                    lineHeight: 'var(--ds-typo-headingBoldExtraLarge-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-headingBoldExtraLarge-letterSpacing)',
-                    width: 'var(--ds-rules-avatar3XLSize)',
-                    height: 'var(--ds-rules-avatar3XLSize)',
-                    '> .MuiIcon-root': {
-                        fontSize: 'var(--ds-rules-avatar3XLSize)'
-                    }
-                }
+                ]
             }
-        ]
+        }
     }
 };

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 });
+});