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

package/dist/GlobalNavigationBar/desktop/UserMenu.js

@@ -1,90 +1,155 @@
-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 styled from 'styled-components';
-import { Button } from '../../Button';
-import { BOXSHADOWS, COLORS, ComponentLStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
-import { Size } from '../../types';
-import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
-import { SystemIcons } from '../../icons';
-import { HyperLink } from '../../HyperLink';
-import Breakpoints from '../../styles/breakpoints';
-import { MenuItem } from '../../MenuItem';
-import { useNavigationHelper } from '../../common/NavigationHelper';
-import { ProfileButton } from '../../ProfileButton';
-var UserMenuScrollContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var UserMenuPinnedContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-var UserMenuWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  height: 100%;\n  flex-flow: column;\n\n\n  ", " {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ", " 0.2s ease-in-out;\n    box-shadow: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    z-index: ", ";\n    padding: 24px 0;\n  }\n"], ["\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  height: 100%;\n  flex-flow: column;\n\n\n  ", " {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ", " 0.2s ease-in-out;\n    box-shadow: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    z-index: ", ";\n    padding: 24px 0;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, Breakpoints.MEDIUM, flowDown, BOXSHADOWS.BOXSHADOW_CENTERED, COLORS.neutral_200, Z_INDEXES.fixed_menu);
-var MenuSection = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"], ["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
-var SignOutActionWrapper = styled(MenuSection)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n"], ["\n  align-items: center;\n  justify-content: center;\n"])));
-var MenuSectionHeader = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
-var MenuSectionList = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"], ["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
-var UserSectionAvatar = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n"], ["\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n"])));
-var UserSectionInfo = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
-var UserSectionInfoName = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var UserSectionInfoEmail = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  word-break: break-all;\n  ", "\n"], ["\n  word-break: break-all;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
-var UserSectionInfoLink = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
-var UserSection = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"])));
-var UserMenu = function (_a) {
-    var show = _a.show, user = _a.user, onHideUserMenu = _a.onHideUserMenu, sections = _a.sections, signOut = _a.signOut, label = _a.label;
-    var _b = useNavigationHelper(), navigate = _b.navigate, isActiveRoute = _b.isActiveRoute;
-    React.useEffect(function () {
-        if (!onHideUserMenu)
-            return;
-        function handleKeyPress(e) {
-            if (e.key === 'Escape' || e.key === 'Esc') {
-                onHideUserMenu();
-            }
-        }
-        document === null || document === void 0 ? void 0 : document.addEventListener('keydown', handleKeyPress, false);
-        return function () {
-            document === null || document === void 0 ? void 0 : document.removeEventListener('keydown', handleKeyPress, false);
-        };
-    }, [onHideUserMenu]);
-    var renderItem = function (item, section, index) {
-        return React.createElement(MenuItem, { key: index, id: "profile_".concat(index), active: !item.external && isActiveRoute(item.to, !!item.exact), item: {
-                value: item.to,
-                disabled: item.disabled,
-                icon: item.icon,
-                displayLabel: item.label,
-            }, onClickHandler: function (e) {
-                item.action && item.action(e);
-                navigate(item.to, !!item.external);
-            } });
-    };
-    return (React.createElement(UserMenuWrapper, { onClick: onHideUserMenu, className: show ? 'show' : '', role: "menu", "aria-labelledby": "UserMenuButton" },
-        React.createElement(UserMenuScrollContainer, null,
-            React.createElement(UserSection, null,
-                React.createElement(UserSectionAvatar, null,
-                    React.createElement(ProfileButton, { onClick: function () {
-                        }, tabIndex: -1, initials: user.firstName[0] + user.lastName[0] })),
-                React.createElement(UserSectionInfo, null,
-                    React.createElement(UserSectionInfoName, { "data-hj-suppress": true }, "".concat(user.firstName, " ").concat(user.lastName)),
-                    React.createElement(UserSectionInfoEmail, { "data-hj-suppress": true }, user.email),
-                    user.link &&
-                        React.createElement(HyperLink, { variant: 'default', href: user.link.href, target: user.link.target, id: user.link.id, onClick: user.link.onClick },
-                            React.createElement(UserSectionInfoLink, null,
-                                React.createElement("span", null, user.link.label),
-                                user.link.icon && React.cloneElement(user.link.icon, { size: '16px' }))))),
-            sections.filter(function (a) { return !a.pinned; }).map(function (section, index) {
-                return React.createElement(MenuSection, { key: index, className: section.divider ? 'divider' : '' },
-                    section.label && React.createElement(MenuSectionHeader, null, section.label),
-                    React.createElement(MenuSectionList, { key: index }, section.items.map(function (item, index) { return renderItem(item, section, index); })));
-            })),
-        React.createElement(UserMenuPinnedContainer, null,
-            sections.filter(function (a) { return !!a.pinned; }).map(function (section, index) {
-                return React.createElement(MenuSection, { key: index, className: section.divider || index === 0 ? 'divider' : '' },
-                    section.label && React.createElement(MenuSectionHeader, null, section.label),
-                    React.createElement(MenuSectionList, { key: index }, section.items.map(function (item, index) { return renderItem(item, section, index); })));
-            }),
-            signOut &&
-                React.createElement(SignOutActionWrapper, null,
-                    React.createElement(Button, { width: '272px', variant: "secondary", icon: React.createElement(SystemIcons.Logout, null), size: Size.Large, onClick: function (e) {
-                            e.preventDefault();
-                            signOut === null || signOut === void 0 ? void 0 : signOut.action();
-                        } }, signOut === null || signOut === void 0 ? void 0 : signOut.label)))));
-};
-export default UserMenu;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '../../Button';
+import { BOXSHADOWS, COLORS, ComponentLStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
+import { Size } from '../../types';
+import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { SystemIcons } from '../../icons';
+import { HyperLink } from '../../HyperLink';
+import Breakpoints from '../../styles/breakpoints';
+import { MenuItem } from '../../MenuItem';
+import { useNavigationHelper } from '../../common/NavigationHelper';
+import { ProfileButton } from '../../ProfileButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var UserMenuScrollContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
+var UserMenuPinnedContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+var UserMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  height: 100%;\n  flex-flow: column;\n\n\n  ", " {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ", " 0.2s ease-in-out;\n    box-shadow: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    z-index: ", ";\n    padding: 24px 0;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, Breakpoints.MEDIUM, flowDown, BOXSHADOWS.BOXSHADOW_CENTERED, COLORS.neutral_200, Z_INDEXES.fixed_menu);
+var MenuSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
+var SignOutActionWrapper = styled(MenuSection)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n"])));
+var MenuSectionHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
+var MenuSectionList = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
+var UserSectionAvatar = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n"])));
+var UserSectionInfo = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var UserSectionInfoName = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var UserSectionInfoEmail = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
+var UserSectionInfoLink = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
+var UserSection = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"])));
+var UserMenu = function UserMenu(_ref) {
+  var show = _ref.show,
+    user = _ref.user,
+    onHideUserMenu = _ref.onHideUserMenu,
+    sections = _ref.sections,
+    signOut = _ref.signOut,
+    label = _ref.label;
+  var _useNavigationHelper = useNavigationHelper(),
+    navigate = _useNavigationHelper.navigate,
+    isActiveRoute = _useNavigationHelper.isActiveRoute;
+  React.useEffect(function () {
+    var _document;
+    if (!onHideUserMenu) return;
+    function handleKeyPress(e) {
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        onHideUserMenu();
+      }
+    }
+    (_document = document) === null || _document === void 0 ? void 0 : _document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      var _document2;
+      (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [onHideUserMenu]);
+  var renderItem = function renderItem(item, section, index) {
+    return /*#__PURE__*/_jsx(MenuItem, {
+      id: "profile_".concat(index),
+      active: !item.external && isActiveRoute(item.to, !!item.exact),
+      item: {
+        value: item.to,
+        disabled: item.disabled,
+        icon: item.icon,
+        displayLabel: item.label
+      },
+      onClickHandler: function onClickHandler(e) {
+        item.action && item.action(e);
+        navigate(item.to, !!item.external);
+      }
+    }, index);
+  };
+  return /*#__PURE__*/_jsxs(UserMenuWrapper, {
+    onClick: onHideUserMenu,
+    className: show ? 'show' : '',
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(UserMenuScrollContainer, {
+      children: [/*#__PURE__*/_jsxs(UserSection, {
+        children: [/*#__PURE__*/_jsx(UserSectionAvatar, {
+          children: /*#__PURE__*/_jsx(ProfileButton, {
+            onClick: function onClick() {},
+            tabIndex: -1,
+            initials: user.firstName[0] + user.lastName[0]
+          })
+        }), /*#__PURE__*/_jsxs(UserSectionInfo, {
+          children: [/*#__PURE__*/_jsx(UserSectionInfoName, {
+            "data-hj-suppress": true,
+            children: "".concat(user.firstName, " ").concat(user.lastName)
+          }), /*#__PURE__*/_jsx(UserSectionInfoEmail, {
+            "data-hj-suppress": true,
+            children: user.email
+          }), user.link && /*#__PURE__*/_jsx(HyperLink, {
+            variant: 'default',
+            href: user.link.href,
+            target: user.link.target,
+            id: user.link.id,
+            onClick: user.link.onClick,
+            children: /*#__PURE__*/_jsxs(UserSectionInfoLink, {
+              children: [/*#__PURE__*/_jsx("span", {
+                children: user.link.label
+              }), user.link.icon && /*#__PURE__*/React.cloneElement(user.link.icon, {
+                size: '16px'
+              })]
+            })
+          })]
+        })]
+      }), sections.filter(function (a) {
+        return !a.pinned;
+      }).map(function (section, index) {
+        return /*#__PURE__*/_jsxs(MenuSection, {
+          className: section.divider ? 'divider' : '',
+          children: [section.label && /*#__PURE__*/_jsx(MenuSectionHeader, {
+            children: section.label
+          }), /*#__PURE__*/_jsx(MenuSectionList, {
+            children: section.items.map(function (item, index) {
+              return renderItem(item, section, index);
+            })
+          }, index)]
+        }, index);
+      })]
+    }), /*#__PURE__*/_jsxs(UserMenuPinnedContainer, {
+      children: [sections.filter(function (a) {
+        return !!a.pinned;
+      }).map(function (section, index) {
+        return /*#__PURE__*/_jsxs(MenuSection, {
+          className: section.divider || index === 0 ? 'divider' : '',
+          children: [section.label && /*#__PURE__*/_jsx(MenuSectionHeader, {
+            children: section.label
+          }), /*#__PURE__*/_jsx(MenuSectionList, {
+            children: section.items.map(function (item, index) {
+              return renderItem(item, section, index);
+            })
+          }, index)]
+        }, index);
+      }), signOut && /*#__PURE__*/_jsx(SignOutActionWrapper, {
+        children: /*#__PURE__*/_jsx(Button, {
+          width: '272px',
+          variant: "secondary",
+          icon: /*#__PURE__*/_jsx(SystemIcons.Logout, {}),
+          size: Size.Large,
+          onClick: function onClick(e) {
+            e.preventDefault();
+            signOut === null || signOut === void 0 ? void 0 : signOut.action();
+          },
+          children: signOut === null || signOut === void 0 ? void 0 : signOut.label
+        })
+      })]
+    })]
+  });
+};
+UserMenu.propTypes = {
+  show: _pt.bool,
+  onHideUserMenu: _pt.func.isRequired
+};
+export default UserMenu;
+//# sourceMappingURL=UserMenu.js.map

package/dist/GlobalNavigationBar/index.js

@@ -1,3 +1,4 @@
-import GlobalNavigationBar from './GlobalNavigationBar';
-export * from './types';
-export { GlobalNavigationBar };
+import GlobalNavigationBar from './GlobalNavigationBar';
+export * from './types';
+export { GlobalNavigationBar };
+//# sourceMappingURL=index.js.map

package/dist/GlobalNavigationBar/mobile/CommonStyles.js

@@ -1,28 +1,26 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { css, keyframes } from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles, scrollBarStyling, Z_INDEXES } from '../../styles';
-import { NavLink } from 'react-router-dom';
-import { Size } from '../../types';
-export var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-export var Button = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"], ["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), COLORS.white);
-var flowLeft = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
-var flowRight = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n"], ["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n"])));
-export var fadeOut = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"], ["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
-export var fadeIn = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"], ["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
-export var Menu = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  background-color: ", ";\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n\n  width: 320px;\n\n  ", " {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n"], ["\n  height: 100%;\n  background-color: ", ";\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n\n  width: 320px;\n\n  ", " {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, flowLeft, flowRight);
-export var Right = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
-export var SiteName = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"], ["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), COLORS.neutral_600);
-export var MenuSection = styled.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"], ["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
-export var MenuSectionList = styled.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n"], ["\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n"])));
-export var UserMenuSectionListStyling = css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"], ["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"])), Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, COLORS.primary_600, Z_INDEXES.focus, focusStyles, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100);
-export var MenuLink = styled(NavLink)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"], ["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
-export var flowDown = keyframes(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-export var MobileMenuWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
-export var ScrollableContainer = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"])), scrollBarStyling(Size.Small));
-export var MobileHeaderText = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-export var MobileHeaderNote = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  word-break: break-all;\n  ", "\n"], ["\n  word-break: break-all;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-export var MobileHeaderContainer = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), COLORS.neutral_200);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+import styled, { css, keyframes } from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles, scrollBarStyling, Z_INDEXES } from '../../styles';
+import { NavLink } from 'react-router-dom';
+import { Size } from '../../types';
+export var RowLayout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+export var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), COLORS.white);
+var flowLeft = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
+var flowRight = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n"])));
+export var fadeOut = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
+export var fadeIn = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
+export var Menu = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 100%;\n  background-color: ", ";\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n\n  width: 320px;\n\n  ", " {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, flowLeft, flowRight);
+export var Right = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
+export var SiteName = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), COLORS.neutral_600);
+export var MenuSection = styled.li(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+export var MenuSectionList = styled.ul(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n"])));
+export var UserMenuSectionListStyling = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"])), Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, COLORS.primary_600, Z_INDEXES.focus, focusStyles, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100);
+export var MenuLink = styled(NavLink)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
+export var flowDown = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+export var MobileMenuWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+export var ScrollableContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"])), scrollBarStyling(Size.Small));
+export var MobileHeaderText = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+export var MobileHeaderNote = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+export var MobileHeaderContainer = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), COLORS.neutral_200);
+//# sourceMappingURL=CommonStyles.js.map

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js

@@ -1,18 +1,32 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { Button } from '../../Button';
-import { BREAKPOINTS, COLORS } from '../../styles';
-import { Size } from '../../types';
-import { useMediaMatch } from "rooks";
-var ActionContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"], ["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
-export var MobileActionContainer = function (_a) {
-    var disabled = _a.disabled, _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, icon = _a.icon, label = _a.label, loading = _a.loading, action = _a.action;
-    var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
-    return (React.createElement(ActionContainer, null,
-        React.createElement(Button, { variant: variant, size: isSmallScreen ? Size.Medium : Size.Small, disabled: disabled, icon: icon, loading: loading, onClick: action }, label)));
-};
-var templateObject_1;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '../../Button';
+import { BREAKPOINTS, COLORS } from '../../styles';
+import { Size } from '../../types';
+import { useMediaMatch } from "rooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ActionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
+export var MobileActionContainer = function MobileActionContainer(_ref) {
+  var disabled = _ref.disabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
+    icon = _ref.icon,
+    label = _ref.label,
+    loading = _ref.loading,
+    action = _ref.action;
+  var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
+  return /*#__PURE__*/_jsx(ActionContainer, {
+    children: /*#__PURE__*/_jsx(Button, {
+      variant: variant,
+      size: isSmallScreen ? Size.Medium : Size.Small,
+      disabled: disabled,
+      icon: icon,
+      loading: loading,
+      onClick: action,
+      children: label
+    })
+  });
+};
+//# sourceMappingURL=MobileActionContainer.js.map

package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MobileNavigationMenuProps, ProfileMenu } from '../types';
-declare type Props = MobileNavigationMenuProps & {
+type Props = MobileNavigationMenuProps & {
     profile?: ProfileMenu;
     show?: boolean;
     onClose: () => void;