@dnanpm/styleguide 3.7.1 → 3.8.1

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

@@ -1,105 +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;
+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;

package/build/cjs/components/Drawer/Drawer.js

@@ -20,16 +20,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
 
-const sizeMap = {
-    small: '375px',
-    medium: '768px',
-    large: '1080px',
-};
+const sizeMap = {
+    small: '375px',
+    medium: '768px',
+    large: '1080px',
+};
 const GlobalStyle = styled.createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
-`;
+`;
 const StyledReactModal = styled["default"](ReactModal__default["default"]) `
     position: fixed;
     top: 0;
@@ -64,7 +64,7 @@ const StyledReactModal = styled["default"](ReactModal__default["default"]) `
     ${({ size }) => styledUtils.media.sm `
         width: ${sizeMap[size]};
     `};
-`;
+`;
 const StyledReactModalOverlay = styled["default"].div `
     display: flex;
     justify-content: center;
@@ -102,12 +102,12 @@ const StyledReactModalOverlay = styled["default"].div `
             background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T0};
         }
     }
-`;
+`;
 const StyledReactModalContent = styled["default"].div `
     &:focus {
         outline: none;
     }
-`;
+`;
 const StyledBox = styled["default"](Box["default"]) `
     display: flex;
     flex-direction: column;
@@ -118,15 +118,15 @@ const StyledBox = styled["default"](Box["default"]) `
     position: relative;
     padding: 0;
     border: 0 none;
-`;
+`;
 const Header = styled["default"].div `
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     border-bottom: 1px solid ${theme["default"].color.line.L03};
     padding: 1.25rem;
-    background-color: ${({ variant }) => variant === 'light'
-    ? theme["default"].color.background.white.default
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme["default"].color.background.white.default
     : theme["default"].color.background.plum.E02};
     width: 100%;
 
@@ -134,27 +134,27 @@ const Header = styled["default"].div `
     p {
         margin: 0;
     }
-`;
+`;
 const Title = styled["default"].h2 `
     font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.h2S : theme["default"].fontSize.h2M)};
     color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
-`;
+`;
 const Subtitle = styled["default"].p `
     font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.l : theme["default"].fontSize.xl)};
     color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
-`;
+`;
 const CloseButton = styled["default"](ButtonClose["default"]) `
     margin: 0;
     padding: 0.625rem;
     border-radius: 0 0 0 ${theme["default"].radius.default};
-    background-color: ${({ variant }) => variant === 'light'
-    ? theme["default"].color.background.sand.E01
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme["default"].color.background.sand.E01
     : theme["default"].color.background.plum.default};
-`;
+`;
 const Content = styled["default"].div `
     padding: ${({ padding }) => padding};
     margin: 0;
-`;
+`;
 const Footer = styled["default"].div `
     padding: 1.25rem;
     margin: 0;
@@ -163,30 +163,30 @@ const Footer = styled["default"].div `
     background-color: ${theme["default"].color.background.white.default};
 
     ${common["default"]({ elevation: 'high', shadow: '1 0 0 0' })};
-`;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
-const ModalContent = (_a, children) => {
-    var { id, ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default["default"].createElement(StyledReactModalContent, { id: id, 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', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
-    ReactModal__default["default"].setAppElement(appElement);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["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["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(Floater["default"], null, closeButton && isClosable && (React__default["default"].createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
-                        React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: variant === 'light'
-                                ? theme["default"].color.default.plum
-                                : theme["default"].color.default.white })))),
-                    React__default["default"].createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
-                        React__default["default"].createElement(Title, { size: size, variant: variant }, props.title),
-                        props.subtitle && (React__default["default"].createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
-                    React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
-                props.footer && (React__default["default"].createElement(Floater["default"], { position: "bottom" },
-                    React__default["default"].createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
-        React__default["default"].createElement(GlobalStyle, null)));
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const ModalContent = (_a, children) => {
+    var { id, ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+    return (React__default["default"].createElement(StyledReactModalContent, { id: id, 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', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
+    ReactModal__default["default"].setAppElement(appElement);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["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["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
+                React__default["default"].createElement("div", null,
+                    React__default["default"].createElement(Floater["default"], null, closeButton && isClosable && (React__default["default"].createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: variant === 'light'
+                                ? theme["default"].color.default.plum
+                                : theme["default"].color.default.white })))),
+                    React__default["default"].createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                        React__default["default"].createElement(Title, { size: size, variant: variant }, props.title),
+                        props.subtitle && (React__default["default"].createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                props.footer && (React__default["default"].createElement(Floater["default"], { position: "bottom" },
+                    React__default["default"].createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
+        React__default["default"].createElement(GlobalStyle, null)));
 };
 
 exports["default"] = Drawer;

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

@@ -1,37 +1,37 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { Props as IconProps } from '../Icon/Icon';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Content of the component
-     */
-    children?: ReactNode;
-    /**
-     * Icon shown in the component
-     *
-     * @default `Info`
-     */
-    icon?: IconProps['icon'];
-    /**
-     * Size of icon in the component
-     *
-     * @default '2rem'
-     */
-    iconSize?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-/** @visibleName Empty State */
-declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default EmptyState;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as IconProps } from '../Icon/Icon';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Icon shown in the component
+     *
+     * @default `Info`
+     */
+    icon?: IconProps['icon'];
+    /**
+     * Size of icon in the component
+     *
+     * @default '2rem'
+     */
+    iconSize?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Empty State */
+declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default EmptyState;

package/build/cjs/components/EmptyState/EmptyState.js

@@ -20,14 +20,14 @@ const ContentWrapper = styled["default"].div `
     grid-gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
     justify-items: center;
     line-height: ${theme["default"].lineHeight.default};
-`;
-/** @visibleName Empty State */
-const EmptyState = (_a) => {
-    var { icon = icons.Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
-    return (React__default["default"].createElement(Box["default"], { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(ContentWrapper, null,
-            React__default["default"].createElement(Icon["default"], { icon: icon, size: iconSize, color: theme["default"].color.default.pink }),
-            React__default["default"].createElement("div", null, props.children))));
+`;
+/** @visibleName Empty State */
+const EmptyState = (_a) => {
+    var { icon = icons.Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
+    return (React__default["default"].createElement(Box["default"], { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(ContentWrapper, null,
+            React__default["default"].createElement(Icon["default"], { icon: icon, size: iconSize, color: theme["default"].color.default.pink }),
+            React__default["default"].createElement("div", null, props.children))));
 };
 
 exports["default"] = EmptyState;

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

@@ -0,0 +1,40 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to expand or collapse the component
+     *
+     * @default false
+     */
+    isExpanded?: boolean;
+    /**
+     * Allows to change label of ButtonIcon
+     */
+    buttonLabel: string;
+    /**
+     * Allows to change label of ButtonClose
+     */
+    closeButtonLabel?: string;
+    /**
+     * Content of Expander component
+     */
+    children?: ReactNode;
+    /**
+     * On ButtonIcon mouse click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Expander: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+export default Expander;