@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/Footer/SiteFooter.js

@@ -1,57 +1,95 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup", "useMaxWidth", "maxWidth"];
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Import React libraries.
- */
-import * as React from 'react';
+ */
+import * as React from 'react';
+
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
+ */
+import styled from 'styled-components';
+
 /**
  * Import custom components.
- */
-import FooterBottomLinks from './Components/FooterBottomLinks';
-import FooterTop from './Components/FooterTop';
-import FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';
-import FooterNavSection from './Components/FooterNavSection';
-import { BREAKPOINTS, COLORS } from '../styles';
-import { PageWidth } from "../Layouts";
-var FooterContainer = styled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ", " {\n    padding: 16px 0;\n  }\n\n  ", " {\n    padding: 16px 0;\n  }\n"], ["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ", " {\n    padding: 16px 0;\n  }\n\n  ", " {\n    padding: 16px 0;\n  }\n"])), COLORS.neutral_800, COLORS.neutral_200, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
-var FooterLine = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"], ["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), COLORS.white, BREAKPOINTS.MEDIUM);
-var SiteFooter = function (_a) {
-    var id = _a.id, sitename = _a.sitename, bottomLinks = _a.bottomLinks, showBetaTag = _a.showBetaTag, copyrightText = _a.copyrightText, toTopText = _a.toTopText, placeholderEmailField = _a.placeholderEmailField, includeNewsletterAndSocialSection = _a.includeNewsletterAndSocialSection, newsletterLabel = _a.newsletterLabel, navOptions = _a.navOptions, onNewsletterSignup = _a.onNewsletterSignup, _b = _a.useMaxWidth, useMaxWidth = _b === void 0 ? true : _b, maxWidth = _a.maxWidth, rest = __rest(_a, ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup", "useMaxWidth", "maxWidth"]);
-    return (React.createElement(FooterContainer, __assign({ id: id, "data-testid": 'footer-container' }, rest),
-        React.createElement(PageWidth, { unsetMargin: true, useMaxWidth: useMaxWidth, maxWidth: maxWidth },
-            React.createElement(FooterTop, { sitename: sitename, showBetaTag: showBetaTag, toTopText: toTopText }),
-            navOptions && React.createElement(FooterNavSection, { mainId: id, navOptions: navOptions }),
-            React.createElement(FooterLine, null),
-            includeNewsletterAndSocialSection && (React.createElement(FooterNewsletterAndSocialSection, { placeholderEmail: placeholderEmailField, actionOnNewsletterSignup: onNewsletterSignup, newsletterLabel: newsletterLabel || '' })),
-            React.createElement(FooterBottomLinks, { bottomLinks: bottomLinks, copyrightText: copyrightText }))));
-};
-export default SiteFooter;
-var templateObject_1, templateObject_2;
+ */
+import FooterBottomLinks from './Components/FooterBottomLinks';
+import FooterTop from './Components/FooterTop';
+import FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';
+import FooterNavSection from './Components/FooterNavSection';
+import { BREAKPOINTS, COLORS } from '../styles';
+
+/**
+ * Import custom styles.
+ */
+
+import { PageWidth } from "../Layouts";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ", " {\n    padding: 16px 0;\n  }\n\n  ", " {\n    padding: 16px 0;\n  }\n"])), COLORS.neutral_800, COLORS.neutral_200, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var FooterLine = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), COLORS.white, BREAKPOINTS.MEDIUM);
+var SiteFooter = function SiteFooter(_ref) {
+  var id = _ref.id,
+    sitename = _ref.sitename,
+    bottomLinks = _ref.bottomLinks,
+    showBetaTag = _ref.showBetaTag,
+    copyrightText = _ref.copyrightText,
+    toTopText = _ref.toTopText,
+    placeholderEmailField = _ref.placeholderEmailField,
+    includeNewsletterAndSocialSection = _ref.includeNewsletterAndSocialSection,
+    newsletterLabel = _ref.newsletterLabel,
+    navOptions = _ref.navOptions,
+    onNewsletterSignup = _ref.onNewsletterSignup,
+    _ref$useMaxWidth = _ref.useMaxWidth,
+    useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
+    maxWidth = _ref.maxWidth,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(FooterContainer, _objectSpread(_objectSpread({
+    id: id,
+    "data-testid": 'footer-container'
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(PageWidth, {
+      unsetMargin: true,
+      useMaxWidth: useMaxWidth,
+      maxWidth: maxWidth,
+      children: [/*#__PURE__*/_jsx(FooterTop, {
+        sitename: sitename,
+        showBetaTag: showBetaTag,
+        toTopText: toTopText
+      }), navOptions && /*#__PURE__*/_jsx(FooterNavSection, {
+        mainId: id,
+        navOptions: navOptions
+      }), /*#__PURE__*/_jsx(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/_jsx(FooterNewsletterAndSocialSection, {
+        placeholderEmail: placeholderEmailField,
+        actionOnNewsletterSignup: onNewsletterSignup,
+        newsletterLabel: newsletterLabel || ''
+      }), /*#__PURE__*/_jsx(FooterBottomLinks, {
+        bottomLinks: bottomLinks,
+        copyrightText: copyrightText
+      })]
+    })
+  }));
+};
+SiteFooter.propTypes = {
+  id: _pt.string.isRequired,
+  sitename: _pt.string,
+  showBetaTag: _pt.bool,
+  bottomLinks: _pt.array,
+  copyrightText: _pt.string,
+  includeNewsletterAndSocialSection: _pt.bool,
+  actionOnNewsletterSignup: _pt.func,
+  newsletterLabel: _pt.string,
+  toTopText: _pt.string.isRequired,
+  placeholderEmailField: _pt.string,
+  onNewsletterSignup: _pt.func,
+  useMaxWidth: _pt.bool,
+  maxWidth: _pt.number
+};
+export default SiteFooter;
+//# sourceMappingURL=SiteFooter.js.map

package/dist/Footer/index.js

@@ -1,2 +1,3 @@
-export { default as Footer } from './Footer';
-export { default as SiteFooter } from './SiteFooter';
+export { default as Footer } from './Footer';
+export { default as SiteFooter } from './SiteFooter';
+//# sourceMappingURL=index.js.map

package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DesktopNavigationMenuProps, MobileNavigationMenuProps, ProfileMenu } from './types';
-declare type GlobalNavigationBarProps = {
+type GlobalNavigationBarProps = {
     isAuthenticated?: boolean;
     useMaxWidth?: boolean;
     maxWidth?: number;

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -1,93 +1,196 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import Logo from './Logo';
-import MainMenu from './desktop/MainMenu';
-import { PageWidth } from '../Layouts';
-import { COLORS, BREAKPOINTS } from '../styles';
-import RightSideNav from './desktop/RightSideNav';
-import MobileMenu from './mobile/MobileMenu';
-import { SystemIcons } from '../icons';
-import UserMenu from './desktop/UserMenu';
-import { fadeIn, fadeOut, Menu as MobileMenuWrapper } from './mobile/CommonStyles';
-import { Z_INDEXES } from '../styles';
-import { IconButton } from '../Button';
-import DesktopActions from './desktop/DesktopActions';
-import { usePreviousImmediate } from 'rooks';
-import { useClickOutsideRef } from '../common';
-import { hasWindow } from '../utils/utils';
-var HeaderWrapper = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"], ["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
-var RowLayout = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var HamburgerButton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    display: none;\n  }\n"], ["\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), HamburgerButton);
-var MobileMenuBackdrop = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"], ["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
-var MobileWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", " {\n    display: none !important;\n  }\n"], ["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var UserMenuWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) { return (props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%'); });
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled from 'styled-components';
+import Logo from './Logo';
+import MainMenu from './desktop/MainMenu';
+import { PageWidth } from '../Layouts';
+import { COLORS, BREAKPOINTS } from '../styles';
+import RightSideNav from './desktop/RightSideNav';
+import MobileMenu from './mobile/MobileMenu';
+import { SystemIcons } from '../icons';
+import UserMenu from './desktop/UserMenu';
+import { fadeIn, fadeOut, Menu as MobileMenuWrapper } from './mobile/CommonStyles';
+import { Z_INDEXES } from '../styles';
+import { IconButton } from '../Button';
+import DesktopActions from './desktop/DesktopActions';
+import { usePreviousImmediate } from 'rooks';
+import { useClickOutsideRef } from '../common';
+import { hasWindow } from '../utils/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), HamburgerButton);
+var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
+var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
+  return props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
+});
 /**
  * @param props
  * @constructor
  * @description This component is a global navigation header bar
- */
-var GlobalNavigationBar = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var name = _a.name, isAuthenticated = _a.isAuthenticated, logo = _a.logo, profile = _a.profile, mobile = _a.mobile, desktop = _a.desktop, testId = _a.testId, _h = _a.useMaxWidth, useMaxWidth = _h === void 0 ? true : _h, maxWidth = _a.maxWidth, profileComponent = _a.profileComponent, _j = _a.border, border = _j === void 0 ? true : _j;
-    var _k = React.useState(false), showMobileMenu = _k[0], setShowMobileMenu = _k[1];
-    var wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);
-    var _l = React.useState(false), showUserMenu = _l[0], setShowUserMenu = _l[1];
-    var actionsRef = React.useRef(null);
-    var profileButtonRef = React.useRef();
-    profileButtonRef.current = (_e = (_d = (_c = (_b = actionsRef === null || actionsRef === void 0 ? void 0 : actionsRef.current) === null || _b === void 0 ? void 0 : _b.buttons) === null || _c === void 0 ? void 0 : _c.find(function (a) { return a.type === 'profile'; })) === null || _d === void 0 ? void 0 : _d.ref) === null || _e === void 0 ? void 0 : _e.current;
-    var mobileMenuButtonRef = React.useRef(null);
-    var rightSideRef = React.useRef(null);
-    var _m = React.useState(0), avatarRight = _m[0], setAvatarRight = _m[1];
-    var userMenuRef = useClickOutsideRef(function () { return setShowUserMenu(false); }, [profileButtonRef]);
-    var mobileMenuRef = useClickOutsideRef(function () { return setShowMobileMenu(false); }, [mobileMenuButtonRef]);
-    React.useEffect(function () {
-        if (!profileButtonRef.current)
-            return;
-        var handleResize = function () {
-            var _a, _b;
-            var profileRightOffset = (_b = (_a = profileButtonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.right;
-            setAvatarRight(profileRightOffset || 0);
-        };
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, [profileButtonRef.current]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HeaderWrapper, { "data-testid": testId, className: border ? 'border' : '' },
-            React.createElement(PageWidth, { useMaxWidth: useMaxWidth, maxWidth: maxWidth, unsetMargin: true },
-                React.createElement(RowLayout, null,
-                    React.createElement(Logo, { name: name || '', showBetaTag: logo === null || logo === void 0 ? void 0 : logo.showBetaTag, onClick: logo === null || logo === void 0 ? void 0 : logo.onClick, to: logo === null || logo === void 0 ? void 0 : logo.to }),
-                    isAuthenticated &&
-                        React.createElement(MainMenu, { items: (desktop === null || desktop === void 0 ? void 0 : desktop.items.filter(function (a) { return !a.pinned; })) || [], rightSideRef: rightSideRef }),
-                    React.createElement(RightSide, { className: "".concat((desktop === null || desktop === void 0 ? void 0 : desktop.reverseRightSideOrder) ? 'reverse' : ''), ref: rightSideRef },
-                        React.createElement(RightSideNav, { items: (_f = desktop === null || desktop === void 0 ? void 0 : desktop.items) === null || _f === void 0 ? void 0 : _f.filter(function (a) { return a.pinned && a.type == 'item'; }).map(function (x) { return x; }), action: desktop === null || desktop === void 0 ? void 0 : desktop.action }),
-                        React.createElement(MobileWrapper, null, !!profileComponent && profileComponent),
-                        React.createElement(DesktopActions, { ref: actionsRef, buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons, onShowUserMenu: function () { return setShowUserMenu(!showUserMenu); }, user: profile === null || profile === void 0 ? void 0 : profile.user, profileComponent: profileComponent }),
-                        React.createElement(HamburgerButton, { hidden: !isAuthenticated },
-                            React.createElement(IconButton, { action: function () { return setShowMobileMenu(!showMobileMenu); }, ref: mobileMenuButtonRef, shape: 'circular', variant: 'secondary' },
-                                React.createElement(SystemIcons.Menu, { size: "24px" }))))))),
-        React.createElement(MobileMenuBackdrop, { className: showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : '' },
-            React.createElement(MobileMenuWrapper, { ref: mobileMenuRef, role: "menu", "aria-labelledby": "UserMenuButton" },
-                React.createElement(MobileMenu, __assign({}, mobile, { show: showMobileMenu, onClose: function () { return setShowMobileMenu(false); }, profile: !profileComponent ? profile : undefined })))),
-        ((_g = desktop === null || desktop === void 0 ? void 0 : desktop.buttons) === null || _g === void 0 ? void 0 : _g.some(function (a) { return a.type === 'profile'; })) && !!profile &&
-            React.createElement(UserMenuWrapper, { ref: userMenuRef, offsetRight: avatarRight, "data-testid": "testUserMenuWrapper" },
-                React.createElement(UserMenu, __assign({}, profile, { show: showUserMenu, onHideUserMenu: function () { return setShowUserMenu(false); } })))));
-};
-export default GlobalNavigationBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+ */
+var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
+  var _actionsRef$current, _actionsRef$current$b, _actionsRef$current$b2, _actionsRef$current$b3, _desktop$items, _desktop$buttons;
+  var name = _ref.name,
+    isAuthenticated = _ref.isAuthenticated,
+    logo = _ref.logo,
+    profile = _ref.profile,
+    mobile = _ref.mobile,
+    desktop = _ref.desktop,
+    testId = _ref.testId,
+    _ref$useMaxWidth = _ref.useMaxWidth,
+    useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
+    maxWidth = _ref.maxWidth,
+    profileComponent = _ref.profileComponent,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? true : _ref$border;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showMobileMenu = _React$useState2[0],
+    setShowMobileMenu = _React$useState2[1];
+  var wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    showUserMenu = _React$useState4[0],
+    setShowUserMenu = _React$useState4[1];
+  var actionsRef = React.useRef(null);
+  var profileButtonRef = React.useRef();
+  profileButtonRef.current = actionsRef === null || actionsRef === void 0 ? void 0 : (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 ? void 0 : (_actionsRef$current$b = _actionsRef$current.buttons) === null || _actionsRef$current$b === void 0 ? void 0 : (_actionsRef$current$b2 = _actionsRef$current$b.find(function (a) {
+    return a.type === 'profile';
+  })) === null || _actionsRef$current$b2 === void 0 ? void 0 : (_actionsRef$current$b3 = _actionsRef$current$b2.ref) === null || _actionsRef$current$b3 === void 0 ? void 0 : _actionsRef$current$b3.current;
+  var mobileMenuButtonRef = React.useRef(null);
+  var rightSideRef = React.useRef(null);
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    avatarRight = _React$useState6[0],
+    setAvatarRight = _React$useState6[1];
+  var userMenuRef = useClickOutsideRef(function () {
+    return setShowUserMenu(false);
+  }, [profileButtonRef]);
+  var mobileMenuRef = useClickOutsideRef(function () {
+    return setShowMobileMenu(false);
+  }, [mobileMenuButtonRef]);
+  React.useEffect(function () {
+    if (!profileButtonRef.current) return;
+    var handleResize = function handleResize() {
+      var _profileButtonRef$cur, _profileButtonRef$cur2;
+      var profileRightOffset = (_profileButtonRef$cur = profileButtonRef.current) === null || _profileButtonRef$cur === void 0 ? void 0 : (_profileButtonRef$cur2 = _profileButtonRef$cur.getBoundingClientRect()) === null || _profileButtonRef$cur2 === void 0 ? void 0 : _profileButtonRef$cur2.right;
+      setAvatarRight(profileRightOffset || 0);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, [profileButtonRef.current]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(HeaderWrapper, {
+      "data-testid": testId,
+      className: border ? 'border' : '',
+      children: /*#__PURE__*/_jsx(PageWidth, {
+        useMaxWidth: useMaxWidth,
+        maxWidth: maxWidth,
+        unsetMargin: true,
+        children: /*#__PURE__*/_jsxs(RowLayout, {
+          children: [/*#__PURE__*/_jsx(Logo, {
+            name: name || '',
+            showBetaTag: logo === null || logo === void 0 ? void 0 : logo.showBetaTag,
+            onClick: logo === null || logo === void 0 ? void 0 : logo.onClick,
+            to: logo === null || logo === void 0 ? void 0 : logo.to
+          }), isAuthenticated && /*#__PURE__*/_jsx(MainMenu, {
+            items: (desktop === null || desktop === void 0 ? void 0 : desktop.items.filter(function (a) {
+              return !a.pinned;
+            })) || [],
+            rightSideRef: rightSideRef
+          }), /*#__PURE__*/_jsxs(RightSide, {
+            className: "".concat(desktop !== null && desktop !== void 0 && desktop.reverseRightSideOrder ? 'reverse' : ''),
+            ref: rightSideRef,
+            children: [/*#__PURE__*/_jsx(RightSideNav, {
+              items: desktop === null || desktop === void 0 ? void 0 : (_desktop$items = desktop.items) === null || _desktop$items === void 0 ? void 0 : _desktop$items.filter(function (a) {
+                return a.pinned && a.type == 'item';
+              }).map(function (x) {
+                return x;
+              }),
+              action: desktop === null || desktop === void 0 ? void 0 : desktop.action
+            }), /*#__PURE__*/_jsx(MobileWrapper, {
+              children: !!profileComponent && profileComponent
+            }), /*#__PURE__*/_jsx(DesktopActions, {
+              ref: actionsRef,
+              buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons,
+              onShowUserMenu: function onShowUserMenu() {
+                return setShowUserMenu(!showUserMenu);
+              },
+              user: profile === null || profile === void 0 ? void 0 : profile.user,
+              profileComponent: profileComponent
+            }), /*#__PURE__*/_jsx(HamburgerButton, {
+              hidden: !isAuthenticated,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                action: function action() {
+                  return setShowMobileMenu(!showMobileMenu);
+                },
+                ref: mobileMenuButtonRef,
+                shape: 'circular',
+                variant: 'secondary',
+                children: /*#__PURE__*/_jsx(SystemIcons.Menu, {
+                  size: "24px"
+                })
+              })
+            })]
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(MobileMenuBackdrop, {
+      className: showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : '',
+      children: /*#__PURE__*/_jsx(MobileMenuWrapper, {
+        ref: mobileMenuRef,
+        role: "menu",
+        "aria-labelledby": "UserMenuButton",
+        children: /*#__PURE__*/_jsx(MobileMenu, _objectSpread(_objectSpread({}, mobile), {}, {
+          show: showMobileMenu,
+          onClose: function onClose() {
+            return setShowMobileMenu(false);
+          },
+          profile: !profileComponent ? profile : undefined
+        }))
+      })
+    }), (desktop === null || desktop === void 0 ? void 0 : (_desktop$buttons = desktop.buttons) === null || _desktop$buttons === void 0 ? void 0 : _desktop$buttons.some(function (a) {
+      return a.type === 'profile';
+    })) && !!profile && /*#__PURE__*/_jsx(UserMenuWrapper, {
+      ref: userMenuRef,
+      offsetRight: avatarRight,
+      "data-testid": "testUserMenuWrapper",
+      children: /*#__PURE__*/_jsx(UserMenu, _objectSpread(_objectSpread({}, profile), {}, {
+        show: showUserMenu,
+        onHideUserMenu: function onHideUserMenu() {
+          return setShowUserMenu(false);
+        }
+      }))
+    })]
+  });
+};
+GlobalNavigationBar.propTypes = {
+  isAuthenticated: _pt.bool,
+  useMaxWidth: _pt.bool,
+  maxWidth: _pt.number,
+  name: _pt.string,
+  logo: _pt.shape({
+    onClick: _pt.func,
+    to: _pt.string,
+    showBetaTag: _pt.bool
+  }),
+  testId: _pt.string,
+  profileComponent: _pt.node,
+  border: _pt.bool
+};
+export default GlobalNavigationBar;
+//# sourceMappingURL=GlobalNavigationBar.js.map

package/dist/GlobalNavigationBar/Logo.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type LogoProps = {
+type LogoProps = {
     name: string;
     showBetaTag?: boolean;
     onClick?: () => void;

package/dist/GlobalNavigationBar/Logo.js

@@ -1,33 +1,74 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { LaerdalLogo, LaerdalWhiteLogo } from '../assets';
-import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles } from '../styles';
-import { ComponentMStyling, ComponentXSStyling } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-var StyledLink = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"], ["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) { return props.$color; }, BREAKPOINTS.MEDIUM);
-var LogoContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"], ["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
-var Name = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"], ["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) { return props.$color || COLORS.black; }, function (props) {
-    return props.noSizeChangeOnMobile
-        ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)
-        : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
-}, BREAKPOINTS.MEDIUM, function (props) { return ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black); }, BREAKPOINTS.LARGE);
-var BetaTag = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) { return props.backgroundColor || COLORS.accent2_500; }, function (props) { return ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white); });
-var Logo = function (_a) {
-    var name = _a.name, showBetaTag = _a.showBetaTag, onClick = _a.onClick, to = _a.to, color = _a.color, noSizeChangeOnMobile = _a.noSizeChangeOnMobile, betaTagBackgroundColor = _a.betaTagBackgroundColor, betaTagColor = _a.betaTagColor, inverted = _a.inverted;
-    return (React.createElement(LogoContainer, { className: inverted ? 'inverted' : '' },
-        React.createElement(StyledLink, { to: to || '/', onMouseDown: defaultOnMouseDownHandler, onClick: function () {
-                if (onClick) {
-                    onClick();
-                }
-            }, "$color": color },
-            color === COLORS.white ? React.createElement(LaerdalWhiteLogo, null) : React.createElement(LaerdalLogo, null),
-            React.createElement(Name, { "$color": color, noSizeChangeOnMobile: noSizeChangeOnMobile || false }, name),
-            showBetaTag && (React.createElement(BetaTag, { backgroundColor: betaTagBackgroundColor, "$color": betaTagColor }, "BETA")))));
-};
-export default Logo;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { LaerdalLogo, LaerdalWhiteLogo } from '../assets';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles } from '../styles';
+import { ComponentMStyling, ComponentXSStyling } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
+  return props.$color;
+}, BREAKPOINTS.MEDIUM);
+var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
+var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
+  return props.$color || COLORS.black;
+}, function (props) {
+  return props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
+}, BREAKPOINTS.LARGE);
+var BetaTag = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
+  return props.backgroundColor || COLORS.accent2_500;
+}, function (props) {
+  return ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white);
+});
+var Logo = function Logo(_ref) {
+  var name = _ref.name,
+    showBetaTag = _ref.showBetaTag,
+    _onClick = _ref.onClick,
+    to = _ref.to,
+    color = _ref.color,
+    noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
+    betaTagBackgroundColor = _ref.betaTagBackgroundColor,
+    betaTagColor = _ref.betaTagColor,
+    inverted = _ref.inverted;
+  return /*#__PURE__*/_jsx(LogoContainer, {
+    className: inverted ? 'inverted' : '',
+    children: /*#__PURE__*/_jsxs(StyledLink, {
+      to: to || '/',
+      onMouseDown: defaultOnMouseDownHandler,
+      onClick: function onClick() {
+        if (_onClick) {
+          _onClick();
+        }
+      },
+      $color: color,
+      children: [color === COLORS.white ? /*#__PURE__*/_jsx(LaerdalWhiteLogo, {}) : /*#__PURE__*/_jsx(LaerdalLogo, {}), /*#__PURE__*/_jsx(Name, {
+        $color: color,
+        noSizeChangeOnMobile: noSizeChangeOnMobile || false,
+        children: name
+      }), showBetaTag && /*#__PURE__*/_jsx(BetaTag, {
+        backgroundColor: betaTagBackgroundColor,
+        $color: betaTagColor,
+        children: "BETA"
+      })]
+    })
+  });
+};
+Logo.propTypes = {
+  name: _pt.string.isRequired,
+  showBetaTag: _pt.bool,
+  onClick: _pt.func,
+  to: _pt.string,
+  color: _pt.string,
+  noSizeChangeOnMobile: _pt.bool,
+  betaTagBackgroundColor: _pt.string,
+  betaTagColor: _pt.string,
+  inverted: _pt.bool
+};
+export default Logo;
+//# sourceMappingURL=Logo.js.map