@dnanpm/styleguide 1.9.0 → 2.1.0

package/build/cjs/components/MainNavigation/ChildComponents/PageSearch.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var colors = require('../../../themes/themeComponents/colors.js');
+var Icon = require('../../Icon/Icon.js');
+var hlMagnifyingGlass = require('../../Icons/hlMagnifyingGlass.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
-var colors = require('../../../themes/themeComponents/colors.js');
-var Icon = require('../../Icon/Icon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,7 +18,7 @@ const PageSearch = ({ searchLabel }) => {
     const { navZIndex, isMobileMenu, searchComponent: SearchComponent, collapseSize, } = React__default['default'].useContext(NavContext['default']);
     return (React__default['default'].createElement(MainNavTooltipMenu['default'], { zIndex: (navZIndex + 1).toString(), activeColor: colors['default'].hotPink, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", overflowY: isMobileMenu, globalStateString: "search", fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
         React__default['default'].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(SearchComponent) },
-            React__default['default'].createElement(Icon['default'], { name: "hlMagnifyingGlass", size: "100%" }),
+            React__default['default'].createElement(Icon['default'], { icon: hlMagnifyingGlass['default'], size: "2rem" }),
             React__default['default'].createElement("span", null, searchLabel))));
 };
 

package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.js

@@ -35,17 +35,16 @@ const RibbonColumn = styled['default'].div `
     flex: 1 1 auto;
     display: flex;
     justify-content: center;
+    align-items: center;
     margin: 0.125rem 0;
     padding: 0.125rem 0;
     color: ${p => p.theme.color.gray55};
-    font-size: ${p => p.theme.fontSize.xsFontSize};
+    font-size: ${p => p.theme.fontSize.xs};
     border-right: 2px solid white;
     &:last-of-type {
         border: none;
     }
-    span {
-        margin-left: 0.25rem;
-    }
+
     a {
         display: flex;
         align-items: center;
@@ -68,10 +67,10 @@ const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => {
         React__default['default'].createElement(RibbonItems, null, ribbonData.map(ribbon => {
             return (React__default['default'].createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
                 ribbon.ribbonLink[lang] && (React__default['default'].createElement("a", { href: ribbon.ribbonLink[lang] },
-                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1.2em" }),
+                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
                     React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang]))),
                 !ribbon.ribbonLink[lang] && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1.2em" }),
+                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
                     React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang])))));
         }))));
 };

package/build/cjs/components/MainNavigation/MainNavigation.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var ramda = require('ramda');
 var React = require('react');
 var withSizes = require('react-sizes');
-var stickybits = require('stickybits');
 var modifyBodyClass = require('../../hooks/modifyBodyClass.js');
 var useScrollPosition = require('../../hooks/useScrollPosition.js');
 var styled = require('../../themes/styled.js');
 var navigation = require('../../themes/themeComponents/navigation.js');
+var styledUtils = require('../../utils/styledUtils.js');
 var Notification = require('../Notification/Notification.js');
 var HeaderNavigationElements = require('./ChildComponents/HeaderNavigationElements.js');
 var MobileMenu = require('./ChildComponents/MobileMenu.js');
@@ -20,7 +20,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var withSizes__default = /*#__PURE__*/_interopDefaultLegacy(withSizes);
-var stickybits__default = /*#__PURE__*/_interopDefaultLegacy(stickybits);
 
 // TODO: Use proper props after https://jira.dna.fi/browse/STYLE-232 is done
 const mapSizesToProps = ({ width }, { collapseSize }) => ({
@@ -106,6 +105,8 @@ const GlobalNavigationContainer = styled['default'].nav `
 const NavigationWrapper = styled['default'].div `
     display: flex;
     width: 100%;
+    max-width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 256)};
+    margin: 0 auto;
     height: ${navigation.mobileNavMaxHeight};
     @media (min-width: ${p => p.collapseSize + 1}px) {
         height: ${navigation.desktopNavMaxHeight};
@@ -175,20 +176,6 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         hideOnScroll: false,
     });
     const [lang] = React.useState(language);
-    // polyfill for browser (e.g. IE11 and older Safari) that don't support CSS position: sticky
-    React.useEffect(() => {
-        if (!isStickySupported && typeof window !== 'undefined') {
-            const stickyElement = navigationEl.current;
-            if (stickyElement) {
-                const stickyBitsElement = stickybits__default['default'](stickyElement);
-                return function cleanUp() {
-                    if (stickyElement) {
-                        stickyBitsElement.cleanup();
-                    }
-                };
-            }
-        }
-    }, []);
     const handleNavMenuClick = (newValue, updatedLevel) => {
         let clickedItself = false;
         switch (updatedLevel) {
@@ -328,7 +315,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         React__default['default'].createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
             React__default['default'].createElement(NavContext['default'].Provider, { value: navigationContext },
                 React__default['default'].createElement(GlobalStyle, null),
-                !items.mainNavigation && notificationText && (React__default['default'].createElement(Notification['default'], { color: "info", showIcon: true, closeButton: false }, notificationText)),
+                !items.mainNavigation && notificationText && (React__default['default'].createElement(Notification['default'], { type: "info", showIcon: true, closeButton: false }, notificationText)),
                 ribbon && ribbonData && (React__default['default'].createElement(Ribbon['default'], { ribbonData: ribbonData, lang: language, navZIndex: zIndex })),
                 React__default['default'].createElement(NavigationWrapper, { collapseSize: collapseSize },
                     React__default['default'].createElement(HeaderNavigationElements['default'], { navElementProps: props }),

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -11,12 +11,7 @@ export declare const MenuItem: 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;
@@ -47,22 +42,27 @@ export declare const MenuItem: 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;
@@ -78,16 +78,23 @@ export declare const MenuItem: 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>;
 }, {
@@ -106,12 +113,7 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -142,22 +144,27 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         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;
@@ -173,16 +180,23 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         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>;
 }, {
@@ -201,12 +215,7 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -237,22 +246,27 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         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;
@@ -268,16 +282,23 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         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>;
 }, {
@@ -297,12 +318,7 @@ export declare const MenuList: 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;
@@ -333,22 +349,27 @@ export declare const MenuList: 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;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -364,16 +385,23 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         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>;
 }, {

package/build/cjs/components/MainNavigation/globalNavStyles.js

@@ -58,7 +58,7 @@ const MenuLinkWithChildren = styled['default'].button `
     padding: 0.5em 1em;
     span {
         position: relative;
-        &:after {
+        &:first-child:after {
             position: absolute;
             content: '';
             width: 100%;

package/build/cjs/components/Modal/Modal.js

@@ -7,6 +7,7 @@ var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -118,7 +119,7 @@ class Modal extends React__default['default'].PureComponent {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement(StyledModal, Object.assign({ className: className, overflowContentVisible: overflowContentVisible, maxWidth: maxWidth, onRequestClose: onRequestClose }, props),
                 closeIcon && (React__default['default'].createElement(CloseButton, { onClick: onRequestClose, "aria-label": closeLabel, "data-testid": closeLabel },
-                    React__default['default'].createElement(Icon['default'], { name: "x", size: "1.25rem" }))),
+                    React__default['default'].createElement(Icon['default'], { icon: hlX['default'] }))),
                 title && React__default['default'].createElement(Title, null, title),
                 children),
             React__default['default'].createElement(GlobalStyle, null)));

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

@@ -11,10 +11,6 @@ interface Props {
      * @param {NotificationType} error Uses #ff7800 color code as background color
      */
     type?: NotificationType;
-    /**
-     * @deprecated Use `type` property instead
-     */
-    color?: NotificationType | 'pinkday';
     /**
      * Content of the ribbon
      */
@@ -56,6 +52,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Notification: ({ type, color, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Notification;

package/build/cjs/components/Notification/Notification.js

@@ -7,6 +7,10 @@ var styled = require('styled-components');
 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 hlError = require('../Icons/hlError.js');
+var hlInfo = require('../Icons/hlInfo.js');
+var hlWarning = require('../Icons/hlWarning.js');
 var Ribbon = require('../Ribbon/Ribbon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,6 +18,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+const iconsMap = {
+    info: hlInfo['default'],
+    success: hlCheck['default'],
+    warning: hlWarning['default'],
+    error: hlError['default'],
+};
 const StyledRibbon = styled__default['default'](Ribbon['default']) `
     ${({ showIcon, closeButton }) => showIcon &&
     closeButton &&
@@ -40,16 +50,11 @@ const IconWrapper = styled__default['default'].div `
 const ContentWrapper = styled__default['default'].div `
     flex: 1;
 `;
-const Notification = ({ type = 'info', color, 'data-testid': dataTestId, ...props }) => {
-    // Property color is deprecated
-    // TODO: Remove this line after https://jira.dna.fi/browse/STYLE-292 is done
-    type = (color || type);
+const Notification = ({ type = 'info', 'data-testid': dataTestId, ...props }) => {
     return (React__default['default'].createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
         React__default['default'].createElement(NotificationWrapper, null,
             props.showIcon && (React__default['default'].createElement(IconWrapper, null,
-                React__default['default'].createElement(Icon['default'], { name: type === 'success'
-                        ? 'hlCheck'
-                        : `hl${type.charAt(0).toUpperCase() + type.slice(1)}`, size: "2rem", color: "currentColor" }))),
+                React__default['default'].createElement(Icon['default'], { icon: iconsMap[type], size: "2rem", color: "currentColor" }))),
             React__default['default'].createElement(ContentWrapper, null, props.children))));
 };
 

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

@@ -12,12 +12,7 @@ export declare const NotificationBadge: import("styled-components").StyledCompon
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ export declare const NotificationBadge: import("styled-components").StyledCompon
         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;
@@ -79,16 +79,23 @@ export declare const NotificationBadge: import("styled-components").StyledCompon
         gutter: string; /** @visibleName Notification Badge */
     };
     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>;
 }, {}, never>;

package/build/cjs/components/NotificationBadge/NotificationBadge.js

@@ -18,7 +18,7 @@ const NotificationBadge = styled['default'].div `
     align-items: center;
     justify-content: center;
     font-weight: ${p => p.theme.fontWeight.bold};
-    font-size: ${p => p.theme.fontSize.xsFontSize};
+    font-size: ${p => p.theme.fontSize.xs};
     line-height: 1;
 `;