@dnanpm/styleguide 2.3.0 → 3.1.0

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

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var Button = require('./Button.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/** @visibleName Button Secondary */
+const ButtonSecondary = styled__default["default"](Button["default"]) `
+    color: ${theme["default"].color.text.plum};
+    background-color: ${theme["default"].color.background.sand.E02};
+    border: 2px solid ${theme["default"].color.line.L02};
+
+    &:focus {
+        color: ${theme["default"].color.text.plum};
+        background-color: ${theme["default"].color.background.sand.E02};
+    }
+
+    &:hover {
+        color: ${theme["default"].color.text.plum};
+        background-color: ${Button.shade.sand.E02.darker};
+        border: 2px solid ${Button.shade.sand.E02.darker};
+    }
+
+    &:active {
+        color: ${theme["default"].color.text.plum};
+        background-color: ${Button.shade.sand.E02.lighter};
+        border: 2px solid ${Button.shade.sand.E02.lighter};
+    }
+
+    &:disabled,
+    &[disabled] {
+        background-color: ${theme["default"].color.background.sand.E02 + theme["default"].color.transparency.T30};
+        border: 2px solid ${theme["default"].color.line.L02 + theme["default"].color.transparency.T30};
+        background-clip: padding-box;
+    }
+
+    ${({ loading }) => loading &&
+    `
+        &:focus {
+            border-color: ${theme["default"].color.line.L02};
+            outline: none;
+        }
+
+        > * > * {
+            background-color: ${theme["default"].color.default.plum};
+        }
+    `}
+`;
+
+exports["default"] = ButtonSecondary;

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

@@ -1,19 +1,23 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
      */
     id: string;
     /**
-     * Default value of input element
-     *
-     * @default undefined
+     * Name of the input element
      */
-    value?: boolean;
+    name?: string;
     /**
      * Text of the label shown next to checkbox
      */
     label: string;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: boolean;
     /**
      * On checkbox change callback
      */
@@ -49,6 +53,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Checkbox;

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

@@ -6,6 +6,7 @@ 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,40 +15,38 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
 const SVGIconData = () => {
-    const svg = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="1em" height="1em">
-            <path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />
-        </svg>
-    `;
-    return `data:image/svg+xml,${svg}`;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
+        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
+        `</svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     display: flex;
-    font-size: ${props => props.theme.fontSize.default};
-    line-height: ${props => props.theme.lineHeight.default};
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    font-size: ${theme["default"].fontSize.default};
+    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"](globalStyles.CheckboxAndRadioInputCore) `
     position: relative;
-    top: ${props => styledUtils.getDividedSize(props.theme.base.baseWidth, 5)};
+    top: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)};
 
     &:checked {
         &::before {
-            width: 1em;
-            height: 1em;
+            width: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
+            height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
             background-image: url('${SVGIconData}');
         }
     }
 `;
-const Mandatory = styled['default'].span `
-    color: ${props => props.theme.color.hotPink};
-    margin-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+const Mandatory = styled["default"].span `
+    color: ${theme["default"].color.default.pink};
+    margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
-const ErrorMessage = styled['default'].div `
-    font-size: ${props => props.theme.fontSize.s};
-    line-height: ${props => props.theme.lineHeight.s};
-    color: ${props => props.theme.color.error};
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+const ErrorMessage = styled["default"].div `
+    font-size: ${theme["default"].fontSize.s};
+    line-height: ${theme["default"].lineHeight.s};
+    color: ${theme["default"].color.notification.error};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
 const Checkbox = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
@@ -56,13 +55,13 @@ const Checkbox = (_a) => {
             props.onChange(!props.value);
         }
     };
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(Container, null,
-            React__default['default'].createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-            React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+    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), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            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.required && React__default["default"].createElement(Mandatory, null, "*"))),
+        props.error && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
-exports.default = Checkbox;
+exports["default"] = Checkbox;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
+type ChipVariant = 'outlined' | 'filled';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the color styling of component, depending on the passed type
+     *
+     * @param {ChipType} default Uses `theme.color.line.L01` color for styling
+     * @param {ChipType} info Uses `theme.color.notification.info` color for styling
+     * @param {ChipType} success Uses `theme.color.notification.success` color for styling
+     * @param {ChipType} warning Uses `theme.color.notification.warning` color for styling
+     * @param {ChipType} error Uses `theme.color.notification.error` color for styling
+     *
+     * @default 'default'
+     */
+    type?: ChipType;
+    /**
+     * Allows to change the appearance styling of component, depending on passed variant
+     *
+     * @param {ChipVariant} outlined Displays the component with border color depending on the `type` property
+     * @param {ChipVariant} filled Displays the component with background color depending on the `type` property
+     *
+     * @default 'outlined'
+     */
+    variant?: ChipVariant;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * On component click callback
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Chip;

package/build/cjs/components/Chip/Chip.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const getStyling = ({ $type, $variant, }) => {
+    const stylingColor = $type === 'default' ? theme["default"].color.line.L01 : theme["default"].color.notification[$type];
+    const border = `border: 2px solid ${stylingColor};`;
+    const background = `background-color: ${$variant === 'outlined' ? theme["default"].color.background.white.default : stylingColor};`;
+    const color = `color: ${$variant === 'outlined' ? theme["default"].color.text.black : theme["default"].color.text.white};`;
+    return `${border}${background}${color}`;
+};
+const Element = styled__default["default"].div `
+    display: inline-block;
+    border-radius: ${theme["default"].radius.pill};
+    padding: 1px ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+    font-size: ${theme["default"].fontSize.s};
+    line-height: ${theme["default"].lineHeight.s};
+    font-weight: ${theme["default"].fontWeight.medium};
+    text-align: center;
+    ${({ onClick }) => onClick && `cursor: pointer`};
+
+    ${({ $type, $variant }) => getStyling({ $type, $variant })}
+`;
+const Chip = (_a) => {
+    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "variant", 'data-testid']);
+    return (React__default["default"].createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
+};
+
+exports["default"] = Chip;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Divider component
+     */
+    children?: React.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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const DividerWrapper = styled__default["default"].div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: ${({ margin }) => margin || `${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} 0`};
+    ${({ padding }) => padding && `padding: ${padding}`};
+    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));
+};
+
+exports["default"] = Divider;

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

@@ -1,21 +1,21 @@
 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.
@@ -45,6 +45,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/cjs/components/DnaLogo/DnaLogo.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
-var theme = require('../../themes/theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,50 +12,50 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const colorVariationsMap = {
     default: {
-        background: theme['default'].color.hotPink,
-        text: theme['default'].color.white,
+        background: '#FF007D',
+        text: '#FFFFFF',
     },
     white: {
-        background: theme['default'].color.white,
-        text: theme['default'].color.hotPink,
+        background: '#FFFFFF',
+        text: '#FF007D',
     },
     'logotype-pink': {
-        text: theme['default'].color.hotPink,
+        text: '#FF007D',
     },
     'logotype-white': {
-        text: theme['default'].color.white,
+        text: '#FFFFFF',
     },
     'logotype-black': {
-        text: theme['default'].color.black,
+        text: '#000000',
     },
 };
-const Container = styled['default'].span `
+const Container = styled["default"].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['default'].createElement("svg", { viewBox: "0 0 666.7 666.7", width: size, height: size },
-        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" }))));
+    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, size }) => {
+const Logotype = ({ type }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React__default['default'].createElement("svg", { viewBox: "0 0 600 286.6", width: size, height: size },
-        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" }))));
+    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) => {
@@ -66,7 +65,7 @@ const DnaLogo = (_a) => {
         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, { size: size, type: type })) : (React__default['default'].createElement(Logotype, { size: size, type: type }))));
+    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;
+exports["default"] = DnaLogo;

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

@@ -0,0 +1,81 @@
+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?: React.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;