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

package/dist/GlobalNavigationBar/desktop/UserMenu.js

@@ -1,155 +1,90 @@
-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
+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;

package/dist/GlobalNavigationBar/index.js

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

package/dist/GlobalNavigationBar/mobile/CommonStyles.js

@@ -1,26 +1,28 @@
-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
+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;

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js

@@ -1,32 +1,18 @@
-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
+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;

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { MobileNavigationMenuProps, ProfileMenu } from '../types';
-type Props = MobileNavigationMenuProps & {
+declare type Props = MobileNavigationMenuProps & {
     profile?: ProfileMenu;
     show?: boolean;
     onClose: () => void;
 };
-declare const MobileMenu: ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => JSX.Element;
+declare const MobileMenu: ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => React.JSX.Element;
 export default MobileMenu;