@dnanpm/styleguide 2.2.3 → 3.0.0

package/build/es/components/Button/ButtonIcon.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { Props as IconProps } from '../Icon/Icon';
+import type { Props as ButtonProps } from './Button';
+interface Props extends Omit<ButtonProps, 'fullWidth'> {
+    /**
+     * Icon shown in icon button component
+     *
+     * @default `hlPen`
+     */
+    icon?: IconProps['icon'];
+    /**
+     * Allows to hide passed children on mobile screen size view (<576px)
+     *
+     * @default false
+     */
+    hideChildrenMobile?: boolean;
+}
+/** @visibleName Button Icon */
+declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => JSX.Element;
+/** @component */
+export default ButtonIcon;

package/build/es/components/Button/ButtonIcon.js

@@ -0,0 +1,84 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default, { css } from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getDividedSize, media } from '../../utils/styledUtils.js';
+import Icon from '../Icon/Icon.js';
+import hlPen from '../Icons/hlPen.js';
+import PixelLoader from '../PixelLoader/PixelLoader.js';
+
+const ButtonElement = styled__default.button `
+    display: inline-flex;
+    align-items: center;
+    font-family: ${theme.fontFamily.default};
+    font-weight: ${theme.fontWeight.bold};
+    font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.default)};
+    line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.default)};
+    cursor: pointer;
+    color: ${({ darkBg }) => (darkBg ? theme.color.text.white : theme.color.text.black)};
+    background-color: transparent;
+    border: 2px solid transparent;
+    padding: ${getDividedSize(theme.base.baseWidth, 5)} 0;
+
+    &:focus {
+        border-radius: ${theme.radius.s};
+        text-decoration: underline;
+        border: 2px solid
+            ${({ darkBg }) => (darkBg ? theme.color.focus.dark : theme.color.focus.light)};
+        box-shadow: 0px 0px 0px 2px
+            ${({ darkBg }) => (darkBg ? theme.color.focus.light : theme.color.focus.dark)};
+        outline: none;
+    }
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &:active {
+        color: ${({ darkBg }) => darkBg
+    ? theme.color.text.white + theme.color.transparency.T90
+    : theme.color.text.black + theme.color.transparency.T80};
+    }
+
+    &:disabled,
+    &[disabled] {
+        color: ${({ darkBg }) => darkBg ? theme.color.text.white + theme.color.transparency.T70 : theme.color.text.gray};
+        pointer-events: none;
+    }
+
+    ${({ $loading }) => $loading &&
+    `
+        pointer-events: none;
+
+        &:focus {
+            border: 2px solid transparent;
+            outline: none;
+        }
+
+        > * {
+            display: inline-flex;
+        }
+    `}
+
+    ${({ hideChildrenMobile }) => hideChildrenMobile &&
+    css `
+            span.dnasg-icon + span {
+                display: none;
+            }
+
+            ${media.sm `
+            span.dnasg-icon + span {
+                display: initial;
+            }
+        `}
+        `}
+`;
+/** @visibleName Button Icon */
+const ButtonIcon = (_a) => {
+    var { icon = hlPen, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
+    return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? 'left' : undefined }),
+        props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
+};
+
+export { ButtonIcon as default };

package/build/es/components/Button/ButtonPrimary.d.ts

@@ -0,0 +1,5 @@
+import Button from './Button';
+/** @visibleName Button Primary */
+declare const ButtonPrimary: typeof Button;
+/** @component */
+export default ButtonPrimary;

package/build/es/components/Button/ButtonPrimary.js

@@ -0,0 +1,50 @@
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import Button, { shade } from './Button.js';
+
+/** @visibleName Button Primary */
+const ButtonPrimary = styled__default(Button) `
+    && {
+        color: ${theme.color.text.white};
+        background-color: ${theme.color.default.pink};
+        border: 2px solid ${theme.color.default.pink};
+
+        &:focus {
+            color: ${theme.color.text.white};
+            background-color: ${theme.color.default.pink};
+        }
+
+        &:hover {
+            color: ${theme.color.text.white};
+            background-color: ${shade.pink.darker};
+            border: 2px solid ${shade.pink.darker};
+        }
+
+        &:active {
+            color: ${theme.color.text.white};
+            background-color: ${shade.pink.lighter};
+            border: 2px solid ${shade.pink.lighter};
+        }
+
+        &:disabled,
+        &[disabled] {
+            background-color: ${theme.color.default.pink + theme.color.transparency.T30};
+            border: 2px solid ${theme.color.default.pink + theme.color.transparency.T30};
+            background-clip: padding-box;
+        }
+
+        ${({ loading }) => loading &&
+    `
+            &:focus {
+                border-color: ${theme.color.default.pink};
+                outline: none;
+            }
+
+            > * > * {
+                background-color: ${theme.color.default.white};
+            }
+        `}
+    }
+`;
+
+export { ButtonPrimary as default };

package/build/es/components/Button/ButtonRound.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Props as ButtonProps } from './Button';
+declare type Props = Omit<ButtonProps, 'small' | 'fullWidth' | 'loading'>;
+/** @visibleName Button Round */
+declare const ButtonRound: ({ "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => JSX.Element;
+/** @component */
+export default ButtonRound;

package/build/es/components/Button/ButtonRound.js

@@ -0,0 +1,28 @@
+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';
+import ButtonPrimary from './ButtonPrimary.js';
+
+const ButtonElement = styled__default(ButtonPrimary) `
+    && {
+        display: flex;
+        min-width: initial;
+        width: ${getMultipliedSize(theme.base.baseWidth, 3.2)};
+        height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
+        border-radius: ${theme.radius.circle};
+        padding: initial;
+        text-align: center;
+        vertical-align: middle;
+        justify-content: center;
+        align-items: center;
+    }
+`;
+/** @visibleName Button Round */
+const ButtonRound = (_a) => {
+    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
+    return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
+};
+
+export { ButtonRound as default };

package/build/es/components/Button/ButtonSecondary.d.ts

@@ -0,0 +1,5 @@
+import Button from './Button';
+/** @visibleName Button Secondary */
+declare const ButtonSecondary: typeof Button;
+/** @component */
+export default ButtonSecondary;

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

@@ -0,0 +1,50 @@
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import Button, { shade } from './Button.js';
+
+/** @visibleName Button Secondary */
+const ButtonSecondary = styled__default(Button) `
+    && {
+        color: ${theme.color.text.plum};
+        background-color: ${theme.color.background.sand.E02};
+        border: 2px solid ${theme.color.line.L02};
+
+        &:focus {
+            color: ${theme.color.text.plum};
+            background-color: ${theme.color.background.sand.E02};
+        }
+
+        &:hover {
+            color: ${theme.color.text.plum};
+            background-color: ${shade.sand.E02.darker};
+            border: 2px solid ${shade.sand.E02.darker};
+        }
+
+        &:active {
+            color: ${theme.color.text.plum};
+            background-color: ${shade.sand.E02.lighter};
+            border: 2px solid ${shade.sand.E02.lighter};
+        }
+
+        &:disabled,
+        &[disabled] {
+            background-color: ${theme.color.background.sand.E02 + theme.color.transparency.T30};
+            border: 2px solid ${theme.color.line.L02 + theme.color.transparency.T30};
+            background-clip: padding-box;
+        }
+
+        ${({ loading }) => loading &&
+    `
+            &:focus {
+                border-color: ${theme.color.line.L02};
+                outline: none;
+            }
+
+            > * > * {
+                background-color: ${theme.color.default.plum};
+            }
+        `}
+    }
+`;
+
+export { ButtonSecondary as default };

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

@@ -5,15 +5,19 @@ interface Props {
      */
     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
      */

package/build/es/components/Checkbox/Checkbox.js

@@ -1,45 +1,44 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { CheckboxAndRadioInputCore } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 
 // 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="1rem" height="1rem">` +
+        `<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.div `
     display: flex;
-    font-size: ${props => props.theme.fontSize.default};
-    line-height: ${props => props.theme.lineHeight.default};
-    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
 const Input = styled(CheckboxAndRadioInputCore) `
     position: relative;
-    top: ${props => getDividedSize(props.theme.base.baseWidth, 5)};
+    top: ${getDividedSize(theme.base.baseWidth, 5)};
 
     &:checked {
         &::before {
-            width: 1em;
-            height: 1em;
+            width: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
+            height: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
             background-image: url('${SVGIconData}');
         }
     }
 `;
 const Mandatory = styled.span `
-    color: ${props => props.theme.color.hotPink};
-    margin-left: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    color: ${theme.color.default.pink};
+    margin-left: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
 const ErrorMessage = styled.div `
-    font-size: ${props => props.theme.fontSize.s};
-    line-height: ${props => props.theme.lineHeight.s};
-    color: ${props => props.theme.color.error};
-    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    font-size: ${theme.fontSize.s};
+    line-height: ${theme.lineHeight.s};
+    color: ${theme.color.notification.error};
+    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
 const Checkbox = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
@@ -48,13 +47,13 @@ const Checkbox = (_a) => {
             props.onChange(!props.value);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Container, null,
-            React.createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-            React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Container, null,
+            React__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.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
-                props.required && React.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+                props.required && React__default.createElement(Mandatory, null, "*"))),
+        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
-export default Checkbox;
+export { Checkbox as default };

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

@@ -1,25 +1,24 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
-import theme from '../../themes/theme.js';
 
 const colorVariationsMap = {
     default: {
-        background: theme.color.hotPink,
-        text: theme.color.white,
+        background: '#FF007D',
+        text: '#FFFFFF',
     },
     white: {
-        background: theme.color.white,
-        text: theme.color.hotPink,
+        background: '#FFFFFF',
+        text: '#FF007D',
     },
     'logotype-pink': {
-        text: theme.color.hotPink,
+        text: '#FF007D',
     },
     'logotype-white': {
-        text: theme.color.white,
+        text: '#FFFFFF',
     },
     'logotype-black': {
-        text: theme.color.black,
+        text: '#000000',
     },
 };
 const Container = styled.span `
@@ -35,20 +34,20 @@ const Container = styled.span `
 `;
 const Emblem = ({ type, size }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React.createElement("svg", { viewBox: "0 0 666.7 666.7", width: size, height: size },
-        React.createElement("g", null,
-            React.createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
-            React.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.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.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.createElement("svg", { viewBox: "0 0 666.7 666.7", width: size, height: size },
+        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 currentVariation = colorVariationsMap[type];
-    return (React.createElement("svg", { viewBox: "0 0 600 286.6", width: size, height: size },
-        React.createElement("g", null,
-            React.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.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.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.createElement("svg", { viewBox: "0 0 600 286.6", width: size, height: size },
+        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" }),
+            React__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) => {
@@ -58,7 +57,7 @@ const DnaLogo = (_a) => {
         const matches = /(\d+)(.+)/.exec(size);
         margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
     }
-    return (React.createElement(Container, { size: size, margin: margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? (React.createElement(Emblem, { size: size, type: type })) : (React.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, { size: size, type: type })) : (React__default.createElement(Logotype, { size: size, type: type }))));
 };
 
-export default DnaLogo;
+export { DnaLogo as default };

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

@@ -1,15 +1,36 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as IconProps } from '../Icon/Icon';
 interface Props {
-    message: string;
     /**
-     * @deprecated Use type `Icon` from Icon component
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Icon shown in the component
+     *
+     * @default `hlInfo`
+     */
+    icon?: IconProps['icon'];
+    /**
+     * Size of icon in the component
+     *
+     * @default '2rem'
      */
-    icon?: IconProps['icon'] | string;
     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: ({ message, icon, iconSize, "data-testid": dataTestId, }: Props) => JSX.Element;
+declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default EmptyState;

package/build/es/components/EmptyState/EmptyState.js

@@ -1,42 +1,25 @@
-import React from 'react';
+import { __rest } from 'tslib';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import { getMultipliedSize, media } from '../../utils/styledUtils.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
-import 'tslib';
 import hlInfo from '../Icons/hlInfo.js';
 
-const InfoContainer = styled.div `
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    background: ${theme.color.grayBg};
-    width: 100%;
-    height: ${getMultipliedSize(theme.base.baseWidth, 14)};
-    padding: ${getMultipliedSize(theme.base.baseWidth, 2)}
-        ${getMultipliedSize(theme.base.baseWidth, 1)} ${getMultipliedSize(theme.base.baseWidth, 1)};
-
-    span.dnasg-icon > svg {
-        margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    }
-
-    ${media.md `
-        padding: ${getMultipliedSize(theme.base.baseWidth, 2.5)};
-    `}
+const ContentWrapper = styled.div `
+    display: grid;
+    grid-gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    justify-items: center;
+    line-height: ${theme.lineHeight.default};
 `;
 /** @visibleName Empty State */
-const EmptyState = ({ message, icon = hlInfo, iconSize = '2rem', 'data-testid': dataTestId, }) => {
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const renderIcon = () => {
-        if (typeof icon === 'string') {
-            return React.createElement(Icon, { name: icon, size: iconSize, color: theme.color.hotPink });
-        }
-        return React.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.hotPink });
-    };
-    return (React.createElement(InfoContainer, { "data-testid": dataTestId },
-        renderIcon(),
-        message));
+const EmptyState = (_a) => {
+    var { icon = hlInfo, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["icon", "iconSize", 'data-testid']);
+    return (React__default.createElement(Box, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+        React__default.createElement(ContentWrapper, null,
+            React__default.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.default.pink }),
+            React__default.createElement("div", null, props.children))));
 };
 
-export default EmptyState;
+export { EmptyState as default };

package/build/es/components/Footer/Components/FooterComponents.d.ts

@@ -37,7 +37,7 @@ interface LanguageComponentProps {
     languages: LanguageProps[];
 }
 interface GeneralInformationComponentProps {
-    generalInformation: GeneralInformationProps;
+    generalInformation?: GeneralInformationProps;
 }
 interface GeneralInformationProps {
     privacyPolicy: PrincipalProps;