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

package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js

@@ -1,80 +1,31 @@
+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;
+
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
 import { VerticalTabs } from '../Tabs';
 import { Size } from '..';
 import { Z_INDEXES } from '../styles/z-indexes';
-const flowDown = keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const Menu = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background-color: ${COLORS.white};
-  box-sizing: border-box;
-  display: none;
-  right: -8px;
-  min-width: 300px;
-  -webkit-animation: ${flowDown} 0.2s ease-in-out;
-  animation: ${flowDown} 0.2s ease-in-out;
-  position: absolute;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  z-index: ${Z_INDEXES.dropdown};
-
-  top: 12px;
-  ${BREAKPOINTS.SMALL} {
-    top: 18px;
-  }
-  ${BREAKPOINTS.MEDIUM} {
-    top: 24px;
-  }
-
-  .open & {
-    display: block;
-  }
-`;
-const MenuSection = styled.li`
-  padding: 8px 0;
-  position: relative;
+import { jsx as _jsx } from "react/jsx-runtime";
+var flowDown = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var Menu = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
+var MenuSection = styled.li(_templateObject3 || (_templateObject3 = _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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
 
-  &:not(:first-of-type)::before {
-    content: '';
-    position: absolute;
-    background: ${COLORS.neutral_100};
-    height: 1px;
-    top: 0;
-    left: 16px;
-    right: 16px;
-  }
+var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
+  var clickMenuAction = _ref.clickMenuAction,
+      navigationOptions = _ref.navigationOptions;
 
-  .disabled-link {
-    color: #21212150;
-    pointer-events: none;
-    key-events: none;
-  }
-`;
-const MenuSectionList = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0 2px;
-`;
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      entries = _React$useState2[0],
+      setEntries = _React$useState2[1];
 
-const ExtendedMainMenu = ({
-  clickMenuAction,
-  navigationOptions
-}) => {
-  const [entries, setEntries] = React.useState([]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     function handleKeyPress(e) {
       if (e.keyCode === 27) {
         clickMenuAction();
@@ -82,12 +33,12 @@ const ExtendedMainMenu = ({
     }
 
     document.addEventListener('keydown', handleKeyPress, false);
-    return () => {
+    return function () {
       document.removeEventListener('keydown', handleKeyPress, false);
     };
   }, [clickMenuAction]);
-  React.useEffect(() => {
-    const list = navigationOptions?.map(n => {
+  React.useEffect(function () {
+    var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
       return {
         requiredLine: n.label,
         to: n.to,
@@ -98,15 +49,19 @@ const ExtendedMainMenu = ({
     });
     setEntries(list);
   }, [navigationOptions]);
-  return /*#__PURE__*/React.createElement(Menu, {
+  return /*#__PURE__*/_jsx(Menu, {
     onClick: clickMenuAction,
     role: "menu",
-    "aria-labelledby": "UserMenuButton"
-  }, /*#__PURE__*/React.createElement(MenuSection, null, /*#__PURE__*/React.createElement(MenuSectionList, null, /*#__PURE__*/React.createElement(VerticalTabs, {
-    key: "ExtendedMenu",
-    entries: entries,
-    size: Size.Medium
-  }))));
+    "aria-labelledby": "UserMenuButton",
+    children: /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsx(MenuSectionList, {
+        children: /*#__PURE__*/_jsx(VerticalTabs, {
+          entries: entries,
+          size: Size.Medium
+        }, "ExtendedMenu")
+      })
+    })
+  });
 };
 
 ExtendedMainMenu.propTypes = {

package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["React","styled","keyframes","BREAKPOINTS","COLORS","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","entries","setEntries","useState","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Medium"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AAGA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,SAA7B;AAEA,SAASC,IAAT,QAAqB,IAArB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,QAAQ,GAAGN,SAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,MAAMO,IAAI,GAAGR,MAAM,CAACS,EAAG;AACvB;AACA;AACA;AACA,sBAAsBN,MAAM,CAACO,KAAM;AACnC;AACA;AACA;AACA;AACA,uBAAuBH,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA;AACA,aAAaD,SAAS,CAACK,QAAS;AAChC;AACA;AACA,IAAIT,WAAW,CAACU,KAAM;AACtB;AACA;AACA,IAAIV,WAAW,CAACW,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA,CA3BA;AA6BA,MAAMC,WAAW,GAAGd,MAAM,CAACe,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBZ,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAG;AAClC;AACA;AACA;AACA,CAJA;;AAWA,MAAMS,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,eAAF;AAAmBC,EAAAA;AAAnB,CAAD,KAAmD;AAC1E,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBvB,KAAK,CAACwB,QAAN,CAAmC,EAAnC,CAA9B;AACAxB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,MAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBR,QAAAA,eAAe;AAChB;AACF;;AAEDS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,MAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,eAAD,CAXH;AAaApB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,MAAM;AACpB,UAAMO,IAAI,GAAGX,iBAAiB,EAAEY,GAAnB,CAAuBC,CAAC,IAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAjB,IAAAA,UAAU,CAACS,IAAD,CAAV;AACD,GALD,EAKG,CAACX,iBAAD,CALH;AAOA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB;AAA5D,kBACE,oBAAC,WAAD,qBACE,oBAAC,eAAD,qBACE,oBAAC,YAAD;AAAc,IAAA,GAAG,EAAC,cAAlB;AAAiC,IAAA,OAAO,EAAEE,OAA1C;AAAmD,IAAA,IAAI,EAAEhB,IAAI,CAACmC;AAA9D,IADF,CADF,CADF,CADF;AASD,CA/BD;;;AAJErB,EAAAA,e;AACAC,EAAAA,iB;;AAoCF,eAAeF,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { NavOption } from '../types';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { VerticalTabs } from '../Tabs';\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\nimport { Size } from '..';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\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  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\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 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: NavOption[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\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  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"file":"ExtendedMainMenu.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["React","styled","keyframes","BREAKPOINTS","COLORS","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Medium"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AAGA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,SAA7B;AAEA,SAASC,IAAT,QAAqB,IAArB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAEA,IAAMC,QAAQ,GAAGN,SAAH,qMAAd;AAWA,IAAMO,IAAI,GAAGR,MAAM,CAACS,EAAV,kiBAIYN,MAAM,CAACO,KAJnB,EASaH,QATb,EAUKA,QAVL,EAcGD,SAAS,CAACK,QAdb,EAiBNT,WAAW,CAACU,KAjBN,EAoBNV,WAAW,CAACW,MApBN,CAAV;AA6BA,IAAMC,WAAW,GAAGd,MAAM,CAACe,EAAV,sYAOCZ,MAAM,CAACa,WAPR,CAAjB;AAqBA,IAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAV,+HAArB;;AAWA,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BrB,KAAK,CAACsB,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAxB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBR,QAAAA,eAAe;AAChB;AACF;;AAEDS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,eAAD,CAXH;AAaApB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGX,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEY,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAhB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACX,iBAAD,CALH;AAOA,sBACE,KAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB,gBAA5D;AAAA,2BACE,KAAC,WAAD;AAAA,6BACE,KAAC,eAAD;AAAA,+BACE,KAAC,YAAD;AAAiC,UAAA,OAAO,EAAEG,OAA1C;AAAmD,UAAA,IAAI,EAAEjB,IAAI,CAACmC;AAA9D,WAAkB,cAAlB;AADF;AADF;AADF,IADF;AASD,CA/BD;;;AAJErB,EAAAA,e;AACAC,EAAAA,iB;;AAoCF,eAAeF,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { NavOption } from '../types';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { VerticalTabs } from '../Tabs';\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\nimport { Size } from '..';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\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  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\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 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: NavOption[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\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  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\n"],"file":"ExtendedMainMenu.js"}

package/dist/esm/GlobalNavigationBar/GlobalNavigationBar.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 Logo from './Logo';
@@ -13,139 +18,101 @@ import UserMenu from './UserMenu/UserMenu';
 import useClickOutside from '../hooks/useClickOutside';
 import { Menu as MobileMenuWrapper } from './mobile/CommonStyles';
 import { Z_INDEXES } from '../styles/z-indexes';
-const HeaderWrapper = styled.header`
-  background: white;
-  border-bottom: 1px solid ${COLORS.neutral_200};
-  
-  z-index: ${Z_INDEXES.sticky_menu};
-  position: relative;
-  
-  height: 48px;
+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 HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  border-bottom: 1px solid ", ";\n  \n  z-index: ", ";\n  position: relative;\n  \n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
+var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var RightSide = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: 0 0 0 auto;\n"])));
+var MenuWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: ", ";\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: hidden;\n  bottom: 0;\n  right: 0;\n  z-index: ", ";\n"])), function (props) {
+  return props.isVisible ? 'flex' : 'none';
+}, Z_INDEXES.backdrop);
+var UserMenuWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  margin-left: ", ";\n  position: absolute;\n  right: ", ";\n  top: 56px;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), COLORS.white, function (props) {
+  return props.floatRight ? 'auto' : 'unset';
+}, function (props) {
+  return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
+}, COLORS.white);
+var HamburgerButton = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border-width: 0;\n  background-color: ", ";\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), COLORS.white, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM);
 
-  ${BREAKPOINTS.SMALL} {
-    height: 56px;
-  }
-  ${BREAKPOINTS.MEDIUM} {
-    height: 64px;
-  }
+/**
+ * @param props
+ * @constructor
+ * @description This component is a global navigation header bar
+ */
+var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
+  var _document2, _document2$getElement, _document2$getElement2;
 
-  @media all and (-ms-high-contrast: none) {
-    height: auto;
-  }
+  var name = _ref.name,
+      mainNavigationOptions = _ref.mainNavigationOptions,
+      secondaryNavigationOptions = _ref.secondaryNavigationOptions,
+      secondaryButton = _ref.secondaryButton,
+      actions = _ref.actions,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      signout = _ref.signout,
+      isAuthenticated = _ref.isAuthenticated,
+      mobileActions = _ref.mobileActions,
+      notifications = _ref.notifications,
+      switcherAction = _ref.switcherAction,
+      _ref$reverseRightSide = _ref.reverseRightSideOrder,
+      reverseRightSideOrder = _ref$reverseRightSide === void 0 ? false : _ref$reverseRightSide,
+      showBetaTag = _ref.showBetaTag,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      accountMenuHeader = _ref.accountMenuHeader,
+      signOutLabel = _ref.signOutLabel,
+      useUserMenu = _ref.useUserMenu,
+      mainLogoTo = _ref.mainLogoTo,
+      trackLogoClick = _ref.trackLogoClick,
+      testId = _ref.testId,
+      _ref$useMaxWidth = _ref.useMaxWidth,
+      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth;
 
-  @media print {
-    border-bottom: none;
-  }
-`;
-const RowLayout = styled.div`
-  display: flex;
-`;
-const RightSide = styled.div`
-  display: flex;
-  margin: 0 0 0 auto;
-`;
-const MenuWrapper = styled.div`
-  background: rgba(0, 0, 0, 0.5);
-  display: ${props => props.isVisible ? 'flex' : 'none'};
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  overflow-y: hidden;
-  bottom: 0;
-  right: 0;
-  z-index: ${Z_INDEXES.backdrop};
-`;
-const UserMenuWrapper = styled.div`
-  background-color: ${COLORS.white};
-  display: flex;
-  margin-left: ${props => props.floatRight ? 'auto' : 'unset'};
-  position: absolute;
-  right: ${props => props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%'};
-  top: 56px;
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showMenu = _React$useState2[0],
+      setShowMenu = _React$useState2[1];
 
-  &:focus-within,
-  &:hover,
-  &.open {
-    background: ${COLORS.white};
-  }
-`;
-const HamburgerButton = styled.button`
-  border-width: 0;
-  background-color: ${COLORS.white};
-  height: 48px;
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      showUserMenu = _React$useState4[0],
+      setShowUserMenu = _React$useState4[1];
 
-  ${BREAKPOINTS.SMALL} {
-    height: 56px;
-  }
-  ${BREAKPOINTS.MEDIUM} {
-    height: 64px;
-  }
-  &:hover {
-    cursor: pointer;
-  }
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      showMobileUserMenu = _React$useState6[0],
+      setShowMobileUserMenu = _React$useState6[1];
 
-  ${BREAKPOINTS.MEDIUM} {
-    display: none;
-  }
-`;
+  var menuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
+  var rightSideRef = React.useRef(null);
 
-/**
- * @param props
- * @constructor
- * @description This component is a global navigation header bar
- */
-const GlobalNavigationBar = ({
-  name,
-  mainNavigationOptions,
-  secondaryNavigationOptions,
-  secondaryButton,
-  actions,
-  firstName,
-  lastName,
-  email,
-  organizationName,
-  signout,
-  isAuthenticated,
-  mobileActions,
-  notifications,
-  switcherAction,
-  reverseRightSideOrder = false,
-  showBetaTag,
-  accountSection,
-  organizationSection,
-  supportSection,
-  accountMenuHeader,
-  signOutLabel,
-  useUserMenu,
-  mainLogoTo,
-  trackLogoClick,
-  testId,
-  useMaxWidth = true
-}) => {
-  const [showMenu, setShowMenu] = React.useState(false);
-  const [showUserMenu, setShowUserMenu] = React.useState(false);
-  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState(false);
-  const menuRef = React.useRef(null);
-  const userMenuRef = React.useRef(null);
-  const rightSideRef = React.useRef(null);
-  const [avatarRight, setAvatarRight] = React.useState(0);
+  var _React$useState7 = React.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      avatarRight = _React$useState8[0],
+      setAvatarRight = _React$useState8[1];
 
-  const handleClickMenuAction = () => {
+  var handleClickMenuAction = function handleClickMenuAction() {
     setShowMenu(false);
   };
 
-  useClickOutside(userMenuRef, () => showUserMenu ? setShowUserMenu(false) : null);
-  useClickOutside(menuRef, () => {
+  useClickOutside(userMenuRef, function () {
+    return showUserMenu ? setShowUserMenu(false) : null;
+  });
+  useClickOutside(menuRef, function () {
     if (showMenu) {
       setShowMobileUserMenu(false);
       setShowMenu(false);
     }
   });
-  React.useEffect(() => {
-    const handleResize = () => {
-      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      var _document, _document$getElementB, _document$getElementB2;
+
+      var right = (_document = document) === null || _document === void 0 ? void 0 : (_document$getElementB = _document.getElementById('avatarContainer')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.getBoundingClientRect()) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.right;
 
       if (right) {
         setAvatarRight(right);
@@ -154,100 +121,121 @@ const GlobalNavigationBar = ({
 
     handleResize();
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderWrapper, {
-    "data-testid": testId
-  }, /*#__PURE__*/React.createElement(PageWidth, {
-    useMaxWidth: useMaxWidth
-  }, /*#__PURE__*/React.createElement(RowLayout, null, /*#__PURE__*/React.createElement(Logo, {
-    name: name || '',
-    showBetaTag: showBetaTag,
-    onClick: trackLogoClick,
-    to: mainLogoTo
-  }), isAuthenticated && /*#__PURE__*/React.createElement(MainMenu, {
-    navigationOptions: mainNavigationOptions || [],
-    rightSideRef: rightSideRef
-  }), /*#__PURE__*/React.createElement(RightSide, {
-    className: "GlobalNavigationRightSide",
-    ref: rightSideRef
-  }, reverseRightSideOrder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Actions, {
-    actions: actions,
-    firstName: firstName || '',
-    lastName: lastName || '',
-    hideOnLowWidth: true,
-    useUserMenu: useUserMenu,
-    setShowUserMenu: setShowUserMenu
-  }), /*#__PURE__*/React.createElement(RightSideNav, {
-    navigationOptions: secondaryNavigationOptions,
-    secondaryButton: secondaryButton
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RightSideNav, {
-    navigationOptions: secondaryNavigationOptions,
-    secondaryButton: secondaryButton
-  }), /*#__PURE__*/React.createElement(Actions, {
-    actions: actions,
-    firstName: firstName || '',
-    lastName: lastName || '',
-    hideOnLowWidth: true,
-    useUserMenu: useUserMenu,
-    setShowUserMenu: setShowUserMenu
-  })), /*#__PURE__*/React.createElement(HamburgerButton, {
-    onClick: () => setShowMenu(!showMenu),
-    hidden: !isAuthenticated
-  }, /*#__PURE__*/React.createElement(Menu, {
-    size: "24px"
-  })))))), /*#__PURE__*/React.createElement(MenuWrapper, {
-    className: showMenu ? 'open' : 'closed',
-    isVisible: showMenu
-  }, /*#__PURE__*/React.createElement(MobileMenuWrapper, {
-    ref: menuRef,
-    onClick: () => {},
-    role: "menu",
-    "aria-labelledby": "UserMenuButton"
-  }, /*#__PURE__*/React.createElement(MobileMenu, {
-    name: name || '',
-    clickMenuAction: () => {
-      setShowMobileUserMenu(false);
-      handleClickMenuAction();
-    },
-    navigationOptions: mainNavigationOptions || [],
-    secondaryNavigationOptions: secondaryNavigationOptions,
-    secondaryButton: secondaryButton,
-    firstName: firstName || '',
-    lastName: lastName || '',
-    email: email || '',
-    signout: signout,
-    notifications: notifications,
-    actions: mobileActions,
-    switcherAction: switcherAction,
-    isAuthenticated: isAuthenticated,
-    accountSection: accountSection || [],
-    organizationSection: organizationSection || [],
-    supportSection: supportSection || [],
-    accountMenuHeader: accountMenuHeader || '',
-    signOutLabel: signOutLabel || '',
-    organizationName: organizationName || '',
-    useUserMenu: useUserMenu,
-    showUserMenu: showMobileUserMenu,
-    setShowUserMenu: setShowMobileUserMenu
-  }))), useUserMenu && /*#__PURE__*/React.createElement(UserMenuWrapper, {
-    ref: userMenuRef,
-    className: showUserMenu ? 'open' : 'closed',
-    floatRight: false,
-    offsetRight: avatarRight,
-    "data-testid": "testUserMenuWrapper"
-  }, /*#__PURE__*/React.createElement(UserMenu, {
-    firstName: firstName || '',
-    lastName: lastName || '',
-    email: email || '',
-    organizationName: organizationName || '',
-    clickMenuAction: () => setShowUserMenu(false),
-    accountSection: accountSection,
-    organizationSection: organizationSection,
-    supportSection: supportSection,
-    signOut: signout,
-    signOutLabel: signOutLabel || ''
-  })));
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_document2 = document) === null || _document2 === void 0 ? void 0 : (_document2$getElement = _document2.getElementById('avatarContainer')) === null || _document2$getElement === void 0 ? void 0 : (_document2$getElement2 = _document2$getElement.getBoundingClientRect()) === null || _document2$getElement2 === void 0 ? void 0 : _document2$getElement2.right]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(HeaderWrapper, {
+      "data-testid": testId,
+      children: /*#__PURE__*/_jsx(PageWidth, {
+        useMaxWidth: useMaxWidth,
+        children: /*#__PURE__*/_jsxs(RowLayout, {
+          children: [/*#__PURE__*/_jsx(Logo, {
+            name: name || '',
+            showBetaTag: showBetaTag,
+            onClick: trackLogoClick,
+            to: mainLogoTo
+          }), isAuthenticated && /*#__PURE__*/_jsx(MainMenu, {
+            navigationOptions: mainNavigationOptions || [],
+            rightSideRef: rightSideRef
+          }), /*#__PURE__*/_jsxs(RightSide, {
+            className: "GlobalNavigationRightSide",
+            ref: rightSideRef,
+            children: [reverseRightSideOrder ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Actions, {
+                actions: actions,
+                firstName: firstName || '',
+                lastName: lastName || '',
+                hideOnLowWidth: true,
+                useUserMenu: useUserMenu,
+                setShowUserMenu: setShowUserMenu
+              }), /*#__PURE__*/_jsx(RightSideNav, {
+                navigationOptions: secondaryNavigationOptions,
+                secondaryButton: secondaryButton
+              })]
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(RightSideNav, {
+                navigationOptions: secondaryNavigationOptions,
+                secondaryButton: secondaryButton
+              }), /*#__PURE__*/_jsx(Actions, {
+                actions: actions,
+                firstName: firstName || '',
+                lastName: lastName || '',
+                hideOnLowWidth: true,
+                useUserMenu: useUserMenu,
+                setShowUserMenu: setShowUserMenu
+              })]
+            }), /*#__PURE__*/_jsx(HamburgerButton, {
+              onClick: function onClick() {
+                return setShowMenu(!showMenu);
+              },
+              hidden: !isAuthenticated,
+              children: /*#__PURE__*/_jsx(Menu, {
+                size: "24px"
+              })
+            })]
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(MenuWrapper, {
+      className: showMenu ? 'open' : 'closed',
+      isVisible: showMenu,
+      children: /*#__PURE__*/_jsx(MobileMenuWrapper, {
+        ref: menuRef,
+        onClick: function onClick() {},
+        role: "menu",
+        "aria-labelledby": "UserMenuButton",
+        children: /*#__PURE__*/_jsx(MobileMenu, {
+          name: name || '',
+          clickMenuAction: function clickMenuAction() {
+            setShowMobileUserMenu(false);
+            handleClickMenuAction();
+          },
+          navigationOptions: mainNavigationOptions || [],
+          secondaryNavigationOptions: secondaryNavigationOptions,
+          secondaryButton: secondaryButton,
+          firstName: firstName || '',
+          lastName: lastName || '',
+          email: email || '',
+          signout: signout,
+          notifications: notifications,
+          actions: mobileActions,
+          switcherAction: switcherAction,
+          isAuthenticated: isAuthenticated,
+          accountSection: accountSection || [],
+          organizationSection: organizationSection || [],
+          supportSection: supportSection || [],
+          accountMenuHeader: accountMenuHeader || '',
+          signOutLabel: signOutLabel || '',
+          organizationName: organizationName || '',
+          useUserMenu: useUserMenu,
+          showUserMenu: showMobileUserMenu,
+          setShowUserMenu: setShowMobileUserMenu
+        })
+      })
+    }), useUserMenu && /*#__PURE__*/_jsx(UserMenuWrapper, {
+      ref: userMenuRef,
+      className: showUserMenu ? 'open' : 'closed',
+      floatRight: false,
+      offsetRight: avatarRight,
+      "data-testid": "testUserMenuWrapper",
+      children: /*#__PURE__*/_jsx(UserMenu, {
+        firstName: firstName || '',
+        lastName: lastName || '',
+        email: email || '',
+        organizationName: organizationName || '',
+        clickMenuAction: function clickMenuAction() {
+          return setShowUserMenu(false);
+        },
+        accountSection: accountSection,
+        organizationSection: organizationSection,
+        supportSection: supportSection,
+        signOut: signout,
+        signOutLabel: signOutLabel || ''
+      })
+    })]
+  });
 };
 
 GlobalNavigationBar.propTypes = {