@am92/react-design-system 2.7.8 → 2.8.1

package/dist/Components/DsTagGroup/DsTagGroup.Component.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { DsStack } from '../DsStack';
 import { DsTagGroupDefaultProps } from './DsTagGroup.Types';
 import { DsRemixIcon } from '../DsRemixIcon';
-export class DsTagGroup extends PureComponent {
-    static defaultProps = DsTagGroupDefaultProps;
-    handleUnselect = (handleValue) => {
-        const { name, value = [], onChange } = this.props;
-        const changedValue = value.filter((e) => e !== handleValue);
+export const DsTagGroup = (inProps) => {
+    const props = { ...DsTagGroupDefaultProps, ...inProps };
+    const handleUnselect = (handleValue) => {
+        const { name, value = [], onChange } = props;
+        const changedValue = value?.filter((e) => e !== handleValue);
         onChange(name, changedValue);
     };
-    handleSelect = (handleValue) => {
-        const { multi, name, value = [], onChange } = this.props;
+    const handleSelect = (handleValue) => {
+        const { multi, name, value = [], onChange } = props;
         let changedValue;
         if (multi) {
             changedValue = Array.from(new Set([...value, handleValue]));
@@ -21,22 +21,20 @@ export class DsTagGroup extends PureComponent {
         }
         onChange(name, changedValue);
     };
-    render() {
-        const { multi, children, value, name, onChange, ...restStackProps } = this.props;
-        const childrenArray = children instanceof Array ? children : [children];
-        return (_jsx(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-glacial)', ...restStackProps, children: childrenArray.map(child => {
-                const { value: chipValue } = child.props;
-                const selected = (multi && value.includes(chipValue)) || value === chipValue;
-                const onDelete = (multi && selected && this.handleUnselect) || undefined;
-                const onClick = (selected && onDelete) || this.handleSelect;
-                const childClone = React.cloneElement(child, {
-                    value: chipValue,
-                    selected,
-                    deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }),
-                    onDelete,
-                    onClick
-                });
-                return childClone;
-            }) }));
-    }
-}
+    const { multi, children, value, name, onChange, ...restStackProps } = props;
+    const childrenArray = children instanceof Array ? children : [children];
+    return (_jsx(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-glacial)', ...restStackProps, children: childrenArray.map(child => {
+            const { value: chipValue } = child.props;
+            const selected = (multi && value?.includes(chipValue)) || value === chipValue;
+            const onDelete = (multi && selected && handleUnselect) || undefined;
+            const onClick = (selected && onDelete) || handleSelect;
+            const childClone = React.cloneElement(child, {
+                value: chipValue,
+                selected,
+                deleteIcon: _jsx(DsRemixIcon, { className: "ri-close-circle-fill" }),
+                onDelete,
+                onClick
+            });
+            return childClone;
+        }) }));
+};

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

@@ -1,10 +1,3 @@
-import React, { PureComponent } from 'react';
-import { DsTextAreaProps, DsTextAreaState } from './DsTextArea.Types';
-export declare class DsTextArea extends PureComponent<DsTextAreaProps, DsTextAreaState> {
-    state: DsTextAreaState;
-    areRef: React.RefObject<unknown>;
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<DsTextAreaProps>, prevState: Readonly<DsTextAreaState>, snapshot?: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsTextAreaProps } from './DsTextArea.Types';
+export declare const DsTextArea: FC<DsTextAreaProps>;

package/dist/Components/DsTextArea/DsTextArea.Component.js

@@ -1,67 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DsFormControl } from '../DsFormControl';
 import { DsTextField } from '../DsTextField';
 import { DsTypography } from '../DsTypography';
-import { DsTextAreaDefaultState } from './DsTextArea.Types';
-export class DsTextArea extends PureComponent {
-    state = DsTextAreaDefaultState;
-    areRef = React.createRef();
-    handleChange = (event) => {
-        const { onChange } = this.props;
+export const DsTextArea = (props) => {
+    const [count, setCount] = useState(0);
+    const areRef = useRef();
+    const handleChange = (event) => {
+        const { onChange } = props;
         const { target } = event;
         const { value = '' } = target;
-        let count = value.length;
-        this.setState({ count });
+        let count = value?.length;
+        setCount(count);
         if (onChange && typeof onChange === 'function') {
             onChange(event);
         }
     };
-    componentDidMount() {
-        const { value = '' } = this.props;
-        const count = value.length;
-        this.setState({ count });
-    }
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        const { count: currentStateCount } = this.state;
-        const { value } = this.props;
+    useEffect(() => {
+        const { value = '' } = props;
         const count = value?.length;
-        if (count && currentStateCount !== count) {
-            this.setState({ count });
-        }
-    }
-    render() {
-        const { maxLength, hideCharacterCount, helperText, inputProps, ref, fullWidth, ...rest } = this.props;
-        const { count } = this.state;
-        // Provide counter if MaxLength Provided
-        const hasMaxLength = !!maxLength;
-        const maxLengthHandlingInputStyle = hasMaxLength
-            ? { mb: 'var(--ds-spacing-bittercold)' }
-            : {};
-        const counterStyle = {
-            position: 'absolute',
-            bottom: '8px',
-            right: '8px',
-            overflow: 'auto'
-        };
-        if (helperText) {
-            // Adjust the helper text size
-            counterStyle.bottom = 'calc(8px + 36px)';
+        setCount(count);
+    }, []);
+    useEffect(() => {
+        const { value } = props;
+        const stringCount = value?.length;
+        if (stringCount && count !== count) {
+            setCount(stringCount);
         }
-        return (_jsxs(DsFormControl, { fullWidth: fullWidth, children: [_jsx(DsTextField, { maxRows: 3, minRows: 3, ...rest, fullWidth: fullWidth, onChange: this.handleChange, multiline: true, inputProps: {
-                        ref: ref || this.areRef,
-                        ...inputProps,
-                        sx: {
-                            minWidth: '288px',
-                            ...maxLengthHandlingInputStyle,
-                            ...inputProps?.sx
-                        },
-                        maxLength: maxLength || ''
-                    }, helperText: helperText, 
-                    // TODO: To be fixed when we fix the sx passing to inputbase
-                    style: {
-                        paddingBottom: 'var(--ds-spacing-mild)',
-                        ...rest?.style
-                    } }), hasMaxLength && !hideCharacterCount && (_jsx(DsTypography, { sx: counterStyle, variant: "supportRegularFootnote", children: `${count}/${maxLength}` }))] }));
+    }, [count, props.value]);
+    const { maxLength, hideCharacterCount, helperText, inputProps, ref, fullWidth, ...rest } = props;
+    // Provide counter if MaxLength Provided
+    const hasMaxLength = !!maxLength;
+    const maxLengthHandlingInputStyle = hasMaxLength
+        ? { mb: 'var(--ds-spacing-bittercold)' }
+        : {};
+    const counterStyle = {
+        position: 'absolute',
+        bottom: '8px',
+        right: '8px',
+        overflow: 'auto'
+    };
+    if (helperText) {
+        // Adjust the helper text size
+        counterStyle.bottom = 'calc(8px + 36px)';
     }
-}
+    return (_jsxs(DsFormControl, { fullWidth: fullWidth, children: [_jsx(DsTextField, { maxRows: 3, minRows: 3, ...rest, fullWidth: fullWidth, onChange: handleChange, multiline: true, inputProps: {
+                    ref: ref || areRef,
+                    ...inputProps,
+                    sx: {
+                        minWidth: '288px',
+                        ...maxLengthHandlingInputStyle,
+                        ...inputProps?.sx
+                    },
+                    maxLength: maxLength || ''
+                }, helperText: helperText, 
+                // TODO: To be fixed when we fix the sx passing to inputbase
+                style: {
+                    paddingBottom: 'var(--ds-spacing-mild)',
+                    ...rest?.style
+                } }), hasMaxLength && !hideCharacterCount && (_jsx(DsTypography, { sx: counterStyle, variant: "supportRegularFootnote", children: `${count}/${maxLength}` }))] }));
+};

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

@@ -6,4 +6,3 @@ export interface DsTextAreaProps extends DsTextFieldProps {
 export interface DsTextAreaState {
     count: number;
 }
-export declare const DsTextAreaDefaultState: DsTextAreaState;

package/dist/Components/DsTextArea/DsTextArea.Types.js

@@ -1,3 +1 @@
-export const DsTextAreaDefaultState = {
-    count: 0
-};
+export {};

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

@@ -1,5 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsTextFieldProps } from './DsTextField.Types';
-export declare class DsTextField extends PureComponent<DsTextFieldProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsTextField: FC<DsTextFieldProps>;

package/dist/Components/DsTextField/DsTextField.Component.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
+import { DsTextFieldDefaultProps } from './DsTextField.Types';
 import { DsFormControl } from '../DsFormControl';
 import { DsInputLabel } from '../DsInputLabel';
 import { DsInputBase } from '../DsInputBase';
 import { DsHelperText } from '../DsHelperText';
-export class DsTextField extends PureComponent {
-    render() {
-        const { id, name, label, labelSupportText, color, helperText, success, error, sx, fullWidth, ref, inputRef, disabled, required, FormControlProps, InputLabelProps, HelperTextProps, ...inputBaseProps } = this.props;
-        const customColor = success ? 'success' : color;
-        return (_jsxs(DsFormControl, { fullWidth: fullWidth, color: customColor, error: error, sx: sx, disabled: disabled, required: required, ...FormControlProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, error: error, success: success, htmlFor: id || name, disabled: disabled, required: required, ...InputLabelProps }), _jsx(DsInputBase, { fullWidth: fullWidth, color: customColor, error: error, id: id || name, name: name, inputRef: ref || inputRef, disabled: disabled, required: required, ...inputBaseProps }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...HelperTextProps })] }));
-    }
-}
+export const DsTextField = (inProps) => {
+    const props = { ...DsTextFieldDefaultProps, ...inProps };
+    const { id, name, label, labelSupportText, color, helperText, success, error, sx, fullWidth, ref, inputRef, disabled, required, FormControlProps, InputLabelProps, HelperTextProps, ...inputBaseProps } = props;
+    const customColor = success ? 'success' : color;
+    return (_jsxs(DsFormControl, { fullWidth: fullWidth, color: customColor, error: error, sx: sx, disabled: disabled, required: required, ...FormControlProps, children: [_jsx(DsInputLabel, { label: label, labelSupportText: labelSupportText, error: error, success: success, htmlFor: id || name, disabled: disabled, required: required, ...InputLabelProps }), _jsx(DsInputBase, { fullWidth: fullWidth, color: customColor, error: error, id: id || name, name: name, inputRef: ref || inputRef, disabled: disabled, required: required, ...inputBaseProps }), _jsx(DsHelperText, { helperText: helperText, color: color, success: success, error: error, ...HelperTextProps })] }));
+};

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

@@ -1,10 +1,3 @@
-import { Component } from 'react';
-import { DsTextFieldPasswordProps, DsTextFieldPasswordState } from './DsTextFieldPassword.Types';
-export declare class DsTextFieldPassword extends Component<DsTextFieldPasswordProps, DsTextFieldPasswordState> {
-    static defaultProps: DsTextFieldPasswordProps;
-    state: DsTextFieldPasswordState;
-    constructor(props: DsTextFieldPasswordProps);
-    getMergedProps: () => DsTextFieldPasswordProps;
-    handleTogglePassword: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+import { FC } from 'react';
+import { DsTextFieldPasswordProps } from './DsTextFieldPassword.Types';
+export declare const DsTextFieldPassword: FC<DsTextFieldPasswordProps>;

package/dist/Components/DsTextFieldPassword/DsTextFieldPassword.Component.js

@@ -1,30 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { DsInputAdornment } from '../DsInputAdornment';
 import { DsTextField } from '../DsTextField';
-import { DsTextFieldPasswordDefaultProps, DsTextFieldPasswordDefaultState } from './DsTextFieldPassword.Types';
-export class DsTextFieldPassword extends Component {
-    static defaultProps = DsTextFieldPasswordDefaultProps;
-    state;
-    constructor(props) {
-        super(props);
-        this.state = {
-            ...DsTextFieldPasswordDefaultState,
-            isVisible: props.isVisible
-        };
-    }
-    getMergedProps = () => {
-        return { ...DsTextFieldPasswordDefaultProps, ...this.props };
+import { DsTextFieldPasswordDefaultProps } from './DsTextFieldPassword.Types';
+export const DsTextFieldPassword = (props) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const getMergedProps = () => {
+        return { ...DsTextFieldPasswordDefaultProps, ...props };
     };
-    handleTogglePassword = () => this.setState({ isVisible: !this.state.isVisible });
-    render() {
-        const { isVisible } = this.state;
-        const mergedProps = this.getMergedProps();
-        const { type, isVisible: isVisibleProp, disabled, toggleNode, ...restProps } = mergedProps;
-        const inputType = (isVisible && type) || 'password';
-        const endAdornment = isVisible
-            ? React.cloneElement(toggleNode?.toHide || _jsx(_Fragment, {}), { disabled })
-            : React.cloneElement(toggleNode?.toShow || _jsx(_Fragment, {}), { disabled });
-        return (_jsx(DsTextField, { ...restProps, disabled: disabled, type: inputType, endAdornment: _jsx(DsInputAdornment, { position: "end", onClick: (!disabled && this.handleTogglePassword) || undefined, children: endAdornment }) }));
-    }
-}
+    const handleTogglePassword = () => setIsVisible(!isVisible);
+    const mergedProps = getMergedProps();
+    const { type, isVisible: isVisibleProp, disabled, toggleNode, ...restProps } = mergedProps;
+    const inputType = (isVisible && type) || 'password';
+    const endAdornment = isVisible
+        ? React.cloneElement(toggleNode?.toHide || _jsx(_Fragment, {}), { disabled })
+        : React.cloneElement(toggleNode?.toShow || _jsx(_Fragment, {}), { disabled });
+    return (_jsx(DsTextField, { ...restProps, disabled: disabled, type: inputType, endAdornment: _jsx(DsInputAdornment, { position: "end", onClick: (!disabled && handleTogglePassword) || undefined, children: endAdornment }) }));
+};

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

@@ -10,4 +10,3 @@ export declare const DsTextFieldPasswordDefaultProps: DsTextFieldPasswordProps;
 export interface DsTextFieldPasswordState {
     isVisible: boolean;
 }
-export declare const DsTextFieldPasswordDefaultState: DsTextFieldPasswordState;

package/dist/Components/DsTextFieldPassword/DsTextFieldPassword.Types.js

@@ -9,6 +9,3 @@ export const DsTextFieldPasswordDefaultProps = {
         toHide: (_jsx(DsButton, { variant: "text", color: "secondary", sx: { minWidth: '50px' }, children: "HIDE" }))
     }
 };
-export const DsTextFieldPasswordDefaultState = {
-    isVisible: false
-};

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

@@ -1,5 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsToastProps } from './DsToast.Types';
-export declare class DsToast extends PureComponent<DsToastProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsToast: FC<DsToastProps>;

package/dist/Components/DsToast/DsToast.Component.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import Alert from '@mui/material/Alert';
 import { DsRemixIcon } from '../DsRemixIcon';
+import { useThemeProps } from '@mui/system';
 const CloseIcon = (props) => {
     const { ownerState, ...restProps } = props;
     return (_jsx(DsRemixIcon, { fontSize: "mild", className: "ri-close-line", ...restProps }));
 };
-export class DsToast extends PureComponent {
-    render() {
-        const { forwardedRef, ...restProps } = this.props;
-        return (_jsx(Alert, { ref: forwardedRef, ...restProps, slots: { closeIcon: CloseIcon, ...restProps?.slots } }));
-    }
-}
+export const DsToast = (inProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MuiAlert'
+    });
+    const { forwardedRef, ...restProps } = props;
+    return (_jsx(Alert, { ref: forwardedRef, ...restProps, slots: { closeIcon: CloseIcon, ...restProps?.slots } }));
+};

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

@@ -1,6 +1,3 @@
-import React, { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsToggleProps } from './DsToggle.Types';
-export declare class DsToggle extends PureComponent<DsToggleProps> {
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsToggle: FC<DsToggleProps>;

package/dist/Components/DsToggle/DsToggle.Component.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import Switch from '@mui/material/Switch';
-export class DsToggle extends PureComponent {
-    handleChange = (event) => {
-        const { onChange } = this.props;
+import { useThemeProps } from '@mui/system';
+export const DsToggle = (inProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'DsToggle'
+    });
+    const handleChange = (event) => {
+        const { onChange } = props;
         const { name, checked } = event.target;
         if (typeof onChange === 'function') {
             onChange(name, checked);
         }
     };
-    render() {
-        const { value, onChange, ...restProps } = this.props;
-        return (_jsx(Switch, { ...restProps, color: "secondary", checked: value, onChange: this.handleChange }));
-    }
-}
+    const { value, onChange, ...restProps } = props;
+    return (_jsx(Switch, { ...restProps, color: "secondary", checked: value, onChange: handleChange }));
+};

package/dist/Components/DsToggle/DsToggle.Types.js

@@ -1,5 +1,5 @@
 export const DsToggleDefaultProps = {
     name: '',
-    value: false,
+    value: true,
     onChange: () => undefined
 };

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

@@ -1,6 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsTooltipProps } from './DsTooltip.Types';
-export declare class DsTooltip extends PureComponent<DsTooltipProps> {
-    renderTitle: () => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsTooltip: FC<DsTooltipProps>;

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import Tooltip from '@mui/material/Tooltip';
 import { DsTypography } from '../DsTypography';
 import { DsLink } from '../DsLink';
-export class DsTooltip extends PureComponent {
-    renderTitle = () => {
-        const { heading, description, buttonGroup } = this.props;
+export const DsTooltip = (props) => {
+    const renderTitle = () => {
+        const { heading, description, buttonGroup } = props;
         const tooltipButtonGroup = buttonGroup
             ? React.cloneElement(buttonGroup, {
                 size: 'small',
@@ -16,8 +16,6 @@ export class DsTooltip extends PureComponent {
             : 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] }));
     };
-    render() {
-        const { heading, description, buttonGroup, children, ...tooltipProps } = this.props;
-        return (_jsx(Tooltip, { title: this.renderTitle(), ...tooltipProps, children: _jsx(DsLink, { component: "span", underline: "always", color: "inherit", variant: "inherit", sx: { textDecorationColor: 'inherit' }, children: children }) }));
-    }
-}
+    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 }) }));
+};

package/dist/Constants/TYPOGRAPGHY.d.ts

@@ -1,2 +1,5 @@
-import { DsTypographyTokens } from '../Types';
+import { DS_TYPOGRAPHY_HTML_FONT_SIZE, DsTypographyTokens } from '../Types';
 export declare const DSTYPOGRAPHY_TOKENS: DsTypographyTokens[];
+export declare const DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE: DS_TYPOGRAPHY_HTML_FONT_SIZE;
+export declare const DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE: DS_TYPOGRAPHY_HTML_FONT_SIZE;
+export declare const DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE: DS_TYPOGRAPHY_HTML_FONT_SIZE;

package/dist/Constants/TYPOGRAPGHY.js

@@ -28,3 +28,6 @@ export const DSTYPOGRAPHY_TOKENS = [
     'supportBoldTextButton',
     'supportRegularMetadata'
 ];
+export const DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE = 16;
+export const DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE = 16;
+export const DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE = 18;

package/dist/Helpers/accessibility.d.ts

@@ -0,0 +1,3 @@
+import { DS_TYPOGRAPHY_HTML_FONT_SIZE } from '../Types';
+export declare const getCurrentFontSize: () => DS_TYPOGRAPHY_HTML_FONT_SIZE;
+export declare const isValidFontSize: (fontSize: DS_TYPOGRAPHY_HTML_FONT_SIZE) => boolean;

package/dist/Helpers/accessibility.js

@@ -0,0 +1,14 @@
+import { DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE, DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE, DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE } from '../Constants';
+export const getCurrentFontSize = () => {
+    const htmlElement = document.documentElement;
+    const computedFontSize = window.getComputedStyle(htmlElement).fontSize;
+    if (computedFontSize) {
+        const parsedFontSize = parseInt(computedFontSize, 10);
+        return parsedFontSize;
+    }
+    return DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE;
+};
+export const isValidFontSize = (fontSize) => {
+    return (fontSize >= DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE &&
+        fontSize <= DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE);
+};

package/dist/Helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Helpers/index.js

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Hooks/accessibility.d.ts

@@ -0,0 +1,9 @@
+import { DS_TYPOGRAPHY_HTML_FONT_SIZE } from '../Types';
+export declare const useFontSizeAccessibility: () => {
+    fontSize: DS_TYPOGRAPHY_HTML_FONT_SIZE;
+    disableDecrease: boolean;
+    disableIncrease: boolean;
+    increaseFontSize: () => void;
+    decreaseFontSize: () => void;
+    setFontSize: (newFontSize: DS_TYPOGRAPHY_HTML_FONT_SIZE) => void;
+};

package/dist/Hooks/accessibility.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useCallback } from 'react';
+import { DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE, DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE, DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE } from '../Constants';
+import { getCurrentFontSize, isValidFontSize } from '../Helpers';
+export const useFontSizeAccessibility = () => {
+    let currentFontSize = getCurrentFontSize();
+    if (!isValidFontSize(currentFontSize)) {
+        currentFontSize = DS_TYPOGRAPHY_DEFAULT_HTML_FONT_SIZE;
+    }
+    const [fontSize, setFontSize] = useState(currentFontSize);
+    useEffect(() => {
+        const htmlElement = document.documentElement;
+        htmlElement.style.fontSize = `${fontSize}px`;
+    }, [fontSize, document.documentElement.style.fontSize]);
+    const setValidFontSize = useCallback((newFontSize) => {
+        if (isValidFontSize(newFontSize)) {
+            setFontSize(newFontSize);
+        }
+    }, []);
+    const deltaChangeFontSize = (delta) => () => {
+        const newFontSize = (fontSize + delta);
+        if (isValidFontSize(newFontSize)) {
+            setFontSize(newFontSize);
+        }
+    };
+    let disableIncrease = fontSize >= DS_TYPOGRAPHY_MAX_HTML_FONT_SIZE;
+    let disableDecrease = fontSize <= DS_TYPOGRAPHY_MIN_HTML_FONT_SIZE;
+    return {
+        fontSize,
+        disableDecrease,
+        disableIncrease,
+        increaseFontSize: deltaChangeFontSize(1),
+        decreaseFontSize: deltaChangeFontSize(-1),
+        setFontSize: setValidFontSize
+    };
+};

package/dist/Hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Hooks/index.js

@@ -0,0 +1 @@
+export * from './accessibility';

package/dist/Theme/componentOverrides.d.ts

@@ -480,6 +480,9 @@ declare const componentOverrides: {
             };
         };
     };
+    DsTag: {
+        defaultProps: import("../Components").DsTagProps;
+    };
     MuiTabs: {
         defaultProps: import("../Components").DsTabsProps;
         variants: {
@@ -605,7 +608,7 @@ declare const componentOverrides: {
         };
     };
     MuiSlider: {
-        defaultProps: {};
+        defaultProps: import("../Components").DsSliderProps;
         variants: {
             props: Partial<import("../Components").DsSliderProps>;
             style: {
@@ -725,6 +728,7 @@ declare const componentOverrides: {
         styleOverrides: {
             root: {
                 padding: string;
+                color: string;
             };
         };
     };
@@ -979,9 +983,7 @@ declare const componentOverrides: {
         };
     };
     MuiFormHelperText: {
-        styleOverrides: {
-            root: import("@mui/system").CSSInterpolation;
-        };
+        defaultProps: import("../Components").DsHelperTextProps;
     };
     MuiFormControlLabel: {
         styleOverrides: {
@@ -1074,6 +1076,7 @@ declare const componentOverrides: {
         };
     };
     MuiDialog: {
+        defaultProps: import("../Components").DsDialogProps;
         styleOverrides: {
             paper: {
                 backgroundColor: string;
@@ -1098,14 +1101,7 @@ declare const componentOverrides: {
             props: Partial<import("../Components").DsChipProps>;
             style: import("@mui/system").CSSInterpolation;
         }[];
-        styleOverrides: {
-            root: import("@mui/system").CSSInterpolation;
-            filled: import("@mui/system").CSSInterpolation;
-            filledSecondary: import("@mui/system").CSSInterpolation;
-            label: import("@mui/system").CSSInterpolation;
-            icon: import("@mui/system").CSSInterpolation;
-            deleteIcon: import("@mui/system").CSSInterpolation;
-        };
+        styleOverrides: {};
     };
     MuiCheckbox: {
         defaultProps: import("../Components").DsCheckboxProps;

package/dist/Theme/getColorScheme/dark.js

@@ -47,7 +47,7 @@ export default function getDarkModeColorScheme(colorPalette) {
         supportPositive: successGreenDark,
         supportWarning: warningOrangeDark,
         supportVariable: snackBlue,
-        supportTypical: snackBlueNeutralDark,
+        supportTypical: typical,
         supportNegativeNeutral: errorRedNeutralDark,
         supportPositiveNeutral: successGreenNeutralDark,
         supportWarningNeutral: warningOrangeNeutralDark,

package/dist/Types/DsAccessibility.d.ts

@@ -0,0 +1 @@
+export type DS_TYPOGRAPHY_HTML_FONT_SIZE = 16 | 17 | 18;

package/dist/Types/DsAccessibility.js

@@ -0,0 +1 @@
+export {};

package/dist/Types/index.d.ts

@@ -4,3 +4,4 @@ export * from './DsElevation';
 export * from './DsSpacing';
 export * from './DsPalette';
 export * from './DsRadius';
+export * from './DsAccessibility';