@dnanpm/styleguide 2.0.1 → 2.2.0

package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { LoginTooltipProp } from '../types/globalNavProps';
+import type { LoginTooltipProp } from '../types/globalNavProps';
 declare const LoginTooltip: ({ loginLabel }: LoginTooltipProp) => JSX.Element;
 export default LoginTooltip;

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var colors = require('../../../themes/themeComponents/colors.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
+var hlPerson = require('../../Icons/hlPerson.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
@@ -17,7 +19,7 @@ const LoginTooltip = ({ loginLabel }) => {
     const { navZIndex, isMobileMenu, loginComponent: LoginComponent, collapseSize, isLoggedIn, } = React__default['default'].useContext(NavContext['default']);
     return (React__default['default'].createElement(MainNavTooltipMenu['default'], { zIndex: (navZIndex + 1).toString(), color: isLoggedIn ? colors['default'].hotPink : colors['default'].text, activeColor: colors['default'].hotPink, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: "login", closeWhenTagClicked: ['a', 'button'] },
         React__default['default'].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(LoginComponent) },
-            React__default['default'].createElement(Icon['default'], { name: "hlPerson", size: "100%" }),
+            React__default['default'].createElement(Icon['default'], { icon: hlPerson['default'], size: "2rem" }),
             React__default['default'].createElement("span", { "data-testid": "header-login-label" }, loginLabel))));
 };
 

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

@@ -113,10 +113,7 @@ const MainNavTooltipMenu = ({ className, activeColor = colors['default'].hotPink
     };
     useCloseOutsideOrElementClicked['default']({ ref, closeWhenTagClicked }, () => {
         if (tooltipItems[globalStateString]) {
-            setTooltipItems({
-                ...tooltipItems,
-                [globalStateString]: false,
-            });
+            setTooltipItems(Object.assign(Object.assign({}, tooltipItems), { [globalStateString]: false }));
         }
     });
     return (React__default['default'].createElement(Container, { className: className, ref: ref },

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

@@ -21,19 +21,19 @@ const TooltipWrapper = styled['default'].button `
     width: 100%;
     cursor: ${p => (p.isComponent ? 'pointer' : 'default')};
     &:hover {
-        > svg,
+        span.dnasg-icon > svg,
         > span {
             color: ${p => p.theme.color.text};
         }
     }
     &:active,
     &:focus {
-        > svg,
+        span.dnasg-icon > svg,
         > span {
             color: ${p => (p.isComponent ? p.theme.color.hotPink : p.theme.color.gray40)};
         }
     }
-    > svg {
+    span.dnasg-icon > svg {
         align-content: center;
         display: flex;
         height: 2em;
@@ -43,20 +43,20 @@ const TooltipWrapper = styled['default'].button `
             width: 1.625em;
         }
         margin: 0 auto;
-        + span {
-            width: 100%;
-            display: none;
-            @media (min-width: ${p => p.collapseSize + 1}px) {
-                display: block;
-                margin-top: 5px;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-                max-width: ${navigation.IconContainerWidth};
-            }
-            font-size: ${p => p.theme.fontSize.xs};
-            font-weight: ${p => p.theme.fontWeight.book};
+    }
+    span.dnasg-icon + span {
+        width: 100%;
+        display: none;
+        @media (min-width: ${p => p.collapseSize + 1}px) {
+            display: block;
+            margin-top: 5px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: ${navigation.IconContainerWidth};
         }
+        font-size: ${p => p.theme.fontSize.xs};
+        font-weight: ${p => p.theme.fontWeight.book};
     }
 `;
 

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

@@ -7,6 +7,8 @@ var styled = require('../../../themes/styled.js');
 var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
 var colors = require('../../../themes/themeComponents/colors.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
+var hlCart = require('../../Icons/hlCart.js');
 var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
@@ -26,10 +28,10 @@ const MinicartAmount = styled['default'](NotificationBadge.NotificationBadge) `
     }
 `;
 const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
-    const { navZIndex, minicartComponent: MinicartComponent, collapseSize } = React__default['default'].useContext(NavContext['default']);
+    const { navZIndex, minicartComponent: MinicartComponent, collapseSize, } = React__default['default'].useContext(NavContext['default']);
     return (React__default['default'].createElement(MainNavTooltipMenu['default'], { zIndex: (navZIndex + 1).toString(), activeColor: colors['default'].hotPink, contentWidth: "35rem", tooltipRight: "5rem", overflowY: false, contentComponent: MinicartComponent, globalStateString: "minicart", fullWidthBreakpoint: breakpoints['default'].md, closeWhenTagClicked: ['a', 'button'] },
         React__default['default'].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(MinicartComponent) },
-            React__default['default'].createElement(Icon['default'], { name: "hlCart", size: "100%" }),
+            React__default['default'].createElement(Icon['default'], { icon: hlCart['default'], size: "2rem" }),
             React__default['default'].createElement("span", null, minicartLabel),
             minicartAmount > 0 && (React__default['default'].createElement(MinicartAmount, { collapseSize: collapseSize, "data-testid": "header-minicart-amount" }, minicartAmount)))));
 };

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

@@ -8,6 +8,9 @@ var styled = require('../../../themes/styled.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
+require('tslib');
+var hlChevronLeft = require('../../Icons/hlChevronLeft.js');
+var hlChevronRight = require('../../Icons/hlChevronRight.js');
 var MobileMenuContext = require('../context/MobileMenuContext.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
@@ -88,9 +91,8 @@ const MobileMenu = styled['default'].div `
         background: ${p => p.theme.color.white};
         color: ${p => p.theme.color.hotPink};
         justify-content: flex-start;
-        ${Icon['default']} {
-            margin-left: -${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 0.5)};
-            margin-right: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
+        span.dnasg-icon {
+            margin-left: -0.5rem;
         }
     }
     ${globalNavStyles.MenuLink}:hover {
@@ -113,7 +115,7 @@ const MenuItemBackLink = ({ currentLevel }) => {
     const backLink = getBackLink(menuElements, currentLevel - 1);
     return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
         React__default['default'].createElement(MenuLinkBackLink, { role: "menu-item", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default['default'].createElement(Icon['default'], { name: "chevronLeft", size: "0.625em" }),
+            React__default['default'].createElement(Icon['default'], { icon: hlChevronLeft['default'], position: "left" }),
             backLink.titles[language])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
@@ -138,7 +140,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl) },
             React__default['default'].createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
                 menuItem.titles[language],
-                React__default['default'].createElement(Icon['default'], { name: "chevronRight", size: "0.75em" }))));
+                React__default['default'].createElement(Icon['default'], { icon: hlChevronRight['default'] }))));
     }
     return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) },
         React__default['default'].createElement(LinkModifier['default'], { menuItem: menuItem, tabIndex: tabNavigationDisabled() })));
@@ -154,7 +156,7 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
 };
 const NavigationMenuMobile = () => {
     const { items: data, menuLevel, level1Items, level2Items } = React.useContext(NavContext['default']);
-    const mainNavigation = data.mainNavigation;
+    const { mainNavigation } = data;
     if (!mainNavigation.pages.length) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }

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

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var colors = require('../../../themes/themeComponents/colors.js');
+var Icon = require('../../Icon/Icon.js');
+require('tslib');
+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 +19,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.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LangProps } from '../../../types/language';
+import type { LangProps } from '../../../types/language';
 export interface RibbonDataProps {
     ribbonLink: LangProps;
     ribbonIcon: string;

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

@@ -35,6 +35,7 @@ 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};
@@ -43,9 +44,7 @@ const RibbonColumn = styled['default'].div `
     &:last-of-type {
         border: none;
     }
-    span {
-        margin-left: 0.25rem;
-    }
+
     a {
         display: flex;
         align-items: center;
@@ -63,17 +62,13 @@ const RibbonColumn = styled['default'].div `
         }
     }
 `;
-const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => {
-    return (React__default['default'].createElement(RibbonContainer, { navZIndex: 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("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("span", null, ribbon.ribbonTexts[lang])))));
-        }))));
-};
+const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => (React__default['default'].createElement(RibbonContainer, { navZIndex: navZIndex },
+    React__default['default'].createElement(RibbonItems, null, ribbonData.map(ribbon => (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: "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: "1rem", position: "left" }),
+            React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang])))))))));
 
 exports.default = Ribbon;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { RibbonDataProps } from './ChildComponents/Ribbon';
-import { GlobalNavItems } from './types/globalNavProps';
+import type { RibbonDataProps } from './ChildComponents/Ribbon';
+import type { GlobalNavItems } from './types/globalNavProps';
 export interface MainNavigationProps {
     /** Allows to pass a custom className */
     className?: string;

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

@@ -9,6 +9,7 @@ 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');
@@ -104,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};
@@ -153,12 +156,8 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
     const key = ramda.prop('id');
     const level1 = items.mainNavigation && items.mainNavigation.pages ? items.mainNavigation.pages : [];
     // Index & memoize menu levels
-    const level1Items = React.useMemo(() => {
-        return ramda.indexBy(key, level1);
-    }, [level1, key]);
-    const level2 = React.useMemo(() => {
-        return level1.map((item) => ramda.indexBy(key, item.pages));
-    }, [level1, key]);
+    const level1Items = React.useMemo(() => ramda.indexBy(key, level1), [level1, key]);
+    const level2 = React.useMemo(() => level1.map((item) => ramda.indexBy(key, item.pages)), [level1, key]);
     const level2Items = Object.assign({}, ...level2);
     // All states to for handling menus
     const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
@@ -178,36 +177,17 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         switch (updatedLevel) {
             case 'level1':
                 clickedItself = newValue === menuLevel.level1;
-                setMenuLevel({
-                    ...menuLevel,
-                    level1: !clickedItself ? newValue : null,
-                    animate1: !clickedItself,
-                    level2: null,
-                    animate2: true,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1: !clickedItself ? newValue : null, animate1: !clickedItself, level2: null, animate2: true }));
                 break;
             case 'level2':
                 clickedItself = newValue === menuLevel.level2;
-                setMenuLevel({
-                    ...menuLevel,
-                    level2: newValue !== menuLevel.level2 ? newValue : null,
-                    animate1: false,
-                    animate2: !clickedItself,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2: newValue !== menuLevel.level2 ? newValue : null, animate1: false, animate2: !clickedItself }));
                 break;
             case 'level1Mobile':
-                setMenuLevel({
-                    ...menuLevel,
-                    level1Mobile: newValue ? newValue : menuLevel.level1Mobile,
-                    scrollPosition: newValue ? 1 : 0,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1Mobile: newValue || menuLevel.level1Mobile, scrollPosition: newValue ? 1 : 0 }));
                 break;
             case 'level2Mobile':
-                setMenuLevel({
-                    ...menuLevel,
-                    level2Mobile: newValue ? newValue : menuLevel.level2Mobile,
-                    scrollPosition: newValue ? 2 : 1,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2Mobile: newValue || menuLevel.level2Mobile, scrollPosition: newValue ? 2 : 1 }));
                 break;
         }
     };
@@ -261,7 +241,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         setTooltipItems(initialTooltipItems);
     };
     const getBackLink = (menuElements, i) => {
-        const idValue = menuLevel['level' + i + 'Mobile'];
+        const idValue = menuLevel[`level${i}Mobile`];
         return menuElements[idValue];
     };
     const navigationContext = {
@@ -299,12 +279,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         const overThreshold = checkThreshold(prevPos.y, currPos.y);
         const isShow = currPos.y < prevPos.y;
         if (isShow !== menuLevel.hideOnScroll && overThreshold && !menuLevel.level1) {
-            setMenuLevel({
-                ...menuLevel,
-                animate1: false,
-                animate2: false,
-                hideOnScroll: isShow,
-            });
+            setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
         }
     }, [menuLevel], undefined, false, 200);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,

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

@@ -2,19 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 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 }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
 
-const ReactModalAdapter = ({ className, appElement, classNameProp, ...props }) => {
-    const styledClassName = classNameProp ? className.replace(` ${classNameProp}`, '') : className;
+const ReactModalAdapter = (_a) => {
+    var { appElement, className, propClassName } = _a, props = tslib.__rest(_a, ["appElement", "className", "propClassName"]);
+    /**
+     * Variable "propClassName" represents the original value (if any) passed to the Modal component by using "className" property, e.g.: 'myClassName'
+     * Variable "className" (props.className) represents the combination of propClassName and generated class names by styled-component library, e.g.: 'sc-jvfriV fFzEDO myClassName'
+     *
+     * In order to properly style the overlay and content elements, propClassName value has to be removed from className
+     * Next lines generate eslint warnings since className type is 'string | undefined' but it always has a value generated by styled-component library
+     */
+    const styledClassName = propClassName
+        ? // eslint-disable-next-line
+            className.replace(` ${propClassName}`, '')
+        : // eslint-disable-next-line
+            className;
     const overlayClassName = `${styledClassName}__overlay`;
     const contentClassName = `${styledClassName}__content`;
     return (React__default['default'].createElement(ReactModal__default['default'], Object.assign({ portalClassName: className, overlayClassName: overlayClassName, className: contentClassName }, props)));
@@ -47,7 +61,7 @@ const fadeInContent = styled.css `
     animation: ${opacityIn} 0.3s ease-in;
 `;
 const StyledModal = styled['default'](ReactModalAdapter).attrs(props => ({
-    classNameProp: props.className,
+    propClassName: props.className,
 })) `
     &__overlay {
         ${fadeInAnimation};
@@ -111,14 +125,14 @@ const CloseButton = styled['default'].a `
 `;
 class Modal extends React__default['default'].PureComponent {
     render() {
-        const { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem', ...props } = this.props;
+        const _a = this.props, { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem' } = _a, props = tslib.__rest(_a, ["appElement", "children", "className", "title", "closeIcon", "closeLabel", "onRequestClose", "overflowContentVisible", "maxWidth"]);
         if (appElement) {
             ReactModal__default['default'].setAppElement(appElement);
         }
         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

@@ -4,11 +4,11 @@ interface Props {
     /**
      * Depending on the passed type, the background color is determined
      *
-     * @default 'info'
      * @param {NotificationType} info Uses #007d91 color code as background color
      * @param {NotificationType} success Uses #e80c0c color code as background color
      * @param {NotificationType} warning Uses #00b201 color code as background color
      * @param {NotificationType} error Uses #ff7800 color code as background color
+     * @default 'info'
      */
     type?: NotificationType;
     /**

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

@@ -2,11 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 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 +19,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,13 +51,12 @@ const IconWrapper = styled__default['default'].div `
 const ContentWrapper = styled__default['default'].div `
     flex: 1;
 `;
-const Notification = ({ type = 'info', 'data-testid': dataTestId, ...props }) => {
+const Notification = (_a) => {
+    var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     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/PixelLoader/PixelLoader.d.ts

@@ -1,6 +1,21 @@
 /// <reference types="react" />
-import LoaderProps from './types/LoaderProps';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.hotPink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
 /** @visibleName Pixel Loader */
-export declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: LoaderProps) => JSX.Element;
+declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: Props) => JSX.Element;
 /** @component */
 export default PixelLoader;

package/build/cjs/components/PixelLoader/PixelLoader.js

@@ -3,18 +3,44 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var PixelLoaderStyles = require('./PixelLoaderStyles.js');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const loading = styled.keyframes `
+    0% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1.4, 1.4);
+    }
+    40% {
+        transform: scale(1);
+    }
+`;
+const LoaderWrapper = styled['default'].div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.125rem;
+`;
+const Pixel = styled['default'].div `
+    background: ${p => p.color || theme['default'].color.hotPink};
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    margin: 0.125rem;
+    animation: ${loading} 1s ease-in-out infinite;
+    animation-delay: ${p => p.delay}s;
+`;
 /** @visibleName Pixel Loader */
-const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React__default['default'].createElement(PixelLoaderStyles.LoaderWrapper, { className: className, "data-testid": dataTestId },
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "-0.27" }),
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "-0.18" }),
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "-0.09" }),
-    React__default['default'].createElement(PixelLoaderStyles.Pixel, { color: color, delay: "0" })));
+const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React__default['default'].createElement(LoaderWrapper, { className: className, "data-testid": dataTestId },
+    React__default['default'].createElement(Pixel, { color: color, delay: "-0.27" }),
+    React__default['default'].createElement(Pixel, { color: color, delay: "-0.18" }),
+    React__default['default'].createElement(Pixel, { color: color, delay: "-0.09" }),
+    React__default['default'].createElement(Pixel, { color: color, delay: "0" })));
 
-exports.PixelLoader = PixelLoader;
 exports.default = PixelLoader;