@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -18,46 +18,46 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/**
- * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
- * Contains only used and functionality wise necessary properties
- */
-const localeData = {
-    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
-    'fi-FI': {
-        code: 'fi',
-        formatLong: {
-            date: () => 'eeee d. MMMM y',
-            time: () => 'HH.mm',
-        },
-        localize: {
-            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
-            month: (i) => [
-                'Tammikuu',
-                'Helmikuu',
-                'Maaliskuu',
-                'Huhtikuu',
-                'Toukokuu',
-                'Kesäkuu',
-                'Heinäkuu',
-                'Elokuu',
-                'Syyskuu',
-                'Lokakuu',
-                'Marraskuu',
-                'Joulukuu',
-            ][i],
-            timeCaption: 'Aika',
-        },
-        options: {
-            weekStartsOn: 1,
-            firstWeekContainsDate: 4,
-        },
-    },
-    // Use react-datepicker default language
-    'en-GB': undefined,
-};
-const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
-// TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
+/**
+ * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
+ * Contains only used and functionality wise necessary properties
+ */
+const localeData = {
+    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
+    'fi-FI': {
+        code: 'fi',
+        formatLong: {
+            date: () => 'eeee d. MMMM y',
+            time: () => 'HH.mm',
+        },
+        localize: {
+            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
+            month: (i) => [
+                'Tammikuu',
+                'Helmikuu',
+                'Maaliskuu',
+                'Huhtikuu',
+                'Toukokuu',
+                'Kesäkuu',
+                'Heinäkuu',
+                'Elokuu',
+                'Syyskuu',
+                'Lokakuu',
+                'Marraskuu',
+                'Joulukuu',
+            ][i],
+            timeCaption: 'Aika',
+        },
+        options: {
+            weekStartsOn: 1,
+            firstWeekContainsDate: 4,
+        },
+    },
+    // Use react-datepicker default language
+    'en-GB': undefined,
+};
+const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
+// TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
 const Wrapper = styled__default["default"].div `
     position: relative;
 
@@ -220,7 +220,7 @@ const Wrapper = styled__default["default"].div `
             }
         }
     }
-`;
+`;
 const MonthSelector = styled__default["default"].div `
     display: flex;
     align-items: center;
@@ -229,64 +229,64 @@ const MonthSelector = styled__default["default"].div `
     span.dnasg-icon > svg {
         fill: ${theme["default"].color.text.gray};
     }
-`;
+`;
 const CurrentMonth = styled__default["default"].div `
     font-size: ${theme["default"].fontSize.default};
     line-height: ${theme["default"].lineHeight.default};
     font-weight: ${theme["default"].fontWeight.bold};
-`;
-const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default["default"].createElement(MonthSelector, null,
-    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronLeft, onClick: decreaseMonth }),
-    React__default["default"].createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
-        month: 'long',
-        year: 'numeric',
-    }))),
-    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronRight, onClick: increaseMonth })));
-/** @visibleName DateTime Picker */
-const DateTimePicker = (_a) => {
-    var _b;
-    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
-    const [showReactDatePicker, setShowReactDatePicker] = React.useState(false);
-    const handleOnInputFocus = () => {
-        setShowReactDatePicker(true);
-    };
-    const handleOnInputChange = (_, e) => {
-        if (props.onInputChange) {
-            props.onInputChange(e);
-        }
-    };
-    const handleOnKeyDown = (e) => {
-        if (!props.isEditable &&
-            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
-            props.onChange(null, e);
-        }
-    };
-    const handleClearable = (e) => {
-        props.onChange(null, e);
-    };
-    const handleOnReactDatePickerChange = (date, e) => {
-        setShowReactDatePicker(false);
-        props.onChange(date, e);
-    };
-    const handleOnReactDatePickerClickOutside = () => {
-        setShowReactDatePicker(false);
-    };
-    const formatInputValue = [startDate, props.endDate]
-        .filter(Boolean)
-        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
-        dateStyle: 'medium',
-    })), (props.endDate === undefined &&
-        isTimePicker && {
-        timeStyle: 'short',
-    }))))
-        .join(' - ');
-    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
-    return (React__default["default"].createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
-        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
-            // Used to format the date/time in internal ReactDatePicker input
-            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
-            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
+`;
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default["default"].createElement(MonthSelector, null,
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronLeft, onClick: decreaseMonth }),
+    React__default["default"].createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+        month: 'long',
+        year: 'numeric',
+    }))),
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronRight, onClick: increaseMonth })));
+/** @visibleName DateTime Picker */
+const DateTimePicker = (_a) => {
+    var _b;
+    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
+    const [showReactDatePicker, setShowReactDatePicker] = React.useState(false);
+    const handleOnInputFocus = () => {
+        setShowReactDatePicker(true);
+    };
+    const handleOnInputChange = (_, e) => {
+        if (props.onInputChange) {
+            props.onInputChange(e);
+        }
+    };
+    const handleOnKeyDown = (e) => {
+        if (!props.isEditable &&
+            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
+            props.onChange(null, e);
+        }
+    };
+    const handleClearable = (e) => {
+        props.onChange(null, e);
+    };
+    const handleOnReactDatePickerChange = (date, e) => {
+        setShowReactDatePicker(false);
+        props.onChange(date, e);
+    };
+    const handleOnReactDatePickerClickOutside = () => {
+        setShowReactDatePicker(false);
+    };
+    const formatInputValue = [startDate, props.endDate]
+        .filter(Boolean)
+        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
+        dateStyle: 'medium',
+    })), (props.endDate === undefined &&
+        isTimePicker && {
+        timeStyle: 'short',
+    }))))
+        .join(' - ');
+    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
+    return (React__default["default"].createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
+        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
+            // Used to format the date/time in internal ReactDatePicker input
+            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
+            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
 };
 
 exports["default"] = DateTimePicker;

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Divider component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0.625rem 0'
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '0'
+     */
+    padding?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Divider: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Divider;

package/build/cjs/components/Divider/Divider.js

@@ -23,10 +23,10 @@ const DividerWrapper = styled__default["default"].div `
     border-style: solid;
     border-color: ${theme["default"].color.line.L03};
     border-width: 1px ${({ children }) => !children && '0 0 0'};
-`;
-const Divider = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Divider = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    return (React__default["default"].createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports["default"] = Divider;

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

@@ -0,0 +1,51 @@
+import type { MouseEvent } from 'react';
+import React from 'react';
+type TypeEmblem = 'default' | 'white';
+type TypeLogotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
+type DnaLogoType = TypeEmblem | TypeLogotype;
+interface Props {
+    /**
+     * There are different types and color options for the DNA Logo, depending on the color of
+     * the background and place where it is used.
+     *
+     * @param {DnaLogoType} default Default
+     * @param {DnaLogoType} white For use on hot pink background
+     * @param {DnaLogoType} logotype-pink For use in smaller spaces
+     * @param {DnaLogoType} logotype-white For use in smaller spaces and on pink background
+     * @param {DnaLogoType} logotype-black For specific uses only (see Brand Styleguide)
+     *
+     * @default 'default'
+     */
+    type?: DnaLogoType;
+    /**
+     * The basic principle is that DNA Logo should be sized in a way in which DNA text is always
+     * clearly visible. Therefore, the minimum size of DNA Logo on digital channels is 32 px.
+     *
+     * This doesn't apply when DNA Logo is used as favicon.
+     *
+     * @default '2rem'
+     */
+    size?: string;
+    /**
+     * On Logo click callback
+     */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * Minimum protected area of a DNA logo from another element or edge is 1/4 of the height.
+     * When activated, value is calculated automatically from size property.
+     *
+     * Individual text elements, such as slogans, urls, etc., are always placed next to the logo
+     * with a minimum protected area.
+     *
+     * @default false
+     */
+    protectedArea?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName DNA Logo */
+declare const DnaLogo: ({ type, size, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default DnaLogo;

package/build/cjs/components/DnaLogo/DnaLogo.js

@@ -10,25 +10,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const colorVariationsMap = {
-    default: {
-        background: '#FF007D',
-        text: '#FFFFFF',
-    },
-    white: {
-        background: '#FFFFFF',
-        text: '#FF007D',
-    },
-    'logotype-pink': {
-        text: '#FF007D',
-    },
-    'logotype-white': {
-        text: '#FFFFFF',
-    },
-    'logotype-black': {
-        text: '#000000',
-    },
-};
+const colorVariationsMap = {
+    default: {
+        background: '#FF007D',
+        text: '#FFFFFF',
+    },
+    white: {
+        background: '#FFFFFF',
+        text: '#FF007D',
+    },
+    'logotype-pink': {
+        text: '#FF007D',
+    },
+    'logotype-white': {
+        text: '#FFFFFF',
+    },
+    'logotype-black': {
+        text: '#000000',
+    },
+};
 const Container = styled["default"].span `
     display: inline-flex;
     width: ${({ size }) => size};
@@ -39,33 +39,33 @@ const Container = styled["default"].span `
         width: ${({ size }) => size};
         height: ${({ size }) => size};
     }
-`;
-const Emblem = ({ type }) => {
-    const currentVariation = colorVariationsMap[type];
-    return (React__default["default"].createElement("svg", { viewBox: "0 0 666.7 666.7" },
-        React__default["default"].createElement("g", null,
-            React__default["default"].createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M403,451h-41.9V285.5c0-15.7-12.7-28.4-28.4-28.4h-29.4V451h-41.9V215.2h71.3c38.8,0,70.3,31.5,70.3,70.3V451z\n                " }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M226.4,286.2c0-39.2-31.8-71-71-71H84.9V451h70.6c39.2,0,71-31.8,71-71L226.4,286.2z M184.5,380.7\n                c0,15.7-12.8,28.5-28.5,28.5h-29.3v-152H156c15.7,0,28.5,12.8,28.5,28.5V380.7z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M511.5,213.6h-1c-38.8,0-70.3,31.5-70.3,70.3V451h41.9v-84.4h57.8V451h41.9V283.9\n                C581.8,245.2,550.3,213.6,511.5,213.6z M539.9,327.2h-57.8v-43.3c0-15.7,12.7-28.4,28.4-28.4h1c15.7,0,28.4,12.7,28.4,28.4V327.2z" }))));
-};
-const Logotype = ({ type }) => {
-    const currentVariation = colorVariationsMap[type];
-    return (React__default["default"].createElement("svg", { viewBox: "0 0 600 286.6" },
-        React__default["default"].createElement("g", null,
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M299.3,3.3h-85.2v281.8h50.1V53.4h35.1c18.8,0,34,15.2,34,34v197.8h50.1V87.3C383.3,41,345.6,3.3,299.3,3.3z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M87.4,3.3H3v281.9h84.4c46.8,0,84.8-38,84.8-84.8l0-112.2C172.2,41.3,134.2,3.3,87.4,3.3z M122.1,201.1\n                    c0,18.8-15.3,34.1-34.1,34.1h-35V53.4h35c18.8,0,34.1,15.3,34.1,34.1L122.1,201.1z" }),
-            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M513,1.4h-1.2c-46.3,0-84,37.7-84,84v199.8h50.1V183.4l69.1,0v101.8H597V85.4C597,39.1,559.3,1.4,513,1.4z\n                    M546.9,137.2h-69.1V85.4c0-18.7,15.2-34,34-34h1.2c18.7,0,34,15.2,34,34V137.2z" }))));
-};
-/** @visibleName DNA Logo */
-const DnaLogo = (_a) => {
-    var { type = 'default', size = '2rem' } = _a, props = tslib.__rest(_a, ["type", "size"]);
-    let margin = null;
-    if (props.protectedArea) {
-        const matches = /(\d+)(.+)/.exec(size);
-        margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
-    }
-    return (React__default["default"].createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React__default["default"].createElement(Emblem, { type: type }) : React__default["default"].createElement(Logotype, { type: type })));
+`;
+const Emblem = ({ type }) => {
+    const currentVariation = colorVariationsMap[type];
+    return (React__default["default"].createElement("svg", { viewBox: "0 0 666.7 666.7" },
+        React__default["default"].createElement("g", null,
+            React__default["default"].createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
+            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M403,451h-41.9V285.5c0-15.7-12.7-28.4-28.4-28.4h-29.4V451h-41.9V215.2h71.3c38.8,0,70.3,31.5,70.3,70.3V451z\n                " }),
+            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M226.4,286.2c0-39.2-31.8-71-71-71H84.9V451h70.6c39.2,0,71-31.8,71-71L226.4,286.2z M184.5,380.7\n                c0,15.7-12.8,28.5-28.5,28.5h-29.3v-152H156c15.7,0,28.5,12.8,28.5,28.5V380.7z" }),
+            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M511.5,213.6h-1c-38.8,0-70.3,31.5-70.3,70.3V451h41.9v-84.4h57.8V451h41.9V283.9\n                C581.8,245.2,550.3,213.6,511.5,213.6z M539.9,327.2h-57.8v-43.3c0-15.7,12.7-28.4,28.4-28.4h1c15.7,0,28.4,12.7,28.4,28.4V327.2z" }))));
+};
+const Logotype = ({ type }) => {
+    const currentVariation = colorVariationsMap[type];
+    return (React__default["default"].createElement("svg", { viewBox: "0 0 600 286.6" },
+        React__default["default"].createElement("g", null,
+            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M299.3,3.3h-85.2v281.8h50.1V53.4h35.1c18.8,0,34,15.2,34,34v197.8h50.1V87.3C383.3,41,345.6,3.3,299.3,3.3z" }),
+            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M87.4,3.3H3v281.9h84.4c46.8,0,84.8-38,84.8-84.8l0-112.2C172.2,41.3,134.2,3.3,87.4,3.3z M122.1,201.1\n                    c0,18.8-15.3,34.1-34.1,34.1h-35V53.4h35c18.8,0,34.1,15.3,34.1,34.1L122.1,201.1z" }),
+            React__default["default"].createElement("path", { fill: currentVariation.text, d: "M513,1.4h-1.2c-46.3,0-84,37.7-84,84v199.8h50.1V183.4l69.1,0v101.8H597V85.4C597,39.1,559.3,1.4,513,1.4z\n                    M546.9,137.2h-69.1V85.4c0-18.7,15.2-34,34-34h1.2c18.7,0,34,15.2,34,34V137.2z" }))));
+};
+/** @visibleName DNA Logo */
+const DnaLogo = (_a) => {
+    var { type = 'default', size = '2rem' } = _a, props = tslib.__rest(_a, ["type", "size"]);
+    let margin = null;
+    if (props.protectedArea) {
+        const matches = /(\d+)(.+)/.exec(size);
+        margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
+    }
+    return (React__default["default"].createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React__default["default"].createElement(Emblem, { type: type }) : React__default["default"].createElement(Logotype, { type: type })));
 };
 
 exports["default"] = DnaLogo;

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

@@ -0,0 +1,105 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as ReactModalProps } from 'react-modal';
+type Size = 'small' | 'medium' | 'large';
+type Variant = 'light' | 'dark';
+interface Props {
+    /**
+     * Allows to control the state of component
+     */
+    isOpen: boolean;
+    /**
+     * Allows to define title shown in the header
+     */
+    title: string;
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * 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'
+     */
+    variant?: Variant;
+    /**
+     * Allows to define subtitle shown in the header
+     */
+    subtitle?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to hide application from assistive screenreaders and other assistive technologies while the drawer is open
+     *
+     * @default '#__next'
+     */
+    appElement?: string;
+    /**
+     * Allows to change the size of the component.
+     * Size in mobile view is always 100% of the window size
+     *
+     * @param {Size} small Renders component as 375px wide
+     * @param {Size} medium Renders component as 768px wide
+     * @param {Size} large Renders component as 1080px wide
+     *
+     * @default 'medium'
+     */
+    size?: Size;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0'
+     * @deprecated Will be removed in the next major version
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '1.25rem'
+     */
+    padding?: string;
+    /**
+     * On overlay or close button click callback
+     */
+    onRequestClose?: ReactModalProps['onRequestClose'];
+    /**
+     * Allows to set property `aria-label` for content element
+     */
+    contentLabel?: string;
+    /**
+     * Allows to set property `aria-label` for `ButtonClose` element
+     */
+    closeLabel?: string;
+    /**
+     * Allows to show and hide close button
+     *
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Allows to disable all closing handlers.
+     * When set to `false`, modal can be closed only by setting `isOpen` flag to `false`
+     *
+     * @default true
+     */
+    isClosable?: boolean;
+    /**
+     * Allows to display the footer content
+     */
+    footer?: ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Drawer: ({ appElement, size, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+export default Drawer;