@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0-dev.3

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

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentSStyling","focusStyles","scrollBarStyling","ParagraphXSStyling","ParagraphTextStyle","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","Size","RowLayout","div","Button","button","white","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","MobileHeaderContainer","neutral_200"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentSStyling, focusStyles, scrollBarStyling, ParagraphXSStyling, ParagraphTextStyle } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n`;\n\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const Menu = styled.div`\n  height: 100%;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n\n  width: 320px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n`;\n\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n\n    a {\n      color: ${COLORS.primary_600};\n    }\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n\n    a {\n      color: ${COLORS.primary_800};\n    }\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const MobileMenuWrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\nexport const ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n`;\n\nexport const MobileHeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nexport const MobileHeaderNote = styled.div`\n  word-break: break-all;\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const MobileHeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentSStyling","focusStyles","scrollBarStyling","ParagraphXSStyling","ParagraphTextStyle","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","Size","RowLayout","div","Button","button","white","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","MobileHeaderContainer","neutral_200"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentSStyling, focusStyles, scrollBarStyling, ParagraphXSStyling, ParagraphTextStyle } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n`;\n\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const Menu = styled.div`\n  height: 100%;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n\n  width: 320px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n`;\n\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n\n    a {\n      color: ${COLORS.primary_600};\n    }\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n\n    a {\n      color: ${COLORS.primary_800};\n    }\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const MobileMenuWrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\nexport const ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n`;\n\nexport const MobileHeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nexport const MobileHeaderNote = styled.div`\n  word-break: break-all;\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const MobileHeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs

@@ -1,40 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MobileActionContainer = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _Button = require("../../Button");
-
 var _styles = require("../../styles");
-
 var _types = require("../../types");
-
 var _rooks = require("rooks");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject;
-
 var ActionContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), _styles.COLORS.neutral_200, _styles.BREAKPOINTS.SMALL);
-
 var MobileActionContainer = function MobileActionContainer(_ref) {
   var disabled = _ref.disabled,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
-      icon = _ref.icon,
-      label = _ref.label,
-      isLoading = _ref.isLoading,
-      action = _ref.action;
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
+    icon = _ref.icon,
+    label = _ref.label,
+    isLoading = _ref.isLoading,
+    action = _ref.action;
   var isSmallScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.SMALL.replace('@media ', ''));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionContainer, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -48,6 +36,5 @@ var MobileActionContainer = function MobileActionContainer(_ref) {
     })
   });
 };
-
 exports.MobileActionContainer = MobileActionContainer;
 //# sourceMappingURL=MobileActionContainer.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobileActionContainer.cjs","names":["ActionContainer","styled","div","COLORS","neutral_200","BREAKPOINTS","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","useMediaMatch","replace","Size","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\nimport {useMediaMatch} from \"rooks\";\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,GAAV,wPAGKC,cAAA,CAAOC,WAHZ,EAOjBC,mBAAA,CAAYC,KAPK,CAArB;;AAcO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAyE;EAAA,IAAtEC,QAAsE,QAAtEA,QAAsE;EAAA,wBAA5DC,OAA4D;EAAA,IAA5DA,OAA4D,6BAAlD,WAAkD;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,SAAwB,QAAxBA,SAAwB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACjK,IAAMC,aAAa,GAAG,IAAAC,oBAAA,EAAcV,mBAAA,CAAYC,KAAZ,CAAkBU,OAAlB,CAA0B,SAA1B,EAAqC,EAArC,CAAd,CAAtB;EAEA,oBACE,qBAAC,eAAD;IAAA,uBACE,qBAAC,cAAD;MAAQ,OAAO,EAAEP,OAAjB;MAA0B,IAAI,EAAEK,aAAa,GAAGG,WAAA,CAAKC,MAAR,GAAiBD,WAAA,CAAKE,KAAnE;MAA0E,QAAQ,EAAEX,QAApF;MAA8F,IAAI,EAAEE,IAApG;MAA0G,OAAO,EAAEE,SAAnH;MAA8H,OAAO,EAAEC,MAAvI;MAAA,UACGF;IADH;EADF,EADF;AAOD,CAVM"}
+{"version":3,"file":"MobileActionContainer.cjs","names":["ActionContainer","styled","div","COLORS","neutral_200","BREAKPOINTS","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","useMediaMatch","replace","Size","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\nimport {useMediaMatch} from \"rooks\";\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoC;AAAA;AAEpC,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,wPAGRC,cAAM,CAACC,WAAW,EAIxCC,mBAAW,CAACC,KAAK,CAGpB;AAIM,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA0E,OAA4E;EAAA,IAAtEC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,MAAM,QAANA,MAAM;EAC1J,IAAMC,aAAa,GAAG,IAAAC,oBAAa,EAACV,mBAAW,CAACC,KAAK,CAACU,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,oBACE,qBAAC,eAAe;IAAA,uBACd,qBAAC,cAAM;MAAC,OAAO,EAAEP,OAAQ;MAAC,IAAI,EAAEK,aAAa,GAAGG,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;MAAC,QAAQ,EAAEX,QAAS;MAAC,IAAI,EAAEE,IAAK;MAAC,OAAO,EAAEE,SAAU;MAAC,OAAO,EAAEC,MAAO;MAAA,UAC3IF;IAAK;EACC,EACO;AAEtB,CAAC;AAAC"}

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject;
-
 import React from 'react';
 import styled from 'styled-components';
 import { Button } from '../../Button';
@@ -12,12 +10,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var ActionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
 export var MobileActionContainer = function MobileActionContainer(_ref) {
   var disabled = _ref.disabled,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
-      icon = _ref.icon,
-      label = _ref.label,
-      isLoading = _ref.isLoading,
-      action = _ref.action;
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
+    icon = _ref.icon,
+    label = _ref.label,
+    isLoading = _ref.isLoading,
+    action = _ref.action;
   var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
   return /*#__PURE__*/_jsx(ActionContainer, {
     children: /*#__PURE__*/_jsx(Button, {

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileActionContainer.js","names":["React","styled","Button","BREAKPOINTS","COLORS","Size","useMediaMatch","ActionContainer","div","neutral_200","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","replace","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\nimport {useMediaMatch} from \"rooks\";\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,IAAT,QAAqB,aAArB;AAEA,SAAQC,aAAR,QAA4B,OAA5B;;AAEA,IAAMC,eAAe,GAAGN,MAAM,CAACO,GAAV,0OAGKJ,MAAM,CAACK,WAHZ,EAOjBN,WAAW,CAACO,KAPK,CAArB;AAcA,OAAO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAyE;EAAA,IAAtEC,QAAsE,QAAtEA,QAAsE;EAAA,wBAA5DC,OAA4D;EAAA,IAA5DA,OAA4D,6BAAlD,WAAkD;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,SAAwB,QAAxBA,SAAwB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACjK,IAAMC,aAAa,GAAGZ,aAAa,CAACH,WAAW,CAACO,KAAZ,CAAkBS,OAAlB,CAA0B,SAA1B,EAAqC,EAArC,CAAD,CAAnC;EAEA,oBACE,KAAC,eAAD;IAAA,uBACE,KAAC,MAAD;MAAQ,OAAO,EAAEN,OAAjB;MAA0B,IAAI,EAAEK,aAAa,GAAGb,IAAI,CAACe,MAAR,GAAiBf,IAAI,CAACgB,KAAnE;MAA0E,QAAQ,EAAET,QAApF;MAA8F,IAAI,EAAEE,IAApG;MAA0G,OAAO,EAAEE,SAAnH;MAA8H,OAAO,EAAEC,MAAvI;MAAA,UACGF;IADH;EADF,EADF;AAOD,CAVM"}
+{"version":3,"file":"MobileActionContainer.js","names":["React","styled","Button","BREAKPOINTS","COLORS","Size","useMediaMatch","ActionContainer","div","neutral_200","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","replace","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\nimport {useMediaMatch} from \"rooks\";\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,WAAW,EAAEC,MAAM,QAAQ,cAAc;AAClD,SAASC,IAAI,QAAQ,aAAa;AAElC,SAAQC,aAAa,QAAO,OAAO;AAAC;AAEpC,IAAMC,eAAe,GAAGN,MAAM,CAACO,GAAG,0OAGRJ,MAAM,CAACK,WAAW,EAIxCN,WAAW,CAACO,KAAK,CAGpB;AAID,OAAO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA0E,OAA4E;EAAA,IAAtEC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,MAAM,QAANA,MAAM;EAC1J,IAAMC,aAAa,GAAGZ,aAAa,CAACH,WAAW,CAACO,KAAK,CAACS,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,oBACE,KAAC,eAAe;IAAA,uBACd,KAAC,MAAM;MAAC,OAAO,EAAEN,OAAQ;MAAC,IAAI,EAAEK,aAAa,GAAGb,IAAI,CAACe,MAAM,GAAGf,IAAI,CAACgB,KAAM;MAAC,QAAQ,EAAET,QAAS;MAAC,IAAI,EAAEE,IAAK;MAAC,OAAO,EAAEE,SAAU;MAAC,OAAO,EAAEC,MAAO;MAAA,UAC3IF;IAAK;EACC,EACO;AAEtB,CAAC"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -1,79 +1,51 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _SystemIcons = require("../../icons/systemicons/SystemIcons");
-
 var _reactRouterDom = require("react-router-dom");
-
 var _Button = require("../../Button");
-
 var _assets = require("../../assets");
-
 var _MobileMenuHeader = _interopRequireDefault(require("./MobileMenuHeader"));
-
 var _MobileMenuContent = _interopRequireDefault(require("./MobileMenuContent"));
-
 var _StackState = require("../../common/StackState");
-
 var _rooks = require("rooks");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL);
-
 var SwitcherLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n"])));
-
 var MobileFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ", ";\n\n  ", "\n  ", " {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ", "\n  }\n"])), _styles.COLORS.neutral_200, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
-
 var CustomContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
-
 var MobileMenu = function MobileMenu(_ref) {
   var _current$header, _current$header$butto;
-
   var show = _ref.show,
-      profile = _ref.profile,
-      buttons = _ref.buttons,
-      label = _ref.label,
-      header = _ref.header,
-      items = _ref.items,
-      footer = _ref.footer,
-      action = _ref.action,
-      onClose = _ref.onClose;
-
+    profile = _ref.profile,
+    buttons = _ref.buttons,
+    label = _ref.label,
+    header = _ref.header,
+    items = _ref.items,
+    footer = _ref.footer,
+    action = _ref.action,
+    onClose = _ref.onClose;
   var _useStackState = (0, _StackState.useStackState)(),
-      reset = _useStackState.reset,
-      length = _useStackState.length,
-      push = _useStackState.push,
-      pop = _useStackState.pop,
-      peek = _useStackState.peek;
-
+    reset = _useStackState.reset,
+    length = _useStackState.length,
+    push = _useStackState.push,
+    pop = _useStackState.pop,
+    peek = _useStackState.peek;
   var isMediumScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.LARGE.replace('@media ', ''));
   var location = (0, _reactRouterDom.useLocation)();
-
   var onSubMenuOpen = function onSubMenuOpen(menu) {
     switch (menu === null || menu === void 0 ? void 0 : menu.type) {
       case 'group':
@@ -91,7 +63,6 @@ var MobileMenu = function MobileMenu(_ref) {
           footer: false
         });
         break;
-
       case 'custom':
         push({
           header: {
@@ -102,12 +73,10 @@ var MobileMenu = function MobileMenu(_ref) {
           footer: false
         });
         break;
-
       default:
         break;
     }
   };
-
   React.useEffect(function () {
     onClose();
   }, [location]);
@@ -174,7 +143,6 @@ var MobileMenu = function MobileMenu(_ref) {
     })]
   });
 };
-
 MobileMenu.propTypes = {
   show: _propTypes.default.bool,
   onClose: _propTypes.default.func.isRequired

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -1,8 +1,6 @@
 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 from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
@@ -21,30 +19,25 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 var SwitcherLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
 var MobileFooter = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ", ";\n\n  ", "\n  ", " {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ", "\n  }\n"])), COLORS.neutral_200, ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
 var CustomContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
-
 var MobileMenu = function MobileMenu(_ref) {
   var _current$header, _current$header$butto;
-
   var show = _ref.show,
-      profile = _ref.profile,
-      buttons = _ref.buttons,
-      label = _ref.label,
-      header = _ref.header,
-      items = _ref.items,
-      footer = _ref.footer,
-      action = _ref.action,
-      onClose = _ref.onClose;
-
+    profile = _ref.profile,
+    buttons = _ref.buttons,
+    label = _ref.label,
+    header = _ref.header,
+    items = _ref.items,
+    footer = _ref.footer,
+    action = _ref.action,
+    onClose = _ref.onClose;
   var _useStackState = useStackState(),
-      reset = _useStackState.reset,
-      length = _useStackState.length,
-      push = _useStackState.push,
-      pop = _useStackState.pop,
-      peek = _useStackState.peek;
-
+    reset = _useStackState.reset,
+    length = _useStackState.length,
+    push = _useStackState.push,
+    pop = _useStackState.pop,
+    peek = _useStackState.peek;
   var isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
   var location = useLocation();
-
   var onSubMenuOpen = function onSubMenuOpen(menu) {
     switch (menu === null || menu === void 0 ? void 0 : menu.type) {
       case 'group':
@@ -62,7 +55,6 @@ var MobileMenu = function MobileMenu(_ref) {
           footer: false
         });
         break;
-
       case 'custom':
         push({
           header: {
@@ -73,12 +65,10 @@ var MobileMenu = function MobileMenu(_ref) {
           footer: false
         });
         break;
-
       default:
         break;
     }
   };
-
   React.useEffect(function () {
     onClose();
   }, [location]);
@@ -145,7 +135,6 @@ var MobileMenu = function MobileMenu(_ref) {
     })]
   });
 };
-
 MobileMenu.propTypes = {
   show: _pt.bool,
   onClose: _pt.func.isRequired

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs

@@ -1,87 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _types = require("../../types");
-
 var _HyperLink = require("../../HyperLink");
-
 var _NavigationHelper = require("../../common/NavigationHelper");
-
 var _MenuItem = require("../../MenuItem");
-
 var _icons = require("../../icons");
-
 var _CommonStyles = require("./CommonStyles");
-
 var _ScrollableContainer = require("../../common/ScrollableContainer");
-
 var _MobileActionContainer = require("./MobileActionContainer");
-
 var _rooks = require("rooks");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var MenuItemsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
-
 var MenuSectionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_200);
-
 var MenuSectionHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_500));
-
 var MenuSectionList = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
-
 var PinnedContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
-
 var FooterText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
-
 var FooterNote = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ParagraphSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
-
 var FooterLink = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null));
-
 var FooterContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
-
 var MobileMenuContent = function MobileMenuContent(_ref) {
   var header = _ref.header,
-      items = _ref.items,
-      footer = _ref.footer,
-      action = _ref.action,
-      onSubMenuOpen = _ref.onSubMenuOpen;
+    items = _ref.items,
+    footer = _ref.footer,
+    action = _ref.action,
+    onSubMenuOpen = _ref.onSubMenuOpen;
   var isSmallScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.SMALL.replace('@media ', ''));
-
   var _useNavigationHelper = (0, _NavigationHelper.useNavigationHelper)(),
-      navigate = _useNavigationHelper.navigate,
-      isActiveRoute = _useNavigationHelper.isActiveRoute;
-
+    navigate = _useNavigationHelper.navigate,
+    isActiveRoute = _useNavigationHelper.isActiveRoute;
   var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([header, footer, action, items]),
-      _useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
-      scrollContainerRef = _useScrollableContain2[0],
-      scrollable = _useScrollableContain2[1];
-
+    _useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
+    scrollContainerRef = _useScrollableContain2[0],
+    scrollable = _useScrollableContain2[1];
   var renderItem = function renderItem(item, index) {
     switch (item.type) {
       case 'section':
@@ -94,7 +60,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             })
           })]
         }, index);
-
       case 'group':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
           id: 'menu-item-' + index,
@@ -113,7 +78,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             onSubMenuOpen && onSubMenuOpen(item);
           }
         }, index);
-
       case 'item':
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
@@ -134,7 +98,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
         }, index);
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
       ref: scrollContainerRef,
@@ -180,7 +143,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
     }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
   });
 };
-
 MobileMenuContent.propTypes = {
   items: _propTypes.default.array,
   onSubMenuOpen: _propTypes.default.func