@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/GlobalNavigationBar/mobile/ExitMenuButton.js

@@ -1,21 +1,23 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { Close } from '../../icons/systemicons/SystemIcons';
 import { Button } from './CommonStyles';
-const StyledButton = styled(Button)`
-  padding: 0;
-  height: 36px;
-`;
+import { jsx as _jsx } from "react/jsx-runtime";
+var StyledButton = styled(Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n  height: 36px;\n"])));
 
-const ExitMenuButton = ({
-  closeMenu
-}) => {
-  return /*#__PURE__*/React.createElement(StyledButton, {
-    onClick: closeMenu
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: "24px"
-  }));
+var ExitMenuButton = function ExitMenuButton(_ref) {
+  var closeMenu = _ref.closeMenu;
+  return /*#__PURE__*/_jsx(StyledButton, {
+    onClick: closeMenu,
+    children: /*#__PURE__*/_jsx(Close, {
+      size: "24px"
+    })
+  });
 };
 
 ExitMenuButton.propTypes = {

package/dist/esm/GlobalNavigationBar/mobile/ExitMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/ExitMenuButton.tsx"],"names":["React","styled","Close","Button","StyledButton","ExitMenuButton","closeMenu"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,KAAT,QAAsB,qCAAtB;AACA,SAASC,MAAT,QAAuB,gBAAvB;AAEA,MAAMC,YAAY,GAAGH,MAAM,CAACE,MAAD,CAAS;AACpC;AACA;AACA,CAHA;;AASA,MAAME,cAAc,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAqD;AAC1E,sBACE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAEA;AAAvB,kBACE,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAC;AAAZ,IADF,CADF;AAKD,CAND;;;AAHEA,EAAAA,S;;AAWF,eAAeD,cAAf","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.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/ExitMenuButton.tsx"],"names":["React","styled","Close","Button","StyledButton","ExitMenuButton","closeMenu"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,KAAT,QAAsB,qCAAtB;AACA,SAASC,MAAT,QAAuB,gBAAvB;;AAEA,IAAMC,YAAY,GAAGH,MAAM,CAACE,MAAD,CAAT,uGAAlB;;AASA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAAqD;AAAA,MAAlDC,SAAkD,QAAlDA,SAAkD;AAC1E,sBACE,KAAC,YAAD;AAAc,IAAA,OAAO,EAAEA,SAAvB;AAAA,2BACE,KAAC,KAAD;AAAO,MAAA,IAAI,EAAC;AAAZ;AADF,IADF;AAKD,CAND;;;AAHEA,EAAAA,S;;AAWF,eAAeD,cAAf","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.js"}

package/dist/esm/GlobalNavigationBar/mobile/MobileActionMenu.js

@@ -1,39 +1,61 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import Actions from '../Actions';
 import ExitMenuButton from './ExitMenuButton';
 import { Menu, Right, MenuSection, MenuSectionList, MenuLink, RowLayout } from './CommonStyles';
-const FirstRowLayout = styled(RowLayout)`
-  margin-top: 5px;
-`;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FirstRowLayout = styled(RowLayout)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 5px;\n"])));
 
-const MobileActionMenu = ({
-  clickMenuAction,
-  navigationOptions,
-  firstName,
-  lastName,
-  actionList
-}) => {
-  return /*#__PURE__*/React.createElement(Menu, {
+var MobileActionMenu = function MobileActionMenu(_ref) {
+  var clickMenuAction = _ref.clickMenuAction,
+      navigationOptions = _ref.navigationOptions,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      actionList = _ref.actionList;
+  return /*#__PURE__*/_jsxs(Menu, {
     role: "menu",
-    "aria-labelledby": "UserMenuButton"
-  }, /*#__PURE__*/React.createElement(FirstRowLayout, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Actions, {
-    actions: actionList,
-    firstName: firstName,
-    lastName: lastName,
-    isInMobileMenu: true,
-    useUserMenu: false,
-    setShowUserMenu: () => {}
-  })), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(ExitMenuButton, {
-    closeMenu: clickMenuAction
-  }))), /*#__PURE__*/React.createElement(MenuSection, null, /*#__PURE__*/React.createElement(MenuSectionList, null, navigationOptions?.map(no => /*#__PURE__*/React.createElement("li", {
-    key: no.label,
-    onClick: () => clickMenuAction()
-  }, /*#__PURE__*/React.createElement(MenuLink, {
-    to: no.to,
-    role: "menuitem"
-  }, /*#__PURE__*/React.createElement("div", null, no.label)))))));
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(FirstRowLayout, {
+      children: [/*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(Actions, {
+          actions: actionList,
+          firstName: firstName,
+          lastName: lastName,
+          isInMobileMenu: true,
+          useUserMenu: false,
+          setShowUserMenu: function setShowUserMenu() {}
+        })
+      }), /*#__PURE__*/_jsx(Right, {
+        children: /*#__PURE__*/_jsx(ExitMenuButton, {
+          closeMenu: clickMenuAction
+        })
+      })]
+    }), /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsx(MenuSectionList, {
+        children: navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no) {
+          return /*#__PURE__*/_jsx("li", {
+            onClick: function onClick() {
+              return clickMenuAction();
+            },
+            children: /*#__PURE__*/_jsx(MenuLink, {
+              to: no.to,
+              role: "menuitem",
+              children: /*#__PURE__*/_jsx("div", {
+                children: no.label
+              })
+            })
+          }, no.label);
+        })
+      })
+    })]
+  });
 };
 
 MobileActionMenu.propTypes = {

package/dist/esm/GlobalNavigationBar/mobile/MobileActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileActionMenu.tsx"],"names":["React","styled","Actions","ExitMenuButton","Menu","Right","MenuSection","MenuSectionList","MenuLink","RowLayout","FirstRowLayout","MobileActionMenu","clickMenuAction","navigationOptions","firstName","lastName","actionList","map","no","label","to","name","mainNavLabel"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,WAAtB,EAAmCC,eAAnC,EAAoDC,QAApD,EAA8DC,SAA9D,QAA+E,gBAA/E;AAEA,MAAMC,cAAc,GAAGT,MAAM,CAACQ,SAAD,CAAY;AACzC;AACA,CAFA;;AAeA,MAAME,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,eAAF;AAAmBC,EAAAA,iBAAnB;AAAsCC,EAAAA,SAAtC;AAAiDC,EAAAA,QAAjD;AAA2DC,EAAAA;AAA3D,CAAD,KAAoF;AAC3G,sBACE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,uBAAgB;AAAlC,kBACE,oBAAC,cAAD,qBACE,uDACE,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAEA,UAAlB;AAA8B,IAAA,SAAS,EAAEF,SAAzC;AAAoD,IAAA,QAAQ,EAAEC,QAA9D;AAAwE,IAAA,cAAc,EAAE,IAAxF;AAA8F,IAAA,WAAW,EAAE,KAA3G;AAAkH,IAAA,eAAe,EAAE,MAAM,CAAE;AAA3I,IADF,CADF,eAIE,oBAAC,KAAD,qBACE,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAEH;AAA3B,IADF,CAJF,CADF,eASE,oBAAC,WAAD,qBACE,oBAAC,eAAD,QACGC,iBAAiB,EAAEI,GAAnB,CAAuBC,EAAE,iBACxB;AAAI,IAAA,GAAG,EAAEA,EAAE,CAACC,KAAZ;AAAmB,IAAA,OAAO,EAAE,MAAMP,eAAe;AAAjD,kBACE,oBAAC,QAAD;AAAU,IAAA,EAAE,EAAEM,EAAE,CAACE,EAAjB;AAAqB,IAAA,IAAI,EAAC;AAA1B,kBACE,iCAAMF,EAAE,CAACC,KAAT,CADF,CADF,CADD,CADH,CADF,CATF,CADF;AAuBD,CAxBD;;;AAVEE,EAAAA,I;AACAC,EAAAA,Y;AACAT,EAAAA,iB;AAEAD,EAAAA,e;AACAE,EAAAA,S;AACAC,EAAAA,Q;;AA8BF,eAAeJ,gBAAf","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.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileActionMenu.tsx"],"names":["React","styled","Actions","ExitMenuButton","Menu","Right","MenuSection","MenuSectionList","MenuLink","RowLayout","FirstRowLayout","MobileActionMenu","clickMenuAction","navigationOptions","firstName","lastName","actionList","map","no","to","label","name","mainNavLabel"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,WAAtB,EAAmCC,eAAnC,EAAoDC,QAApD,EAA8DC,SAA9D,QAA+E,gBAA/E;;;;AAEA,IAAMC,cAAc,GAAGT,MAAM,CAACQ,SAAD,CAAT,2FAApB;;AAeA,IAAME,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,MAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,uBAAgB,gBAAlC;AAAA,4BACE,MAAC,cAAD;AAAA,8BACE;AAAA,+BACE,KAAC,OAAD;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,KAAC,KAAD;AAAA,+BACE,KAAC,cAAD;AAAgB,UAAA,SAAS,EAAEH;AAA3B;AADF,QAJF;AAAA,MADF,eASE,KAAC,WAAD;AAAA,6BACE,KAAC,eAAD;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,KAAC,QAAD;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;;AA8BF,eAAeJ,gBAAf","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.js"}

package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js

@@ -1,4 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
@@ -13,153 +18,67 @@ import MobileUserMenu from '../UserMenu/MobileUserMenu';
 import { IconButton } from '../../Button';
 import { LaerdalLogo } from '../../assets';
 import { ComponentMStyling, ComponentXSStyling } from '../../styles/typography';
-const SwitchButton = styled.span`
-  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}
-  
-  padding: 0;
-  border: 0;
-  margin: 0 auto 0 12px;
-  line-height: 48px;
-`;
-const BottomPinnedSection = styled.div`
-  position: absolute;
-  left: 0;
-  width: 100%;
-  bottom: 0;
-  border-top: 1px solid ${COLORS.neutral_200};
-`;
-const FirstRowLayout = styled(RowLayout)`
-  margin-top: 10px;
-  padding: 12px;
-`;
-const BottomRowLayout = styled(RowLayout)`
-  margin: 8px auto 0 0;
-  width: 95%;
-  height: 48px;
-  ${BREAKPOINTS.SMALL} {
-    height: 56px;
-  }
-`;
-const StyledNavItem = styled(SwitcherMenuItem)`
-  padding: 0 0 0 20px;
-  margin: 0 2px;
-
-  display: flex;
-  align-items: center;
-  text-align: center;
-  position: relative;
-
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  text-decoration: none;
-
-  svg {
-    margin-right: 16px;
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background-color: transparent;
-  }
-
-  &.active:not(.disabled) {
-    font-weight: bold;
-    &:after {
-      background-color: ${COLORS.primary_500};
-    }
-
-    color: ${COLORS.primary_800};
-    svg path {
-      fill: ${COLORS.primary_800};
-    }
-  }
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var SwitchButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  \n  padding: 0;\n  border: 0;\n  margin: 0 auto 0 12px;\n  line-height: 48px;\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var BottomPinnedSection = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var FirstRowLayout = styled(RowLayout)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  padding: 12px;\n"])));
+var BottomRowLayout = styled(RowLayout)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ", " {\n    height: 56px;\n  }\n"])), BREAKPOINTS.SMALL);
+var StyledNavItem = styled(SwitcherMenuItem)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.primary_500, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_100, COLORS.primary_600, COLORS.primary_20, COLORS.primary_600, COLORS.primary_800, COLORS.primary_100, COLORS.primary_500, COLORS.primary_800, COLORS.primary_500);
+var SwitcherButton = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n\n  line-height: 48px;\n  button:last-child {\n    margin: 0 !important;\n  }\n"])));
 
-  &.disabled {
-    color: ${COLORS.neutral_300};
-    background-color: ${COLORS.neutral_100};
-  }
-
-  &:hover:not(.disabled) {
-    color: ${COLORS.primary_600};
-    background-color: ${COLORS.primary_20};
+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;
 
-    svg path {
-      fill: ${COLORS.primary_600};
-    }
-  }
-
-  &:active:not(.disabled) {
-    color: ${COLORS.primary_800};
-    background-color: ${COLORS.primary_100};
-    box-shadow: none;
-    &:after {
-      background-color: ${COLORS.primary_500};
-    }
-    svg path {
-      fill: ${COLORS.primary_800};
-    }
-  }
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showNotificationMenu = _React$useState2[0],
+      setShowNotificationMenu = _React$useState2[1];
 
-  &:focus:not(.disabled) {
-    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-    outline: none;
-  }
-`;
-const SwitcherButton = styled.div`
-  display: flex;
-  margin-left: auto;
+  var notificationMenuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
+  var userRef = React.useRef(null);
+  var location = useLocation();
 
-  line-height: 48px;
-  button:last-child {
-    margin: 0 !important;
+  if (actions !== null && actions !== void 0 && actions.user) {
+    actions.user = function () {
+      return setShowUserMenu(true);
+    };
   }
-`;
 
-const MobileMenu = ({
-  clickMenuAction,
-  navigationOptions,
-  actions,
-  firstName,
-  lastName,
-  email,
-  signout,
-  notifications,
-  accountSection,
-  organizationSection,
-  supportSection,
-  switcherAction,
-  accountMenuHeader,
-  signOutLabel,
-  organizationName,
-  useUserMenu,
-  showUserMenu,
-  setShowUserMenu
-}) => {
-  const [showNotificationMenu, setShowNotificationMenu] = React.useState(false);
-  const notificationMenuRef = React.useRef(null);
-  const userMenuRef = React.useRef(null);
-  const userRef = React.useRef(null);
-  const location = useLocation();
-
-  if (actions?.user) {
-    actions.user = () => setShowUserMenu(true);
+  if (actions !== null && actions !== void 0 && actions.notification) {
+    actions.notification = function () {
+      return setShowNotificationMenu(true);
+    };
   }
 
-  if (actions?.notification) {
-    actions.notification = () => setShowNotificationMenu(true);
-  }
+  var fireAction = function fireAction(action) {
+    var _ref$current;
 
-  const fireAction = (action, ref = undefined) => {
-    ref?.current?.blur();
+    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();
   };
 
-  const isPressingEnter = e => {
+  var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -169,102 +88,147 @@ const MobileMenu = ({
     return false;
   };
 
-  React.useEffect(() => {
+  React.useEffect(function () {
     clickMenuAction();
   }, [location]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, actions?.notification && /*#__PURE__*/React.createElement(MenuWrapper, {
-    ref: notificationMenuRef,
-    className: showNotificationMenu ? 'open' : '',
-    isVisible: showNotificationMenu
-  }, /*#__PURE__*/React.createElement(MobileActionMenu, {
-    name: "Notifications",
-    clickMenuAction: () => setShowNotificationMenu(false),
-    navigationOptions: notifications,
-    actionList: {
-      notification: () => {}
-    }
-  })), actions?.user && /*#__PURE__*/React.createElement(MenuWrapper, {
-    ref: userMenuRef,
-    className: showUserMenu ? 'open' : '',
-    isVisible: showUserMenu
-  }, /*#__PURE__*/React.createElement(MobileUserMenu, {
-    accountMenuHeader: accountMenuHeader,
-    firstName: firstName,
-    lastName: lastName,
-    email: email,
-    organizationName: organizationName,
-    clickMenuAction: clickMenuAction,
-    accountSection: accountSection,
-    organizationSection: organizationSection,
-    supportSection: supportSection,
-    signOut: signout,
-    signOutLabel: signOutLabel
-  })), /*#__PURE__*/React.createElement(FirstRowLayout, null, firstName && lastName && /*#__PURE__*/React.createElement(AvatarContainer, {
-    id: "avatarContainer",
-    ref: userRef,
-    onClick: actions?.user,
-    onKeyDown: e => isPressingEnter(e) ? fireAction(actions?.user, userRef) : null,
-    inMobileMenu: true,
-    hideOnLowWidth: false
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    size: 36,
-    firstName: firstName,
-    lastName: lastName,
-    color: COLORS.primary_500,
-    profileMenuLink: "#TODO"
-  })), actions?.notification && /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    hideOnLowWidth: false,
-    isInMobileMenu: true,
-    action: () => fireAction(actions?.notification),
-    onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.notification) : null
-  }, /*#__PURE__*/React.createElement(Notification, {
-    size: "24px"
-  })), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Actions, {
-    actions: actions,
-    firstName: firstName,
-    lastName: lastName,
-    isInMobileMenu: true,
-    hideOnLowWidth: false,
-    useUserMenu: useUserMenu,
-    setShowUserMenu: setShowUserMenu
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    variant: "secondary",
-    shape: "circular",
-    action: () => clickMenuAction(),
-    isInMobileMenu: true
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: "24px"
-  })))), /*#__PURE__*/React.createElement(MenuSection, null, /*#__PURE__*/React.createElement(MenuSectionList, null, navigationOptions?.map(no => /*#__PURE__*/React.createElement("li", {
-    key: no.label
-  }, /*#__PURE__*/React.createElement(StyledNavItem, {
-    as: NavLink,
-    exact: no?.exact,
-    to: no.to,
-    onClick: () => {
-      if (no?.onClick) {
-        no?.onClick();
-      }
-    }
-  }, no.label))))), /*#__PURE__*/React.createElement(BottomPinnedSection, null, /*#__PURE__*/React.createElement(MenuSection, {
-    style: {
-      padding: '0 12px 12px 12px',
-      margin: '0'
-    }
-  }, /*#__PURE__*/React.createElement(MenuSectionList, null, /*#__PURE__*/React.createElement(BottomRowLayout, null, /*#__PURE__*/React.createElement(LaerdalLogo, null), switcherAction && /*#__PURE__*/React.createElement(SwitcherButton, null, /*#__PURE__*/React.createElement(SwitchButton, {
-    onClick: () => switcherAction()
-  }, "Switch site"), ' ', /*#__PURE__*/React.createElement(IconButton, {
-    variant: 'secondary',
-    shape: 'circular',
-    hideOnLowWidth: false,
-    isInMobileMenu: true,
-    id: "globalNavAppsButton",
-    action: () => switcherAction(),
-    onKeyPress: e => isPressingEnter(e) ? switcherAction() : null
-  }, /*#__PURE__*/React.createElement(SwitchApp, {
-    size: "24px"
-  }))))))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [(actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/_jsx(MenuWrapper, {
+      ref: notificationMenuRef,
+      className: showNotificationMenu ? 'open' : '',
+      isVisible: showNotificationMenu,
+      children: /*#__PURE__*/_jsx(MobileActionMenu, {
+        name: "Notifications",
+        clickMenuAction: function clickMenuAction() {
+          return setShowNotificationMenu(false);
+        },
+        navigationOptions: notifications,
+        actionList: {
+          notification: function notification() {}
+        }
+      })
+    }), (actions === null || actions === void 0 ? void 0 : actions.user) && /*#__PURE__*/_jsx(MenuWrapper, {
+      ref: userMenuRef,
+      className: showUserMenu ? 'open' : '',
+      isVisible: showUserMenu,
+      children: /*#__PURE__*/_jsx(MobileUserMenu, {
+        accountMenuHeader: accountMenuHeader,
+        firstName: firstName,
+        lastName: lastName,
+        email: email,
+        organizationName: organizationName,
+        clickMenuAction: clickMenuAction,
+        accountSection: accountSection,
+        organizationSection: organizationSection,
+        supportSection: supportSection,
+        signOut: signout,
+        signOutLabel: signOutLabel
+      })
+    }), /*#__PURE__*/_jsxs(FirstRowLayout, {
+      children: [firstName && lastName && /*#__PURE__*/_jsx(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__*/_jsx(Avatar, {
+          size: 36,
+          firstName: firstName,
+          lastName: lastName,
+          color: COLORS.primary_500,
+          profileMenuLink: "#TODO"
+        })
+      }), (actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/_jsx(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__*/_jsx(Notification, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/_jsxs(Right, {
+        children: [/*#__PURE__*/_jsx(Actions, {
+          actions: actions,
+          firstName: firstName,
+          lastName: lastName,
+          isInMobileMenu: true,
+          hideOnLowWidth: false,
+          useUserMenu: useUserMenu,
+          setShowUserMenu: setShowUserMenu
+        }), /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: function action() {
+            return clickMenuAction();
+          },
+          isInMobileMenu: true,
+          children: /*#__PURE__*/_jsx(Close, {
+            size: "24px"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsx(MenuSectionList, {
+        children: navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no) {
+          return /*#__PURE__*/_jsx("li", {
+            children: /*#__PURE__*/_jsx(StyledNavItem, {
+              as: 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__*/_jsx(BottomPinnedSection, {
+      children: /*#__PURE__*/_jsx(MenuSection, {
+        style: {
+          padding: '0 12px 12px 12px',
+          margin: '0'
+        },
+        children: /*#__PURE__*/_jsx(MenuSectionList, {
+          children: /*#__PURE__*/_jsxs(BottomRowLayout, {
+            children: [/*#__PURE__*/_jsx(LaerdalLogo, {}), switcherAction && /*#__PURE__*/_jsxs(SwitcherButton, {
+              children: [/*#__PURE__*/_jsx(SwitchButton, {
+                onClick: function onClick() {
+                  return switcherAction();
+                },
+                children: "Switch site"
+              }), ' ', /*#__PURE__*/_jsx(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__*/_jsx(SwitchApp, {
+                  size: "24px"
+                })
+              })]
+            })]
+          })
+        })
+      })
+    })]
+  });
 };
 
 MobileMenu.propTypes = {