@am92/react-design-system 2.9.5 → 2.9.7

package/dist/Components/DsAccordion/DsAccordion.Component.js

@@ -9,6 +9,6 @@ export const DsAccordion = inProps => {
         props: inProps,
         name: 'MuiAccordion'
     });
-    const { header, HeaderProps, summary, SummaryProps, expandIcon = (_jsx(DsRemixIcon, { className: "ri-arrow-drop-down-line", fontSize: "bitterCold" })), ...AccordionProps } = props;
+    const { header, HeaderProps, summary, SummaryProps, expandIcon = (_jsx(DsRemixIcon, { className: "ri-arrow-down-s-line", fontSize: "bitterCold" })), ...AccordionProps } = props;
     return (_jsxs(Accordion, { ...AccordionProps, children: [_jsx(DsAccordionSummary, { expandIcon: expandIcon, ...HeaderProps, children: header }), summary && (_jsx(DsAccordionDetails, { ...SummaryProps, children: summary }))] }));
 };

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

@@ -6,8 +6,10 @@ export declare const DsAccordionOverrides: {
                 backgroundColor: string;
                 backgroundImage: string;
                 overflow: string;
-                '&:not(:first-of-type):not(.Mui-expanded)': {
-                    marginTop: string;
+                paddingTop: string;
+                paddingBottom: string;
+                '&.MuiAccordion-root:not(:last-of-type)': {
+                    borderBottom: string;
                 };
             };
         };

package/dist/Components/DsAccordion/DsAccordion.Overrides.js

@@ -7,8 +7,10 @@ export const DsAccordionOverrides = {
                 backgroundColor: 'var(--ds-colour-surfacePrimary)',
                 backgroundImage: 'none',
                 overflow: 'hidden',
-                '&:not(:first-of-type):not(.Mui-expanded)': {
-                    marginTop: '-1px'
+                paddingTop: 'var(--ds-spacing-glacial)',
+                paddingBottom: 'var(--ds-spacing-glacial)',
+                '&.MuiAccordion-root:not(:last-of-type)': {
+                    borderBottom: '1px solid var(--ds-colour-stateDisabledSurface)',
                 }
             }
         }

package/dist/Components/DsAccordion/DsAccordion.Types.js

@@ -1,5 +1,6 @@
 export const DsAccordionDefaultProps = {
     elevation: -1,
     header: '',
-    summary: ''
+    summary: '',
+    disableGutters: true
 };

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

@@ -3,7 +3,6 @@ export declare const DsAccordionDetailsOverrides: {
         styleOverrides: {
             root: {
                 border: string;
-                borderBottom: string;
                 padding: string;
                 fontWeight: string;
                 fontSize: string;

package/dist/Components/DsAccordionDetails/DsAccordionDetails.Overrides.js

@@ -3,12 +3,11 @@ export const DsAccordionDetailsOverrides = {
         styleOverrides: {
             root: {
                 border: 'none',
-                borderBottom: '1px solid var(--ds-colour-strokeDefault)',
                 padding: 'var(--ds-spacing-bitterCold)',
-                fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
-                fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
-                lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)'
+                fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
+                fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
+                lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
+                letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)'
             }
         }
     }

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

@@ -5,7 +5,6 @@ export declare const DsAccordionSummaryOverrides: {
                 padding: string;
                 '&.Mui-expanded': {
                     minHeight: string;
-                    backgroundColor: string;
                 };
             };
             content: {

package/dist/Components/DsAccordionSummary/DsAccordionSummary.Overrides.js

@@ -5,17 +5,16 @@ export const DsAccordionSummaryOverrides = {
                 padding: 'var(--ds-spacing-frostbite) var(--ds-spacing-bitterCold)',
                 '&.Mui-expanded': {
                     minHeight: '0px',
-                    backgroundColor: 'var(--ds-colour-surfaceSecondary)'
                 }
             },
             content: {
                 margin: 'var(--ds-spacing-zero)',
                 width: 'calc(100% - 40px)',
                 marginRight: 'var(--ds-spacing-bitterCold)',
-                fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
-                fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
-                lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
+                fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
+                fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
+                lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
+                letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)',
                 '&.Mui-expanded': {
                     margin: 'var(--ds-spacing-zero)',
                     marginRight: 'var(--ds-spacing-bitterCold)'

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

@@ -21,7 +21,6 @@ export const DsDialog = (props) => {
         }
     };
     const { title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
-    console.log('props', props);
     const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
     const accessibilityProps = {};
     const isFlushed = primaryButtonText &&

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

@@ -8,6 +8,12 @@ export declare const DsFormControlLabelOverrides: {
                         cursor: string;
                     };
                 };
+                '.Mui-checked ~ *': {
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
             };
             label: {
                 padding: string;

package/dist/Components/DsFormControlLabel/DsFormControlLabel.Overrides.js

@@ -7,6 +7,12 @@ export const DsFormControlLabelOverrides = {
                         pointerEvents: 'all',
                         cursor: 'not-allowed'
                     }
+                },
+                '.Mui-checked ~ *': {
+                    fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
+                    fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
+                    lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
+                    letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)'
                 }
             },
             label: {

package/dist/Components/DsInputBase/DsInputBase.Overrides.js

@@ -115,10 +115,9 @@ export const DsInputBaseOverrides = {
                     padding: 'var(--ds-spacing-deepFreeze)',
                     height: 'auto'
                 },
-                // The warning for SSR let it be
-                '> :nth-child(even)': {
+                '> :first-of-type + *': {
                     marginLeft: 'var(--ds-spacing-quickFreeze)'
-                }
+                },
             },
             input: {
                 padding: 'var(--ds-spacing-quickFreeze) var(--ds-spacing-zero)',

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

@@ -6,6 +6,10 @@ export declare const DsLinkOverrides: {
                 cursor: string;
                 textDecorationColor: string;
                 textUnderlinePosition: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
                 '&:visited': {
                     color: string;
                     textDecorationColor: string;
@@ -25,6 +29,7 @@ export declare const DsLinkOverrides: {
                 };
                 '&:focus': {
                     textDecoration: string;
+                    textDecorationThickness: string;
                 };
             };
         };

package/dist/Components/DsLink/DsLink.Overrides.js

@@ -7,6 +7,10 @@ export const DsLinkOverrides = {
                 cursor: 'pointer',
                 textDecorationColor: 'var(--ds-colour-actionSecondary)',
                 textUnderlinePosition: 'under',
+                fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
+                fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
+                lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
+                letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
                 '&:visited': {
                     color: 'var(--ds-colour-stateSelectedVisitedTextLink)',
                     textDecorationColor: 'var(--ds-colour-stateSelectedVisitedTextLink)'
@@ -25,7 +29,8 @@ export const DsLinkOverrides = {
                     textDecorationColor: 'var(--ds-colour-typoDisabled)'
                 },
                 '&:focus': {
-                    textDecoration: 'underline'
+                    textDecoration: 'underline',
+                    textDecorationThickness: '2px',
                 }
             }
         }

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

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-import { DsOtpProps } from './DsOtp.Types';
-export declare const DsOtp: FC<DsOtpProps>;
+import React from 'react';
+import { DsOtpProps, DsOtpRef } from './DsOtp.Types';
+export declare const DsOtp: React.ForwardRefExoticComponent<Omit<DsOtpProps, "ref"> & React.RefAttributes<DsOtpRef>>;

package/dist/Components/DsOtp/DsOtp.Component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { DsBox } from '../DsBox';
 import { DsStack } from '../DsStack';
 import { DsInputLabel } from '../DsInputLabel';
@@ -9,10 +9,11 @@ import { DsOtpDefaultProps } from './DsOtp.Types';
 const KEY_CODES = {
     BACK_SPACE: 'Backspace'
 };
-export const DsOtp = (inProps) => {
+export const DsOtp = forwardRef((inProps, ref) => {
     const props = { ...DsOtpDefaultProps, ...inProps };
+    const domRef = useRef(null);
     const optInputRefs = new Map();
-    const { initialOtp = '', length } = props;
+    const { initialOtp = '', length, autoFocus } = props;
     const [otp, setOtp] = useState(initialOtp ? [...initialOtp].slice(0, length) : []);
     const handleFocus = (event) => {
         const { onFocus } = props;
@@ -85,9 +86,17 @@ export const DsOtp = (inProps) => {
             onComplete(otpString);
         }
     };
+    useImperativeHandle(ref, () => ({
+        resetOtpValues,
+        domNode: domRef?.current
+    }));
     const resetOtpValues = () => {
         setOtp([]);
     };
+    useEffect(() => {
+        if (autoFocus)
+            _handleNavigation(-1);
+    }, [autoFocus]);
     const renderOtpBoxes = () => {
         const { label, labelSupportText, name, length, helperText, inputProps = {}, HelperTextProps, BoxProps, InputLabelProps, ...restProps } = props;
         const lengthArray = Array(length).fill('');
@@ -99,12 +108,12 @@ export const DsOtp = (inProps) => {
                 textAlign: 'center'
             }
         };
-        return lengthArray.map((value, index) => (_jsx(DsTextField, { type: "tel", inputMode: "tel", ...restProps, name: `${name}.${index}`, "ds-variant": "otp", inputProps: otpInputProps, onPaste: handlePaste, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, value: otp[index] || '', inputRef: ref => {
+        return lengthArray.map((value, index) => (_jsx(DsTextField, { type: 'tel', inputMode: 'tel', ...restProps, name: `${name}.${index}`, "ds-variant": 'otp', inputProps: otpInputProps, onPaste: handlePaste, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, value: otp[index] || '', inputRef: ref => {
                 optInputRefs.set(index, ref);
             } }, index)));
     };
     const { id, name, label, labelSupportText, helperText, success, color, error, inputProps, disabled, InputLabelProps, HelperTextProps, BoxProps } = props;
-    return (_jsxs(DsBox, { ...BoxProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, 
+    return (_jsxs(DsBox, { ref: domRef, ...BoxProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, 
                 // error={error}
-                success: success, htmlFor: id || name, disabled: disabled, ...InputLabelProps }), _jsx(DsStack, { direction: "row", spacing: "var(--ds-spacing-glacial)", style: {}, children: renderOtpBoxes() }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...HelperTextProps })] }));
-};
+                success: success, htmlFor: id || name, disabled: disabled, ...InputLabelProps }), _jsx(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-glacial)', style: {}, children: renderOtpBoxes() }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...HelperTextProps })] }));
+});

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

@@ -6,8 +6,13 @@ export interface DsOtpProps extends DsTextFieldProps {
     length?: number;
     initialOtp?: string;
     BoxProps?: DsBoxProps;
+    autoFocus?: boolean;
 }
 export declare const DsOtpDefaultProps: DsOtpProps;
+export type DsOtpRef = {
+    resetOtpValues: () => void;
+    domNode: HTMLDivElement | null;
+};
 export interface DsOtpState {
     otp: string[];
 }

package/dist/Components/DsProgressTracker/{DsProgressStepper.Component.d.ts → Components/DsProgressStepper.Component.d.ts}

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { DsProgressStepperProps } from './DsProgressStepper.Types';
+import { DsProgressStepperProps } from '../DsProgressStepper.Types';
 export declare const DsProgressStepper: FC<DsProgressStepperProps>;

package/dist/Components/DsProgressTracker/{DsProgressStepper.Component.js → Components/DsProgressStepper.Component.js}

@@ -1,21 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { DsProgressStepperDefaultProps } from './DsProgressStepper.Types';
-import { DsStepper } from '../DsStepper';
-import { DsStep } from '../DsStep';
-import { DsStepLabel } from '../DsStepLabel';
-import { DsRemixIcon } from '../DsRemixIcon';
-export const DsProgressStepper = (inProps) => {
+import { DsProgressStepperDefaultProps } from '../DsProgressStepper.Types';
+import { DsRemixIcon } from '../../DsRemixIcon';
+import { DsStep } from '../../DsStep';
+import { DsStepLabel } from '../../DsStepLabel';
+import { DsStepper } from '../../DsStepper';
+export const DsProgressStepper = inProps => {
     const props = { ...DsProgressStepperDefaultProps, ...inProps };
     const renderStepIcon = (stepProps) => {
         const { active, error, completed, icon } = stepProps;
         if (error) {
-            return (_jsx(DsRemixIcon, { className: "ri-close-circle-fill", sx: { color: 'var(--ds-colour-iconNegative)' } }));
+            return (_jsx(DsRemixIcon, { className: 'ri-close-circle-fill', sx: { color: 'var(--ds-colour-iconNegative)' } }));
         }
         if (completed) {
-            return (_jsx(DsRemixIcon, { className: "ri-checkbox-circle-fill", sx: { color: 'var(--ds-colour-iconPositive)' } }));
+            return (_jsx(DsRemixIcon, { className: 'ri-checkbox-circle-fill', sx: { color: 'var(--ds-colour-iconPositive)' } }));
         }
         if (active) {
-            return (_jsx(DsRemixIcon, { className: "ri-play-circle-fill", color: "iconActionSecondary" }));
+            return (_jsx(DsRemixIcon, { className: 'ri-play-circle-fill', color: 'iconActionSecondary' }));
         }
         return _jsx(_Fragment, { children: icon });
     };

package/dist/Components/DsProgressTracker/Components/DsProgressTrackerHeader.Component.d.ts

@@ -0,0 +1,2 @@
+import { DsProgressTrackerProps } from '../DsProgressTracker.Types';
+export declare const DsProgressTrackerHeader: (props: DsProgressTrackerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsProgressTracker/Components/DsProgressTrackerHeader.Component.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DsLinearProgress } from '../../DsLinearProgress';
+import { DsProgressIndicator } from '../../DsProgressIndicator';
+import { DsRemixIcon } from '../../DsRemixIcon';
+import { DsStack } from '../../DsStack';
+import { DsTypography } from '../../DsTypography';
+export const DsProgressTrackerHeader = (props) => {
+    const { activeStep, steps, nextStepLabelPrefix, dense, onClick, StepperProps, ...wrapperProps } = props;
+    const currentStep = steps[activeStep] || {};
+    const nextStepIndex = activeStep + 1;
+    const nextStep = steps[nextStepIndex];
+    const haveNextStep = nextStepIndex <= steps.length;
+    const isNextStepLastStep = nextStepIndex === steps.length;
+    const fillPercentage = Math.round((nextStepIndex / steps.length) * 100);
+    const renderStepsLabel = () => {
+        return (_jsx(DsTypography, { component: 'div', textAlign: 'right', color: 'var(--ds-colour-typoTertiary)', variant: 'subheadingSemiboldDefault', children: isNextStepLastStep
+                ? 'Yay! you are almost done'
+                : `${nextStepLabelPrefix} ${nextStep.stepName}` }));
+    };
+    return (_jsx(_Fragment, { children: dense ? (_jsxs(DsStack, { sx: {
+                backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+                ...wrapperProps?.sx
+            }, ...wrapperProps, children: [_jsxs(DsStack, { direction: 'row', justifyContent: 'space-between', px: 'var(--ds-spacing-bitterCold)', pt: 'var(--ds-spacing-frostbite)', pb: 'calc(var(--ds-spacing-frostbite) - var(--ds-spacing-deepFreeze))', onClick: onClick, children: [_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', children: `STEP ${activeStep + 1} OF ${steps.length}` }), _jsxs(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-frostbite)', children: [haveNextStep && renderStepsLabel(), props['ds-variant'] !== 'header' && (_jsx(DsRemixIcon, { fontSize: 'bitterCold', className: 'ri-arrow-right-s-line' }))] })] }), _jsx(DsLinearProgress, { color: 'secondary', value: fillPercentage, variant: 'determinate', sx: {
+                        backgroundColor: 'transparent',
+                        height: '2px',
+                        '.MuiLinearProgress-bar1Determinate	': {
+                            borderRadius: '1px'
+                        }
+                    } })] })) : (_jsxs(DsStack, { sx: {
+                p: 'var(--ds-spacing-bitterCold)',
+                alignItems: 'center',
+                borderBottom: '1px solid var(--ds-colour-strokeDefault)',
+                backgroundColor: 'var(--ds-colour-surfaceBackground)',
+                cursor: props['ds-variant'] === 'default' ? 'pointer' : 'unset',
+                ...wrapperProps?.sx
+            }, spacing: 'var(--ds-spacing-bitterCold)', direction: 'row', onClick: onClick, ...wrapperProps, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { flexGrow: 1, spacing: 'var(--ds-spacing-quickFreeze)', children: [_jsx(DsTypography, { component: 'div', textAlign: 'right', color: 'var(--ds-colour-actionSecondary)', variant: 'headingBoldExtraSmall', children: currentStep.stepName }), haveNextStep && renderStepsLabel()] })] })) }));
+};

package/dist/Components/DsProgressTracker/DsProgressTracker.Component.js

@@ -1,13 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { DsProgressTrackerDefaultProps } from './DsProgressTracker.Types';
-import { DsProgressStepper } from './DsProgressStepper.Component';
-import { DsProgressIndicator } from '../DsProgressIndicator';
 import { DsCollapse } from '../DsCollapse';
 import { DsBox } from '../DsBox';
-import { DsTypography } from '../DsTypography';
-import { DsStack } from '../DsStack';
-export const DsProgressTracker = (inProps) => {
+import { DsProgressTrackerHeader } from './Components/DsProgressTrackerHeader.Component';
+import { DsProgressStepper } from './Components/DsProgressStepper.Component';
+export const DsProgressTracker = inProps => {
     const props = { ...DsProgressTrackerDefaultProps, ...inProps };
     const [open, setOpen] = useState(props['ds-variant'] === 'steps' ? true : false);
     const getMergedProps = () => {
@@ -36,21 +34,8 @@ export const DsProgressTracker = (inProps) => {
         if (mergedProps['ds-variant'] === 'steps') {
             return null;
         }
-        const { activeStep, steps, nextStepLabelPrefix } = mergedProps;
-        const currentStep = steps[activeStep] || {};
-        const nextStepIndex = activeStep + 1;
-        const nextStep = steps[nextStepIndex];
-        const haveNextStep = nextStepIndex <= steps.length;
-        const isNextStepLastStep = nextStepIndex === steps.length;
-        return (_jsxs(DsStack, { sx: {
-                p: 'var(--ds-spacing-bitterCold)',
-                alignItems: 'center',
-                borderBottom: '1px solid var(--ds-colour-strokeDefault)',
-                backgroundColor: 'var(--ds-colour-surfaceBackground)',
-                cursor: mergedProps['ds-variant'] === 'default' ? 'pointer' : 'unset'
-            }, spacing: "var(--ds-spacing-bitterCold)", direction: "row", onClick: handleToggleCollapse, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { flexGrow: 1, direction: "column", spacing: "var(--ds-spacing-quickFreeze)", children: [_jsx(DsTypography, { component: "div", textAlign: "right", color: "var(--ds-colour-actionSecondary)", variant: "headingBoldExtraSmall", children: currentStep.stepName }), haveNextStep && (_jsx(DsTypography, { component: "div", textAlign: "right", color: "var(--ds-colour-typoTertiary)", variant: "subheadingSemiboldDefault", children: isNextStepLastStep
-                                ? 'Yay! you are almost done'
-                                : `${nextStepLabelPrefix}${nextStep.stepName}` }))] })] }));
+        const { onClick } = mergedProps;
+        return (_jsx(_Fragment, { children: _jsx(DsProgressTrackerHeader, { ...mergedProps, onClick: typeof onClick === 'function' ? onClick : handleToggleCollapse }) }));
     };
     const mergedProps = props;
     const { sx } = mergedProps;

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

@@ -1,13 +1,33 @@
 import { DsBoxProps } from '../DsBox';
+import { DsStackProps } from '../DsStack';
 import { DsProgressStepperProps, DsProgressStepperStepProps } from './DsProgressStepper.Types';
-export interface DsProgressTrackerProps {
+export interface DsProgressTrackerProps extends DsStackProps {
     /** This property can be used to switch between different variants of Progress Indicator where Default will provide a view with expand functionality on click, setsp only provide setp names without header and header provides a header with steps indicator without expandable stepper. */
     'ds-variant': 'default' | 'header' | 'steps';
+    /**
+     * This prop can be used to provide steps array to the component.
+     */
     steps: DsProgressStepperStepProps[];
+    /**
+     * This prop can be used to change the state of progress tarcker from normal to compressed.
+     */
+    dense?: boolean;
+    /**
+     * This prop can be used to provide the current active step in the component.
+     */
     activeStep: number;
+    /**
+     * This prop can be used to provide props to the stepper component.
+     */
     StepperProps?: Omit<DsProgressStepperProps, 'activeStep' | 'steps' | 'ref'>;
+    /**
+     * This prop can be used to provide styles to the main element.
+     */
     sx?: DsBoxProps;
-    nextStepLabelPrefix: React.ReactNode;
+    /**
+     * This prop can be used to provide a custom prefix string to the step label.
+     */
+    nextStepLabelPrefix?: React.ReactNode;
 }
 export declare const DsProgressTrackerDefaultProps: DsProgressTrackerProps;
 export interface DsProgressTrackerState {

package/dist/Components/DsProgressTracker/DsProgressTracker.Types.js

@@ -1,10 +1,11 @@
 export const DsProgressTrackerDefaultProps = {
     activeStep: 0,
     'ds-variant': 'steps',
+    dense: false,
     steps: [],
     StepperProps: { orientation: 'vertical' },
     sx: {},
-    nextStepLabelPrefix: 'Next Step: '
+    nextStepLabelPrefix: 'Next Step : '
 };
 export const DsProgressTrackerDefaultState = {
     open: false

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

@@ -1,3 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import { DsTooltipProps } from './DsTooltip.Types';
-export declare const DsTooltip: FC<DsTooltipProps>;
+export declare const CustomTooltip: <TWrapper extends React.ElementType = React.ElementType<any, keyof React.JSX.IntrinsicElements>>(InProps: DsTooltipProps<TWrapper>) => import("react/jsx-runtime").JSX.Element;
+export declare const DsTooltip: <TWrapper extends React.ElementType = React.ElementType<any, keyof React.JSX.IntrinsicElements>>(InProps: DsTooltipProps<TWrapper>) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsTooltip/DsTooltip.Component.js

@@ -1,21 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Tooltip from '@mui/material/Tooltip';
+import { DsTooltipDefaultProps } from './DsTooltip.Types';
 import { DsTypography } from '../DsTypography';
-import { DsLink } from '../DsLink';
-export const DsTooltip = (props) => {
+export const CustomTooltip = (InProps) => {
+    const props = { ...DsTooltipDefaultProps, ...InProps };
     const renderTitle = () => {
-        const { heading, description, buttonGroup } = props;
-        const tooltipButtonGroup = buttonGroup
-            ? React.cloneElement(buttonGroup, {
-                size: 'small',
-                fullWidth: true,
-                noPadding: true,
-                sx: { bgcolor: 'transparent', mt: 'var(--ds-spacing-bitterCold)' }
-            })
-            : false;
-        return (_jsxs(_Fragment, { children: [heading && (_jsx(DsTypography, { component: "div", variant: "bodyBoldMedium", sx: { mb: 'var(--ds-spacing-glacial)' }, children: heading })), description && (_jsx(DsTypography, { component: "div", variant: "bodyRegularMedium", children: description })), tooltipButtonGroup] }));
+        const { heading, description } = props;
+        return (_jsxs(_Fragment, { children: [heading && (_jsx(DsTypography, { component: 'div', variant: 'bodyBoldMedium', sx: { mb: 'var(--ds-spacing-glacial)' }, children: heading })), description && (_jsx(DsTypography, { component: 'div', variant: 'bodyRegularMedium', children: description }))] }));
     };
-    const { heading, description, buttonGroup, children, ...tooltipProps } = props;
-    return (_jsx(Tooltip, { title: renderTitle(), ...tooltipProps, children: _jsx(DsLink, { component: "span", underline: "always", color: "inherit", variant: "inherit", sx: { textDecorationColor: 'inherit' }, children: children }) }));
+    const { heading, description, slots, slotProps, children, ...tooltipProps } = props;
+    const WrapperComponent = slots?.wrapper || React.Fragment;
+    const wrapperProps = slotProps?.wrapper || {};
+    return (_jsx(Tooltip, { title: renderTitle(), ...tooltipProps, children: _jsx(WrapperComponent, { ...wrapperProps, children: children || null }) }));
 };
+export const DsTooltip = CustomTooltip;

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

@@ -1,6 +1,6 @@
 export declare const DsTooltipOverrides: {
     MuiTooltip: {
-        defaultProps: import("./DsTooltip.Types").DsTooltipProps;
+        defaultProps: import("./DsTooltip.Types").DsTooltipProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").LinkTypeMap<{}, "a">>>;
         styleOverrides: {
             popper: {
                 '&[data-popper-placement*="bottom"]': {

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

@@ -1,7 +1,35 @@
 import { TooltipProps } from '@mui/material';
-export interface DsTooltipProps extends Omit<TooltipProps, 'title'> {
+import { DsLink } from '../DsLink';
+type DsTooltipSlots<TWrapper extends React.ElementType = React.ElementType> = TooltipProps['slots'] & {
+    /** This is a slot is used to provide custom component to the wrapping parent of the tooltip children */
+    wrapper?: TWrapper;
+};
+type DsTooltipSlotProps<TWrapper extends React.ElementType = React.ElementType> = TooltipProps['slotProps'] & {
+    /** This is a slot is used to provide props to the custom wrapping parent of the tooltip children */
+    wrapper?: React.ComponentProps<TWrapper>;
+};
+export type DsTooltipProps<TWrapper extends React.ElementType = React.ElementType> = Omit<TooltipProps, 'title' | 'slots' | 'slotProps'> & {
+    /** This prop can be used to provide a heading to the tooltip */
     heading?: string;
+    /** This prop can be used to provide a description to the tooltip */
     description?: string;
-    buttonGroup?: React.ReactElement;
-}
-export declare const DsTooltipDefaultProps: DsTooltipProps;
+    /**
+     * The components used for each slot inside.
+     *
+     * This prop is an alias for the `components` prop, which will be deprecated in the future.
+     *
+     * @default {}
+     */
+    slots?: DsTooltipSlots<TWrapper>;
+    /**
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     *
+     * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+     *
+     * @default {}
+     */
+    slotProps?: DsTooltipSlotProps<TWrapper>;
+};
+export declare const DsTooltipDefaultProps: DsTooltipProps<typeof DsLink>;
+export {};

package/dist/Components/DsTooltip/DsTooltip.Types.js

@@ -1,8 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DsLink } from '../DsLink';
 export const DsTooltipDefaultProps = {
     arrow: true,
-    placement: 'top-start',
+    placement: 'top',
     enterTouchDelay: 0,
     leaveTouchDelay: 4000,
-    children: _jsx(_Fragment, {})
+    children: _jsx(_Fragment, {}),
+    slots: {
+        wrapper: DsLink
+    },
+    slotProps: {
+        wrapper: {
+            color: 'inherit',
+            variant: 'inherit',
+            underline: 'always',
+            sx: { textDecorationColor: 'inherit' }
+        }
+    }
 };

package/dist/Constants/TYPOGRAPGHY.js

@@ -26,7 +26,8 @@ export const DSTYPOGRAPHY_TOKENS = [
     'supportRegularInfo',
     'supportRegularFootnote',
     'supportBoldTextButton',
-    'supportRegularMetadata'
+    'supportRegularMetadata',
+    'supportBlackProductName'
 ];
 export const DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE = 16;
 export const DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE = 16;

package/dist/Theme/componentOverrides.d.ts

@@ -288,7 +288,7 @@ declare const componentOverrides: {
         defaultProps: import("../Components").DsTypographyProps;
     };
     MuiTooltip: {
-        defaultProps: import("../Components").DsTooltipProps;
+        defaultProps: import("../Components").DsTooltipProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").LinkTypeMap<{}, "a">>>;
         styleOverrides: {
             popper: {
                 '&[data-popper-placement*="bottom"]': {
@@ -769,6 +769,10 @@ declare const componentOverrides: {
                 cursor: string;
                 textDecorationColor: string;
                 textUnderlinePosition: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
                 '&:visited': {
                     color: string;
                     textDecorationColor: string;
@@ -788,6 +792,7 @@ declare const componentOverrides: {
                 };
                 '&:focus': {
                     textDecoration: string;
+                    textDecorationThickness: string;
                 };
             };
         };
@@ -1003,6 +1008,12 @@ declare const componentOverrides: {
                         cursor: string;
                     };
                 };
+                '.Mui-checked ~ *': {
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
             };
             label: {
                 padding: string;
@@ -1386,7 +1397,6 @@ declare const componentOverrides: {
                 padding: string;
                 '&.Mui-expanded': {
                     minHeight: string;
-                    backgroundColor: string;
                 };
             };
             content: {
@@ -1411,7 +1421,6 @@ declare const componentOverrides: {
         styleOverrides: {
             root: {
                 border: string;
-                borderBottom: string;
                 padding: string;
                 fontWeight: string;
                 fontSize: string;
@@ -1427,8 +1436,10 @@ declare const componentOverrides: {
                 backgroundColor: string;
                 backgroundImage: string;
                 overflow: string;
-                '&:not(:first-of-type):not(.Mui-expanded)': {
-                    marginTop: string;
+                paddingTop: string;
+                paddingBottom: string;
+                '&.MuiAccordion-root:not(:last-of-type)': {
+                    borderBottom: string;
                 };
             };
         };

package/dist/Theme/getTypography.d.ts

@@ -29,6 +29,7 @@ export default function getTypography(fontFamilyName?: string): {
         supportRegularFootnote?: import("react").CSSProperties | undefined;
         supportBoldTextButton?: import("react").CSSProperties | undefined;
         supportRegularMetadata?: import("react").CSSProperties | undefined;
+        supportBlackProductName?: import("react").CSSProperties | undefined;
         primaryFont: string;
         fontFamily: string;
         fontSizeScorched: string;
@@ -49,6 +50,7 @@ export default function getTypography(fontFamilyName?: string): {
         fontWeightRegular: string;
         fontWeightSemibold: string;
         fontWeightBold: string;
+        fontWeightBlackItalic: string;
         lineHeightIceAge: string;
         lineHeightGlacial: string;
         lineHeightGelid: string;
@@ -98,6 +100,7 @@ export default function getTypography(fontFamilyName?: string): {
         supportRegularFootnote: import("react").CSSProperties | undefined;
         supportBoldTextButton: import("react").CSSProperties | undefined;
         supportRegularMetadata: import("react").CSSProperties | undefined;
+        supportBlackProductName: import("react").CSSProperties | undefined;
     };
 };
 declare module '@mui/material/styles' {

package/dist/Theme/getTypography.js

@@ -21,6 +21,7 @@ export default function getTypography(fontFamilyName = '') {
         fontWeightRegular: '400',
         fontWeightSemibold: '600',
         fontWeightBold: '700',
+        fontWeightBlackItalic: '900',
         lineHeightIceAge: '10px',
         lineHeightGlacial: '8px',
         lineHeightGelid: '6px',
@@ -242,6 +243,14 @@ export default function getTypography(fontFamilyName = '') {
             lineHeight: lineHeightCalculator(dsTypoPrimitive.fontSizeFrostbite, dsTypoPrimitive.lineHeightZero),
             letterSpacing: dsTypoPrimitive.characterSpacingAlps,
             textTransform: 'uppercase'
+        },
+        supportBlackProductName: {
+            fontFamily,
+            fontWeight: dsTypoPrimitive.fontWeightBlackItalic,
+            fontSize: dsTypoPrimitive.fontSizeFrostbite,
+            lineHeight: lineHeightCalculator(dsTypoPrimitive.fontSizeFrostbite, dsTypoPrimitive.lineHeightZero),
+            letterSpacing: dsTypoPrimitive.characterSpacingHimalayas,
+            textTransform: 'uppercase'
         }
     };
     const dsTypo = {
@@ -283,7 +292,8 @@ export default function getTypography(fontFamilyName = '') {
         supportRegularInfo: dsTypo.supportRegularInfo,
         supportRegularFootnote: dsTypo.supportRegularFootnote,
         supportBoldTextButton: dsTypo.supportBoldTextButton,
-        supportRegularMetadata: dsTypo.supportRegularMetadata
+        supportRegularMetadata: dsTypo.supportRegularMetadata,
+        supportBlackProductName: dsTypo.supportBlackProductName
     };
     return { dsTypo, typography };
 }

package/dist/Types/DsTypography.d.ts

@@ -1,6 +1,6 @@
 export type DsFontSizeTokens = 'scorched' | 'torrid' | 'blazzing' | 'hot' | 'tropical' | 'warm' | 'mild' | 'cool' | 'cold' | 'bitterCold' | 'frigid' | 'frostbite' | 'blizzard' | 'iceAge';
 export type DsFontSizeClassTokens = 'scorched' | 'torrid' | 'blazzing' | 'hot' | 'tropical' | 'warm' | 'mild' | 'cool' | 'cold' | 'bitterCold' | 'frigid' | 'frostbite' | 'blizzard' | 'iceAge';
-export type DsTypographyTokens = 'displayBoldLarge' | 'displayBoldMedium' | 'displayBoldSmall' | 'displayBoldItalicLarge' | 'displayBoldItalicMedium' | 'displayBoldItalicSmall' | 'headingBoldExtraLarge' | 'headingBoldLarge' | 'headingBoldMedium' | 'headingBoldSmall' | 'headingBoldExtraSmall' | 'subheadingSemiboldLarge' | 'subheadingSemiboldDefault' | 'headingBoldItalicExtraLarge' | 'headingBoldItalicLarge' | 'headingBoldItalicMedium' | 'headingBoldItalicSmall' | 'headingBoldItalicExtraSmall' | 'bodyRegularLarge' | 'bodyRegularMedium' | 'bodyRegularSmall' | 'bodyBoldLarge' | 'bodyBoldMedium' | 'bodyBoldSmall' | 'supportRegularInfo' | 'supportRegularFootnote' | 'supportBoldTextButton' | 'supportRegularMetadata';
+export type DsTypographyTokens = 'displayBoldLarge' | 'displayBoldMedium' | 'displayBoldSmall' | 'displayBoldItalicLarge' | 'displayBoldItalicMedium' | 'displayBoldItalicSmall' | 'headingBoldExtraLarge' | 'headingBoldLarge' | 'headingBoldMedium' | 'headingBoldSmall' | 'headingBoldExtraSmall' | 'subheadingSemiboldLarge' | 'subheadingSemiboldDefault' | 'headingBoldItalicExtraLarge' | 'headingBoldItalicLarge' | 'headingBoldItalicMedium' | 'headingBoldItalicSmall' | 'headingBoldItalicExtraSmall' | 'bodyRegularLarge' | 'bodyRegularMedium' | 'bodyRegularSmall' | 'bodyBoldLarge' | 'bodyBoldMedium' | 'bodyBoldSmall' | 'supportRegularInfo' | 'supportRegularFootnote' | 'supportBoldTextButton' | 'supportRegularMetadata' | 'supportBlackProductName';
 interface DsFontSizeGenerics<T> extends Partial<Record<DsFontSizeTokens, T>> {
 }
 interface DsFontSizeClassGenerics<T> extends Partial<Record<DsFontSizeClassTokens, T>> {

package/package.json

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