@dnanpm/styleguide 3.0.0 → 3.2.0

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,272 @@
+import { __rest } from 'tslib';
+import React__default, { useState } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import ButtonIcon from '../Button/ButtonIcon.js';
+import hlChevronLeft from '../Icons/hlChevronLeft.js';
+import hlChevronRight from '../Icons/hlChevronRight.js';
+import Input from '../Input/Input.js';
+
+/**
+ * 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)}`;
+const Wrapper = styled__default.div `
+    position: relative;
+
+    & .react-datepicker {
+        position: absolute;
+        display: flex;
+        font-size: ${theme.fontSize.xs};
+        border-radius: ${theme.radius.default};
+        border: 1px solid ${theme.color.line.L03};
+        background-color: ${theme.color.background.white.default};
+        z-index: 1;
+
+        .react-datepicker__aria-live {
+            display: none;
+        }
+    }
+
+    & .react-datepicker__month-container + .react-datepicker__time-container {
+        border-left: 1px solid ${theme.color.line.L03};
+    }
+
+    & .react-datepicker__header {
+        display: flex;
+        flex-direction: column;
+        gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        color: ${theme.color.text.black};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 1)}
+            ${getMultipliedSize(theme.base.baseWidth, 1)}
+            ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+        border-bottom: 1px solid ${theme.color.line.L03};
+        background-color: ${theme.color.background.sand.E01};
+
+        .react-datepicker-time__header {
+            font-size: ${theme.fontSize.default};
+            line-height: ${theme.lineHeight.default};
+            font-weight: ${theme.fontWeight.bold};
+            text-align: center;
+        }
+    }
+
+    & .react-datepicker__month,
+    .react-datepicker__time-list {
+        display: grid;
+        gap: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+        color: ${theme.color.text.gray};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 0.5)}
+            ${getMultipliedSize(theme.base.baseWidth, 1)}
+            ${getMultipliedSize(theme.base.baseWidth, 1)};
+
+        .react-datepicker__day--outside-month {
+            visibility: hidden;
+        }
+    }
+
+    & .react-datepicker__day-names,
+    & .react-datepicker__week {
+        display: flex;
+        gap: ${getMultipliedSize(theme.base.baseWidth, 0.8)};
+
+        .react-datepicker__day-name,
+        .react-datepicker__day {
+            text-align: center;
+            font-weight: ${theme.fontWeight.book};
+            line-height: ${theme.lineHeight.default};
+            width: ${getMultipliedSize(theme.base.baseHeight, 2.4)};
+            height: ${getMultipliedSize(theme.base.baseHeight, 2.4)};
+        }
+
+        .react-datepicker__day {
+            cursor: pointer;
+            font-weight: ${theme.fontWeight.book};
+            border: 1px solid transparent;
+            border-radius: ${theme.radius.s};
+
+            &.react-datepicker__day--today {
+                color: ${theme.color.text.pink};
+                font-weight: ${theme.fontWeight.bold};
+            }
+
+            &.react-datepicker__day--in-selecting-range {
+                color: ${theme.color.text.white};
+                font-weight: ${theme.fontWeight.bold};
+                background-color: ${theme.color.background.pink.default};
+            }
+
+            &.react-datepicker__day--selected {
+                color: ${theme.color.text.white};
+                font-weight: ${theme.fontWeight.bold};
+                background-color: ${theme.color.background.pink.default};
+            }
+
+            &:hover {
+                color: ${theme.color.text.gray};
+                font-weight: ${theme.fontWeight.bold};
+                background-color: ${theme.color.background.sand.E01};
+                border: 1px solid ${theme.color.line.L03};
+            }
+
+            &.react-datepicker__day--selecting-range-start {
+                color: ${theme.color.text.white};
+                background-color: ${theme.color.background.pink.default};
+
+                &.react-datepicker__day--selecting-range-end {
+                    color: ${theme.color.text.white};
+                    background-color: ${theme.color.background.pink.default};
+                }
+            }
+
+            &.react-datepicker__day--selecting-range-end {
+                color: ${theme.color.text.black};
+                background-color: ${theme.color.background.pink.E02};
+
+                &:hover {
+                    border: 1px solid ${theme.color.background.pink.E02};
+                }
+            }
+        }
+    }
+
+    & .react-datepicker__time {
+        width: ${getMultipliedSize(theme.base.baseWidth, 15)};
+
+        .react-datepicker__time-list {
+            padding-left: 0;
+            padding-right: 0;
+            list-style: none;
+            margin: 0;
+            gap: 0;
+            overflow-y: scroll;
+            height: ${getMultipliedSize(theme.base.baseHeight, 19)};
+
+            .react-datepicker__time-list-item {
+                cursor: pointer;
+                text-align: center;
+                font-weight: ${theme.fontWeight.book};
+                line-height: ${theme.lineHeight.h2S};
+                height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
+
+                &.react-datepicker__time-list-item--selected {
+                    color: ${theme.color.text.white};
+                    font-weight: ${theme.fontWeight.bold};
+                    background-color: ${theme.color.background.pink.default};
+                }
+
+                &:hover {
+                    color: ${theme.color.text.gray};
+                    font-weight: ${theme.fontWeight.bold};
+                    background-color: ${theme.color.background.sand.E01};
+                }
+            }
+        }
+    }
+`;
+const MonthSelector = styled__default.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span.dnasg-icon > svg {
+        fill: ${theme.color.text.gray};
+    }
+`;
+const CurrentMonth = styled__default.div `
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.bold};
+`;
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.createElement(MonthSelector, null,
+    React__default.createElement(ButtonIcon, { icon: hlChevronLeft, onClick: decreaseMonth }),
+    React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+        month: 'long',
+        year: 'numeric',
+    }))),
+    React__default.createElement(ButtonIcon, { icon: hlChevronRight, 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 = __rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
+    const [showReactDatePicker, setShowReactDatePicker] = 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.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(Input, { 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: handleClearable, 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.createElement(ReactDatePicker, { inline: true, selected: startDate, startDate: startDate, 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 }))));
+};
+
+export { DateTimePicker as default };

package/build/es/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/es/components/Divider/Divider.js

@@ -0,0 +1,23 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+const DividerWrapper = styled__default.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: ${({ margin }) => margin || `${getMultipliedSize(theme.base.baseHeight, 1)} 0`};
+    ${({ padding }) => padding && `padding: ${padding}`};
+    border-style: solid;
+    border-color: ${theme.color.line.L03};
+    border-width: 1px ${({ children }) => !children && '0 0 0'};
+`;
+const Divider = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    return (React__default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+};
+
+export { Divider as default };

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

@@ -1,21 +1,22 @@
+import type { MouseEvent } from 'react';
 import React from 'react';
-declare type TypeEmblem = 'default' | 'white';
-declare type TypeLogotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
-declare type Type = TypeEmblem | TypeLogotype;
+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 {Type} default Default
-     * @param {Type} white For use on hot pink background
-     * @param {Type} logotype-pink For use in smaller spaces
-     * @param {Type} logotype-white For use in smaller spaces and on pink background
-     * @param {Type} logotype-black For specific uses only (see Brand Styleguide)
+     * @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?: Type;
+    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.
@@ -28,7 +29,7 @@ interface Props {
     /**
      * On Logo click callback
      */
-    onClick?: (e: React.MouseEvent) => void;
+    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.
@@ -45,6 +46,6 @@ interface Props {
     className?: string;
 }
 /** @visibleName DNA Logo */
-declare const DnaLogo: ({ type, size, ...props }: Props) => JSX.Element;
+declare const DnaLogo: ({ type, size, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default DnaLogo;

package/build/es/components/DnaLogo/DnaLogo.js

@@ -23,27 +23,27 @@ const colorVariationsMap = {
 };
 const Container = styled.span `
     display: inline-flex;
-    width: ${p => p.size};
-    height: ${p => p.size};
-    margin: ${p => p.margin};
+    width: ${({ size }) => size};
+    height: ${({ size }) => size};
+    ${({ margin }) => margin && `margin: ${margin}`};
 
     svg {
-        width: ${p => p.size};
-        height: ${p => p.size};
+        width: ${({ size }) => size};
+        height: ${({ size }) => size};
     }
 `;
-const Emblem = ({ type, size }) => {
+const Emblem = ({ type }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React__default.createElement("svg", { viewBox: "0 0 666.7 666.7", width: size, height: size },
+    return (React__default.createElement("svg", { viewBox: "0 0 666.7 666.7" },
         React__default.createElement("g", null,
             React__default.createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
             React__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.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.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, size }) => {
+const Logotype = ({ type }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React__default.createElement("svg", { viewBox: "0 0 600 286.6", width: size, height: size },
+    return (React__default.createElement("svg", { viewBox: "0 0 600 286.6" },
         React__default.createElement("g", null,
             React__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.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" }),
@@ -57,7 +57,7 @@ const DnaLogo = (_a) => {
         const matches = /(\d+)(.+)/.exec(size);
         margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
     }
-    return (React__default.createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? (React__default.createElement(Emblem, { size: size, type: type })) : (React__default.createElement(Logotype, { size: size, type: type }))));
+    return (React__default.createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React__default.createElement(Emblem, { type: type }) : React__default.createElement(Logotype, { type: type })));
 };
 
 export { DnaLogo as default };

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

@@ -0,0 +1,82 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as ReactModalProps } from 'react-modal';
+type Size = 'small' | 'medium' | 'large';
+interface Props {
+    /**
+     * Allows to control the state of component
+     */
+    isOpen: boolean;
+    /**
+     * Unique ID for the component
+     */
+    id?: 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'
+     */
+    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 pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Drawer: ({ appElement, size, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+export default Drawer;

package/build/es/components/Drawer/Drawer.js

@@ -0,0 +1,122 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import ReactModal from 'react-modal';
+import styled, { createGlobalStyle } from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { media } from '../../utils/styledUtils.js';
+import Box from '../Box/Box.js';
+import ButtonClose from '../Button/ButtonClose.js';
+import Icon from '../Icon/Icon.js';
+import hlX from '../Icons/hlX.js';
+
+const sizeMap = {
+    small: '375px',
+    medium: '768px',
+    large: '1080px',
+};
+const GlobalStyle = createGlobalStyle `
+    body.ReactModal__Body--open {
+        overflow: hidden;
+    }
+`;
+const StyledReactModal = styled(ReactModal) `
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100vw;
+    height: 100dvh;
+    max-width: 100vw;
+    max-height: 100%;
+    transform: translateX(100%);
+    animation: slideIn 0.5s forwards;
+
+    &.ReactModal__Content--before-close {
+        animation: slideOut 0.3s forwards;
+    }
+
+    @keyframes slideIn {
+        100% {
+            transform: translateX(0%);
+        }
+    }
+
+    @keyframes slideOut {
+        0% {
+            transform: translateX(0%);
+        }
+
+        100% {
+            transform: translateX(100%);
+        }
+    }
+
+    ${({ size }) => media.sm `
+        width: ${sizeMap[size]};
+    `};
+`;
+const StyledOverlay = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
+    animation: fadeIn 0.2s ease-in-out;
+
+    &.ReactModal__Overlay--before-close {
+        animation: fadeOut 0.2s ease-in-out;
+        animation-delay: 0.1s;
+    }
+
+    @keyframes fadeIn {
+        0% {
+            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T0};
+        }
+
+        100% {
+            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
+        }
+    }
+
+    @keyframes fadeOut {
+        0% {
+            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
+        }
+
+        100% {
+            background-color: ${theme.color.background.plum.default}${theme.color.transparency.T0};
+        }
+    }
+`;
+const StyledBox = styled(Box) `
+    border-radius: 0;
+    height: 100%;
+    overflow-y: auto;
+`;
+const StyledContent = styled.div `
+    &:focus {
+        outline: none;
+    }
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const ModalContent = (_a, children) => {
+    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = __rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+    return (React__default.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+};
+const Drawer = (_a) => {
+    var { appElement = '#__next', size = 'medium', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "size", "closeButton", "isClosable", 'data-testid']);
+    ReactModal.setAppElement(appElement);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
+            React__default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
+                props.children,
+                closeButton && isClosable && (React__default.createElement(ButtonClose, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
+                    React__default.createElement(Icon, { icon: hlX }))))),
+        React__default.createElement(GlobalStyle, null)));
+};
+
+export { Drawer as default };

package/build/es/components/EmptyState/EmptyState.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as IconProps } from '../Icon/Icon';
 interface Props {
@@ -8,7 +9,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Icon shown in the component
      *
@@ -31,6 +32,6 @@ interface Props {
     className?: string;
 }
 /** @visibleName Empty State */
-declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default EmptyState;