@dnanpm/styleguide 1.9.0 → 2.1.0

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -8,15 +8,16 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const SecondaryNavigationWrapper = styled['default'].nav `
-    line-height: 1.2rem;
+    font-size: ${theme['default'].fontSize.s};
     padding: 0;
-    font-size: ${theme['default'].fontSize.smallFontSize};
     background: ${theme['default'].color.white};
     position: relative;
     z-index: 1000;
@@ -28,40 +29,41 @@ const SecondaryNavigationWrapper = styled['default'].nav `
     }
 `;
 const MobileSelector = styled['default'].div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: ${theme['default'].fontSize.default};
+    line-height: ${theme['default'].lineHeight.default};
     color: ${theme['default'].color.hotPink};
     padding: 1rem 1.25rem;
-    align-items: center;
-    display: flex;
-    line-height: 1.2rem;
     position: relative;
     border-bottom: 1px solid ${theme['default'].color.hotPink};
     width: 100%;
-    height: 3.25rem;
     &:hover {
         cursor: pointer;
     }
-    svg + span {
-        margin-left: 1rem;
-    }
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
 `;
+const MobileSelectorTitleWrapper = styled['default'].div `
+    display: flex;
+`;
 const MobileSelectorArrow = styled['default'].span `
-    svg {
-        position: absolute;
-        right: 0.75rem;
-        bottom: 0.75rem;
+    display: flex;
+
+    .dnasg-icon svg {
         transition: transform 0.15s ease-in-out;
         transform: rotate(${p => (p.isOpen ? '180deg' : '0deg')});
     }
 `;
 const MobileSelectorCheck = styled['default'].span `
-    svg {
+    .dnasg-icon {
         position: absolute;
         right: 0;
         bottom: 1rem;
     }
+
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
@@ -78,12 +80,8 @@ const SecondaryNavigationList = styled['default'].ul `
     position: absolute;
     width: 100%;
     max-height: ${p => (p.isOpen ? '500vh' : '0')};
-    top: 3.25rem;
     border-bottom: ${p => p.isOpen ? `2px solid ${theme['default'].color.gray10}` : `0px solid ${theme['default'].color.white}`};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        svg {
-            display: none;
-        }
         padding: 0 1rem;
         max-height: none;
         position: static;
@@ -107,7 +105,7 @@ const SecondaryNavigationListElement = styled['default'].li `
         border-bottom: ${p => p.isActive ? `2px solid ${theme['default'].color.hotPink}` : `0px solid ${theme['default'].color.white}`};
     }
     ${p => styledUtils.media.xl `
-        font-size: ${p.theme.fontSize.defaultFontSize};
+        font-size: ${p.theme.fontSize.default};
         margin: 0 1rem;
         &:first-of-type {
             margin-left: 0;
@@ -180,11 +178,12 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
     const shouldHighlightSelectedElement = selectedElement && highlightIds.some((el) => el === selectedElement.id);
     return (React__default['default'].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly },
         selectedElement && (React__default['default'].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            selectedElement.icon && selectedElement.icon.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
-                React__default['default'].createElement(Icon['default'], { name: selectedElement.icon, size: "1.5em" }))),
-            React__default['default'].createElement("span", null, selectedElement.titles[lang]),
+            React__default['default'].createElement(MobileSelectorTitleWrapper, null,
+                selectedElement.icon && selectedElement.icon.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                    React__default['default'].createElement(Icon['default'], { name: selectedElement.icon }))),
+                React__default['default'].createElement("span", null, selectedElement.titles[lang])),
             React__default['default'].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
-                React__default['default'].createElement(Icon['default'], { name: "hlChevronDown", size: "1.5em" })))),
+                React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'] })))),
         React__default['default'].createElement(SecondaryNavigationList, { id: data.name || 'secondary-navigation-category-' + data.categoryId, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
             ? data.pages.map((listElement, index) => {
                 const linkUrl = listElement.urls[lang];
@@ -197,13 +196,13 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
                 const isNextJsLink = NextJSSecondaryNavLink && !isMenuItemLinkAbsolute(linkUrl);
                 return (React__default['default'].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
                     isNextJsLink && (React__default['default'].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default['default'].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                        React__default['default'].createElement(Icon['default'], { name: "hlCheck", size: "1.2em" }))))),
+                        React__default['default'].createElement(Icon['default'], { icon: hlCheck['default'] }))))),
                     !isNextJsLink && (React__default['default'].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
                         iconName.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React__default['default'].createElement(Icon['default'], { name: iconName, size: "1.5em" }))),
+                            React__default['default'].createElement(Icon['default'], { name: iconName }))),
                         React__default['default'].createElement("span", null, linkTitle),
                         isActive && (React__default['default'].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React__default['default'].createElement(Icon['default'], { name: "hlCheck", size: "1.2em" })))))));
+                            React__default['default'].createElement(Icon['default'], { icon: hlCheck['default'] })))))));
             })
             : null)));
 };

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

@@ -4,31 +4,122 @@ export interface SelectboxItem {
     label: string;
     value: any;
 }
-interface DropDownIndicator {
-    color?: string;
-    iconSize?: string;
-}
 interface Props {
+    /**
+     * Unique ID for the select element
+     */
+    inputId: ReactSelectProps['inputId'];
+    /**
+     * Array of options that populate the select menu
+     */
     options: ReactSelectProps['options'];
-    onChange: (selectedItem: SelectboxItem) => void;
-    /** Allows to pass a custom className */
-    className?: string;
-    'data-testid'?: string;
+    /**
+     * Default value of select menu
+     *
+     * @default undefined
+     */
+    value?: ReactSelectProps['value'];
+    /**
+     * Text of the select element label
+     */
     label?: string;
-    inputId?: ReactSelectProps['inputId'];
+    /**
+     * Text of placeholder for the select value
+     */
     placeholder?: ReactSelectProps['placeholder'];
-    onInputChange?: ReactSelectProps['onInputChange'];
-    value?: ReactSelectProps['value'];
-    dropDownIndicator?: DropDownIndicator;
+    /**
+     * Text to display when there are no options
+     */
     noOptionsText?: string;
+    /**
+     * On select change callback
+     */
+    onChange: (selectedItem: SelectboxItem) => void;
+    /**
+     * On input change callback
+     */
+    onInputChange?: ReactSelectProps['onInputChange'];
+    /**
+     * Allows to attach selectbox options menu to specific HTML element
+     * Useful when used in modals
+     *
+     * @default selectbox-container
+     */
+    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
+    /**
+     * Allows to place selectbox options menu above or below the selectbox control
+     *
+     * @default 'auto'
+     * @param {MenuPlacement} top Opens options menu above the control
+     * @param {MenuPlacement} bottom Opens options menu below the control
+     */
+    menuPlacement?: ReactSelectProps['menuPlacement'];
+    /**
+     * Allows to define icon color and icon size of dropdown indicator
+     *
+     * @deprecated Icon color and size should use values only according to Selectbox design prototypes
+     *
+     * @default color '#000000'
+     * @default iconSize '1rem'
+     */
+    dropDownIndicator?: {
+        color?: string;
+        iconSize?: string;
+    };
+    /**
+     * Displayes loading indicator (PixelLoader) instead of selectbox
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Allows to enable search functionality
+     *
+     * @default false
+     */
     isSearchable?: boolean;
+    /**
+     * Allows to clear selected value
+     *
+     * @default false
+     */
     isClearable?: boolean;
+    /**
+     * Allows to select multiple options
+     *
+     * @default false
+     */
     isMulti?: boolean;
-    isLoading?: boolean;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Allows to set selectbox as mandatory
+     *
+     * @default false
+     */
     isRequired?: boolean;
+    /**
+     * Allows to set selectbox to error state
+     *
+     * @default false
+     */
     error?: boolean;
+    /**
+     * Text of the error message when selectbox is in error state
+     */
     errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
 }
 declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
 export default SelectBox;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -8,6 +8,9 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
+var hlChevronUp = require('../Icons/hlChevronUp.js');
+var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
 var LabelText = require('../LabelText/LabelText.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
@@ -16,14 +19,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-const borderStyles = {
-    border: `1px solid ${theme['default'].color.gray25}`,
-    borderRadius: 0,
-    boxShadow: 'none',
-};
 const FieldContainer = styled['default'].div `
-    color: ${props => props && props.disabled ? props.theme.color.gray40 : props.theme.color.text};
-        margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+    color: ${props => (props.isDisabled ? props.theme.color.gray40 : props.theme.color.text)};
+    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
 
     ${LabelText.LabelText} {
         color: ${props => {
@@ -33,85 +31,91 @@ const FieldContainer = styled['default'].div `
 }}
 `;
 const ErrorMessage = styled['default'].div `
-    line-height: 1.125rem;
-    font-size: ${props => props.theme.fontSize.smallFontSize};
+    font-size: ${props => props.theme.fontSize.s};
+    line-height: ${props => props.theme.lineHeight.s};
     color: ${props => props.theme.color.error};
     margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
 const Mandatory = styled['default'].span `
     color: ${props => props.theme.color.hotPink};
 `;
-const selectBoxStyles = {
-    control: (styles, state) => {
-        const customControlStyles = {
-            ...borderStyles,
-            height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4),
-            borderBottomColor: state.menuIsOpen ? theme['default'].color.white : 'inherit',
-            '&:hover': {
-                borderColor: theme['default'].color.gray25,
-            },
-        };
-        return {
-            ...styles,
-            ...customControlStyles,
-        };
-    },
-    menu: styles => {
-        const customMenuStyles = {
-            ...borderStyles,
-            marginTop: '-2px',
-            borderTop: 'none',
-        };
-        return {
-            ...styles,
-            ...customMenuStyles,
-        };
+const customTheme = {
+    ...Select.defaultTheme,
+    borderRadius: 0,
+    colors: {
+        ...Select.defaultTheme.colors,
+        primary50: theme['default'].color.gray10,
+        primary25: theme['default'].color.grayBg,
+        primary: theme['default'].color.gray5,
     },
-    indicatorSeparator: () => ({
+};
+const selectBoxStyles = {
+    control: (styles, state) => ({
+        ...styles,
+        boxShadow: 'none',
+        height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4),
+        borderColor: state.isFocused && !state.menuIsOpen ? theme['default'].color.gray40 : theme['default'].color.gray25,
+        ':hover': {
+            borderColor: theme['default'].color.gray25,
+        },
+    }),
+    menu: styles => ({
+        ...styles,
+        border: `1px solid ${theme['default'].color.gray25}`,
+        boxShadow: 'none',
+        marginTop: '-2px',
+    }),
+    indicatorSeparator: styles => ({
+        ...styles,
+        backgroundColor: 'transparent',
         border: 'none',
     }),
-    option: styles => {
-        const customOptionStyles = {
-            display: 'flex',
-            justifyContent: 'space-between',
-            color: theme['default'].color.text,
-            fontWeight: theme['default'].fontWeight.book,
-            fontSize: theme['default'].fontSize.defaultFontSize,
-            backgroundColor: theme['default'].color.white,
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre-wrap',
-            overflow: 'hidden',
-            '&:hover': {
-                backgroundColor: theme['default'].color.hotPink,
-                color: theme['default'].color.white,
+    option: (styles, { isDisabled, isSelected }) => ({
+        ...styles,
+        display: 'flex',
+        justifyContent: 'space-between',
+        color: isDisabled ? theme['default'].color.gray40 : theme['default'].color.text,
+        fontWeight: isSelected ? theme['default'].fontWeight.medium : theme['default'].fontWeight.book,
+        fontSize: theme['default'].fontSize.default,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre-wrap',
+        overflow: 'hidden',
+        cursor: isDisabled ? 'not-allowed' : 'default',
+    }),
+    dropdownIndicator: (styles, { isDisabled, selectProps: { isSearchable } }) => {
+        const enabledColorsSet = isSearchable ? theme['default'].color.hotPink : theme['default'].color.text;
+        return {
+            ...styles,
+            color: isDisabled ? theme['default'].color.gray40 : enabledColorsSet,
+            ':hover': {
+                color: theme['default'].color.text,
             },
         };
-        return { ...styles, ...customOptionStyles };
     },
 };
 const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
     const getNoOptionsText = () => noOptionsText;
     const DropdownIndicator = (dropdownIndicatorProps) => {
-        const { color = isDisabled ? theme['default'].color.gray40 : theme['default'].color.black, iconSize = '1rem' } = {
+        const { color = 'currentColor', iconSize = '1.5rem' } = {
             ...dropDownIndicator,
         };
-        const getIconName = () => {
+        const getIcon = () => {
             if (isSearchable) {
-                return 'hlMagnifyingGlass';
+                return hlMagnifyingGlass['default'];
             }
             else {
-                return dropdownIndicatorProps.selectProps.menuIsOpen ? 'chevronUp' : 'chevronDown';
+                return dropdownIndicatorProps.selectProps.menuIsOpen ? hlChevronUp['default'] : hlChevronDown['default'];
             }
         };
         return (Select.components.DropdownIndicator && (React__default['default'].createElement(Select.components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
-            React__default['default'].createElement(Icon['default'], { color: color, name: getIconName(), size: iconSize }))));
+            React__default['default'].createElement(Icon['default'], { icon: getIcon(), color: color, size: iconSize }))));
     };
-    return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { disabled: isDisabled, error: error },
+    return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { isDisabled: isDisabled, error: error },
         props.label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: props.inputId },
             props.label,
             " ",
             isRequired && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(Select__default['default'], { inputId: props.inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        React__default['default'].createElement(Select__default['default'], { inputId: props.inputId, styles: selectBoxStyles, theme: customTheme, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
         error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, null, props.errorMessage)))) : (React__default['default'].createElement(PixelLoader.PixelLoader, null))));
 };
 

package/build/cjs/components/Tabs/Tab.d.ts

@@ -23,12 +23,7 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -59,22 +54,27 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        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;
@@ -90,16 +90,23 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        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>;
 }, TabStyleProps, never>;

package/build/cjs/components/Tabs/Tab.js

@@ -15,7 +15,8 @@ const TabStyle = styled['default'].li `
     list-style: none;
     cursor: pointer;
     padding: ${props => `${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.8)} ${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1.6)}`};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
     font-weight: ${props => props.theme.fontWeight.book};
     margin-right: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)};
 
@@ -34,7 +35,7 @@ const TabStyle = styled['default'].li `
     styled.css `
             padding: ${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)} 0;
             margin-right: ${styledUtils.getMultipliedSize(props.theme.base.baseHeight, 5)};
-            font-size: ${props.theme.fontSize.h4FontSize};
+            font-size: ${props.theme.fontSize.l};
             font-weight: ${props.theme.fontWeight.bold};
         `}
     

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

@@ -42,12 +42,7 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -78,22 +73,29 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string; /**
+         * Allows to pass a custom className
+         */
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -109,12 +111,16 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string; /**
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        /**
          * Style of the tabs
          *
          * @deprecated Underlined is provided only as legacy style
@@ -122,10 +128,14 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
          * @param {Type} gray Default
          * @param {Type} underlined Legacy style (should not be used in new projects)
          */
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {

package/build/cjs/components/Textarea/Textarea.js

@@ -14,8 +14,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const Tag = styled['default'].textarea `
     display: block;
     padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-    font-family: ${props => props.theme.fontFamily.baseFontFamily};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-family: ${props => props.theme.fontFamily.default};
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
     width: 100%;
     border: 1px solid ${props => props.theme.color.gray15};
     &::-ms-clear,
@@ -47,7 +48,7 @@ const FieldContainer = styled['default'].div `
 `;
 const CommentMessage = styled['default'].div `
     line-height: 1.125rem;
-    font-size: ${props => props.theme.fontSize.smallFontSize};
+    font-size: ${props => props.theme.fontSize.s};
     color: ${props => props.theme.color.gray40};
     margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;