@dnanpm/styleguide 3.9.7 → 3.9.8

package/build/cjs/components/Button/Button.d.ts

@@ -78,10 +78,22 @@ export interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label for the button
+     */
+    'aria-label'?: string;
     /**
      * Allows to pass any data-* attribute
      */
     dataAttributes?: Record<`data-${string}`, string>;
+    /**
+     * Allows to pass a screen reader label for the loading indicator
+     */
+    loadingLabel?: string;
+    /**
+     * Ref for the button element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
 }
 export declare const shade: {
     pink: {
@@ -100,6 +112,6 @@ export declare const shade: {
     };
 };
 /** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Button;

package/build/cjs/components/Button/Button.js

@@ -52,7 +52,7 @@ const Element = styled__default.default.button `
         display: inline-flex;
     }
 
-    &:focus {
+    &:focus-visible {
         color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
         background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
         border: 2px solid
@@ -66,7 +66,7 @@ const Element = styled__default.default.button `
         color: ${({ darkBg }) => (darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
         background-color: ${({ darkBg }) => darkBg ? theme.default.color.default.white : shade.plum.darker};
 
-        &:focus {
+        &:focus-visible {
             border: 2px solid
                 ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
             box-shadow: 0px 0px 0px 2px
@@ -122,11 +122,11 @@ const Element = styled__default.default.button `
 `;
 /** @visibleName Button */
 const Button = (_a) => {
-    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes, (!props.href && {
+    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
+    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
-    })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
+    })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: props.loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
 };
 
 exports.default = Button;

package/build/cjs/components/ButtonArrow/ButtonArrow.d.ts

@@ -24,7 +24,7 @@ type Props = ({
      */
     icon: ReactNode;
     direction?: never;
-}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close'> & {
+}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close' | 'href' | 'loadingLabel'> & {
     /**
      * Allows to change the styling of component
      *
@@ -34,8 +34,14 @@ type Props = ({
      * @default 'primary'
      */
     variant?: ButtonArrowVariant;
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     *
+     * @deprecated Use `Button` component for href support
+     */
+    href?: string;
 };
 /** @visibleName Button Arrow */
-declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default ButtonArrow;

package/build/cjs/components/ButtonArrow/ButtonArrow.js

@@ -71,9 +71,9 @@ const buttonsMap = {
 };
 /** @visibleName Button Arrow */
 const ButtonArrow = (_a) => {
-    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
+    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
     const Element = buttonsMap[variant];
-    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
+    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem", "aria-hidden": true })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
 };
 
 exports.default = ButtonArrow;

package/build/cjs/components/ButtonIcon/ButtonIcon.d.ts

@@ -26,8 +26,18 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * @default undefined
      */
     ariaExpanded?: boolean;
+    /**
+     * Allows to pass aria hidden to the icon element for screen readers
+     *
+     * @default undefined
+     */
+    ariaHidden?: boolean;
+    /**
+     * Screen reader label describing the purpose of the ButtonIcon,
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Button Icon */
-declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** @component */
 export default ButtonIcon;

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -89,12 +89,12 @@ const ButtonElement = styled__default.default.button `
         `}
 `;
 /** @visibleName Button Icon */
-const ButtonIcon = (_a) => {
+const ButtonIcon = React.forwardRef((_a, ref) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
+    return (React__default.default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": props.ariaHidden }),
         props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
-};
+});
 
 exports.default = ButtonIcon;

package/build/cjs/components/Checkbox/Checkbox.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var globalStyles = require('../../themes/globalStyles.js');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
@@ -26,17 +25,78 @@ const Container = styled.default.div `
     line-height: ${theme.default.lineHeight.default};
     margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
 `;
-const Input = styled.default(globalStyles.CheckboxAndRadioInputCore) `
+const Input = styled.default.input `
+    display: inline-grid;
+    appearance: none;
+    place-content: center;
+    float: left;
+    margin: 0;
+    cursor: pointer;
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    min-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    color: ${theme.default.color.line.L01};
+    border: 2px solid ${theme.default.color.line.L01};
+    background-color: ${theme.default.color.background.white.default};
     position: relative;
     top: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)};
+    border-radius: ${theme.default.radius.s};
+
+    & + label {
+        cursor: pointer;
+        color: ${theme.default.color.text.black};
+        font-weight: ${theme.default.fontWeight.medium};
+        padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    }
+
+    &::before {
+        content: '';
+        transform: scale(0);
+        background-color: currentColor;
+    }
 
     &:checked {
+        color: ${theme.default.color.default.pink};
+        border-color: ${theme.default.color.default.pink};
+
         &::before {
+            transform: scale(1);
             width: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
             height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)};
             background-image: url('${SVGIconData}');
         }
     }
+
+    &:disabled {
+        cursor: not-allowed;
+        color: ${theme.default.color.text.gray};
+        background-color: ${theme.default.color.line.L02 + theme.default.color.transparency.T40};
+        border-color: ${theme.default.color.line.L01 + theme.default.color.transparency.T40};
+
+        & + label {
+            cursor: not-allowed;
+            color: ${theme.default.color.text.gray};
+        }
+    }
+
+    &:disabled:checked {
+        color: ${theme.default.color.background.pink.E02};
+        border-color: ${theme.default.color.background.pink.E02};
+        background-color: ${theme.default.color.background.white.default};
+
+        &::before {
+            background-color: ${theme.default.color.background.pink.E02};
+        }
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+    }
 `;
 const Mandatory = styled.default.span `
     color: ${theme.default.color.default.pink};
@@ -50,6 +110,7 @@ const ErrorMessage = styled.default.div `
 `;
 const Checkbox = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    const errorId = `${props.id}-error`;
     const handleChange = () => {
         if (props.onChange && !props.disabled) {
             props.onChange(!props.value);
@@ -57,11 +118,11 @@ const Checkbox = (_a) => {
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Container, null,
-            React__default.default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default.default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined }),
             React__default.default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default.default.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default.default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        props.error && props.errorMessage && (React__default.default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error`, id: errorId, role: "alert" }, props.errorMessage))));
 };
 
 exports.default = Checkbox;

package/build/cjs/components/Input/Input.d.ts

@@ -129,6 +129,20 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose of the Input
+     *
+     * @default id
+     */
+    ariaLabel?: string;
+    /**
+     * Screen reader label describing the password toggle
+     */
+    passwordToggleLabel?: string;
+    /**
+     * Screen reader label describing the clear button
+     */
+    clearButtonLabel?: string;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/cjs/components/Input/Input.js

@@ -32,6 +32,7 @@ const FieldWrapper = styled.default.div `
     height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
     padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     background-color: ${theme.default.color.background.white.default};
+    align-items: center;
 
     ${({ status }) => status === 'error' &&
     `
@@ -106,6 +107,11 @@ const StyledInput = styled.default.input `
         color: ${theme.default.color.text.black}${theme.default.color.transparency.T40};
     }
 `;
+const StyledButtonIcon = styled.default(ButtonIcon.default) `
+    .dnasg-icon svg {
+        fill: ${theme.default.color.text.black};
+    }
+`;
 const Message = styled.default.div `
     font-size: ${theme.default.fontSize.s};
     font-weight: ${theme.default.fontWeight.book};
@@ -118,6 +124,7 @@ const ErrorMessage = styled.default(Message) `
     color: ${theme.default.color.notification.error};
 `;
 const Input = (_a) => {
+    var _b;
     var { type = 'text', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     const inputRef = React.useRef(null);
     const [showPassword, setShowPassword] = React.useState(false);
@@ -147,22 +154,32 @@ const Input = (_a) => {
             inputRef.current.focus();
         }
     };
+    const getDescribedBy = () => {
+        if (props.status === 'error' && props.errorMessage) {
+            return `${props.id}-error`;
+        }
+        if (props.status === 'comment' && props.commentMessage) {
+            return `${props.id}-comment`;
+        }
+        return undefined;
+    };
     return (React__default.default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default.default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId, readOnly: props.readonly }),
+            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: props.readonly ? 'hidden' : type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
+            props.readonly && React__default.default.createElement("div", null, props.value),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
                 props.onClearableButtonClick) && (React__default.default.createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default.default.createElement(Icon.default, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility })),
+                props.showPasswordToggle && (React__default.default.createElement(StyledButtonIcon, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel, ariaHidden: true })),
                 (props.status === 'success' || props.status === 'error') && (React__default.default.createElement(Icon.default, { icon: iconsMap[props.status], color: theme.default.color.notification[props.status] })),
                 props.disabled && React__default.default.createElement(Icon.default, { icon: icons.Lock }),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
-                    !props.disabled && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick }))))),
-        props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
-        props.status === 'comment' && props.commentMessage && (React__default.default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+                    !props.disabled && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel, ariaHidden: true }))))),
+        props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
+        props.status === 'comment' && props.commentMessage && (React__default.default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
 exports.default = Input;

package/build/cjs/components/Label/Label.d.ts

@@ -1,7 +1,14 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 type LabelType = 'campaign' | 'new' | 'presale' | 'other';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface Props {
+    /**
+     * Enables the Label component to be rendered as a heading element
+     *
+     * @default 'span'
+     */
+    headingLevel?: HeadingLevel;
     /**
      * Allows to change the background color of component
      */

package/build/cjs/components/Label/Label.js

@@ -30,10 +30,12 @@ const StyledLabel = styled.default.span `
     text-align: center;
     text-transform: uppercase;
     border-radius: ${theme.default.radius.pill};
+    margin: 0;
 `;
 const Label = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.default.createElement(StyledLabel, { type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
+    const HeadingTag = props.headingLevel || 'span';
+    return (React__default.default.createElement(StyledLabel, { as: HeadingTag, type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports.default = Label;

package/build/cjs/components/Modal/Modal.d.ts

@@ -1,15 +1,21 @@
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactNode } from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
+type Variant = 'light' | 'dark';
+type Size = 'small' | 'medium' | 'large';
 interface Props {
-    /**
-     * Allows to control the state of component
-     */
-    isOpen: boolean;
     /**
      * Unique ID for the component
      */
     id?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
     /**
      * Modal title
      */
@@ -18,6 +24,10 @@ interface Props {
      * Content of the component
      */
     children?: ReactNode;
+    /**
+     * Allows to display custom footer
+     */
+    footer?: ReactNode;
     /**
      * Allows to hide application from assistive screenreaders and other assistive technologies while the modal is open
      *
@@ -25,45 +35,59 @@ interface Props {
      */
     appElement?: string;
     /**
-     * Allows to change CSS property `max-width` for Modal content wrapper element.
-     * Width in mobile view is always 100% of the window size
+     * Allows to control the state of component
+     */
+    isOpen: boolean;
+    /**
+     * Allows to disable all closing handlers.
+     * When set to `false`, modal can be closed only by setting `isOpen` flag to `false`
      *
-     * @default '37.5rem'
+     * @default true
      */
-    maxWidth?: string;
+    isClosable?: boolean;
     /**
-     * On overlay or close button click callback
+     * Allows to show and hide close button
+     *
+     * @default true
      */
-    onRequestClose?: ReactModalProps['onRequestClose'];
+    closeButton?: boolean;
     /**
-     * Allows to set property `aria-label` for content element
+     * On overlay or close button click callback
      */
-    contentLabel?: string;
+    onRequestClose?: ReactModalProps['onRequestClose'];
     /**
      * Allows to set property `aria-label` for `ButtonClose` element
      */
     closeLabel?: string;
     /**
-     * Allows to show and hide close button
-     *
-     * @default true
+     * Allows to set property `aria-label` for content element
      */
-    closeButton?: boolean;
+    contentLabel?: string;
     /**
-     * Allows to disable all closing handlers.
-     * When set to `false`, modal can be closed only by setting `isOpen` flag to `false`
-     *
-     * @default true
+     * Allows changing CSS property `max-width` for Modal content wrapper element.
+     * @deprecated Replaced with 'size' property
      */
-    isClosable?: boolean;
+    maxWidth?: string;
     /**
-     * Allows to pass a custom className
+     * Allows to change the size of the component.
+     * Size in mobile view is always 100% of the window size
+     *
+     * @param {Size} small Renders component with 'max-width' of 480px
+     * @param {Size} medium Renders component with 'max-width' of 768px
+     * @param {Size} large Renders component with 960px fixed width
+     *
+     * @default 'medium'
      */
-    className?: string;
+    size?: Size;
     /**
-     * Allows to pass testid string for testing purposes
+     * Allows to change the color scheme of the component
+     *
+     * @param {Variant} light Sets header background color to `theme.color.background.white.default`
+     * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
+     *
+     * @default 'light'
      */
-    'data-testid'?: string;
+    variant?: Variant;
 }
-declare const Modal: ({ appElement, maxWidth, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Modal: ({ appElement, size, variant, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default Modal;