@laerdal/life-react-components 5.0.9 → 6.0.0-dev.1

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs

@@ -4,17 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+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 _NavigationProvider = require("../../Navigation/NavigationProvider");
 var _MenuItem = require("../../MenuItem");
 var _icons = require("../../icons");
 var _CommonStyles = require("./CommonStyles");
@@ -22,62 +20,95 @@ 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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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"])), function (props) {
-  return _styles.COLORS.getColor('neutral_200', props.theme);
-});
-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"])), function (props) {
-  return _styles.COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
-});
-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"])), function (props) {
-  return _styles.COLORS.getColor('neutral_200', props.theme);
-});
-var FooterText = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
-  return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
-}, _styles.BREAKPOINTS.SMALL, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
-});
-var FooterNote = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
-  return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
-}, _styles.BREAKPOINTS.SMALL, function (props) {
-  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
-});
-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"])), function (props) {
-  return _styles.COLORS.getColor('neutral_200', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_20', props.theme);
-}, _styles.BREAKPOINTS.SMALL);
-var MobileMenuContent = function MobileMenuContent(_ref) {
-  var header = _ref.header,
-    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;
-  var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([header, footer, action, items]),
-    _useScrollableContain2 = (0, _slicedToArray2["default"])(_useScrollableContain, 2),
-    scrollContainerRef = _useScrollableContain2[0],
-    scrollable = _useScrollableContain2[1];
-  var renderItem = function renderItem(item, index) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const MenuItemsContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 8px;
+`;
+const MenuSectionContainer = _styledComponents.default.div`
+  padding-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &.divider {
+    border-top: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  }
+`;
+const MenuSectionHeader = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 16px 4px 16px;
+  box-sizing: border-box;
+  min-height: 32px;
+  background-color: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+
+  ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme))}
+`;
+const MenuSectionList = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+const PinnedContainer = _styledComponents.default.div`
+  border-top: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+`;
+const FooterText = _styledComponents.default.div`
+  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${_styles.BREAKPOINTS.SMALL} {
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+const FooterNote = _styledComponents.default.div`
+  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${_styles.BREAKPOINTS.SMALL} {
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+const FooterLink = _styledComponents.default.div`
+  a {
+    ${(0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null)}
+    ${_styles.BREAKPOINTS.SMALL} {
+      ${(0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null)}
+    }
+  }
+`;
+const FooterContainer = _styledComponents.default.div`
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border-top: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  display: flex;
+  flex-direction: column;
+  background: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    padding: 16px;
+  }
+`;
+const MobileMenuContent = _ref => {
+  let {
+    header,
+    items,
+    footer,
+    action,
+    onSubMenuOpen
+  } = _ref;
+  const isSmallScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.SMALL.replace('@media ', ''));
+  const {
+    navigate,
+    isActiveRoute
+  } = (0, _NavigationProvider.useNavigation)();
+  const [scrollContainerRef, scrollable] = (0, _ScrollableContainer.useScrollableContainer)([header, footer, action, items]);
+  const renderItem = (item, index) => {
     switch (item.type) {
       case 'section':
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSectionContainer, {
           children: [item.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionHeader, {
             children: item.label
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
-            children: item.items.map(function (item, index) {
-              return renderItem(item, index);
-            })
+            children: item.items.map((item, index) => renderItem(item, index))
           })]
         }, index);
       case 'group':
@@ -93,7 +124,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             noteLabel: item.note
           },
           iconRight: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropRight, {}),
-          onClickHandler: function onClickHandler(e) {
+          onClickHandler: e => {
             e.nativeEvent.stopImmediatePropagation();
             onSubMenuOpen && onSubMenuOpen(item);
           }
@@ -102,7 +133,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
           id: 'menu-item-' + index,
-          active: !item.external && isActiveRoute(item.to, !!item.exact),
+          active: !item.external && !!isActiveRoute && isActiveRoute(item.to, !!item.exact),
           size: isSmallScreen ? _types.Size.Medium : _types.Size.Small,
           item: {
             value: item.to,
@@ -111,9 +142,9 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             displayLabel: item.label,
             noteLabel: item.note
           },
-          onClickHandler: function onClickHandler(e) {
+          onClickHandler: e => {
             item.action && item.action(e);
-            navigate(item.to, !!item.external);
+            navigate && navigate(item.to, !!item.external);
           }
         }, index);
     }
@@ -129,21 +160,11 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
           children: header.note
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
-          return !a.pinned;
-        }).map(function (item, index) {
-          return renderItem(item, index);
-        })
+        children: items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))
       })]
-    }), (items === null || items === void 0 ? void 0 : items.some(function (a) {
-      return a.pinned;
-    })) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedContainer, {
+    }), items?.some(a => a.pinned) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
-          return !!a.pinned;
-        }).map(function (item, index) {
-          return renderItem(item, index);
-        })
+        children: items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))
       })
     }), footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterContainer, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FooterText, {
@@ -152,7 +173,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
         children: footer.note
       }), footer.link && /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLink, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
-          variant: 'default',
+          variant: 'styleless',
           id: footer.link.id,
           target: footer.link.target,
           onClick: footer.link.onClick,
@@ -164,9 +185,8 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
   });
 };
 MobileMenuContent.propTypes = {
-  items: _propTypes["default"].array,
-  onSubMenuOpen: _propTypes["default"].func
+  items: _propTypes.default.array,
+  onSubMenuOpen: _propTypes.default.func
 };
-var _default = MobileMenuContent;
-exports["default"] = _default;
+var _default = exports.default = MobileMenuContent;
 //# sourceMappingURL=MobileMenuContent.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuContent.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_types","_HyperLink","_NavigationHelper","_MenuItem","_icons","_CommonStyles","_ScrollableContainer","_MobileActionContainer","_rooks","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","MenuItemsContainer","styled","div","_taggedTemplateLiteral2","MenuSectionContainer","props","COLORS","getColor","theme","MenuSectionHeader","ComponentSStyling","ComponentTextStyle","Bold","MenuSectionList","PinnedContainer","FooterText","ComponentXSStyling","BREAKPOINTS","SMALL","FooterNote","Regular","FooterLink","FooterContainer","MobileMenuContent","_ref","header","items","footer","action","onSubMenuOpen","isSmallScreen","useMediaMatch","replace","_useNavigationHelper","useNavigationHelper","navigate","isActiveRoute","_useScrollableContain","useScrollableContainer","_useScrollableContain2","_slicedToArray2","scrollContainerRef","scrollable","renderItem","item","index","type","jsxs","children","label","jsx","map","MenuItem","id","size","Size","Medium","Small","active","value","disabled","icon","displayLabel","noteLabel","note","iconRight","SystemIcons","ArrowDropRight","onClickHandler","nativeEvent","stopImmediatePropagation","external","to","exact","MobileMenuWrapper","ScrollableContainer","ref","className","MobileHeaderContainer","MobileHeaderText","MobileHeaderNote","a","pinned","some","link","HyperLink","variant","target","onClick","href","MobileActionContainer","propTypes","_propTypes","array","func","_default","exports"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\r\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n} from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { HyperLink } from '../../HyperLink';\r\nimport { useNavigationHelper } from '../../common/NavigationHelper';\r\nimport { MenuItem } from '../../MenuItem';\r\nimport { SystemIcons } from '../../icons';\r\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\r\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\r\nimport { MobileActionContainer } from './MobileActionContainer';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst MenuItemsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  padding: 8px;\r\n`;\r\n\r\nconst MenuSectionContainer = styled.div`\r\n  padding-bottom: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n\r\n  &.divider {\r\n    border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\nconst MenuSectionHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 16px 4px 16px;\r\n  box-sizing: border-box;\r\n  min-height: 32px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nconst MenuSectionList = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n\r\nconst PinnedContainer = styled.div`\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst FooterText = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterNote = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterLink = styled.div`\r\n  a {\r\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n    ${BREAKPOINTS.SMALL} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n  }\r\n`;\r\n\r\nconst FooterContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileMenuContentProps {\r\n  header?: MenuGroupHeader;\r\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\r\n  footer?: MenuGroupFooter;\r\n  action?: MenuButton;\r\n\r\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\r\n}\r\n\r\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  const { navigate, isActiveRoute } = useNavigationHelper();\r\n\r\n  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\r\n\r\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\r\n    switch (item.type) {\r\n      case 'section':\r\n        return (\r\n          <MenuSectionContainer key={index}>\r\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\r\n            <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\r\n          </MenuSectionContainer>\r\n        );\r\n      case 'group':\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            active={false}\r\n            item={{\r\n              value: item.label,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            iconRight={<SystemIcons.ArrowDropRight />}\r\n            onClickHandler={(e) => {\r\n              e.nativeEvent.stopImmediatePropagation();\r\n              onSubMenuOpen && onSubMenuOpen(item);\r\n            }}\r\n          />\r\n        );\r\n      case 'item':\r\n      default:\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            active={!item.external && isActiveRoute(item.to, !!item.exact)}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            item={{\r\n              value: item.to,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            onClickHandler={(e) => {\r\n              item.action && item.action(e);\r\n              navigate(item.to, !!item.external);\r\n            }}\r\n          />\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <MobileMenuWrapper>\r\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\r\n        {!!header && (\r\n          <MobileHeaderContainer>\r\n            <MobileHeaderText>{header.header}</MobileHeaderText>\r\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\r\n          </MobileHeaderContainer>\r\n        )}\r\n        <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n      </ScrollableContainer>\r\n      {items?.some((a) => a.pinned) && (\r\n        <PinnedContainer>\r\n          <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n        </PinnedContainer>\r\n      )}\r\n      {footer && (\r\n        <FooterContainer>\r\n          <FooterText>{footer.header}</FooterText>\r\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\r\n          {footer.link && (\r\n            <FooterLink>\r\n              <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\r\n                {footer.link.label}\r\n              </HyperLink>\r\n            </FooterLink>\r\n          )}\r\n        </FooterContainer>\r\n      )}\r\n      {action && <MobileActionContainer {...action} />}\r\n    </MobileMenuWrapper>\r\n  );\r\n};\r\n\r\nexport default MobileMenuContent;\r\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAOA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,oBAAA,GAAAT,OAAA;AACA,IAAAU,sBAAA,GAAAV,OAAA;AACA,IAAAW,MAAA,GAAAX,OAAA;AAAoC,IAAAY,WAAA,GAAAZ,OAAA;AAAA,IAAAa,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,aAAAhB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAc,yBAAA,GAAAd,MAAA,CAAAe,gBAAA,CAAAlB,CAAA,EAAAG,MAAA,CAAAc,yBAAA,CAAAf,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAgB,cAAA,CAAAnB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAEpC,IAAMoB,kBAAkB,GAAGC,4BAAM,CAACC,GAAG,CAAAhC,eAAA,KAAAA,eAAA,OAAAiC,uBAAA,+GAKpC;AAED,IAAMC,oBAAoB,GAAGH,4BAAM,CAACC,GAAG,CAAA/B,gBAAA,KAAAA,gBAAA,OAAAgC,uBAAA,mKAOX,UAAAE,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAE/E;AAED,IAAMC,iBAAiB,GAAGR,4BAAM,CAACC,GAAG,CAAA9B,gBAAA,KAAAA,gBAAA,OAAA+B,uBAAA,qLAMd,UAAAE,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAErE,UAAAH,KAAK;EAAA,OAAI,IAAAK,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,EACnG;AAED,IAAMK,eAAe,GAAGZ,4BAAM,CAACC,GAAG,CAAA7B,gBAAA,KAAAA,gBAAA,OAAA8B,uBAAA,mEAGjC;AAED,IAAMW,eAAe,GAAGb,4BAAM,CAACC,GAAG,CAAA5B,gBAAA,KAAAA,gBAAA,OAAA6B,uBAAA,sDACR,UAAAE,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAC7E;AAED,IAAMO,UAAU,GAAGd,4BAAM,CAACC,GAAG,CAAA3B,gBAAA,KAAAA,gBAAA,OAAA4B,uBAAA,wDACzB,UAAAE,KAAK;EAAA,OAAI,IAAAW,0BAAkB,EAACL,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,GACjGS,mBAAW,CAACC,KAAK,EACf,UAAAb,KAAK;EAAA,OAAI,IAAAK,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,EAErG;AACD,IAAMW,UAAU,GAAGlB,4BAAM,CAACC,GAAG,CAAA1B,gBAAA,KAAAA,gBAAA,OAAA2B,uBAAA,wDACzB,UAAAE,KAAK;EAAA,OAAI,IAAAW,0BAAkB,EAACL,0BAAkB,CAACS,OAAO,EAAEd,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,GACpGS,mBAAW,CAACC,KAAK,EACf,UAAAb,KAAK;EAAA,OAAI,IAAAK,yBAAiB,EAACC,0BAAkB,CAACS,OAAO,EAAEd,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,EAExG;AACD,IAAMa,UAAU,GAAGpB,4BAAM,CAACC,GAAG,CAAAzB,gBAAA,KAAAA,gBAAA,OAAA0B,uBAAA,4EAEvB,IAAAa,0BAAkB,EAACL,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EACjDK,mBAAW,CAACC,KAAK,EACf,IAAAR,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CAGvD;AAED,IAAMU,eAAe,GAAGrB,4BAAM,CAACC,GAAG,CAAAxB,gBAAA,KAAAA,gBAAA,OAAAyB,uBAAA,8MAGR,UAAAE,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAG9D,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAE/DS,mBAAW,CAACC,KAAK,CAGpB;AAWD,IAAMK,iBAAkE,GAAG,SAArEA,iBAAkEA,CAAAC,IAAA,EAAyD;EAAA,IAAnDC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAEC,aAAa,GAAAL,IAAA,CAAbK,aAAa;EACxH,IAAMC,aAAa,GAAG,IAAAC,oBAAa,EAACd,mBAAW,CAACC,KAAK,CAACc,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,IAAAC,oBAAA,GAAoC,IAAAC,qCAAmB,EAAC,CAAC;IAAjDC,QAAQ,GAAAF,oBAAA,CAARE,QAAQ;IAAEC,aAAa,GAAAH,oBAAA,CAAbG,aAAa;EAE/B,IAAAC,qBAAA,GAAyC,IAAAC,2CAAsB,EAAC,CAACb,MAAM,EAAEE,MAAM,EAAEC,MAAM,EAAEF,KAAK,CAAC,CAAC;IAAAa,sBAAA,OAAAC,eAAA,aAAAH,qBAAA;IAAzFI,kBAAkB,GAAAF,sBAAA;IAAEG,UAAU,GAAAH,sBAAA;EAErC,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAIC,IAA8F,EAAEC,KAAa,EAAK;IACpI,QAAQD,IAAI,CAACE,IAAI;MACf,KAAK,SAAS;QACZ,oBACE,IAAA7E,WAAA,CAAA8E,IAAA,EAAC3C,oBAAoB;UAAA4C,QAAA,GAClBJ,IAAI,CAACK,KAAK,iBAAI,IAAAhF,WAAA,CAAAiF,GAAA,EAACzC,iBAAiB;YAAAuC,QAAA,EAAEJ,IAAI,CAACK;UAAK,CAAoB,CAAC,eAClE,IAAAhF,WAAA,CAAAiF,GAAA,EAACrC,eAAe;YAAAmC,QAAA,EAAEJ,IAAI,CAAClB,KAAK,CAACyB,GAAG,CAAC,UAACP,IAAI,EAAEC,KAAK;cAAA,OAAKF,UAAU,CAACC,IAAI,EAAEC,KAAK,CAAC;YAAA;UAAC,CAAkB,CAAC;QAAA,GAFpEA,KAGL,CAAC;MAE3B,KAAK,OAAO;QACV,oBACE,IAAA5E,WAAA,CAAAiF,GAAA,EAACvF,SAAA,CAAAyF,QAAQ;UAEPC,EAAE,EAAE,YAAY,GAAGR,KAAM;UACzBS,IAAI,EAAExB,aAAa,GAAGyB,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;UAC/CC,MAAM,EAAE,KAAM;UACdd,IAAI,EAAE;YACJe,KAAK,EAAEf,IAAI,CAACK,KAAK;YACjBW,QAAQ,EAAEhB,IAAI,CAACgB,QAAQ;YACvBC,IAAI,EAAEjB,IAAI,CAACiB,IAAI;YACfC,YAAY,EAAElB,IAAI,CAACK,KAAK;YACxBc,SAAS,EAAEnB,IAAI,CAACoB;UAClB,CAAE;UACFC,SAAS,eAAE,IAAAhG,WAAA,CAAAiF,GAAA,EAACtF,MAAA,CAAAsG,WAAW,CAACC,cAAc,IAAE,CAAE;UAC1CC,cAAc,EAAE,SAAAA,eAACxF,CAAC,EAAK;YACrBA,CAAC,CAACyF,WAAW,CAACC,wBAAwB,CAAC,CAAC;YACxCzC,aAAa,IAAIA,aAAa,CAACe,IAAI,CAAC;UACtC;QAAE,GAfGC,KAgBN,CAAC;MAEN,KAAK,MAAM;MACX;QACE,oBACE,IAAA5E,WAAA,CAAAiF,GAAA,EAACvF,SAAA,CAAAyF,QAAQ;UAEPC,EAAE,EAAE,YAAY,GAAGR,KAAM;UACzBa,MAAM,EAAE,CAACd,IAAI,CAAC2B,QAAQ,IAAInC,aAAa,CAACQ,IAAI,CAAC4B,EAAE,EAAE,CAAC,CAAC5B,IAAI,CAAC6B,KAAK,CAAE;UAC/DnB,IAAI,EAAExB,aAAa,GAAGyB,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;UAC/Cb,IAAI,EAAE;YACJe,KAAK,EAAEf,IAAI,CAAC4B,EAAE;YACdZ,QAAQ,EAAEhB,IAAI,CAACgB,QAAQ;YACvBC,IAAI,EAAEjB,IAAI,CAACiB,IAAI;YACfC,YAAY,EAAElB,IAAI,CAACK,KAAK;YACxBc,SAAS,EAAEnB,IAAI,CAACoB;UAClB,CAAE;UACFI,cAAc,EAAE,SAAAA,eAACxF,CAAC,EAAK;YACrBgE,IAAI,CAAChB,MAAM,IAAIgB,IAAI,CAAChB,MAAM,CAAChD,CAAC,CAAC;YAC7BuD,QAAQ,CAACS,IAAI,CAAC4B,EAAE,EAAE,CAAC,CAAC5B,IAAI,CAAC2B,QAAQ,CAAC;UACpC;QAAE,GAdG1B,KAeN,CAAC;IAER;EACF,CAAC;EAED,oBACE,IAAA5E,WAAA,CAAA8E,IAAA,EAAClF,aAAA,CAAA6G,iBAAiB;IAAA1B,QAAA,gBAChB,IAAA/E,WAAA,CAAA8E,IAAA,EAAClF,aAAA,CAAA8G,mBAAmB;MAACC,GAAG,EAAEnC,kBAA0B;MAACoC,SAAS,EAAEnC,UAAU,GAAG,YAAY,GAAG,EAAG;MAAAM,QAAA,GAC5F,CAAC,CAACvB,MAAM,iBACP,IAAAxD,WAAA,CAAA8E,IAAA,EAAClF,aAAA,CAAAiH,qBAAqB;QAAA9B,QAAA,gBACpB,IAAA/E,WAAA,CAAAiF,GAAA,EAACrF,aAAA,CAAAkH,gBAAgB;UAAA/B,QAAA,EAAEvB,MAAM,CAACA;QAAM,CAAmB,CAAC,EACnDA,MAAM,CAACuC,IAAI,iBAAI,IAAA/F,WAAA,CAAAiF,GAAA,EAACrF,aAAA,CAAAmH,gBAAgB;UAAAhC,QAAA,EAAEvB,MAAM,CAACuC;QAAI,CAAmB,CAAC;MAAA,CAC7C,CACxB,eACD,IAAA/F,WAAA,CAAAiF,GAAA,EAAClD,kBAAkB;QAAAgD,QAAA,EAAEtB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEvC,MAAM,CAAC,UAAC8F,CAAC;UAAA,OAAK,CAACA,CAAC,CAACC,MAAM;QAAA,EAAC,CAAC/B,GAAG,CAAC,UAACP,IAAI,EAAEC,KAAK;UAAA,OAAKF,UAAU,CAACC,IAAI,EAAEC,KAAK,CAAC;QAAA;MAAC,CAAqB,CAAC;IAAA,CACrG,CAAC,EACrB,CAAAnB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEyD,IAAI,CAAC,UAACF,CAAC;MAAA,OAAKA,CAAC,CAACC,MAAM;IAAA,EAAC,kBAC3B,IAAAjH,WAAA,CAAAiF,GAAA,EAACpC,eAAe;MAAAkC,QAAA,eACd,IAAA/E,WAAA,CAAAiF,GAAA,EAAClD,kBAAkB;QAAAgD,QAAA,EAAEtB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEvC,MAAM,CAAC,UAAC8F,CAAC;UAAA,OAAK,CAAC,CAACA,CAAC,CAACC,MAAM;QAAA,EAAC,CAAC/B,GAAG,CAAC,UAACP,IAAI,EAAEC,KAAK;UAAA,OAAKF,UAAU,CAACC,IAAI,EAAEC,KAAK,CAAC;QAAA;MAAC,CAAqB;IAAC,CAC1G,CAClB,EACAlB,MAAM,iBACL,IAAA1D,WAAA,CAAA8E,IAAA,EAACzB,eAAe;MAAA0B,QAAA,gBACd,IAAA/E,WAAA,CAAAiF,GAAA,EAACnC,UAAU;QAAAiC,QAAA,EAAErB,MAAM,CAACF;MAAM,CAAa,CAAC,EACvCE,MAAM,CAACqC,IAAI,iBAAI,IAAA/F,WAAA,CAAAiF,GAAA,EAAC/B,UAAU;QAAA6B,QAAA,EAAErB,MAAM,CAACqC;MAAI,CAAa,CAAC,EACrDrC,MAAM,CAACyD,IAAI,iBACV,IAAAnH,WAAA,CAAAiF,GAAA,EAAC7B,UAAU;QAAA2B,QAAA,eACT,IAAA/E,WAAA,CAAAiF,GAAA,EAACzF,UAAA,CAAA4H,SAAS;UAACC,OAAO,EAAE,SAAU;UAACjC,EAAE,EAAE1B,MAAM,CAACyD,IAAI,CAAC/B,EAAG;UAACkC,MAAM,EAAE5D,MAAM,CAACyD,IAAI,CAACG,MAAO;UAACC,OAAO,EAAE7D,MAAM,CAACyD,IAAI,CAACI,OAAQ;UAACC,IAAI,EAAE9D,MAAM,CAACyD,IAAI,CAACK,IAAK;UAAAzC,QAAA,EACjIrB,MAAM,CAACyD,IAAI,CAACnC;QAAK,CACT;MAAC,CACF,CACb;IAAA,CACc,CAClB,EACArB,MAAM,iBAAI,IAAA3D,WAAA,CAAAiF,GAAA,EAACnF,sBAAA,CAAA2H,qBAAqB,EAAAlG,aAAA,KAAKoC,MAAM,CAAG,CAAC;EAAA,CAC/B,CAAC;AAExB,CAAC;AAACL,iBAAA,CAAAoE,SAAA;EApGAjE,KAAK,EAAAkE,UAAA,YAAAC,KAAA;EAILhE,aAAa,EAAA+D,UAAA,YAAAE;AAAA;AAAA,IAAAC,QAAA,GAkGAxE,iBAAiB;AAAAyE,OAAA,cAAAD,QAAA","ignoreList":[]}
+{"version":3,"file":"MobileMenuContent.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_types","_HyperLink","_NavigationProvider","_MenuItem","_icons","_CommonStyles","_ScrollableContainer","_MobileActionContainer","_rooks","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","MenuItemsContainer","styled","div","MenuSectionContainer","props","COLORS","getColor","theme","MenuSectionHeader","ComponentSStyling","ComponentTextStyle","Bold","MenuSectionList","PinnedContainer","FooterText","ComponentXSStyling","BREAKPOINTS","SMALL","FooterNote","Regular","FooterLink","FooterContainer","MobileMenuContent","_ref","header","items","footer","action","onSubMenuOpen","isSmallScreen","useMediaMatch","replace","navigate","isActiveRoute","useNavigation","scrollContainerRef","scrollable","useScrollableContainer","renderItem","item","index","type","jsxs","children","label","jsx","map","MenuItem","id","size","Size","Medium","Small","active","value","disabled","icon","displayLabel","noteLabel","note","iconRight","SystemIcons","ArrowDropRight","onClickHandler","nativeEvent","stopImmediatePropagation","external","to","exact","MobileMenuWrapper","ScrollableContainer","ref","className","MobileHeaderContainer","MobileHeaderText","MobileHeaderNote","a","pinned","some","link","HyperLink","variant","target","onClick","href","MobileActionContainer","propTypes","_propTypes","array","func","_default","exports"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\r\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n} from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { HyperLink } from '../../HyperLink';\r\nimport { useNavigation } from '../../Navigation/NavigationProvider';\r\nimport { MenuItem } from '../../MenuItem';\r\nimport { SystemIcons } from '../../icons';\r\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\r\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\r\nimport { MobileActionContainer } from './MobileActionContainer';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst MenuItemsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  padding: 8px;\r\n`;\r\n\r\nconst MenuSectionContainer = styled.div`\r\n  padding-bottom: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n\r\n  &.divider {\r\n    border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\nconst MenuSectionHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 16px 4px 16px;\r\n  box-sizing: border-box;\r\n  min-height: 32px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nconst MenuSectionList = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n\r\nconst PinnedContainer = styled.div`\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst FooterText = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterNote = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterLink = styled.div`\r\n  a {\r\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n    ${BREAKPOINTS.SMALL} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n  }\r\n`;\r\n\r\nconst FooterContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileMenuContentProps {\r\n  header?: MenuGroupHeader;\r\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\r\n  footer?: MenuGroupFooter;\r\n  action?: MenuButton;\r\n\r\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\r\n}\r\n\r\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  const { navigate, isActiveRoute } = useNavigation();\r\n\r\n  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\r\n\r\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\r\n    switch (item.type) {\r\n      case 'section':\r\n        return (\r\n          <MenuSectionContainer key={index}>\r\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\r\n            <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\r\n          </MenuSectionContainer>\r\n        );\r\n      case 'group':\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            active={false}\r\n            item={{\r\n              value: item.label,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            iconRight={<SystemIcons.ArrowDropRight />}\r\n            onClickHandler={(e) => {\r\n              e.nativeEvent.stopImmediatePropagation();\r\n              onSubMenuOpen && onSubMenuOpen(item);\r\n            }}\r\n          />\r\n        );\r\n      case 'item':\r\n      default:\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            active={!item.external && !!isActiveRoute && isActiveRoute(item.to, !!item.exact)}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            item={{\r\n              value: item.to,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            onClickHandler={(e) => {\r\n              item.action && item.action(e);\r\n              navigate && navigate(item.to, !!item.external);\r\n            }}\r\n          />\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <MobileMenuWrapper>\r\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\r\n        {!!header && (\r\n          <MobileHeaderContainer>\r\n            <MobileHeaderText>{header.header}</MobileHeaderText>\r\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\r\n          </MobileHeaderContainer>\r\n        )}\r\n        <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n      </ScrollableContainer>\r\n      {items?.some((a) => a.pinned) && (\r\n        <PinnedContainer>\r\n          <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n        </PinnedContainer>\r\n      )}\r\n      {footer && (\r\n        <FooterContainer>\r\n          <FooterText>{footer.header}</FooterText>\r\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\r\n          {footer.link && (\r\n            <FooterLink>\r\n              <HyperLink variant={'styleless'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\r\n                {footer.link.label}\r\n              </HyperLink>\r\n            </FooterLink>\r\n          )}\r\n        </FooterContainer>\r\n      )}\r\n      {action && <MobileActionContainer {...action} />}\r\n    </MobileMenuWrapper>\r\n  );\r\n};\r\n\r\nexport default MobileMenuContent;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAOA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,oBAAA,GAAAT,OAAA;AACA,IAAAU,sBAAA,GAAAV,OAAA;AACA,IAAAW,MAAA,GAAAX,OAAA;AAAoC,IAAAY,WAAA,GAAAZ,OAAA;AAAA,SAAAa,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAEpC,MAAMqB,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;AACrC;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,oBAAoB,GAAGF,yBAAM,CAACC,GAAG;AACvC;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BE,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAChF;AACA,CAAC;AAED,MAAMC,iBAAiB,GAAGP,yBAAM,CAACC,GAAG;AACpC;AACA;AACA;AACA;AACA;AACA,sBAAsBE,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzE;AACA,IAAIH,KAAK,IAAI,IAAAK,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACpG,CAAC;AAED,MAAMK,eAAe,GAAGX,yBAAM,CAACC,GAAG;AAClC;AACA;AACA,CAAC;AAED,MAAMW,eAAe,GAAGZ,yBAAM,CAACC,GAAG;AAClC,0BAA0BE,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,CAAC;AAED,MAAMO,UAAU,GAAGb,yBAAM,CAACC,GAAG;AAC7B,IAAIE,KAAK,IAAI,IAAAW,0BAAkB,EAACL,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACrG,IAAIS,mBAAW,CAACC,KAAK;AACrB,MAAMb,KAAK,IAAI,IAAAK,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA,CAAC;AACD,MAAMW,UAAU,GAAGjB,yBAAM,CAACC,GAAG;AAC7B,IAAIE,KAAK,IAAI,IAAAW,0BAAkB,EAACL,0BAAkB,CAACS,OAAO,EAAEd,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG,IAAIS,mBAAW,CAACC,KAAK;AACrB,MAAMb,KAAK,IAAI,IAAAK,yBAAiB,EAACC,0BAAkB,CAACS,OAAO,EAAEd,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACzG;AACA,CAAC;AACD,MAAMa,UAAU,GAAGnB,yBAAM,CAACC,GAAG;AAC7B;AACA,MAAM,IAAAa,0BAAkB,EAACL,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACvD,MAAMK,mBAAW,CAACC,KAAK;AACvB,QAAQ,IAAAR,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA,CAAC;AAED,MAAMU,eAAe,GAAGpB,yBAAM,CAACC,GAAG;AAClC;AACA;AACA,0BAA0BE,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA,gBAAgBH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA,IAAIS,mBAAW,CAACC,KAAK;AACrB;AACA;AACA,CAAC;AAWD,MAAMK,iBAAkE,GAAGC,IAAA,IAAsD;EAAA,IAArD;IAAEC,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAc,CAAC,GAAAL,IAAA;EAC1H,MAAMM,aAAa,GAAG,IAAAC,oBAAa,EAACd,mBAAW,CAACC,KAAK,CAACc,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,MAAM;IAAEC,QAAQ;IAAEC;EAAc,CAAC,GAAG,IAAAC,iCAAa,EAAC,CAAC;EAEnD,MAAM,CAACC,kBAAkB,EAAEC,UAAU,CAAC,GAAG,IAAAC,2CAAsB,EAAC,CAACb,MAAM,EAAEE,MAAM,EAAEC,MAAM,EAAEF,KAAK,CAAC,CAAC;EAEhG,MAAMa,UAAU,GAAGA,CAACC,IAA8F,EAAEC,KAAa,KAAK;IACpI,QAAQD,IAAI,CAACE,IAAI;MACf,KAAK,SAAS;QACZ,oBACE,IAAAhE,WAAA,CAAAiE,IAAA,EAACvC,oBAAoB;UAAAwC,QAAA,GAClBJ,IAAI,CAACK,KAAK,iBAAI,IAAAnE,WAAA,CAAAoE,GAAA,EAACrC,iBAAiB;YAAAmC,QAAA,EAAEJ,IAAI,CAACK;UAAK,CAAoB,CAAC,eAClE,IAAAnE,WAAA,CAAAoE,GAAA,EAACjC,eAAe;YAAA+B,QAAA,EAAEJ,IAAI,CAACd,KAAK,CAACqB,GAAG,CAAC,CAACP,IAAI,EAAEC,KAAK,KAAKF,UAAU,CAACC,IAAI,EAAEC,KAAK,CAAC;UAAC,CAAkB,CAAC;QAAA,GAFpEA,KAGL,CAAC;MAE3B,KAAK,OAAO;QACV,oBACE,IAAA/D,WAAA,CAAAoE,GAAA,EAAC1E,SAAA,CAAA4E,QAAQ;UAEPC,EAAE,EAAE,YAAY,GAAGR,KAAM;UACzBS,IAAI,EAAEpB,aAAa,GAAGqB,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;UAC/CC,MAAM,EAAE,KAAM;UACdd,IAAI,EAAE;YACJe,KAAK,EAAEf,IAAI,CAACK,KAAK;YACjBW,QAAQ,EAAEhB,IAAI,CAACgB,QAAQ;YACvBC,IAAI,EAAEjB,IAAI,CAACiB,IAAI;YACfC,YAAY,EAAElB,IAAI,CAACK,KAAK;YACxBc,SAAS,EAAEnB,IAAI,CAACoB;UAClB,CAAE;UACFC,SAAS,eAAE,IAAAnF,WAAA,CAAAoE,GAAA,EAACzE,MAAA,CAAAyF,WAAW,CAACC,cAAc,IAAE,CAAE;UAC1CC,cAAc,EAAGpF,CAAC,IAAK;YACrBA,CAAC,CAACqF,WAAW,CAACC,wBAAwB,CAAC,CAAC;YACxCrC,aAAa,IAAIA,aAAa,CAACW,IAAI,CAAC;UACtC;QAAE,GAfGC,KAgBN,CAAC;MAEN,KAAK,MAAM;MACX;QACE,oBACE,IAAA/D,WAAA,CAAAoE,GAAA,EAAC1E,SAAA,CAAA4E,QAAQ;UAEPC,EAAE,EAAE,YAAY,GAAGR,KAAM;UACzBa,MAAM,EAAE,CAACd,IAAI,CAAC2B,QAAQ,IAAI,CAAC,CAACjC,aAAa,IAAIA,aAAa,CAACM,IAAI,CAAC4B,EAAE,EAAE,CAAC,CAAC5B,IAAI,CAAC6B,KAAK,CAAE;UAClFnB,IAAI,EAAEpB,aAAa,GAAGqB,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;UAC/Cb,IAAI,EAAE;YACJe,KAAK,EAAEf,IAAI,CAAC4B,EAAE;YACdZ,QAAQ,EAAEhB,IAAI,CAACgB,QAAQ;YACvBC,IAAI,EAAEjB,IAAI,CAACiB,IAAI;YACfC,YAAY,EAAElB,IAAI,CAACK,KAAK;YACxBc,SAAS,EAAEnB,IAAI,CAACoB;UAClB,CAAE;UACFI,cAAc,EAAGpF,CAAC,IAAK;YACrB4D,IAAI,CAACZ,MAAM,IAAIY,IAAI,CAACZ,MAAM,CAAChD,CAAC,CAAC;YAC7BqD,QAAQ,IAAIA,QAAQ,CAACO,IAAI,CAAC4B,EAAE,EAAE,CAAC,CAAC5B,IAAI,CAAC2B,QAAQ,CAAC;UAChD;QAAE,GAdG1B,KAeN,CAAC;IAER;EACF,CAAC;EAED,oBACE,IAAA/D,WAAA,CAAAiE,IAAA,EAACrE,aAAA,CAAAgG,iBAAiB;IAAA1B,QAAA,gBAChB,IAAAlE,WAAA,CAAAiE,IAAA,EAACrE,aAAA,CAAAiG,mBAAmB;MAACC,GAAG,EAAEpC,kBAA0B;MAACqC,SAAS,EAAEpC,UAAU,GAAG,YAAY,GAAG,EAAG;MAAAO,QAAA,GAC5F,CAAC,CAACnB,MAAM,iBACP,IAAA/C,WAAA,CAAAiE,IAAA,EAACrE,aAAA,CAAAoG,qBAAqB;QAAA9B,QAAA,gBACpB,IAAAlE,WAAA,CAAAoE,GAAA,EAACxE,aAAA,CAAAqG,gBAAgB;UAAA/B,QAAA,EAAEnB,MAAM,CAACA;QAAM,CAAmB,CAAC,EACnDA,MAAM,CAACmC,IAAI,iBAAI,IAAAlF,WAAA,CAAAoE,GAAA,EAACxE,aAAA,CAAAsG,gBAAgB;UAAAhC,QAAA,EAAEnB,MAAM,CAACmC;QAAI,CAAmB,CAAC;MAAA,CAC7C,CACxB,eACD,IAAAlF,WAAA,CAAAoE,GAAA,EAAC7C,kBAAkB;QAAA2C,QAAA,EAAElB,KAAK,EAAEvC,MAAM,CAAE0F,CAAC,IAAK,CAACA,CAAC,CAACC,MAAM,CAAC,CAAC/B,GAAG,CAAC,CAACP,IAAI,EAAEC,KAAK,KAAKF,UAAU,CAACC,IAAI,EAAEC,KAAK,CAAC;MAAC,CAAqB,CAAC;IAAA,CACrG,CAAC,EACrBf,KAAK,EAAEqD,IAAI,CAAEF,CAAC,IAAKA,CAAC,CAACC,MAAM,CAAC,iBAC3B,IAAApG,WAAA,CAAAoE,GAAA,EAAChC,eAAe;MAAA8B,QAAA,eACd,IAAAlE,WAAA,CAAAoE,GAAA,EAAC7C,kBAAkB;QAAA2C,QAAA,EAAElB,KAAK,EAAEvC,MAAM,CAAE0F,CAAC,IAAK,CAAC,CAACA,CAAC,CAACC,MAAM,CAAC,CAAC/B,GAAG,CAAC,CAACP,IAAI,EAAEC,KAAK,KAAKF,UAAU,CAACC,IAAI,EAAEC,KAAK,CAAC;MAAC,CAAqB;IAAC,CAC1G,CAClB,EACAd,MAAM,iBACL,IAAAjD,WAAA,CAAAiE,IAAA,EAACrB,eAAe;MAAAsB,QAAA,gBACd,IAAAlE,WAAA,CAAAoE,GAAA,EAAC/B,UAAU;QAAA6B,QAAA,EAAEjB,MAAM,CAACF;MAAM,CAAa,CAAC,EACvCE,MAAM,CAACiC,IAAI,iBAAI,IAAAlF,WAAA,CAAAoE,GAAA,EAAC3B,UAAU;QAAAyB,QAAA,EAAEjB,MAAM,CAACiC;MAAI,CAAa,CAAC,EACrDjC,MAAM,CAACqD,IAAI,iBACV,IAAAtG,WAAA,CAAAoE,GAAA,EAACzB,UAAU;QAAAuB,QAAA,eACT,IAAAlE,WAAA,CAAAoE,GAAA,EAAC5E,UAAA,CAAA+G,SAAS;UAACC,OAAO,EAAE,WAAY;UAACjC,EAAE,EAAEtB,MAAM,CAACqD,IAAI,CAAC/B,EAAG;UAACkC,MAAM,EAAExD,MAAM,CAACqD,IAAI,CAACG,MAAO;UAACC,OAAO,EAAEzD,MAAM,CAACqD,IAAI,CAACI,OAAQ;UAACC,IAAI,EAAE1D,MAAM,CAACqD,IAAI,CAACK,IAAK;UAAAzC,QAAA,EACnIjB,MAAM,CAACqD,IAAI,CAACnC;QAAK,CACT;MAAC,CACF,CACb;IAAA,CACc,CAClB,EACAjB,MAAM,iBAAI,IAAAlD,WAAA,CAAAoE,GAAA,EAACtE,sBAAA,CAAA8G,qBAAqB,EAAA9F,aAAA,KAAKoC,MAAM,CAAG,CAAC;EAAA,CAC/B,CAAC;AAExB,CAAC;AAACL,iBAAA,CAAAgE,SAAA;EApGA7D,KAAK,EAAA8D,UAAA,CAAA3F,OAAA,CAAA4F,KAAA;EAIL5D,aAAa,EAAA2D,UAAA,CAAA3F,OAAA,CAAA6F;AAAA;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAA/F,OAAA,GAkGA0B,iBAAiB","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';
-interface MobileMenuContentProps {
-    header?: MenuGroupHeader;
-    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];
-    footer?: MenuGroupFooter;
-    action?: MenuButton;
-    onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;
-}
-declare const MobileMenuContent: React.FunctionComponent<MobileMenuContentProps>;
-export default MobileMenuContent;
+import React from 'react';
+import { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';
+interface MobileMenuContentProps {
+    header?: MenuGroupHeader;
+    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];
+    footer?: MenuGroupFooter;
+    action?: MenuButton;
+    onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;
+}
+declare const MobileMenuContent: React.FunctionComponent<MobileMenuContentProps>;
+export default MobileMenuContent;

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -1,8 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -10,68 +7,101 @@ import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
 import { Size } from '../../types';
 import { HyperLink } from '../../HyperLink';
-import { useNavigationHelper } from '../../common/NavigationHelper';
+import { useNavigation } from '../../Navigation/NavigationProvider';
 import { MenuItem } from '../../MenuItem';
 import { SystemIcons } from '../../icons';
 import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
 import { useScrollableContainer } from '../../common/ScrollableContainer';
 import { MobileActionContainer } from './MobileActionContainer';
 import { useMediaMatch } from "rooks";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var MenuItemsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
-var MenuSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
-  return COLORS.getColor('neutral_200', props.theme);
-});
-var MenuSectionHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme));
-});
-var MenuSectionList = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var PinnedContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), function (props) {
-  return COLORS.getColor('neutral_200', props.theme);
-});
-var FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
-  return ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
-}, BREAKPOINTS.SMALL, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
-});
-var FooterNote = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
-  return ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
-}, BREAKPOINTS.SMALL, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
-});
-var FooterLink = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
-var FooterContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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"])), function (props) {
-  return COLORS.getColor('neutral_200', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-}, BREAKPOINTS.SMALL);
-var MobileMenuContent = function MobileMenuContent(_ref) {
-  var header = _ref.header,
-    items = _ref.items,
-    footer = _ref.footer,
-    action = _ref.action,
-    onSubMenuOpen = _ref.onSubMenuOpen;
-  var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
-  var _useNavigationHelper = useNavigationHelper(),
-    navigate = _useNavigationHelper.navigate,
-    isActiveRoute = _useNavigationHelper.isActiveRoute;
-  var _useScrollableContain = useScrollableContainer([header, footer, action, items]),
-    _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
-    scrollContainerRef = _useScrollableContain2[0],
-    scrollable = _useScrollableContain2[1];
-  var renderItem = function renderItem(item, index) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MenuItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 8px;
+`;
+const MenuSectionContainer = styled.div`
+  padding-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &.divider {
+    border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  }
+`;
+const MenuSectionHeader = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 16px 4px 16px;
+  box-sizing: border-box;
+  min-height: 32px;
+  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};
+
+  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}
+`;
+const MenuSectionList = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const PinnedContainer = styled.div`
+  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+`;
+const FooterText = styled.div`
+  ${props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+  ${BREAKPOINTS.SMALL} {
+    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+const FooterNote = styled.div`
+  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  ${BREAKPOINTS.SMALL} {
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+const FooterLink = styled.div`
+  a {
+    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}
+    ${BREAKPOINTS.SMALL} {
+      ${ComponentSStyling(ComponentTextStyle.Bold, null)}
+    }
+  }
+`;
+const FooterContainer = styled.div`
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  display: flex;
+  flex-direction: column;
+  background: ${props => COLORS.getColor('neutral_20', props.theme)};
+
+  ${BREAKPOINTS.SMALL} {
+    padding: 16px;
+  }
+`;
+const MobileMenuContent = _ref => {
+  let {
+    header,
+    items,
+    footer,
+    action,
+    onSubMenuOpen
+  } = _ref;
+  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
+  const {
+    navigate,
+    isActiveRoute
+  } = useNavigation();
+  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);
+  const renderItem = (item, index) => {
     switch (item.type) {
       case 'section':
         return /*#__PURE__*/_jsxs(MenuSectionContainer, {
           children: [item.label && /*#__PURE__*/_jsx(MenuSectionHeader, {
             children: item.label
           }), /*#__PURE__*/_jsx(MenuSectionList, {
-            children: item.items.map(function (item, index) {
-              return renderItem(item, index);
-            })
+            children: item.items.map((item, index) => renderItem(item, index))
           })]
         }, index);
       case 'group':
@@ -87,7 +117,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             noteLabel: item.note
           },
           iconRight: /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {}),
-          onClickHandler: function onClickHandler(e) {
+          onClickHandler: e => {
             e.nativeEvent.stopImmediatePropagation();
             onSubMenuOpen && onSubMenuOpen(item);
           }
@@ -96,7 +126,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
       default:
         return /*#__PURE__*/_jsx(MenuItem, {
           id: 'menu-item-' + index,
-          active: !item.external && isActiveRoute(item.to, !!item.exact),
+          active: !item.external && !!isActiveRoute && isActiveRoute(item.to, !!item.exact),
           size: isSmallScreen ? Size.Medium : Size.Small,
           item: {
             value: item.to,
@@ -105,9 +135,9 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             displayLabel: item.label,
             noteLabel: item.note
           },
-          onClickHandler: function onClickHandler(e) {
+          onClickHandler: e => {
             item.action && item.action(e);
-            navigate(item.to, !!item.external);
+            navigate && navigate(item.to, !!item.external);
           }
         }, index);
     }
@@ -123,21 +153,11 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
           children: header.note
         })]
       }), /*#__PURE__*/_jsx(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
-          return !a.pinned;
-        }).map(function (item, index) {
-          return renderItem(item, index);
-        })
+        children: items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))
       })]
-    }), (items === null || items === void 0 ? void 0 : items.some(function (a) {
-      return a.pinned;
-    })) && /*#__PURE__*/_jsx(PinnedContainer, {
+    }), items?.some(a => a.pinned) && /*#__PURE__*/_jsx(PinnedContainer, {
       children: /*#__PURE__*/_jsx(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
-          return !!a.pinned;
-        }).map(function (item, index) {
-          return renderItem(item, index);
-        })
+        children: items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))
       })
     }), footer && /*#__PURE__*/_jsxs(FooterContainer, {
       children: [/*#__PURE__*/_jsx(FooterText, {
@@ -146,7 +166,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
         children: footer.note
       }), footer.link && /*#__PURE__*/_jsx(FooterLink, {
         children: /*#__PURE__*/_jsx(HyperLink, {
-          variant: 'default',
+          variant: 'styleless',
           id: footer.link.id,
           target: footer.link.target,
           onClick: footer.link.onClick,