@laerdal/life-react-components 1.4.1-dev.9.full → 1.5.0

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/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: 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() {
+    return _GlobalNavigationBar.default;
+  }
+});
+
+var _GlobalNavigationBar = _interopRequireDefault(require("./GlobalNavigationBar"));
+
+var _Avatar = _interopRequireWildcard(require("./Avatar"));
+
+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

@@ -0,0 +1 @@
+{"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/mobile/CommonStyles.cjs

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styles = require("../../styles");
+
+var _reactRouterDom = require("react-router-dom");
+
+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); }
+
+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 RowLayout = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+
+exports.RowLayout = RowLayout;
+
+var Button = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), _styles.COLORS.white);
+
+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  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
+
+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(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
+
+exports.Right = Right;
+
+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(_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(_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)(_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    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n    box-shadow: none;\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.COLORS.primary_500, _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)(_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 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

@@ -0,0 +1 @@
+{"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","primary_500","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,2vBAKxBZ,oBAAUa,KALc,EAMfpB,eAAOqB,UANQ,EAQxBrB,eAAOsB,WARiB,EAWxBtB,eAAOsB,WAXiB,EAgBxBf,oBAAUgB,KAhBc,EAiBTvB,eAAOwB,WAjBE,EAwBxBjB,oBAAUkB,MAxBc,EAyBrBzB,eAAO0B,WAzBc,EA4BxB1B,eAAO2B,WA5BiB,EA+BxB3B,eAAO2B,WA/BiB,EAqCxB3B,eAAO4B,WArCiB,EAwCxB5B,eAAO4B,WAxCiB,EA0Cf5B,eAAO6B,WA1CQ,CAAhC;;AA8CA,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 } 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    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\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    box-shadow: none;\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/ExitMenuButton.cjs

@@ -0,0 +1,49 @@
+"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 _SystemIcons = require("../../icons/systemicons/SystemIcons");
+
+var _CommonStyles = require("./CommonStyles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+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 StyledButton = (0, _styledComponents.default)(_CommonStyles.Button)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  height: 36px;\n"])));
+
+var ExitMenuButton = function ExitMenuButton(_ref) {
+  var closeMenu = _ref.closeMenu;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    onClick: closeMenu,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+      size: "24px"
+    })
+  });
+};
+
+ExitMenuButton.propTypes = {
+  closeMenu: _propTypes.default.func.isRequired
+};
+var _default = ExitMenuButton;
+exports.default = _default;
+//# sourceMappingURL=ExitMenuButton.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/ExitMenuButton.tsx"],"names":["StyledButton","Button","ExitMenuButton","closeMenu"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,+BAAOC,oBAAP,CAAH,qHAAlB;;AASA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAAqD;AAAA,MAAlDC,SAAkD,QAAlDA,SAAkD;AAC1E,sBACE,qBAAC,YAAD;AAAc,IAAA,OAAO,EAAEA,SAAvB;AAAA,2BACE,qBAAC,kBAAD;AAAO,MAAA,IAAI,EAAC;AAAZ;AADF,IADF;AAKD,CAND;;;AAHEA,EAAAA,S;;eAWaD,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Close } from '../../icons/systemicons/SystemIcons';\nimport { Button } from './CommonStyles';\n\nconst StyledButton = styled(Button)`\n  padding: 0;\n  height: 36px;\n`;\n\ntype Props = {\n  closeMenu: () => void;\n};\n\nconst ExitMenuButton = ({ closeMenu }: Props): React.ReactElement<Props> => {\n  return (\n    <StyledButton onClick={closeMenu}>\n      <Close size=\"24px\" />\n    </StyledButton>\n  );\n};\n\nexport default ExitMenuButton;\n"],"file":"ExitMenuButton.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileActionMenu.cjs

@@ -0,0 +1,91 @@
+"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 _Actions = _interopRequireDefault(require("../Actions"));
+
+var _ExitMenuButton = _interopRequireDefault(require("./ExitMenuButton"));
+
+var _CommonStyles = require("./CommonStyles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+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 FirstRowLayout = (0, _styledComponents.default)(_CommonStyles.RowLayout)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 5px;\n"])));
+
+var MobileActionMenu = function MobileActionMenu(_ref) {
+  var clickMenuAction = _ref.clickMenuAction,
+      navigationOptions = _ref.navigationOptions,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      actionList = _ref.actionList;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.Menu, {
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FirstRowLayout, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
+          actions: actionList,
+          firstName: firstName,
+          lastName: lastName,
+          isInMobileMenu: true,
+          useUserMenu: false,
+          setShowUserMenu: function setShowUserMenu() {}
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.Right, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExitMenuButton.default, {
+          closeMenu: clickMenuAction
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSectionList, {
+        children: navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            onClick: function onClick() {
+              return clickMenuAction();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuLink, {
+              to: no.to,
+              role: "menuitem",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: no.label
+              })
+            })
+          }, no.label);
+        })
+      })
+    })]
+  });
+};
+
+MobileActionMenu.propTypes = {
+  name: _propTypes.default.string.isRequired,
+  mainNavLabel: _propTypes.default.string,
+  navigationOptions: _propTypes.default.array,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  firstName: _propTypes.default.string,
+  lastName: _propTypes.default.string
+};
+var _default = MobileActionMenu;
+exports.default = _default;
+//# sourceMappingURL=MobileActionMenu.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionMenu.tsx"],"names":["FirstRowLayout","RowLayout","MobileActionMenu","clickMenuAction","navigationOptions","firstName","lastName","actionList","map","no","to","label","name","mainNavLabel"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,cAAc,GAAG,+BAAOC,uBAAP,CAAH,yGAApB;;AAeA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAoF;AAAA,MAAjFC,eAAiF,QAAjFA,eAAiF;AAAA,MAAhEC,iBAAgE,QAAhEA,iBAAgE;AAAA,MAA7CC,SAA6C,QAA7CA,SAA6C;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;AAAA,MAAxBC,UAAwB,QAAxBA,UAAwB;AAC3G,sBACE,sBAAC,kBAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,uBAAgB,gBAAlC;AAAA,4BACE,sBAAC,cAAD;AAAA,8BACE;AAAA,+BACE,qBAAC,gBAAD;AAAS,UAAA,OAAO,EAAEA,UAAlB;AAA8B,UAAA,SAAS,EAAEF,SAAzC;AAAoD,UAAA,QAAQ,EAAEC,QAA9D;AAAwE,UAAA,cAAc,EAAE,IAAxF;AAA8F,UAAA,WAAW,EAAE,KAA3G;AAAkH,UAAA,eAAe,EAAE,2BAAM,CAAE;AAA3I;AADF,QADF,eAIE,qBAAC,mBAAD;AAAA,+BACE,qBAAC,uBAAD;AAAgB,UAAA,SAAS,EAAEH;AAA3B;AADF,QAJF;AAAA,MADF,eASE,qBAAC,yBAAD;AAAA,6BACE,qBAAC,6BAAD;AAAA,kBACGC,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEI,GAAnB,CAAuB,UAAAC,EAAE;AAAA,8BACxB;AAAmB,YAAA,OAAO,EAAE;AAAA,qBAAMN,eAAe,EAArB;AAAA,aAA5B;AAAA,mCACE,qBAAC,sBAAD;AAAU,cAAA,EAAE,EAAEM,EAAE,CAACC,EAAjB;AAAqB,cAAA,IAAI,EAAC,UAA1B;AAAA,qCACE;AAAA,0BAAMD,EAAE,CAACE;AAAT;AADF;AADF,aAASF,EAAE,CAACE,KAAZ,CADwB;AAAA,SAAzB;AADH;AADF,MATF;AAAA,IADF;AAuBD,CAxBD;;;AAVEC,EAAAA,I;AACAC,EAAAA,Y;AACAT,EAAAA,iB;AAEAD,EAAAA,e;AACAE,EAAAA,S;AACAC,EAAAA,Q;;eA8BaJ,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { NavOption, ActionOptions } from '../../types';\nimport Actions from '../Actions';\nimport ExitMenuButton from './ExitMenuButton';\nimport { Menu, Right, MenuSection, MenuSectionList, MenuLink, RowLayout } from './CommonStyles';\n\nconst FirstRowLayout = styled(RowLayout)`\n  margin-top: 5px;\n`;\n\ntype Props = {\n  name: string;\n  mainNavLabel?: string;\n  navigationOptions?: NavOption[];\n  actions?: ActionOptions;\n  clickMenuAction: () => void;\n  firstName?: string;\n  lastName?: string;\n  actionList?: ActionOptions;\n};\n\nconst MobileActionMenu = ({ clickMenuAction, navigationOptions, firstName, lastName, actionList }: Props) => {\n  return (\n    <Menu role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <FirstRowLayout>\n        <>\n          <Actions actions={actionList} firstName={firstName} lastName={lastName} isInMobileMenu={true} useUserMenu={false} setShowUserMenu={() => {}} />\n        </>\n        <Right>\n          <ExitMenuButton closeMenu={clickMenuAction} />\n        </Right>\n      </FirstRowLayout>\n      <MenuSection>\n        <MenuSectionList>\n          {navigationOptions?.map(no => (\n            <li key={no.label} onClick={() => clickMenuAction()}>\n              <MenuLink to={no.to} role=\"menuitem\">\n                <div>{no.label}</div>\n              </MenuLink>\n            </li>\n          ))}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default MobileActionMenu;\n"],"file":"MobileActionMenu.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -0,0 +1,290 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+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 _styles = require("../../styles");
+
+var _Actions = _interopRequireDefault(require("../Actions"));
+
+var _SystemIcons = require("../../icons/systemicons/SystemIcons");
+
+var _MobileActionMenu = _interopRequireDefault(require("./MobileActionMenu"));
+
+var _CommonStyles = require("./CommonStyles");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _Switcher = require("../../Switcher");
+
+var _Avatar = _interopRequireWildcard(require("../Avatar"));
+
+var _MobileUserMenu = _interopRequireDefault(require("../UserMenu/MobileUserMenu"));
+
+var _Button = require("../../Button");
+
+var _assets = require("../../assets");
+
+var _typography = require("../../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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 SwitchButton = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  \n  padding: 0;\n  border: 0;\n  margin: 0 auto 0 12px;\n  line-height: 48px;\n"])), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var BottomPinnedSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
+
+var FirstRowLayout = (0, _styledComponents.default)(_CommonStyles.RowLayout)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding: 12px;\n"])));
+var BottomRowLayout = (0, _styledComponents.default)(_CommonStyles.RowLayout)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ", " {\n    height: 56px;\n  }\n"])), _styles.BREAKPOINTS.SMALL);
+var StyledNavItem = (0, _styledComponents.default)(_Switcher.SwitcherMenuItem)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 0 0 20px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    &:after {\n      background-color: ", ";\n    }\n\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    &:after {\n      background-color: ", ";\n    }\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.primary_500, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.primary_600, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+
+var SwitcherButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n\n  line-height: 48px;\n  button:last-child {\n    margin: 0 !important;\n  }\n"])));
+
+var MobileMenu = function MobileMenu(_ref) {
+  var clickMenuAction = _ref.clickMenuAction,
+      navigationOptions = _ref.navigationOptions,
+      actions = _ref.actions,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      signout = _ref.signout,
+      notifications = _ref.notifications,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      switcherAction = _ref.switcherAction,
+      accountMenuHeader = _ref.accountMenuHeader,
+      signOutLabel = _ref.signOutLabel,
+      organizationName = _ref.organizationName,
+      useUserMenu = _ref.useUserMenu,
+      showUserMenu = _ref.showUserMenu,
+      setShowUserMenu = _ref.setShowUserMenu;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      showNotificationMenu = _React$useState2[0],
+      setShowNotificationMenu = _React$useState2[1];
+
+  var notificationMenuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
+  var userRef = React.useRef(null);
+  var location = (0, _reactRouterDom.useLocation)();
+
+  if (actions !== null && actions !== void 0 && actions.user) {
+    actions.user = function () {
+      return setShowUserMenu(true);
+    };
+  }
+
+  if (actions !== null && actions !== void 0 && actions.notification) {
+    actions.notification = function () {
+      return setShowNotificationMenu(true);
+    };
+  }
+
+  var fireAction = function fireAction(action) {
+    var _ref$current;
+
+    var ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.blur();
+    !!action && action();
+  };
+
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  };
+
+  React.useEffect(function () {
+    clickMenuAction();
+  }, [location]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuWrapper, {
+      ref: notificationMenuRef,
+      className: showNotificationMenu ? 'open' : '',
+      isVisible: showNotificationMenu,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionMenu.default, {
+        name: "Notifications",
+        clickMenuAction: function clickMenuAction() {
+          return setShowNotificationMenu(false);
+        },
+        navigationOptions: notifications,
+        actionList: {
+          notification: function notification() {}
+        }
+      })
+    }), (actions === null || actions === void 0 ? void 0 : actions.user) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuWrapper, {
+      ref: userMenuRef,
+      className: showUserMenu ? 'open' : '',
+      isVisible: showUserMenu,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileUserMenu.default, {
+        accountMenuHeader: accountMenuHeader,
+        firstName: firstName,
+        lastName: lastName,
+        email: email,
+        organizationName: organizationName,
+        clickMenuAction: clickMenuAction,
+        accountSection: accountSection,
+        organizationSection: organizationSection,
+        supportSection: supportSection,
+        signOut: signout,
+        signOutLabel: signOutLabel
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FirstRowLayout, {
+      children: [firstName && lastName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.AvatarContainer, {
+        id: "avatarContainer",
+        ref: userRef,
+        onClick: actions === null || actions === void 0 ? void 0 : actions.user,
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.user, userRef) : null;
+        },
+        inMobileMenu: true,
+        hideOnLowWidth: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          size: 36,
+          firstName: firstName,
+          lastName: lastName,
+          color: _styles.COLORS.primary_500,
+          profileMenuLink: "#TODO"
+        })
+      }), (actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: 'secondary',
+        shape: 'circular',
+        hideOnLowWidth: false,
+        isInMobileMenu: true,
+        action: function action() {
+          return fireAction(actions === null || actions === void 0 ? void 0 : actions.notification);
+        },
+        onKeyPress: function onKeyPress(e) {
+          return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.notification) : null;
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Notification, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.Right, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
+          actions: actions,
+          firstName: firstName,
+          lastName: lastName,
+          isInMobileMenu: true,
+          hideOnLowWidth: false,
+          useUserMenu: useUserMenu,
+          setShowUserMenu: setShowUserMenu
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: function action() {
+            return clickMenuAction();
+          },
+          isInMobileMenu: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+            size: "24px"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSectionList, {
+        children: navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledNavItem, {
+              as: _reactRouterDom.NavLink,
+              exact: no === null || no === void 0 ? void 0 : no.exact,
+              to: no.to,
+              onClick: function onClick() {
+                if (no !== null && no !== void 0 && no.onClick) {
+                  no === null || no === void 0 ? void 0 : no.onClick();
+                }
+              },
+              children: no.label
+            })
+          }, no.label);
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomPinnedSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSection, {
+        style: {
+          padding: '0 12px 12px 12px',
+          margin: '0'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MenuSectionList, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomRowLayout, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {}), switcherAction && /*#__PURE__*/(0, _jsxRuntime.jsxs)(SwitcherButton, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchButton, {
+                onClick: function onClick() {
+                  return switcherAction();
+                },
+                children: "Switch site"
+              }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+                variant: 'secondary',
+                shape: 'circular',
+                hideOnLowWidth: false,
+                isInMobileMenu: true,
+                id: "globalNavAppsButton",
+                action: function action() {
+                  return switcherAction();
+                },
+                onKeyPress: function onKeyPress(e) {
+                  return isPressingEnter(e) ? switcherAction() : null;
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.SwitchApp, {
+                  size: "24px"
+                })
+              })]
+            })]
+          })
+        })
+      })
+    })]
+  });
+};
+
+MobileMenu.propTypes = {
+  name: _propTypes.default.string.isRequired,
+  navigationOptions: _propTypes.default.array,
+  secondaryNavigationOptions: _propTypes.default.array,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  firstName: _propTypes.default.string.isRequired,
+  lastName: _propTypes.default.string.isRequired,
+  email: _propTypes.default.string.isRequired,
+  signout: _propTypes.default.func,
+  isAuthenticated: _propTypes.default.bool,
+  notifications: _propTypes.default.array,
+  switcherAction: _propTypes.default.func,
+  accountSection: _propTypes.default.array,
+  organizationSection: _propTypes.default.array,
+  supportSection: _propTypes.default.array,
+  accountMenuHeader: _propTypes.default.string.isRequired,
+  signOutLabel: _propTypes.default.string.isRequired,
+  organizationName: _propTypes.default.string.isRequired,
+  showUserMenu: _propTypes.default.bool.isRequired,
+  setShowUserMenu: _propTypes.default.func.isRequired
+};
+var _default = MobileMenu;
+exports.default = _default;
+//# sourceMappingURL=MobileMenu.cjs.map