@dnanpm/styleguide 2.1.0 → 2.2.0

package/build/es/components/Buttons/ButtonTertiary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Button tertiary */
 declare const ButtonTertiary: (props: ButtonProps) => JSX.Element;
 /** @component */

package/build/es/components/Buttons/ButtonTertiary.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import PixelLoader from '../PixelLoader/PixelLoader.js';
 import ButtonTertiaryStyles from './ButtonTertiaryStyles.js';
 
 const noop = () => { }; // tslint:disable-line

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CardProps } from './CardProps';
+import type { CardProps } from './CardProps';
 declare const Card: ({ title, children, className, "data-testid": dataTestId }: CardProps) => JSX.Element;
 /** @component */
 export default Card;

package/build/es/components/Card/Card.js

@@ -55,10 +55,8 @@ const CardWrapper = styled.div `
         box-shadow: none;
     `};
 `;
-const Card = ({ title, children, className, 'data-testid': dataTestId }) => {
-    return (React.createElement(CardContainer, { "data-testid": dataTestId, className: className },
-        title && React.createElement(CardTitle, null, title),
-        React.createElement(CardWrapper, null, children)));
-};
+const Card = ({ title, children, className, 'data-testid': dataTestId }) => (React.createElement(CardContainer, { "data-testid": dataTestId, className: className },
+    title && React.createElement(CardTitle, null, title),
+    React.createElement(CardWrapper, null, children)));
 
 export default Card;

package/build/es/components/Card/CardRow.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CardRowProps } from './CardProps';
-declare const CardRow: ({ title, value, children, noBorder, dashedBorder, eCareRow, ...props }: CardRowProps) => JSX.Element;
+import type { CardRowProps } from './CardProps';
+declare const CardRow: ({ title, value, children, noBorder, dashedBorder, eCareRow, }: CardRowProps) => JSX.Element;
 /** @component */
 export default CardRow;

package/build/es/components/Card/CardRow.js

@@ -40,12 +40,12 @@ const CTAButtonWrapper = styled.div `
     justify-self: right;
     align-self: center;
 `;
-const CardRow = ({ title = '', value = '', children, noBorder = false, dashedBorder = false, eCareRow = false, ...props }) => {
+const CardRow = ({ title = '', value = '', children, noBorder = false, dashedBorder = false, eCareRow = false, }) => {
     if (!eCareRow) {
-        return (React.createElement(CardElement, Object.assign({ noBorder: noBorder, dashedBorder: dashedBorder }, props),
+        return (React.createElement(CardElement, { noBorder: noBorder, dashedBorder: dashedBorder },
             React.createElement(CardContent, null, children)));
     }
-    return (React.createElement(CardElement, Object.assign({ noBorder: noBorder, dashedBorder: dashedBorder }, props),
+    return (React.createElement(CardElement, { noBorder: noBorder, dashedBorder: dashedBorder },
         React.createElement(CardContent, null,
             title && React.createElement("h5", null, title),
             value && React.createElement("p", null, value)),

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

@@ -1,5 +1,6 @@
+import { __rest } from 'tslib';
 import React from 'react';
-import { CheckboxInput_RadioInput } from '../../themes/globalStyles.js';
+import { CheckboxAndRadioInputCore } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 
@@ -18,7 +19,7 @@ const Container = styled.div `
     line-height: ${props => props.theme.lineHeight.default};
     margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Input = styled(CheckboxInput_RadioInput) `
+const Input = styled(CheckboxAndRadioInputCore) `
     position: relative;
     top: ${props => getDividedSize(props.theme.base.baseWidth, 5)};
 
@@ -40,7 +41,8 @@ const ErrorMessage = styled.div `
     color: ${props => props.theme.color.error};
     margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Checkbox = ({ 'data-testid': dataTestId, ...props }) => {
+const Checkbox = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
     const handleChange = () => {
         if (props.onChange && !props.disabled) {
             props.onChange(!props.value);

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

@@ -1,18 +1,19 @@
 import React from 'react';
-declare type Emblem = 'default' | 'white';
-declare type Logotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
-declare type Type = Emblem | Logotype;
+declare type TypeEmblem = 'default' | 'white';
+declare type TypeLogotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
+declare type Type = 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.
      *
-     * @default 'default'
      * @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)
+     *
+     * @default 'default'
      */
     type?: Type;
     /**
@@ -21,11 +22,15 @@ interface Props {
      *
      * This doesn't apply when DNA Logo is used as favicon.
      *
-     * @default '2em'
+     * @default '2rem'
      */
     size?: string;
     /**
-     * Minimum protected area of ​​a DNA logo from another element or edge is 1/4 of the height.
+     * On Logo click callback
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Minimum protected area of a DNA logo from another element or edge is 1/4 of the height.
      * When activated, value is calculated automatically from size property.
      *
      * Individual text elements, such as slogans, urls, etc., are always placed next to the logo
@@ -38,112 +43,8 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
-    /**
-     * On Logo click callback
-     */
-    onClick?: (e: React.MouseEvent) => void;
 }
-declare const Emblem: ({ type, size, ...props }: Props) => JSX.Element;
-declare const Logotype: ({ size, type, ...props }: Props) => JSX.Element;
-declare const _default: import("styled-components").StyledComponent<({ type, size, protectedArea, ...props }: Props) => JSX.Element, {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, Props, never>;
+/** @visibleName DNA Logo */
+declare const DnaLogo: ({ type, size, ...props }: Props) => JSX.Element;
 /** @component */
-export default _default;
+export default DnaLogo;

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

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
@@ -21,41 +22,43 @@ const colorVariationsMap = {
         text: theme.color.black,
     },
 };
-const Emblem = ({ type, size, ...props }) => {
+const Container = styled.span `
+    display: inline-flex;
+    width: ${p => p.size};
+    height: ${p => p.size};
+    margin: ${p => p.margin};
+
+    svg {
+        width: ${p => p.size};
+        height: ${p => p.size};
+    }
+`;
+const Emblem = ({ type, size }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 666.7 666.7", width: size, height: size }, props),
+    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" }))));
 };
-const Logotype = ({ size, type, ...props }) => {
+const Logotype = ({ type, size }) => {
     const currentVariation = colorVariationsMap[type];
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 600 286.6", width: size, height: size }, props),
+    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" }))));
 };
 /** @visibleName DNA Logo */
-const DnaLogo = ({ type = 'default', size = '2em', protectedArea, ...props }) => {
-    if (type.indexOf('logotype') === -1) {
-        return React.createElement(Emblem, Object.assign({ size: size, type: type }, props));
-    }
-    else {
-        return React.createElement(Logotype, Object.assign({ size: size, type: type }, props));
-    }
-};
-/** @component */
-var DnaLogo$1 = styled(DnaLogo)(({ protectedArea, size }) => {
-    if (protectedArea) {
-        // default value is not passed to styled function
-        size = size || '2em';
+const DnaLogo = (_a) => {
+    var { type = 'default', size = '2rem' } = _a, props = __rest(_a, ["type", "size"]);
+    let margin = null;
+    if (props.protectedArea) {
         const matches = /(\d+)(.+)/.exec(size);
-        const margin = matches ? `${Number(matches[1]) * 0.25}${matches[2]}` : 0;
-        return { margin };
+        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 }))));
+};
 
-export default DnaLogo$1;
+export default DnaLogo;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Props as IconProps } from '../Icon/Icon';
+import type { Props as IconProps } from '../Icon/Icon';
 interface Props {
     message: string;
     /**

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

@@ -3,6 +3,7 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import 'tslib';
 import hlInfo from '../Icons/hlInfo.js';
 
 const InfoContainer = styled.div `
@@ -35,7 +36,7 @@ const EmptyState = ({ message, icon = hlInfo, iconSize = '2rem', 'data-testid':
     };
     return (React.createElement(InfoContainer, { "data-testid": dataTestId },
         renderIcon(),
-        React.createElement(React.Fragment, null, message)));
+        message));
 };
 
 export default EmptyState;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LangProps } from '../../../types/language.d';
+import type { LangProps } from '../../../types/language.d';
 interface PrincipalProps {
     titles: LangProps;
     urls: LangProps;

package/build/es/components/Footer/Components/FooterComponents.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '../../../themes/styled.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';
+import 'tslib';
 import hlPlus from '../../Icons/hlPlus.js';
 import FooterContext from '../context/FooterContext.js';
 
@@ -204,12 +205,10 @@ const GeneralInformationLink = styled.a `
     }
 `;
 const isMenuItemLinkAbsolute = (linkUrl) => linkUrl.includes('http') || linkUrl.startsWith('tel:');
-const mapCorporateSelector = (languagesObject) => {
-    return Object.keys(languagesObject.urls).map(e => ({
-        title: e.toUpperCase(),
-        url: languagesObject.urls[e],
-    }));
-};
+const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
+    title: e.toUpperCase(),
+    url: languagesObject.urls[e],
+}));
 const LinkModifier = ({ linkUrl, children }) => {
     const { nextJSLinkComponent: NextJSLinkComponent } = React.useContext(FooterContext);
     if (NextJSLinkComponent && !isMenuItemLinkAbsolute(linkUrl)) {
@@ -221,17 +220,15 @@ const LinkModifier = ({ linkUrl, children }) => {
 const Services = ({ services }) => {
     const { collapseSize, language } = React.useContext(FooterContext);
     return (React.createElement(ServicesContainer, { collapseSize: collapseSize }, services &&
-        services.map((service, index) => {
-            return (React.createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
-                React.createElement(CallToActionButton, null,
-                    React.createElement(LinkModifier, { linkUrl: service.urls[language] },
-                        React.createElement("span", null, service.titles[language]))),
-                React.createElement(SmallText, null, service.descriptions[language])));
-        })));
+        services.map((service, index) => (React.createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
+            React.createElement(CallToActionButton, null,
+                React.createElement(LinkModifier, { linkUrl: service.urls[language] },
+                    React.createElement("span", null, service.titles[language]))),
+            React.createElement(SmallText, null, service.descriptions[language]))))));
 };
 const CategoryDisplay = ({ category, currentIndex }) => {
     const categoryLinkArray = category.category;
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter, } = React.useContext(FooterContext);
+    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React.useContext(FooterContext);
     const toggleCollapse = () => {
         if (!isMobileFooter) {
             setIsCollapsed({
@@ -241,31 +238,22 @@ const CategoryDisplay = ({ category, currentIndex }) => {
             });
         }
         else {
-            setIsCollapsed({
-                ...isCollapsed,
-                [currentIndex]: !isCollapsed[currentIndex],
-            });
+            setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
     return (React.createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
         React.createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
             React.createElement(Icon, { icon: hlPlus, size: "1rem", position: "left" }),
             category.description[language]),
-        React.createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => {
-            return (React.createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
-                React.createElement(LinkModifier, { linkUrl: categoryLink.urls[language] }, categoryLink.titles[language])));
-        }))));
+        React.createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React.createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
+            React.createElement(LinkModifier, { linkUrl: categoryLink.urls[language] }, categoryLink.titles[language])))))));
 };
 const Categories = ({ categories }) => {
     const { collapseSize } = React.useContext(FooterContext);
     return (React.createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories &&
         categories.map((category, index) => (React.createElement(CategoryDisplay, { category: category, currentIndex: index, key: `category-${index}` })))));
 };
-const LanguageLinks = ({ languages }) => {
-    return (React.createElement(LanguageLinksContainer, { "data-testid": "language-selector-section" }, languages.map((language, index) => {
-        return (React.createElement(LinkModifier, { linkUrl: language.url, key: `language-link-${index}` }, language.title));
-    })));
-};
+const LanguageLinks = ({ languages }) => (React.createElement(LanguageLinksContainer, { "data-testid": "language-selector-section" }, languages.map((language, index) => (React.createElement(LinkModifier, { linkUrl: language.url, key: `language-link-${index}` }, language.title)))));
 const GeneralInformation = ({ generalInformation }) => {
     const { language } = React.useContext(FooterContext);
     if (!generalInformation) {
@@ -279,9 +267,7 @@ const GeneralInformation = ({ generalInformation }) => {
     const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
     return (React.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
         React.createElement("span", null,
-            orderedGeneralInformation.map((item, index) => {
-                return (item && (React.createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language])));
-            }),
+            orderedGeneralInformation.map((item, index) => item && (React.createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
             "DNA \u00A9",
             currentYear)));
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FooterNavigationProps } from './Components/FooterComponents';
+import type { FooterNavigationProps } from './Components/FooterComponents';
 interface FooterItemProps {
     businessId: string;
     footerNavigation: FooterNavigationProps;

package/build/es/components/Footer/Footer.js

@@ -61,11 +61,9 @@ const FooterWrapper = styled.div `
     margin-right: auto;
 `;
 // TODO: Use proper props after https://jira.dna.fi/browse/STYLE-232 is done
-const mapSizesToProps = ({ width }, { collapseSize }) => {
-    return {
-        isMobileFooter: Boolean(width) && width <= collapseSize,
-    };
-};
+const mapSizesToProps = ({ width }, { collapseSize }) => ({
+    isMobileFooter: Boolean(width) && width <= collapseSize,
+});
 let previousValue = false;
 const initialCollapse = {
     0: false,
@@ -78,7 +76,7 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
     const footerChanged = previousValue !== isMobileFooter;
     const services = items.footerNavigation.services || [];
     const categories = items.footerNavigation.categories || [];
-    const generalInformation = items.footerNavigation.generalInformation;
+    const { generalInformation } = items.footerNavigation;
     const socialMedia = items.footerNavigation.socialMedia || {};
     let languages = [];
     if (items.businessId === 'Corporate') {

package/build/es/components/Footer/context/FooterContext.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FooterProps } from '../Footer';
+import type { FooterProps } from '../Footer';
 declare const FooterContext: React.Context<FooterProps>;
 export default FooterContext;

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

@@ -1,17 +1,26 @@
 import * as React from 'react';
-export interface HelperProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    children?: React.ReactNode;
+export interface Props {
+    /**
+     * Allows the connection to `Tooltip` component
+     */
+    'data-tip'?: boolean;
+    /**
+     * Corresponds to the `Tooltip` component ID attribute
+     */
+    'data-for'?: string;
     /**
-     * Indicates that this component is left of other content, and adds an appropriate right margin.
+     * Indicates that this component is on left side of other content and adds an appropriate right margin
      */
     left?: boolean;
     /**
-     * Indicates that this component is right of other content, and adds an appropriate left margin.
+     * Indicates that this component is on right side of other contents and adds an appropriate left margin
      */
     right?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
 }
-declare const Helper: React.FunctionComponent<HelperProps>;
+declare const Helper: React.FunctionComponent<Props>;
 /** @component */
 export default Helper;

package/build/es/components/Helper/Helper.js

@@ -26,7 +26,7 @@ const HelperIcon = styled.span `
     font-size: ${p => p.theme.fontSize.s};
     line-height: ${p => p.theme.lineHeight.xs};
 `;
-const Helper = props => (createElement(Container, Object.assign({}, props),
+const Helper = ({ left, right, className, 'data-tip': dataTip, 'data-for': dataFor, }) => (createElement(Container, { left: left, right: right, className: className, "data-tip": dataTip, "data-for": dataFor },
     createElement(HelperIcon, null, "?")));
 
 export default Helper;

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

@@ -37,10 +37,10 @@ export interface Props extends Partial<IconProps> {
     /**
      * Allows to set position of Icon component relative to other content and adds appropriate margins
      *
-     * @default false
      * @param {Position} left Icon component is on the left side of content, add right margin
      * @param {Position} right Icon component is on the right side of content, add left margin
      * @param {Position} middle Icon component is in the middle of content, add left and right margins
+     * @default false
      */
     position?: Position;
     /**

package/build/es/components/Icon/Icon.js

@@ -1,12 +1,13 @@
+import { __rest } from 'tslib';
 import React from 'react';
-import styled__default from 'styled-components';
+import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import * as index from '../Icons/index.js';
 import * as Icons from './Icons.js';
 
 const IconsList = index;
 const StandardIconsList = Icons;
-const IconContainer = styled__default.span `
+const IconContainer = styled.span `
     width: ${p => p.size};
     height: ${p => p.size};
 
@@ -25,7 +26,8 @@ const IconContainer = styled__default.span `
         height: ${p => p.size};
     }
 `;
-const Icon = ({ name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, ...props }) => {
+const Icon = (_a) => {
+    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid']);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     const RenderIcon = name && (IconsList[name] || StandardIconsList[name]);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done

package/build/es/components/Icon/Icons.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconProps, Props as IconComponentProps } from './Icon';
+import type { IconProps, Props as IconComponentProps } from './Icon';
 export declare const fourG: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
 export declare const action: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
 export declare const airplane: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;