@laerdal/life-react-components 1.8.0-dev.16 → 1.8.0-dev.17

package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = require("../../Button");
+
+var _styles = require("../../styles");
+
+var _Avatar = _interopRequireWildcard(require("../Avatar"));
+
+var _MenuLink = _interopRequireDefault(require("./MenuLink"));
+
+var _types = require("../../types");
+
+var _CommonStyles = require("../mobile/CommonStyles");
+
+var _typography = require("../../styles/typography");
+
+var _zIndexes = require("../../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ", ";\n  z-index: ", ";\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.COLORS.neutral_200, _zIndexes.Z_INDEXES.fixed_menu);
+
+var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), _styles.COLORS.neutral_100);
+
+var MenuSectionList = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), _CommonStyles.UserMenuSectionListStyling);
+
+var StyledAvatarContainer = (0, _styledComponents.default)(_Avatar.AvatarContainer)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n"])));
+
+var AvatarAndName = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ", "\n  }\n  span {\n    margin: 0 0 0 20px;\n    ", "\n  }\n"])), (0, _typography.HeadlineXXSStyling)(_styles.COLORS.neutral_600), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+
+var NameAndEmail = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var OrganizationName = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 25px;\n  ", "\n"])), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var UserMenu = function UserMenu(_ref) {
+  var firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      clickMenuAction = _ref.clickMenuAction,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      signOut = _ref.signOut,
+      signOutLabel = _ref.signOutLabel;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
+    onClick: clickMenuAction,
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarAndName, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAvatarContainer, {
+        hidePadding: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          size: 48,
+          firstName: firstName,
+          lastName: lastName,
+          color: _styles.COLORS.primary_500,
+          profileMenuLink: "#TODO"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(NameAndEmail, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          "data-hj-suppress": true,
+          children: "".concat(firstName, " ").concat(lastName)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          "data-hj-suppress": true,
+          children: email
+        })]
+      })]
+    }, "AvatarAndNameSection"), accountSection && (accountSection === null || accountSection === void 0 ? void 0 : accountSection.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: accountSection === null || accountSection === void 0 ? void 0 : accountSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuLink.default, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })
+    }, "MobileAccountSection"), organizationSection && (organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OrganizationName, {
+        children: organizationName || ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuLink.default, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileOrganizationSection"), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSectionList, {
+        children: [supportSection === null || supportSection === void 0 ? void 0 : supportSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuLink.default, {
+            isExternal: element.isExternal,
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        }), signOut && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+          width: "90%",
+          className: "UserMenuLink sign-out",
+          variant: "secondary",
+          size: _types.Size.Large,
+          onClick: function onClick(e) {
+            e.preventDefault();
+            signOut(e);
+          },
+          children: signOutLabel
+        })]
+      })
+    }, "MobileSupportSection")]
+  });
+};
+
+UserMenu.propTypes = {
+  firstName: _propTypes.default.string.isRequired,
+  lastName: _propTypes.default.string.isRequired,
+  email: _propTypes.default.string.isRequired,
+  organizationName: _propTypes.default.string.isRequired,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  accountSection: _propTypes.default.array,
+  organizationSection: _propTypes.default.array,
+  supportSection: _propTypes.default.array,
+  signOut: _propTypes.default.func,
+  signOutLabel: _propTypes.default.string
+};
+var _default = UserMenu;
+exports.default = _default;
+//# sourceMappingURL=UserMenu.cjs.map

package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","Z_INDEXES","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","UserMenuSectionListStyling","StyledAvatarContainer","AvatarContainer","AvatarAndName","div","neutral_600","ComponentTextStyle","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Size","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ${COLORS.neutral_200};\n  z-index: ${Z_INDEXES.fixed_menu};\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst NameAndEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n  margin-left: 25px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <AvatarAndName key=\"AvatarAndNameSection\">\n        <StyledAvatarContainer hidePadding={true}>\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n        </StyledAvatarContainer>\n        <NameAndEmail>\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n          <span data-hj-suppress>{email}</span>\n        </NameAndEmail>\n      </AvatarAndName>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <MenuSectionList>\n            {accountSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MobileOrganizationSection\">\n          <OrganizationName>{organizationName || ''}</OrganizationName>\n          <MenuSectionList>\n            {organizationSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      <MenuSection key=\"MobileSupportSection\">\n        <MenuSectionList>\n          {supportSection?.map(element => (\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n          ))}\n          {signOut && (\n            <Button\n              width=\"90%\"\n              className=\"UserMenuLink sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.cjs"}

package/dist/GlobalNavigationBar/UserMenu/UserMenu.d.ts

@@ -0,0 +1,15 @@
+import { UserMenuItem } from '../../types';
+interface Props {
+    firstName: string;
+    lastName: string;
+    email: string;
+    organizationName: string;
+    clickMenuAction: () => void;
+    accountSection?: UserMenuItem[];
+    organizationSection?: UserMenuItem[];
+    supportSection?: UserMenuItem[];
+    signOut?: (e: any) => void;
+    signOutLabel?: string;
+}
+declare const UserMenu: ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => JSX.Element;
+export default UserMenu;

package/dist/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -0,0 +1,135 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '../../Button';
+import { COLORS, ComponentTextStyle } from '../../styles';
+import Avatar, { AvatarContainer } from '../Avatar';
+import MenuLink from './MenuLink';
+import { Size } from '../../types';
+import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { ComponentXSStyling, HeadlineXXSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ", ";\n  z-index: ", ";\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n"])), COLORS.white, flowDown, flowDown, COLORS.neutral_200, Z_INDEXES.fixed_menu);
+var MenuSection = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), COLORS.neutral_100);
+var MenuSectionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
+var StyledAvatarContainer = styled(AvatarContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n"])));
+var AvatarAndName = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ", "\n  }\n  span {\n    margin: 0 0 0 20px;\n    ", "\n  }\n"])), HeadlineXXSStyling(COLORS.neutral_600), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var NameAndEmail = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var OrganizationName = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: 25px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+
+var UserMenu = function UserMenu(_ref) {
+  var firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      clickMenuAction = _ref.clickMenuAction,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      signOut = _ref.signOut,
+      signOutLabel = _ref.signOutLabel;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/_jsxs(Menu, {
+    onClick: clickMenuAction,
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(AvatarAndName, {
+      children: [/*#__PURE__*/_jsx(StyledAvatarContainer, {
+        hidePadding: true,
+        children: /*#__PURE__*/_jsx(Avatar, {
+          size: 48,
+          firstName: firstName,
+          lastName: lastName,
+          color: COLORS.primary_500,
+          profileMenuLink: "#TODO"
+        })
+      }), /*#__PURE__*/_jsxs(NameAndEmail, {
+        children: [/*#__PURE__*/_jsx("h5", {
+          "data-hj-suppress": true,
+          children: "".concat(firstName, " ").concat(lastName)
+        }), /*#__PURE__*/_jsx("span", {
+          "data-hj-suppress": true,
+          children: email
+        })]
+      })]
+    }, "AvatarAndNameSection"), accountSection && (accountSection === null || accountSection === void 0 ? void 0 : accountSection.length) > 0 && /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsx(MenuSectionList, {
+        children: accountSection === null || accountSection === void 0 ? void 0 : accountSection.map(function (element) {
+          return /*#__PURE__*/_jsx(MenuLink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })
+    }, "MobileAccountSection"), organizationSection && (organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(OrganizationName, {
+        children: organizationName || ''
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.map(function (element) {
+          return /*#__PURE__*/_jsx(MenuLink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileOrganizationSection"), /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsxs(MenuSectionList, {
+        children: [supportSection === null || supportSection === void 0 ? void 0 : supportSection.map(function (element) {
+          return /*#__PURE__*/_jsx(MenuLink, {
+            isExternal: element.isExternal,
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        }), signOut && /*#__PURE__*/_jsx(Button, {
+          width: "90%",
+          className: "UserMenuLink sign-out",
+          variant: "secondary",
+          size: Size.Large,
+          onClick: function onClick(e) {
+            e.preventDefault();
+            signOut(e);
+          },
+          children: signOutLabel
+        })]
+      })
+    }, "MobileSupportSection")]
+  });
+};
+
+UserMenu.propTypes = {
+  firstName: _pt.string.isRequired,
+  lastName: _pt.string.isRequired,
+  email: _pt.string.isRequired,
+  organizationName: _pt.string.isRequired,
+  clickMenuAction: _pt.func.isRequired,
+  accountSection: _pt.array,
+  organizationSection: _pt.array,
+  supportSection: _pt.array,
+  signOut: _pt.func,
+  signOutLabel: _pt.string
+};
+export default UserMenu;
+//# sourceMappingURL=UserMenu.js.map

package/dist/GlobalNavigationBar/UserMenu/UserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Z_INDEXES","Menu","ul","white","neutral_200","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ${COLORS.neutral_200};\n  z-index: ${Z_INDEXES.fixed_menu};\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst NameAndEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n  margin-left: 25px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <AvatarAndName key=\"AvatarAndNameSection\">\n        <StyledAvatarContainer hidePadding={true}>\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n        </StyledAvatarContainer>\n        <NameAndEmail>\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n          <span data-hj-suppress>{email}</span>\n        </NameAndEmail>\n      </AvatarAndName>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <MenuSectionList>\n            {accountSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MobileOrganizationSection\">\n          <OrganizationName>{organizationName || ''}</OrganizationName>\n          <MenuSectionList>\n            {organizationSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      <MenuSection key=\"MobileSupportSection\">\n        <MenuSectionList>\n          {supportSection?.map(element => (\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n          ))}\n          {signOut && (\n            <Button\n              width=\"90%\"\n              className=\"UserMenuLink sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}

package/dist/GlobalNavigationBar/index.cjs

@@ -2,12 +2,23 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  GlobalNavigationBar: true
-};
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.default;
+  }
+});
+Object.defineProperty(exports, "AvatarContainer", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.AvatarContainer;
+  }
+});
 Object.defineProperty(exports, "GlobalNavigationBar", {
   enumerable: true,
   get: function get() {
@@ -17,17 +28,9 @@ Object.defineProperty(exports, "GlobalNavigationBar", {
 
 var _GlobalNavigationBar = _interopRequireDefault(require("./GlobalNavigationBar"));
 
-var _types = require("./types");
+var _Avatar = _interopRequireWildcard(require("./Avatar"));
 
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _types[key];
-    }
-  });
-});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.cjs.map

package/dist/GlobalNavigationBar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\n\nexport * from './types';\n\nexport {GlobalNavigationBar};\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\nimport Avatar, { AvatarContainer } from './Avatar';\n\nexport { GlobalNavigationBar, Avatar, AvatarContainer };\n"],"file":"index.cjs"}

package/dist/GlobalNavigationBar/index.d.ts

@@ -1,3 +1,3 @@
 import GlobalNavigationBar from './GlobalNavigationBar';
-export * from './types';
-export { GlobalNavigationBar };
+import Avatar, { AvatarContainer } from './Avatar';
+export { GlobalNavigationBar, Avatar, AvatarContainer };

package/dist/GlobalNavigationBar/index.js

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

package/dist/GlobalNavigationBar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":["GlobalNavigationBar"],"mappings":"AAAA,OAAOA,mBAAP,MAAgC,uBAAhC;AAEA,cAAc,SAAd;AAEA,SAAQA,mBAAR","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\n\nexport * from './types';\n\nexport {GlobalNavigationBar};\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":["GlobalNavigationBar","Avatar","AvatarContainer"],"mappings":"AAAA,OAAOA,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,MAAP,IAAiBC,eAAjB,QAAwC,UAAxC;AAEA,SAASF,mBAAT,EAA8BC,MAA9B,EAAsCC,eAAtC","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\nimport Avatar, { AvatarContainer } from './Avatar';\n\nexport { GlobalNavigationBar, Avatar, AvatarContainer };\n"],"file":"index.js"}

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.RowLayout = exports.Right = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
+exports.flowDown = exports.UserMenuSectionListStyling = exports.SiteName = exports.RowLayout = exports.Right = exports.MenuWrapper = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,7 +17,11 @@ var _styles = require("../../styles");
 
 var _reactRouterDom = require("react-router-dom");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _typography = require("../../styles/typography");
+
+var _zIndexes = require("../../styles/z-indexes");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,35 +35,37 @@ var Button = _styledComponents.default.button(_templateObject2 || (_templateObje
 
 exports.Button = Button;
 var flowLeft = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
-var flowRight = (0, _styledComponents.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])));
-var fadeOut = (0, _styledComponents.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
-exports.fadeOut = fadeOut;
-var fadeIn = (0, _styledComponents.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
-exports.fadeIn = fadeIn;
+var flowRight = (0, _styledComponents.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
 
-var Menu = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.white, _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowRight);
+var Menu = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowLeft, flowRight, flowRight);
 
 exports.Menu = Menu;
 
-var Right = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
+var Right = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
 
 exports.Right = Right;
 
-var SiteName = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), _styles.COLORS.neutral_600);
+var SiteName = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), _styles.COLORS.neutral_600);
 
 exports.SiteName = SiteName;
 
-var MenuSection = _styledComponents.default.li(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+var MenuSection = _styledComponents.default.li(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 
 exports.MenuSection = MenuSection;
 
-var MenuSectionList = _styledComponents.default.ul(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var MenuSectionList = _styledComponents.default.ul(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\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"])));
 
 exports.MenuSectionList = MenuSectionList;
-var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.Z_INDEXES.focus, _styles.focusStyles, _styles.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n    background-color: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.focus, _styles.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
 exports.UserMenuSectionListStyling = UserMenuSectionListStyling;
-var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black));
+var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
 exports.MenuLink = MenuLink;
-var flowDown = (0, _styledComponents.keyframes)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+
+var MenuWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, function (props) {
+  return props.isVisible ? 'flex' : 'none';
+}, _styles.COLORS.white);
+
+exports.MenuWrapper = MenuWrapper;
+var flowDown = (0, _styledComponents.keyframes)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 exports.flowDown = flowDown;
 //# sourceMappingURL=CommonStyles.cjs.map

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","flowDown"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAIO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,uJACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,wQAAf;AAaO,IAAME,OAAO,OAAGF,2BAAH,uMAAb;;AAWA,IAAMG,MAAM,OAAGH,2BAAH,uMAAZ;;;AAWA,IAAMI,IAAI,GAAGX,0BAAOC,GAAV,8eAEKG,eAAOC,KAFZ,EAOJO,kBAAUC,UAPN,EAYbC,oBAAYC,KAZC,EAmBAT,QAnBA,EAwBAE,SAxBA,CAAV;;;;AA4BA,IAAMQ,KAAK,GAAGhB,0BAAOC,GAAV,+HAAX;;;;AAKA,IAAMgB,QAAQ,GAAGjB,0BAAOkB,IAAV,uKACVd,eAAOe,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGpB,0BAAOqB,EAAV,kNAAjB;;;;AAUA,IAAMC,eAAe,GAAGtB,0BAAOuB,EAAV,mPAArB;;;AAeA,IAAMC,0BAA0B,OAAGC,qBAAH,orBAMxBb,kBAAUc,KANc,EAOftB,eAAOuB,UAPQ,EAUxBvB,eAAOwB,WAViB,EAcxBxB,eAAOwB,WAdiB,EAmBxBhB,kBAAUiB,KAnBc,EAqBjCC,mBArBiC,EA4BxBlB,kBAAUmB,MA5Bc,EA6BrB3B,eAAO4B,WA7Bc,EAgCxB5B,eAAO6B,WAhCiB,EAoCxB7B,eAAO6B,WApCiB,EA0CxB7B,eAAO8B,WA1CiB,EA8CxB9B,eAAO8B,WA9CiB,EAiDf9B,eAAO+B,WAjDQ,CAAhC;;AAqDA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,4RAOjB,+BAAkBC,2BAAmBC,OAArC,EAA8CnC,eAAOoC,KAArD,CAPiB,CAAd;;AAgBA,IAAMC,QAAQ,OAAGlC,2BAAH,wNAAd","sourcesContent":["import styled, {css, keyframes} from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../../styles';\nimport {NavLink} from 'react-router-dom';\nimport {ComponentMStyling, ComponentTextStyle} from '../../styles';\nimport {Z_INDEXES} from '../../styles';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\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\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const Menu = styled.div`\n  height: 100%;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n\n  width: 320px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\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\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n\n    a {\n      color: ${COLORS.primary_600};\n    }\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n\n    a {\n      color: ${COLORS.primary_800};\n    }\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","Menu","ul","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,uJACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,qNAAf;;AAWO,IAAME,IAAI,GAAGT,0BAAOU,EAAV,mqBAIKN,eAAOC,KAJZ,EAWJM,oBAAUC,UAXN,EAgBbC,oBAAYC,KAhBC,EAsBQR,QAtBR,EAuBAA,QAvBA,EA4BQE,SA5BR,EA6BAA,SA7BA,CAAV;;;;AAiCA,IAAMO,KAAK,GAAGf,0BAAOC,GAAV,+HAAX;;;;AAKA,IAAMe,QAAQ,GAAGhB,0BAAOiB,IAAV,uKACVb,eAAOc,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGnB,0BAAOoB,EAAV,8MAAjB;;;;AASA,IAAMC,eAAe,GAAGrB,0BAAOU,EAAV,qPAArB;;;AAeA,IAAMY,0BAA0B,OAAGC,qBAAH,oqBAKxBZ,oBAAUa,KALc,EAMfpB,eAAOqB,UANQ,EAQxBrB,eAAOsB,WARiB,EAWxBtB,eAAOsB,WAXiB,EAgBxBf,oBAAUgB,KAhBc,EAiBjCC,mBAjBiC,EAwBxBjB,oBAAUkB,MAxBc,EAyBrBzB,eAAO0B,WAzBc,EA2BxB1B,eAAO2B,WA3BiB,EA8BxB3B,eAAO2B,WA9BiB,EAoCxB3B,eAAO4B,WApCiB,EAuCxB5B,eAAO4B,WAvCiB,EAyCf5B,eAAO6B,WAzCQ,CAAhC;;AA6CA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,4RAOjB,mCAAkBC,+BAAmBC,OAArC,EAA8CjC,eAAOkC,KAArD,CAPiB,CAAd;;;AAeA,IAAMC,WAAW,GAAGvC,0BAAOC,GAAV,+RACFG,eAAOC,KADL,EAEX,UAACmC,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFW,EAYNrC,eAAOC,KAZD,CAAjB;;;AAoBA,IAAMqC,QAAQ,OAAGnC,2BAAH,wNAAd","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\nexport const Menu = styled.ul`\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ${flowRight} 0.3s ease-in-out;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\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\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    a {\n      color: ${COLORS.primary_600};\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    a {\n      color: ${COLORS.primary_800};\n    }\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.cjs"}

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

@@ -1,13 +1,16 @@
 import { NavLink } from 'react-router-dom';
 export declare const RowLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Button: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const fadeOut: import("styled-components").Keyframes;
-export declare const fadeIn: import("styled-components").Keyframes;
-export declare const Menu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Menu: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const Right: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SiteName: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const MenuSection: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const MenuSectionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const UserMenuSectionListStyling: import("styled-components").FlattenSimpleInterpolation;
 export declare const MenuLink: import("styled-components").StyledComponent<typeof NavLink, any, {}, never>;
+export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, MenuWrapperProps, never>;
+interface MenuWrapperProps {
+    isVisible: boolean;
+}
 export declare const flowDown: import("styled-components").Keyframes;
+export {};