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

package/dist/esm/GlobalNavigationBar/RightSideNav.js

@@ -1,4 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
@@ -6,72 +10,51 @@ import { NavItem } from '../NavItem';
 import { BREAKPOINTS, ComponentTextStyle } from '../styles';
 import { Button } from '../Button';
 import { ComponentMStyling } from '../styles/typography';
-const NavContainer = styled.div`
-  display: flex;
-  margin: auto 0 auto auto;
-  align-items: center;
-  height: 48px;
-  
-  a {
-    text-decoration: none;
-  }
-
-  ${BREAKPOINTS.SMALL} {
-    height: 56px;
-  }
-  ${BREAKPOINTS.MEDIUM} {
-    height: 64px;
-  }
-
-  button,
-  div {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-`;
-const SecondaryButton = styled(Button)`
-  height: 40px;
-  margin: 0 8px;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
+var SecondaryButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, 'unset'));
 
-  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}
-`;
+var RightSideNav = function RightSideNav(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      secondaryButton = _ref.secondaryButton;
 
-const RightSideNav = ({
-  navigationOptions,
-  secondaryButton
-}) => {
-  const preventFocusOnClick = e => {
+  var preventFocusOnClick = function preventFocusOnClick(e) {
     e.preventDefault();
   };
 
-  const getNavItem = navOption => {
-    if (navOption?.disabled) {
-      return /*#__PURE__*/React.createElement(NavItem, {
+  var getNavItem = function getNavItem(navOption) {
+    if (navOption !== null && navOption !== void 0 && navOption.disabled) {
+      return /*#__PURE__*/_jsx(NavItem, {
         as: Button,
         className: "disabled",
-        key: navOption?.label
-      }, navOption?.label);
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
     } else {
-      return /*#__PURE__*/React.createElement(NavItem, {
+      return /*#__PURE__*/_jsx(NavItem, {
         as: NavLink,
-        exact: navOption?.exact,
-        to: navOption?.to || '',
-        key: navOption?.label,
+        exact: navOption === null || navOption === void 0 ? void 0 : navOption.exact,
+        to: (navOption === null || navOption === void 0 ? void 0 : navOption.to) || '',
         onMouseDown: preventFocusOnClick,
-        onClick: () => {
-          if (navOption?.onClick) {
-            navOption?.onClick();
+        onClick: function onClick() {
+          if (navOption !== null && navOption !== void 0 && navOption.onClick) {
+            navOption === null || navOption === void 0 ? void 0 : navOption.onClick();
           }
-        }
-      }, navOption?.label);
+        },
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
     }
   };
 
-  return /*#__PURE__*/React.createElement(NavContainer, null, navigationOptions?.reverse().map(no => getNavItem(no)), secondaryButton && /*#__PURE__*/React.createElement(SecondaryButton, {
-    variant: "secondary",
-    onClick: secondaryButton?.action
-  }, secondaryButton.label));
+  return /*#__PURE__*/_jsxs(NavContainer, {
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.reverse().map(function (no) {
+      return getNavItem(no);
+    }), secondaryButton && /*#__PURE__*/_jsx(SecondaryButton, {
+      variant: "secondary",
+      onClick: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.action,
+      children: secondaryButton.label
+    })]
+  });
 };
 
 RightSideNav.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIL,WAAW,CAACM,KAAM;AACtB;AACA;AACA,IAAIN,WAAW,CAACO,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBA;AAyBA,MAAMC,eAAe,GAAGX,MAAM,CAACK,MAAD,CAAS;AACvC;AACA;AACA;AACA,IAAIC,iBAAiB,CAACF,kBAAkB,CAACQ,IAApB,EAA0B,OAA1B,CAAmC;AACxD,CALA;;AAYA,MAAMC,YAAY,GAAG,CAAC;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,CAAD,KAA8E;AACjG,QAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,QAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,QAAIA,SAAS,EAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,OAAD;AAAS,QAAA,EAAE,EAAEhB,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,EAAEe,SAAS,EAAEE;AAA1D,SACGF,SAAS,EAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,OAAD;AACE,QAAA,EAAE,EAAErB,OADN;AAEE,QAAA,KAAK,EAAEmB,SAAS,EAAEG,KAFpB;AAGE,QAAA,EAAE,EAAEH,SAAS,EAAEI,EAAX,IAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEJ,SAAS,EAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,MAAM;AACb,cAAII,SAAS,EAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,EAAEK,OAAX;AACD;AACF;AAVH,SAWGL,SAAS,EAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBAAiB,EAAEY,OAAnB,GAA6BC,GAA7B,CAAiCC,EAAE,IAAIT,UAAU,CAACS,EAAD,CAAjD,CADH,EAGGb,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAe,EAAEc;AAA/D,KACGd,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;;AAEA,IAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAV,2VAUdL,WAAW,CAACM,KAVE,EAadN,WAAW,CAACO,MAbE,CAAlB;AAyBA,IAAMC,eAAe,GAAGX,MAAM,CAACK,MAAD,CAAT,uHAIjBC,iBAAiB,CAACF,kBAAkB,CAACQ,IAApB,EAA0B,OAA1B,CAJA,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,KAAC,OAAD;AAAS,QAAA,EAAE,EAAEhB,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGe,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,KAAC,OAAD;AACE,QAAA,EAAE,EAAErB,OADN;AAEE,QAAA,KAAK,EAAEmB,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEG,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAH,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEI,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAER,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,OAAX;AACD;AACF,SAVH;AAAA,kBAWGL,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,MAAC,YAAD;AAAA,eACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEY,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIT,UAAU,CAACS,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGb,eAAe,iBACd,KAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEc,MAA/D;AAAA,gBACGd,eAAe,CAACO;AADnB,MAJJ;AAAA,IADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js

@@ -1,82 +1,73 @@
+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, { css } from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { COLORS, ComponentTextStyle } from '../../styles';
 import { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';
 import { ComponentMStyling } from '../../styles/typography';
-const LinkStyles = css`
-  border: none;
-  background: transparent;
-  padding: 16px 25px;
-
-  text-decoration: none;
-  text-align: left;
-  align-items: center;
-  display: flex;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LinkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ", "\n  svg {\n    margin-right: 15px;\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600);
+var InternalLink = styled(NavLink)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), LinkStyles);
+var ExternalLink = styled.a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), LinkStyles);
+var IconsRightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n"])));
 
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
-  svg {
-    margin-right: 15px;
-    color: ${COLORS.neutral_600};
-  }
-`;
-const InternalLink = styled(NavLink)`
-  ${LinkStyles};
-`;
-const ExternalLink = styled.a`
-  ${LinkStyles};
-`;
-const IconsRightSide = styled.div`
-  margin: 0 0 0 auto;
-  align-items: center;
-  svg {
-    margin-right: 0;
-  }
-`;
+var MenuLink = function MenuLink(_ref) {
+  var to = _ref.to,
+      isExternal = _ref.isExternal,
+      menuText = _ref.menuText,
+      Icon = _ref.Icon,
+      notification = _ref.notification,
+      extendedMenu = _ref.extendedMenu,
+      _onClick = _ref.onClick;
 
-const MenuLink = ({
-  to,
-  isExternal,
-  menuText,
-  Icon,
-  notification,
-  extendedMenu,
-  onClick
-}) => {
-  const getRightSide = () => /*#__PURE__*/React.createElement(IconsRightSide, null, notification ? /*#__PURE__*/React.createElement(Bullet, {
-    size: "24px",
-    color: COLORS.critical_500
-  }) : null, extendedMenu ? /*#__PURE__*/React.createElement(ChevronRight, {
-    size: "24px",
-    color: COLORS.neutral_600
-  }) : null);
+  var getRightSide = function getRightSide() {
+    return /*#__PURE__*/_jsxs(IconsRightSide, {
+      children: [notification ? /*#__PURE__*/_jsx(Bullet, {
+        size: "24px",
+        color: COLORS.critical_500
+      }) : null, extendedMenu ? /*#__PURE__*/_jsx(ChevronRight, {
+        size: "24px",
+        color: COLORS.neutral_600
+      }) : null]
+    });
+  };
 
-  return /*#__PURE__*/React.createElement("li", null, isExternal ? /*#__PURE__*/React.createElement(ExternalLink, {
-    key: `ExternalLink_${to}`,
-    href: to,
-    role: "menuitem",
-    className: "UserMenuLink",
-    onClick: () => {
-      if (onClick) {
-        onClick();
-      }
-    }
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    size: "24px"
-  }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()) : /*#__PURE__*/React.createElement(InternalLink, {
-    key: `InternalLink_${to}`,
-    to: to,
-    role: "menuitem",
-    className: "UserMenuLink",
-    onClick: () => {
-      if (onClick) {
-        onClick();
-      }
-    }
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    size: "24px"
-  }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()));
+  return /*#__PURE__*/_jsx("li", {
+    children: isExternal ? /*#__PURE__*/_jsxs(ExternalLink, {
+      href: to,
+      role: "menuitem",
+      className: "UserMenuLink",
+      onClick: function onClick() {
+        if (_onClick) {
+          _onClick();
+        }
+      },
+      children: [Icon && /*#__PURE__*/_jsx(Icon, {
+        size: "24px"
+      }), /*#__PURE__*/_jsx("span", {
+        children: menuText
+      }), getRightSide()]
+    }, "ExternalLink_".concat(to)) : /*#__PURE__*/_jsxs(InternalLink, {
+      to: to,
+      role: "menuitem",
+      className: "UserMenuLink",
+      onClick: function onClick() {
+        if (_onClick) {
+          _onClick();
+        }
+      },
+      children: [Icon && /*#__PURE__*/_jsx(Icon, {
+        size: "24px"
+      }), /*#__PURE__*/_jsx("span", {
+        children: menuText
+      }), getRightSide()]
+    }, "InternalLink_".concat(to))
+  });
 };
 
 MenuLink.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AAEA,MAAMC,UAAU,GAAGP,GAAI;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIM,iBAAiB,CAACH,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA,aAAaP,MAAM,CAACO,WAAY;AAChC;AACA,CAfA;AAiBA,MAAMC,YAAY,GAAGX,MAAM,CAACE,OAAD,CAAU;AACrC,IAAIM,UAAW;AACf,CAFA;AAIA,MAAMI,YAAY,GAAGZ,MAAM,CAACa,CAAE;AAC9B,IAAIL,UAAW;AACf,CAFA;AAIA,MAAMM,cAAc,GAAGd,MAAM,CAACe,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA,CANA;;AAkBA,MAAMC,QAAQ,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,UAAN;AAAkBC,EAAAA,QAAlB;AAA4BC,EAAAA,IAA5B;AAAkCC,EAAAA,YAAlC;AAAgDC,EAAAA,YAAhD;AAA8DC,EAAAA;AAA9D,CAAD,KAA4F;AAC3G,QAAMC,YAAY,GAAG,mBACnB,oBAAC,cAAD,QACGH,YAAY,gBAAG,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC,MAAb;AAAoB,IAAA,KAAK,EAAElB,MAAM,CAACsB;AAAlC,IAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,MAAnB;AAA0B,IAAA,KAAK,EAAEnB,MAAM,CAACO;AAAxC,IAAH,GAA6D,IAF5E,CADF;;AAMA,sBACE,gCACGQ,UAAU,gBACT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeD,EAAG,EAD1B;AAEE,IAAA,IAAI,EAAEA,EAFR;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CADS,gBAgBT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeP,EAAG,EAD1B;AAEE,IAAA,EAAE,EAAEA,EAFN;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CAjBJ,CADF;AAmCD,CA1CD;;;AATEP,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AA+CF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  svg {\n    margin-right: 15px;\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst InternalLink = styled(NavLink)`\n  ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n  ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n`;\n\ninterface MenuLinkProps {\n  to: string;\n  menuText: string;\n  isExternal?: boolean;\n  Icon?: any;\n  notification?: boolean;\n  extendedMenu?: boolean;\n  onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n  const getRightSide = () => (\n    <IconsRightSide>\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n    </IconsRightSide>\n  );\n  return (\n    <li>\n      {isExternal ? (\n        <ExternalLink\n          key={`ExternalLink_${to}`}\n          href={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </ExternalLink>\n      ) : (\n        <InternalLink\n          key={`InternalLink_${to}`}\n          to={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </InternalLink>\n      )}\n    </li>\n  );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;;;AAEA,IAAMC,UAAU,GAAGP,GAAH,0SAUZM,iBAAiB,CAACH,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAVL,EAaHP,MAAM,CAACO,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAGX,MAAM,CAACE,OAAD,CAAT,mFACdM,UADc,CAAlB;AAIA,IAAMI,YAAY,GAAGZ,MAAM,CAACa,CAAV,mFACdL,UADc,CAAlB;AAIA,IAAMM,cAAc,GAAGd,MAAM,CAACe,GAAV,4JAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,MAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,KAAC,MAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAElB,MAAM,CAACsB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,KAAC,YAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEnB,MAAM,CAACO;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGQ,UAAU,gBACT,MAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB,EADS,gBAgBT,MAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB;AAjBJ,IADF;AAmCD,CA1CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AA+CF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  svg {\n    margin-right: 15px;\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst InternalLink = styled(NavLink)`\n  ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n  ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n`;\n\ninterface MenuLinkProps {\n  to: string;\n  menuText: string;\n  isExternal?: boolean;\n  Icon?: any;\n  notification?: boolean;\n  extendedMenu?: boolean;\n  onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n  const getRightSide = () => (\n    <IconsRightSide>\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n    </IconsRightSide>\n  );\n  return (\n    <li>\n      {isExternal ? (\n        <ExternalLink\n          key={`ExternalLink_${to}`}\n          href={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </ExternalLink>\n      ) : (\n        <InternalLink\n          key={`InternalLink_${to}`}\n          to={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </InternalLink>\n      )}\n    </li>\n  );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js

@@ -1,4 +1,8 @@
+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, scrollBarStyling } from '../../styles';
@@ -8,106 +12,28 @@ import { ArrowLineLeft, Close } from '../../icons/systemicons/SystemIcons';
 import { flowDown, Right, UserMenuSectionListStyling } from '../mobile/CommonStyles';
 import { ComponentSStyling } from '../../styles/typography';
 import { Z_INDEXES } from '../../styles/z-indexes';
-const Menu = styled.ul`
-  list-style: none;
-  margin: 0;
-  background-color: ${COLORS.white};
-  box-sizing: border-box;
-  display: none;
-  -webkit-animation: ${flowDown} 0.2s ease-in-out;
-  animation: ${flowDown} 0.2s ease-in-out;
-  position: absolute;
-  border-radius: 4px;
-  z-index: ${Z_INDEXES.fixed_menu};
-  height: 100%;
-  width: 320px;
-  padding-inline-start: 0;
-  overflow-y: scroll;
-  ${BREAKPOINTS.SMALL} {
-    min-width: 360px;
-  }
-
-  .open & {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .signOutButton {
-    height: 40px !important;
-    width: 288px !important;
-
-    ${BREAKPOINTS.SMALL} {
-      width: 328px !important;
-    }
-  }
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .signOutButton {\n    height: 40px !important;\n    width: 288px !important;\n\n    ", " {\n      width: 328px !important;\n    }\n  }\n\n  ", ";\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.fixed_menu, BREAKPOINTS.SMALL, BREAKPOINTS.SMALL, scrollBarStyling);
+var MenuSection = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+var MenuSectionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ", ";\n"])), UserMenuSectionListStyling);
+var Top = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), COLORS.neutral_600, ComponentSStyling(ComponentTextStyle.Regular, 'inherit'));
+var LabelLine = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 32px;\n  background-color: ", ";\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n"])), COLORS.neutral_20);
+var StyledMenulink = styled(MenuLink)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  \n  & a {\n    height: 100%;\n  }\n"])));
 
-  ${scrollBarStyling};
-`;
-const MenuSection = styled.li`
-  padding: 8px 0;
-  position: relative;
-
-  .disabled-link {
-    color: #21212150;
-    pointer-events: none;
-    key-events: none;
-  }
-`;
-const MenuSectionList = styled.ul`
-  list-style: none;
-  margin: 0;
-  overflow-y: unset !important;
-  padding-inline-start: 0;
-  ${UserMenuSectionListStyling};
-`;
-const Top = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 22px 12px 0 12px;
-  color: ${COLORS.neutral_600};
-
-  h3 {
-    margin-block-start: 0 !important;
-    margin-block-end: 0 !important;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-    margin-left: 24px;
-
-    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
-  }
-`;
-const LabelLine = styled.span`
-  height: 32px;
-  background-color: ${COLORS.neutral_20};
-  padding-left: 24px;
-  display: flex;
-  line-height: 32px;
-`;
-const StyledMenulink = styled(MenuLink)`
-  width: 100%;
-  height: 48px;
-  margin: 0;
-  
-  & a {
-    height: 100%;
-  }
-`;
-
-const MobileUserMenu = ({
-  accountMenuHeader,
-  firstName,
-  lastName,
-  email,
-  organizationName,
-  clickMenuAction,
-  accountSection,
-  organizationSection,
-  supportSection,
-  signOut,
-  signOutLabel
-}) => {
-  React.useEffect(() => {
+var MobileUserMenu = function MobileUserMenu(_ref) {
+  var accountMenuHeader = _ref.accountMenuHeader,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      clickMenuAction = _ref.clickMenuAction,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      signOut = _ref.signOut,
+      signOutLabel = _ref.signOutLabel;
+  React.useEffect(function () {
     function handleKeyPress(e) {
       if (e.keyCode === 27) {
         clickMenuAction();
@@ -115,69 +41,91 @@ const MobileUserMenu = ({
     }
 
     document.addEventListener('keydown', handleKeyPress, false);
-    return () => {
+    return function () {
       document.removeEventListener('keydown', handleKeyPress, false);
     };
   }, [clickMenuAction]);
-  return /*#__PURE__*/React.createElement(Menu, {
-    onClick: () => {},
+  return /*#__PURE__*/_jsxs(Menu, {
+    onClick: function onClick() {},
     role: "menu",
-    "aria-labelledby": "UserMenuButton"
-  }, /*#__PURE__*/React.createElement(Top, {
-    key: "MobileUserMenuTopSection"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "secondary",
-    shape: "circular",
-    action: clickMenuAction,
-    isInMobileMenu: true
-  }, /*#__PURE__*/React.createElement(ArrowLineLeft, {
-    size: "24px",
-    color: COLORS.neutral_600
-  })), /*#__PURE__*/React.createElement("h3", null, accountMenuHeader), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "secondary",
-    shape: "circular",
-    action: clickMenuAction,
-    isInMobileMenu: true
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: "24px"
-  })))), accountSection && accountSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
-    key: "MobileAccountSection"
-  }, /*#__PURE__*/React.createElement(LabelLine, {
-    "data-hj-suppress": true
-  }, `${firstName} ${lastName}`), /*#__PURE__*/React.createElement(MenuSectionList, null, accountSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
-    key: element?.to,
-    to: element?.to,
-    menuText: element?.label
-  })))), organizationSection && organizationSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
-    key: "MObileOrganizationSection"
-  }, /*#__PURE__*/React.createElement(LabelLine, null, organizationName || ''), /*#__PURE__*/React.createElement(MenuSectionList, null, organizationSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
-    key: element?.to,
-    to: element?.to,
-    menuText: element?.label
-  })))), supportSection && supportSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
-    key: "MobileSupportSection"
-  }, /*#__PURE__*/React.createElement(LabelLine, null, ''), /*#__PURE__*/React.createElement(MenuSectionList, null, supportSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
-    key: element?.to,
-    isExternal: element.isExternal,
-    to: element?.to,
-    menuText: element?.label
-  })))), signOut && /*#__PURE__*/React.createElement("div", {
-    key: "SignoutButton",
-    style: {
-      display: 'flex',
-      margin: 'auto 0 12px 0'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    style: {
-      width: '90%',
-      margin: '0 auto'
-    },
-    variant: "secondary",
-    onClick: e => {
-      e.preventDefault();
-      signOut(e);
-    }
-  }, signOutLabel)));
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(Top, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: clickMenuAction,
+        isInMobileMenu: true,
+        children: /*#__PURE__*/_jsx(ArrowLineLeft, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      }), /*#__PURE__*/_jsx("h3", {
+        children: accountMenuHeader
+      }), /*#__PURE__*/_jsx(Right, {
+        children: /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: clickMenuAction,
+          isInMobileMenu: true,
+          children: /*#__PURE__*/_jsx(Close, {
+            size: "24px"
+          })
+        })
+      })]
+    }, "MobileUserMenuTopSection"), accountSection && (accountSection === null || accountSection === void 0 ? void 0 : accountSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(LabelLine, {
+        "data-hj-suppress": true,
+        children: "".concat(firstName, " ").concat(lastName)
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: accountSection === null || accountSection === void 0 ? void 0 : accountSection.map(function (element) {
+          return /*#__PURE__*/_jsx(StyledMenulink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileAccountSection"), organizationSection && (organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(LabelLine, {
+        children: organizationName || ''
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.map(function (element) {
+          return /*#__PURE__*/_jsx(StyledMenulink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MObileOrganizationSection"), supportSection && (supportSection === null || supportSection === void 0 ? void 0 : supportSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(LabelLine, {
+        children: ''
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: supportSection === null || supportSection === void 0 ? void 0 : supportSection.map(function (element) {
+          return /*#__PURE__*/_jsx(StyledMenulink, {
+            isExternal: element.isExternal,
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileSupportSection"), signOut && /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        margin: 'auto 0 12px 0'
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        style: {
+          width: '90%',
+          margin: '0 auto'
+        },
+        variant: "secondary",
+        onClick: function onClick(e) {
+          e.preventDefault();
+          signOut(e);
+        },
+        children: signOutLabel
+      })
+    }, "SignoutButton")]
+  });
 };
 
 MobileUserMenu.propTypes = {