@nulogy/components 6.7.3 → 6.8.0

package/dist/main.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('classnames')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral', 'classnames'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, null, global.AutosizeInput, null, global.t));
-}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, toConsumableArray, AutosizeInput, taggedTemplateLiteral, t) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
+}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,8 +49,8 @@
   var WindowedSelect__default = /*#__PURE__*/_interopDefaultLegacy(WindowedSelect);
   var exenv__default = /*#__PURE__*/_interopDefaultLegacy(exenv);
   var smoothscroll__default = /*#__PURE__*/_interopDefaultLegacy(smoothscroll);
-  var AutosizeInput__default = /*#__PURE__*/_interopDefaultLegacy(AutosizeInput);
   var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
+  var AutosizeInput__default = /*#__PURE__*/_interopDefaultLegacy(AutosizeInput);
 
   var defaultOptions = {
     bindI18n: 'languageChanged',
@@ -275,7 +275,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 01 Feb 2022 18:28:25 GMT
+   * Generated on Mon, 06 Jun 2022 21:26:05 GMT
    */
 
   const color_base_black = "#011e38";
@@ -315,9 +315,9 @@
   const radius_border_small = "2px";
   const radius_border_medium = "4px";
   const radius_border_circle = "50%";
-  const shadow_box_small = "0px 0px 3px 0px rgba(1, 30, 56, 0.2)";
-  const shadow_box_medium = "0px 1px 4px 0px rgba(1, 30, 56, 0.15)";
-  const shadow_box_large = "0px 3px 5px 0px rgba(1, 30, 56, 0.1)";
+  const shadow_box_small = "0px 1px 2px 0px rgba(1, 30, 56, 0.25)";
+  const shadow_box_medium = "0px 3px 8px 0px rgba(1, 30, 56, 0.18)";
+  const shadow_box_large = "0px 6px 12px 2px rgba(1, 30, 56, 0.15)";
   const shadow_focus = "0px 0px 5px 0px rgba(33, 107, 235, .9)";
   const shadow_error = "0px 0px 5px 0px rgba(204, 20, 57, .9)";
   const size_base_none = "0px";
@@ -11919,23 +11919,23 @@
   }).withConfig({
     displayName: "Text",
     componentId: "sc-15glbbx-0"
-  })(space, typography, color, layout, overflow, textOverflow, cursor$1, function (_ref) {
+  })(function (_ref) {
     var disabled = _ref.disabled,
-        textTransform = _ref.textTransform;
+        textTransform = _ref.textTransform,
+        theme = _ref.theme;
     return {
       textTransform: textTransform,
+      color: "currentColor",
+      marginTop: 0,
+      marginBottom: 0,
+      fontSize: theme.fontSizes.medium,
+      lineHeight: theme.lineHeights.base,
       opacity: disabled ? "0.7" : undefined
     };
-  });
+  }, compose(space, typography, color, layout, overflow, textOverflow, cursor$1));
   Text.defaultProps = {
     inline: false,
-    disabled: false,
-    mt: 0,
-    mb: 0,
-    fontSize: "medium",
-    lineHeight: "base",
-    textTransform: undefined,
-    color: "currentColor"
+    disabled: false
   };
 
   var Heading1 = Text.withComponent("h1");
@@ -16946,14 +16946,14 @@
         _ref$showArrow = _ref.showArrow,
         showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
         _ref$backgroundColor = _ref.backgroundColor,
-        backgroundColor = _ref$backgroundColor === void 0 ? "whiteGrey" : _ref$backgroundColor,
+        backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
         theme = _ref.theme;
     return Object.assign({
       borderRadius: theme.radii.medium,
       backgroundColor: theme.colors[backgroundColor],
       borderTop: "1px solid  " + theme.colors[backgroundColor],
       borderBottom: "1px solid " + theme.colors[backgroundColor],
-      boxShadow: theme.shadows.small,
+      boxShadow: theme.shadows.medium,
       padding: "7px 0",
       zIndex: "100"
     }, getMenuMargin(dataPlacement, showArrow));
@@ -20190,7 +20190,7 @@
         disabled = _a.disabled,
         defaultOpen = _a.defaultOpen,
         _a$backgroundColor = _a.backgroundColor,
-        backgroundColor = _a$backgroundColor === void 0 ? "whiteGrey" : _a$backgroundColor,
+        backgroundColor = _a$backgroundColor === void 0 ? "white" : _a$backgroundColor,
         _a$placement = _a.placement,
         placement = _a$placement === void 0 ? "bottom-start" : _a$placement,
         className = _a.className,
@@ -20242,15 +20242,14 @@
   var DropdownButton = styled__default['default'].button.withConfig({
     displayName: "DropdownButton",
     componentId: "sc-16gk4iv-0"
-  })(color, function (_ref) {
-    var _ref$disabled = _ref.disabled,
-        disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+  })(function (_ref) {
+    var disabled = _ref.disabled,
         theme = _ref.theme,
-        _ref$hoverColor = _ref.hoverColor,
-        hoverColor = _ref$hoverColor === void 0 ? "darkBlue" : _ref$hoverColor,
-        _ref$bgHoverColor = _ref.bgHoverColor,
-        bgHoverColor = _ref$bgHoverColor === void 0 ? "lightGrey" : _ref$bgHoverColor;
+        hoverColor = _ref.hoverColor,
+        bgHoverColor = _ref.bgHoverColor;
     return {
+      color: theme.colors.darkGrey,
+      fontWeight: theme.fontWeights.medium,
       display: "block",
       width: "100%",
       cursor: disabled ? "default" : "pointer",
@@ -20276,12 +20275,11 @@
         opacity: ".5"
       }
     };
-  });
+  }, color);
   DropdownButton.defaultProps = {
-    color: "darkBlue",
     disabled: false,
     hoverColor: "darkBlue",
-    bgHoverColor: "lightGrey"
+    bgHoverColor: "lightBlue"
   };
 
   var DropdownLink = styled__default['default'].a.withConfig({
@@ -20290,13 +20288,12 @@
     }
   })(function (_ref) {
     var theme = _ref.theme,
-        _ref$bgHoverColor = _ref.bgHoverColor,
-        bgHoverColor = _ref$bgHoverColor === void 0 ? "lightGrey" : _ref$bgHoverColor,
-        _ref$hoverColor = _ref.hoverColor,
-        hoverColor = _ref$hoverColor === void 0 ? "darkBlue" : _ref$hoverColor,
-        _ref$color = _ref.color,
-        color = _ref$color === void 0 ? "darkBlue" : _ref$color;
+        color = _ref.color,
+        bgHoverColor = _ref.bgHoverColor,
+        hoverColor = _ref.hoverColor;
     return {
+      color: theme.colors[color],
+      fontWeight: theme.fontWeights.medium,
       display: "block",
       textDecoration: "none",
       borderColor: "transparent",
@@ -20304,16 +20301,15 @@
       lineHeight: theme.lineHeights.base,
       fontSize: theme.fontSizes.medium,
       transition: ".2s",
-      color: theme.colors[color],
       padding: theme.space.x1 + " " + theme.space.x2 + " " + theme.space.x1 + " 12px",
       borderLeft: theme.space.half + " solid transparent",
+      "&:visited": {
+        color: theme.colors[color]
+      },
       "&:hover": {
         color: theme.colors[hoverColor],
         backgroundColor: theme.colors[bgHoverColor]
       },
-      "&:visited": {
-        color: theme.colors[color]
-      },
       "&:focus": {
         outline: "none",
         color: theme.colors[hoverColor],
@@ -20325,21 +20321,25 @@
       }
     };
   });
+  DropdownLink.defaultProps = {
+    disabled: false,
+    color: "darkGrey",
+    hoverColor: "darkBlue",
+    bgHoverColor: "lightBlue"
+  };
 
   var DropdownItem = styled__default['default'].div.withConfig({
     displayName: "DropdownItem",
     componentId: "xev49s-0"
   })(function (_ref) {
     var theme = _ref.theme,
-        _ref$color = _ref.color,
-        color = _ref$color === void 0 ? "darkBlue" : _ref$color,
-        _ref$hoverColor = _ref.hoverColor,
-        hoverColor = _ref$hoverColor === void 0 ? "darkBlue" : _ref$hoverColor,
-        _ref$bgHoverColor = _ref.bgHoverColor,
-        bgHoverColor = _ref$bgHoverColor === void 0 ? "lightGrey" : _ref$bgHoverColor;
+        color = _ref.color,
+        hoverColor = _ref.hoverColor,
+        bgHoverColor = _ref.bgHoverColor;
     return {
       "*": {
         color: theme.colors[color],
+        fontWeight: theme.fontWeights.medium,
         display: "block",
         width: "100%",
         cursor: "pointer",
@@ -20367,6 +20367,29 @@
       }
     };
   });
+  DropdownItem.defaultProps = {
+    color: "darkGrey",
+    hoverColor: "darkBlue",
+    bgHoverColor: "lightBlue"
+  };
+
+  var DropdownText = styled__default['default'](Text).withConfig({
+    displayName: "DropdownText",
+    componentId: "sc-1t7br0a-0"
+  })(function (_ref) {
+    var theme = _ref.theme;
+    return {
+      color: theme.colors.darkGrey,
+      fontWeight: theme.fontWeights.medium,
+      display: "block",
+      width: "100%",
+      border: "none",
+      textAlign: "left",
+      backgroundColor: "transparent",
+      transition: ".2s",
+      padding: theme.space.x1 + " " + theme.space.x2
+    };
+  }, color);
 
   var HelpText = styled__default['default'](Text).withConfig({
     displayName: "HelpText",
@@ -22578,12 +22601,12 @@
     nodeType: 'div'
   };
 
-  var _excluded$5 = ["name", "onSubmit"];
+  var _excluded = ["name", "onSubmit"];
 
   var BaseNavBarSearch = function BaseNavBarSearch(_ref) {
     var name = _ref.name,
         onSubmit = _ref.onSubmit,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref, _excluded$5);
+        props = _objectWithoutPropertiesLoose__default['default'](_ref, _excluded);
 
     var handleOnSubmit = function handleOnSubmit(e) {
       e.preventDefault();
@@ -22757,11 +22780,11 @@
           closeMenu: closeMenu,
           openMenu: openMenu,
           isOpen: isOpen
-        }), Object.assign({
+        }), Object.assign(Object.assign({
           "aria-haspopup": true,
           "aria-expanded": isOpen,
           type: "button"
-        }, _this4.menuTriggerEventHandlers(), {
+        }, _this4.menuTriggerEventHandlers()), {
           ref: function ref(node) {
             _ref2(node);
 
@@ -22772,7 +22795,7 @@
         placement: placement,
         modifiers: modifiers
       }, function (popperProps) {
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DropdownMenuContainer, _extends__default['default']({}, popperProps, {
+        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DropdownMenuContainer, Object.assign({}, popperProps, {
           placement: placement,
           showArrow: showArrow
         }, _this4.menuEventHandlers(), {
@@ -22788,7 +22811,7 @@
         }, dropdownMenuContainerEventHandlers({
           openMenu: openMenu,
           closeMenu: closeMenu
-        })), /*#__PURE__*/React__default['default'].createElement(PopperArrow, _extends__default['default']({}, popperProps.arrowProps, {
+        })), /*#__PURE__*/React__default['default'].createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, {
           placement: placement,
           ref: popperProps.arrowProps.ref,
           backgroundColor: "whiteGrey",
@@ -22840,12 +22863,12 @@
     hideDelay: "100"
   };
 
-  var SubMenuLink$1 = styled__default['default'](DropdownLink).withConfig({
+  var SubMenuLink = styled__default['default'](DropdownLink).withConfig({
     displayName: "renderSubMenuItems__SubMenuLink",
-    componentId: "sc-17xzkuc-0"
+    componentId: "sc-10nvflk-0"
   })(fontSize, lineHeight, space);
 
-  var getSharedStyles$5 = function getSharedStyles() {
+  var getSharedStyles$4 = function getSharedStyles() {
     return {
       display: "block",
       whiteSpace: "nowrap",
@@ -22858,13 +22881,13 @@
     };
   };
 
-  var ApplySubMenuLinkStyles$1 = styled__default['default'].li.withConfig({
+  var ApplySubMenuLinkStyles = styled__default['default'].li.withConfig({
     displayName: "renderSubMenuItems__ApplySubMenuLinkStyles",
-    componentId: "sc-17xzkuc-1"
+    componentId: "sc-10nvflk-1"
   })({
     color: Theme.colors.darkBlue,
     verticalAlign: "middle",
-    "> *": Object.assign({}, getSharedStyles$5(), {
+    "> *": Object.assign(Object.assign({}, getSharedStyles$4()), {
       transition: ".2s",
       textDecoration: "none",
       "&:hover, &:focus": {
@@ -22879,19 +22902,21 @@
       }
     })
   });
-  var SubMenuText$1 = styled__default['default'].li.withConfig({
+  var SubMenuText = styled__default['default'].li.withConfig({
     displayName: "renderSubMenuItems__SubMenuText",
-    componentId: "sc-17xzkuc-2"
+    componentId: "sc-10nvflk-2"
   })(Object.assign({
     color: Theme.colors.darkGrey
-  }, getSharedStyles$5()));
+  }, getSharedStyles$4()));
 
   var renderSubMenuTrigger$1 = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("li", {
       style: {
         whiteSpace: "nowrap"
       },
-      key: subMenuItem.name
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
       name: subMenuItem.name,
@@ -22900,12 +22925,14 @@
   };
 
   var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement("li", {
       style: {
         whiteSpace: "nowrap"
       },
-      key: subMenuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink$1, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink, {
       fontSize: "small",
       lineHeight: "smallTextBase",
       py: "half",
@@ -22917,15 +22944,19 @@
   };
 
   var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles$1, {
-      key: subMenuItem.name,
+    var _a;
+
+    return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
       onClick: onItemClick
     }, subMenuItem.render());
   };
 
   var renderText$5 = function renderText(subMenuItem) {
-    return /*#__PURE__*/React__default['default'].createElement(SubMenuText$1, {
-      key: subMenuItem.name
+    var _a;
+
+    return /*#__PURE__*/React__default['default'].createElement(SubMenuText, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, subMenuItem.name);
   };
 
@@ -22947,11 +22978,9 @@
     });
   };
 
-  var _excluded$4 = ["name", "isOpen"],
-      _excluded2$2 = ["menuData", "name", "onItemClick"];
   var StyledButton$3 = styled__default['default'].button.withConfig({
     displayName: "SubMenuTrigger__StyledButton",
-    componentId: "sc-1pygu12-0"
+    componentId: "sc-1jh6iro-0"
   })(function (_ref) {
     var isOpen = _ref.isOpen;
     return {
@@ -22982,15 +23011,15 @@
       cursor: "pointer"
     };
   });
-  var SubMenuTriggerButton$1 = /*#__PURE__*/React__default['default'].forwardRef(function (_ref2, ref) {
-    var name = _ref2.name,
-        isOpen = _ref2.isOpen,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref2, _excluded$4);
+  var SubMenuTriggerButton$1 = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
+    var name = _a.name,
+        isOpen = _a.isOpen,
+        props = __rest(_a, ["name", "isOpen"]);
 
-    return /*#__PURE__*/React__default['default'].createElement(StyledButton$3, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(StyledButton$3, Object.assign({
       isOpen: isOpen,
       ref: ref
-    }, props), name, /*#__PURE__*/React__default['default'].createElement(Icon, {
+    }, props), /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, name, /*#__PURE__*/React__default['default'].createElement(Icon, {
       style: {
         position: "absolute",
         top: "7px"
@@ -22999,7 +23028,7 @@
       color: "darkBlue",
       size: "20px",
       p: "2px"
-    }));
+    })));
   });
   SubMenuTriggerButton$1.propTypes = {
     name: PropTypes__default['default'].string.isRequired,
@@ -23013,26 +23042,26 @@
     var menuData = props.menuData,
         name = props.name,
         onItemClick = props.onItemClick,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, _excluded2$2);
+        otherProps = __rest(props, ["menuData", "name", "onItemClick"]);
 
-    return /*#__PURE__*/React__default['default'].createElement(NavBarDropdownMenu$1, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(NavBarDropdownMenu$1, Object.assign({
       placement: "right-start",
       modifiers: null,
       showArrow: false,
       triggerTogglesMenuState: false
     }, otherProps, {
-      dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref3) {
-        var openMenu = _ref3.openMenu,
-            closeMenu = _ref3.closeMenu;
+      dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref2) {
+        var openMenu = _ref2.openMenu,
+            closeMenu = _ref2.closeMenu;
         return {
           onMouseEnter: openMenu,
           onMouseLeave: closeMenu
         };
       },
-      trigger: function trigger(_ref4) {
-        var closeMenu = _ref4.closeMenu,
-            openMenu = _ref4.openMenu,
-            isOpen = _ref4.isOpen;
+      trigger: function trigger(_ref3) {
+        var closeMenu = _ref3.closeMenu,
+            openMenu = _ref3.openMenu,
+            isOpen = _ref3.isOpen;
         return /*#__PURE__*/React__default['default'].createElement(SubMenuTriggerButton$1, {
           isOpen: isOpen,
           name: name,
@@ -23059,11 +23088,9 @@
     onItemClick: null
   };
 
-  var _excluded$3 = ["name", "color", "hoverColor", "hoverBackground"],
-      _excluded2$1 = ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"];
   var StyledButton$2 = styled__default['default'].button.withConfig({
     displayName: "MenuTrigger__StyledButton",
-    componentId: "sm3xx0-0"
+    componentId: "ooz0w0-0"
   })(function (_ref) {
     var color = _ref.color,
         hoverColor = _ref.hoverColor,
@@ -23105,14 +23132,14 @@
     hoverColor: Theme.colors.lightBlue,
     hoverBackground: Theme.colors.black
   };
-  var MenuTriggerButton$1 = /*#__PURE__*/React__default['default'].forwardRef(function (_ref2, ref) {
-    var name = _ref2.name,
-        color = _ref2.color,
-        hoverColor = _ref2.hoverColor,
-        hoverBackground = _ref2.hoverBackground,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref2, _excluded$3);
+  var MenuTriggerButton$1 = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
+    var name = _a.name,
+        color = _a.color,
+        hoverColor = _a.hoverColor,
+        hoverBackground = _a.hoverBackground,
+        props = __rest(_a, ["name", "color", "hoverColor", "hoverBackground"]);
 
-    return /*#__PURE__*/React__default['default'].createElement(StyledButton$2, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(StyledButton$2, Object.assign({
       color: color,
       hoverColor: hoverColor,
       hoverBackground: hoverBackground,
@@ -23130,7 +23157,7 @@
     }));
   });
   MenuTriggerButton$1.propTypes = {
-    name: PropTypes__default['default'].node.isRequired,
+    name: PropTypes__default['default'].string.isRequired,
     color: PropTypes__default['default'].string,
     hoverColor: PropTypes__default['default'].string,
     hoverBackground: PropTypes__default['default'].string
@@ -23148,7 +23175,7 @@
         hoverColor = props.hoverColor,
         hoverBackground = props.hoverBackground,
         ariaLabel = props["aria-label"],
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, _excluded2$1);
+        otherProps = __rest(props, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"]);
 
     var dropdownMinWidth = "auto";
 
@@ -23158,7 +23185,7 @@
       return popperData;
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(NavBarDropdownMenu$1, _extends__default['default']({}, otherProps, {
+    return /*#__PURE__*/React__default['default'].createElement(NavBarDropdownMenu$1, Object.assign({}, otherProps, {
       placement: "bottom-start",
       modifiers: {
         flip: {
@@ -23183,8 +23210,8 @@
           "aria-label": ariaLabel
         });
       }
-    }), function (_ref3) {
-      var closeMenu = _ref3.closeMenu;
+    }), function (_ref2) {
+      var closeMenu = _ref2.closeMenu;
       return /*#__PURE__*/React__default['default'].createElement("ul", {
         style: {
           listStyle: "none",
@@ -23215,9 +23242,7 @@
     hoverBackground: Theme.colors.black
   };
 
-  var _excluded$2 = ["menuData", "themeColorObject"];
-
-  var getSharedStyles$4 = function getSharedStyles(color) {
+  var getSharedStyles$3 = function getSharedStyles(color) {
     return {
       display: "block",
       color: themeGet("colors." + color, color)(color),
@@ -23232,15 +23257,15 @@
     };
   };
 
-  var ApplyMenuLinkStyles$3 = styled__default['default'].div.withConfig({
+  var ApplyMenuLinkStyles$2 = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__ApplyMenuLinkStyles",
-    componentId: "e4dzdq-0"
+    componentId: "sc-1mpxh2o-0"
   })(function (_ref) {
     var color = _ref.color,
         hoverColor = _ref.hoverColor,
         hoverBackground = _ref.hoverBackground;
     return {
-      "*": Object.assign({}, getSharedStyles$4(color), {
+      "*": Object.assign(Object.assign({}, getSharedStyles$3(color)), {
         transition: ".2s",
         "&:hover, &:focus": {
           outline: "none",
@@ -23257,24 +23282,24 @@
       })
     };
   });
-  ApplyMenuLinkStyles$3.propTypes = {
+  ApplyMenuLinkStyles$2.propTypes = {
     color: PropTypes__default['default'].string,
     hoverColor: PropTypes__default['default'].string,
     hoverBackground: PropTypes__default['default'].string
   };
-  ApplyMenuLinkStyles$3.defaultProps = {
+  ApplyMenuLinkStyles$2.defaultProps = {
     color: Theme.colors.white,
     hoverColor: Theme.colors.lightBlue,
     hoverBackground: Theme.colors.black
   };
-  var MenuLink$3 = styled__default['default'].a.withConfig({
+  var MenuLink$2 = styled__default['default'].a.withConfig({
     displayName: "DesktopMenu__MenuLink",
-    componentId: "e4dzdq-1"
+    componentId: "sc-1mpxh2o-1"
   })(function (_ref2) {
     var color = _ref2.color,
         hoverColor = _ref2.hoverColor,
         hoverBackground = _ref2.hoverBackground;
-    return Object.assign({}, getSharedStyles$4(color), {
+    return Object.assign(Object.assign({}, getSharedStyles$3(color)), {
       transition: ".2s",
       "&:hover, &:focus": {
         outline: "none",
@@ -23290,16 +23315,16 @@
       }
     });
   });
-  var MenuText$3 = styled__default['default'].div.withConfig({
+  var MenuText$2 = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__MenuText",
-    componentId: "e4dzdq-2"
+    componentId: "sc-1mpxh2o-2"
   })(function (_ref3) {
     var textColor = _ref3.textColor;
-    return Object.assign({}, getSharedStyles$4(textColor));
+    return Object.assign({}, getSharedStyles$3(textColor));
   });
   var Nav$3 = styled__default['default'].nav.withConfig({
     displayName: "DesktopMenu__Nav",
-    componentId: "e4dzdq-3"
+    componentId: "sc-1mpxh2o-3"
   })({
     display: "flex"
   });
@@ -23307,7 +23332,7 @@
   var renderMenuTrigger$1 = function renderMenuTrigger(menuItem, themeColorObject) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger$1, _extends__default['default']({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuTrigger$1, Object.assign({
       name: menuItem.name,
       "aria-label": menuItem.ariaLabel,
       menuData: menuItem.items
@@ -23317,7 +23342,7 @@
   var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$3, _extends__default['default']({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$2, Object.assign({
       href: menuItem.href,
       as: menuItem.as,
       to: menuItem.to
@@ -23325,13 +23350,13 @@
   };
 
   var renderCustom$4 = function renderCustom(menuItem, themeColorObject) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$3, _extends__default['default']({}, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$2, Object.assign({}, themeColorObject, {
       key: menuItem.name
     }), menuItem.render());
   };
 
   var renderText$4 = function renderText(menuItem, themeColorObject) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuText$3, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(MenuText$2, Object.assign({
       key: menuItem.name
     }, themeColorObject), menuItem.name);
   };
@@ -23352,12 +23377,12 @@
     return getRenderFunction$4(menuItem)(menuItem, themeColorObject);
   };
 
-  var BaseDesktopMenu$1 = function BaseDesktopMenu(_ref4) {
-    var menuData = _ref4.menuData,
-        themeColorObject = _ref4.themeColorObject,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref4, _excluded$2);
+  var BaseDesktopMenu$1 = function BaseDesktopMenu(_a) {
+    var menuData = _a.menuData,
+        themeColorObject = _a.themeColorObject,
+        props = __rest(_a, ["menuData", "themeColorObject"]);
 
-    return /*#__PURE__*/React__default['default'].createElement(Nav$3, props, menuData.map(function (menuItem) {
+    return /*#__PURE__*/React__default['default'].createElement(Nav$3, Object.assign({}, props), menuData.map(function (menuItem) {
       return renderMenuItem$1(menuItem, themeColorObject);
     }));
   };
@@ -23372,7 +23397,7 @@
   };
   var DesktopMenu$1 = styled__default['default'](BaseDesktopMenu$1).withConfig({
     displayName: "DesktopMenu",
-    componentId: "e4dzdq-4"
+    componentId: "sc-1mpxh2o-4"
   })({
     "> div": {
       ":not(:last-of-type)": {
@@ -23381,10 +23406,40 @@
     }
   });
 
-  var _excluded$1 = ["menuData", "closeMenu", "subtext", "includeSubtext", "themeColorObject"];
+  var isValidMenuItem = function validArrayItem(arr, idx, componentName, location, propFullName) {
+    var obj = arr[idx];
+
+    if (typeof obj !== "object") {
+      throw new Error("Invalid " + propFullName + " of type `" + typeof obj + "` supplied to `" + componentName + "`, expected `object`");
+    }
+
+    PropTypes__default['default'].checkPropTypes({
+      name: PropTypes__default['default'].node.isRequired,
+      ariaLabel: PropTypes__default['default'].string,
+      href: PropTypes__default['default'].string,
+      items: PropTypes__default['default'].arrayOf(isValidMenuItem),
+      render: PropTypes__default['default'].func
+    }, obj, propFullName, componentName);
+    var numberOfDefiningKeys = 0;
+    var definingKeys = ["href", "items", "render"];
+    var keys = Object.keys(obj);
+
+    for (var i = 0; i < keys.length; i += 1) {
+      if (definingKeys.includes(keys[i])) {
+        numberOfDefiningKeys += 1;
+      }
+    }
+
+    if (numberOfDefiningKeys > 1) {
+      return new Error("Invalid set of keys for Menu Item with name `" + obj.name + "` supplied to `" + componentName + "`. Include a name key and optionally ONE of " + definingKeys);
+    }
+
+    return null;
+  };
+
   var BrandingWrap$1 = styled__default['default'].div.withConfig({
     displayName: "MobileMenu__BrandingWrap",
-    componentId: "sc-1wo8gfl-0"
+    componentId: "vqy2lk-0"
   })({
     marginTop: "-" + Theme.space.x1,
     marginBottom: Theme.space.x3,
@@ -23396,7 +23451,7 @@
     return 24 * layer + 24 + "px";
   };
 
-  var getSharedStyles$3 = function getSharedStyles(_ref) {
+  var getSharedStyles$2 = function getSharedStyles(_ref) {
     var color = _ref.color,
         layer = _ref.layer;
     return {
@@ -23414,9 +23469,9 @@
     };
   };
 
-  var ApplyMenuLinkStyles$2 = styled__default['default'].li.withConfig({
+  var ApplyMenuLinkStyles$1 = styled__default['default'].li.withConfig({
     displayName: "MobileMenu__ApplyMenuLinkStyles",
-    componentId: "sc-1wo8gfl-1"
+    componentId: "vqy2lk-1"
   })(function (_ref2) {
     var color = _ref2.color,
         hoverColor = _ref2.hoverColor,
@@ -23424,10 +23479,10 @@
         layer = _ref2.layer;
     return {
       display: "block",
-      "*": Object.assign({}, getSharedStyles$3({
+      "*": Object.assign(Object.assign({}, getSharedStyles$2({
         color: color,
         layer: layer
-      }), {
+      })), {
         textDecoration: "none",
         "&:hover, &:focus": {
           outline: "none",
@@ -23443,30 +23498,30 @@
       })
     };
   });
-  ApplyMenuLinkStyles$2.propTypes = {
+  ApplyMenuLinkStyles$1.propTypes = {
     layer: PropTypes__default['default'].number,
     color: PropTypes__default['default'].string,
     hoverColor: PropTypes__default['default'].string,
     hoverBackground: PropTypes__default['default'].string
   };
-  ApplyMenuLinkStyles$2.defaultProps = {
+  ApplyMenuLinkStyles$1.defaultProps = {
     layer: 0,
     color: Theme.colors.white,
     hoverColor: Theme.colors.lightBlue,
     hoverBackground: Theme.colors.black
   };
-  var MenuLink$2 = styled__default['default'].a.withConfig({
+  var MenuLink$1 = styled__default['default'].a.withConfig({
     displayName: "MobileMenu__MenuLink",
-    componentId: "sc-1wo8gfl-2"
+    componentId: "vqy2lk-2"
   })(function (_ref3) {
     var color = _ref3.color,
         hoverColor = _ref3.hoverColor,
         hoverBackground = _ref3.hoverBackground,
         layer = _ref3.layer;
-    return Object.assign({}, getSharedStyles$3({
+    return Object.assign(Object.assign({}, getSharedStyles$2({
       color: color,
       layer: layer
-    }), {
+    })), {
       width: "100%",
       borderRadius: "0",
       transition: ".2s",
@@ -23484,20 +23539,20 @@
       }
     });
   });
-  var MenuText$2 = styled__default['default'].li.withConfig({
+  var MenuText$1 = styled__default['default'].li.withConfig({
     displayName: "MobileMenu__MenuText",
-    componentId: "sc-1wo8gfl-3"
+    componentId: "vqy2lk-3"
   })(function (_ref4) {
     var textColor = _ref4.textColor,
         layer = _ref4.layer;
-    return Object.assign({}, getSharedStyles$3({
+    return Object.assign({}, getSharedStyles$2({
       color: textColor,
       layer: layer
     }));
   });
   var SubMenuItemsList$1 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__SubMenuItemsList",
-    componentId: "sc-1wo8gfl-4"
+    componentId: "vqy2lk-4"
   })({
     listStyle: "none",
     paddingLeft: "0",
@@ -23511,7 +23566,7 @@
         display: "block",
         marginBottom: Theme.space.x1
       }
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$2, _extends__default['default']({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$1, Object.assign({
       layer: layer
     }, themeColorObject, {
       onClick: linkOnClick,
@@ -23522,7 +23577,7 @@
   };
 
   var renderCustom$3 = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$2, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({
       key: menuItem.name
     }, themeColorObject, {
       layer: layer,
@@ -23545,7 +23600,7 @@
   };
 
   var renderText$3 = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuText$2, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(MenuText$1, Object.assign({
       key: menuItem.name,
       layer: layer
     }, themeColorObject), menuItem.name);
@@ -23616,7 +23671,7 @@
   };
   var Menu$2 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__Menu",
-    componentId: "sc-1wo8gfl-5"
+    componentId: "vqy2lk-5"
   })(function () {
     var _ref6;
 
@@ -23632,7 +23687,7 @@
   });
   var Nav$2 = styled__default['default'].nav.withConfig({
     displayName: "MobileMenu__Nav",
-    componentId: "sc-1wo8gfl-6"
+    componentId: "vqy2lk-6"
   })(function (_ref7) {
     var backgroundColor = _ref7.backgroundColor;
     return {
@@ -23642,15 +23697,15 @@
     minHeight: "calc(100vh - 72px)"
   });
 
-  var BaseMobileMenu$1 = function BaseMobileMenu(_ref8) {
-    var menuData = _ref8.menuData,
-        closeMenu = _ref8.closeMenu,
-        subtext = _ref8.subtext,
-        includeSubtext = _ref8.includeSubtext,
-        themeColorObject = _ref8.themeColorObject,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref8, _excluded$1);
+  var BaseMobileMenu$1 = function BaseMobileMenu(_a) {
+    var menuData = _a.menuData,
+        closeMenu = _a.closeMenu,
+        subtext = _a.subtext,
+        includeSubtext = _a.includeSubtext,
+        themeColorObject = _a.themeColorObject,
+        props = __rest(_a, ["menuData", "closeMenu", "subtext", "includeSubtext", "themeColorObject"]);
 
-    return /*#__PURE__*/React__default['default'].createElement(Nav$2, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(Nav$2, Object.assign({
       backgroundColor: themeColorObject && themeColorObject.background
     }, props), subtext && includeSubtext && /*#__PURE__*/React__default['default'].createElement(BrandingWrap$1, null, /*#__PURE__*/React__default['default'].createElement(BrandingText, {
       logoColor: themeColorObject && themeColorObject.logoColor
@@ -23676,44 +23731,115 @@
   };
   var MobileMenu$1 = styled__default['default'](BaseMobileMenu$1).withConfig({
     displayName: "MobileMenu",
-    componentId: "sc-1wo8gfl-7"
+    componentId: "vqy2lk-7"
   })(display);
 
-  var isValidMenuItem = function validArrayItem(arr, idx, componentName, location, propFullName) {
-    var obj = arr[idx];
+  var SmallNavBarNoState$1 = /*#__PURE__*/function (_React$Component) {
+    _inheritsLoose__default['default'](SmallNavBarNoState, _React$Component);
 
-    if (typeof obj !== "object") {
-      throw new Error("Invalid " + propFullName + " of type `" + typeof obj + "` supplied to `" + componentName + "`, expected `object`");
+    function SmallNavBarNoState(props) {
+      var _this;
+
+      _this = _React$Component.call(this, props) || this;
+      _this.navRef = /*#__PURE__*/React__default['default'].createRef();
+      return _this;
     }
 
-    PropTypes__default['default'].checkPropTypes({
-      name: PropTypes__default['default'].node.isRequired,
-      ariaLabel: PropTypes__default['default'].string,
-      href: PropTypes__default['default'].string,
-      items: PropTypes__default['default'].arrayOf(isValidMenuItem),
-      render: PropTypes__default['default'].func
-    }, obj, propFullName, componentName);
-    var numberOfDefiningKeys = 0;
-    var definingKeys = ["href", "items", "render"];
-    var keys = Object.keys(obj);
+    var _proto = SmallNavBarNoState.prototype;
 
-    for (var i = 0; i < keys.length; i += 1) {
-      if (definingKeys.includes(keys[i])) {
-        numberOfDefiningKeys += 1;
-      }
-    }
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+      if (this.props.menuState.isOpen && !prevProps.menuState.isOpen) this.navRef.current.scrollTop = 0;
+    };
 
-    if (numberOfDefiningKeys > 1) {
-      return new Error("Invalid set of keys for Menu Item with name `" + obj.name + "` supplied to `" + componentName + "`. Include a name key and optionally ONE of " + definingKeys);
-    }
+    _proto.isSmallScreen = function isSmallScreen() {
+      var _this$props = this.props,
+          breakpointLower = _this$props.breakpointLower,
+          width = _this$props.width;
+      return width < pixelDigitsFrom$1(breakpointLower);
+    };
 
-    return null;
+    _proto.render = function render() {
+      var _a = this.props,
+          menuData = _a.menuData,
+          _a$menuState = _a.menuState,
+          isOpen = _a$menuState.isOpen,
+          toggleMenu = _a$menuState.toggleMenu,
+          closeMenu = _a$menuState.closeMenu,
+          subtext = _a.subtext,
+          brandingLinkHref = _a.brandingLinkHref,
+          brandingLinkTo = _a.brandingLinkTo,
+          themeColor = _a.themeColor,
+          props = __rest(_a, ["menuData", "menuState", "subtext", "brandingLinkHref", "brandingLinkTo", "themeColor"]);
+
+      return /*#__PURE__*/React__default['default'].createElement(SmallHeader$1, Object.assign({
+        ref: this.navRef,
+        isOpen: isOpen
+      }, props), /*#__PURE__*/React__default['default'].createElement(NavBarBackground$1, {
+        backgroundColor: getThemeColor(themeColor).background
+      }, /*#__PURE__*/React__default['default'].createElement(BrandingLink, {
+        "aria-label": "Nulogy logo",
+        display: "block",
+        height: subtext && !this.isSmallScreen() ? "56px" : "40px",
+        my: subtext && !this.isSmallScreen() ? "-8px" : null,
+        underline: false,
+        href: brandingLinkHref,
+        to: brandingLinkTo
+      }, /*#__PURE__*/React__default['default'].createElement(Branding, {
+        logoColor: getThemeColor(themeColor).logoColor,
+        logoType: this.isSmallScreen() ? "lettermark" : "wordmark",
+        subtext: this.isSmallScreen() ? null : subtext
+      })), /*#__PURE__*/React__default['default'].createElement(Flex, {
+        justifyContent: "flex-end",
+        style: {
+          flexGrow: 1,
+          margin: "0 0 0 " + Theme.space.x3
+        }
+      }, menuData.search && /*#__PURE__*/React__default['default'].createElement(Flex, {
+        maxWidth: "18em",
+        alignItems: "center",
+        px: "0"
+      }, /*#__PURE__*/React__default['default'].createElement(NavBarSearch, Object.assign({}, menuData.search))), (menuData.primaryMenu || menuData.secondaryMenu) && /*#__PURE__*/React__default['default'].createElement(MobileMenuTrigger$1, Object.assign({}, getThemeColor(themeColor), {
+        onClick: toggleMenu,
+        "aria-expanded": isOpen ? true : null
+      }), /*#__PURE__*/React__default['default'].createElement(MenuIcon$1, {
+        isOpen: isOpen
+      })))), isOpen && /*#__PURE__*/React__default['default'].createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default['default'].createElement(MobileMenu$1, {
+        themeColorObject: getThemeColor(themeColor),
+        subtext: subtext,
+        includeSubtext: this.isSmallScreen(),
+        menuData: menuData,
+        closeMenu: closeMenu
+      })));
+    };
+
+    return SmallNavBarNoState;
+  }(React__default['default'].Component);
+
+  SmallNavBarNoState$1.propTypes = {
+    menuState: PropTypes__default['default'].shape({
+      isOpen: PropTypes__default['default'].bool,
+      toggleMenu: PropTypes__default['default'].func,
+      closeMenu: PropTypes__default['default'].func
+    }).isRequired,
+    menuData: PropTypes__default['default'].shape(MenuDataPropTypes),
+    subtext: PropTypes__default['default'].string,
+    brandingLinkHref: PropTypes__default['default'].string,
+    brandingLinkTo: PropTypes__default['default'].string,
+    breakpointLower: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string]),
+    width: PropTypes__default['default'].number,
+    themeColor: PropTypes__default['default'].oneOf(["blue", "white"])
+  };
+  SmallNavBarNoState$1.defaultProps = {
+    menuData: null,
+    subtext: null,
+    brandingLinkHref: "/",
+    brandingLinkTo: undefined,
+    breakpointLower: Theme.breakpoints.small,
+    width: undefined,
+    themeColor: undefined
   };
+  var SmallNavBar$1 = withMenuState(SmallNavBarNoState$1);
 
-  var _excluded = ["to", "href", "children"],
-      _excluded2 = ["menuData", "themeColor", "subtext", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent"],
-      _excluded3 = ["menuData", "menuState", "subtext", "brandingLinkHref", "brandingLinkTo", "themeColor"],
-      _excluded4 = ["width", "defaultOpen", "breakpointUpper"];
   var themeColors = {
     blue: {
       color: Theme.colors.white,
@@ -23732,47 +23858,45 @@
       logoColor: "blue"
     }
   };
-
   var getThemeColor = function getThemeColor(themeColor) {
     return themeColors[themeColor] || themeColors.blue;
   };
-
   var NavBarBackground$1 = styled__default['default'](Flex).withConfig({
     displayName: "NavBar__NavBarBackground",
-    componentId: "iayrjp-0"
+    componentId: "uw8kj5-0"
   })(function (_ref) {
-    var backgroundColor = _ref.backgroundColor;
+    var backgroundColor = _ref.backgroundColor,
+        theme = _ref.theme;
     return {
       background: backgroundColor,
-      padding: Theme.space.x2 + " " + Theme.space.x3
+      padding: theme.space.x2 + " " + theme.space.x3
     };
   });
+  var BrandingLink = function BrandingLink(_a) {
+    var to = _a.to,
+        href = _a.href,
+        children = _a.children,
+        props = __rest(_a, ["to", "href", "children"]);
 
-  var BrandingLink = function BrandingLink(_ref2) {
-    var to = _ref2.to,
-        href = _ref2.href,
-        children = _ref2.children,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref2, _excluded);
-
-    return /*#__PURE__*/React__default['default'].createElement(Link, _extends__default['default']({
+    return /*#__PURE__*/React__default['default'].createElement(Link, Object.assign({
       href: href,
       to: to
     }, props), children);
   };
 
-  var MediumNavBar$1 = function MediumNavBar(_ref3) {
-    var menuData = _ref3.menuData,
-        themeColor = _ref3.themeColor,
-        subtext = _ref3.subtext,
-        brandingLinkHref = _ref3.brandingLinkHref,
-        brandingLinkTo = _ref3.brandingLinkTo,
-        brandingLinkComponent = _ref3.brandingLinkComponent,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref3, _excluded2);
+  var MediumNavBar$1 = function MediumNavBar(_a) {
+    var menuData = _a.menuData,
+        themeColor = _a.themeColor,
+        subtext = _a.subtext,
+        brandingLinkHref = _a.brandingLinkHref,
+        brandingLinkTo = _a.brandingLinkTo,
+        brandingLinkComponent = _a.brandingLinkComponent,
+        props = __rest(_a, ["menuData", "themeColor", "subtext", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent"]);
 
     var _useTranslation = useTranslation(),
         t = _useTranslation.t;
 
-    return /*#__PURE__*/React__default['default'].createElement("header", props, /*#__PURE__*/React__default['default'].createElement(NavBarBackground$1, {
+    return /*#__PURE__*/React__default['default'].createElement("header", Object.assign({}, props), /*#__PURE__*/React__default['default'].createElement(NavBarBackground$1, {
       backgroundColor: getThemeColor(themeColor).background
     }, /*#__PURE__*/React__default['default'].createElement(BrandingLink, {
       "aria-label": "Nulogy logo",
@@ -23790,7 +23914,7 @@
       justifyContent: "space-between",
       alignContent: "flex-end",
       style: {
-        flexGrow: "1",
+        flexGrow: 1,
         margin: "0 0 0 " + Theme.space.x3
       }
     }, menuData.primaryMenu && /*#__PURE__*/React__default['default'].createElement(DesktopMenu$1, {
@@ -23807,7 +23931,7 @@
     }, menuData.search && /*#__PURE__*/React__default['default'].createElement(Box, {
       maxWidth: "18em",
       mr: menuData.secondaryMenu ? Theme.space.x1 : Theme.space.none
-    }, /*#__PURE__*/React__default['default'].createElement(NavBarSearch, menuData.search)), menuData.secondaryMenu && /*#__PURE__*/React__default['default'].createElement(DesktopMenu$1, {
+    }, /*#__PURE__*/React__default['default'].createElement(NavBarSearch, Object.assign({}, menuData.search))), menuData.secondaryMenu && /*#__PURE__*/React__default['default'].createElement(DesktopMenu$1, {
       themeColorObject: getThemeColor(themeColor),
       "aria-label": t("secondary navigation"),
       menuData: menuData.secondaryMenu
@@ -23837,11 +23961,11 @@
   };
   var MobileMenuTrigger$1 = styled__default['default'].button.withConfig({
     displayName: "NavBar__MobileMenuTrigger",
-    componentId: "iayrjp-1"
-  })(function (_ref4) {
-    var color = _ref4.color,
-        hoverColor = _ref4.hoverColor,
-        hoverBackground = _ref4.hoverBackground;
+    componentId: "uw8kj5-1"
+  })(function (_ref2) {
+    var color = _ref2.color,
+        hoverColor = _ref2.hoverColor,
+        hoverBackground = _ref2.hoverBackground;
     return {
       color: themeGet("colors." + color, color)(color),
       background: "none",
@@ -23864,9 +23988,9 @@
   });
   var SmallHeader$1 = styled__default['default'].header.withConfig({
     displayName: "NavBar__SmallHeader",
-    componentId: "iayrjp-2"
-  })(function (_ref5) {
-    var isOpen = _ref5.isOpen;
+    componentId: "uw8kj5-2"
+  })(function (_ref3) {
+    var isOpen = _ref3.isOpen;
     return isOpen ? {
       position: "fixed",
       width: "100%",
@@ -23879,13 +24003,11 @@
       bottom: "0"
     } : null;
   });
-
   var pixelDigitsFrom$1 = function pixelDigitsFrom(pixelString) {
     return parseInt(pixelString, 10);
   };
-
-  var MenuIcon$1 = function MenuIcon(_ref6) {
-    var isOpen = _ref6.isOpen;
+  var MenuIcon$1 = function MenuIcon(_ref4) {
+    var isOpen = _ref4.isOpen;
 
     var _useTranslation2 = useTranslation(),
         t = _useTranslation2.t;
@@ -23897,145 +24019,39 @@
       title: title
     });
   };
-
   MenuIcon$1.propTypes = {
     isOpen: PropTypes__default['default'].bool
   };
   MenuIcon$1.defaultProps = {
     isOpen: false
   };
-  /* eslint-disable react/destructuring-assignment */
-
-  var SmallNavBarNoState$1 = /*#__PURE__*/function (_React$Component) {
-    _inheritsLoose__default['default'](SmallNavBarNoState, _React$Component);
-
-    function SmallNavBarNoState() {
-      var _this;
-
-      _this = _React$Component.call(this) || this;
-      _this.navRef = /*#__PURE__*/React__default['default'].createRef();
-      return _this;
-    }
-
-    var _proto = SmallNavBarNoState.prototype;
-
-    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-      if (this.props.menuState.isOpen && !prevProps.menuState.isOpen) this.navRef.current.scrollTop = 0;
-    };
-
-    _proto.isSmallScreen = function isSmallScreen() {
-      var _this$props = this.props,
-          breakpointLower = _this$props.breakpointLower,
-          width = _this$props.width;
-      return width < pixelDigitsFrom$1(breakpointLower);
-    };
-
-    _proto.render = function render() {
-      var _this$props2 = this.props,
-          menuData = _this$props2.menuData,
-          _this$props2$menuStat = _this$props2.menuState,
-          isOpen = _this$props2$menuStat.isOpen,
-          toggleMenu = _this$props2$menuStat.toggleMenu,
-          closeMenu = _this$props2$menuStat.closeMenu,
-          subtext = _this$props2.subtext,
-          brandingLinkHref = _this$props2.brandingLinkHref,
-          brandingLinkTo = _this$props2.brandingLinkTo,
-          themeColor = _this$props2.themeColor,
-          props = _objectWithoutPropertiesLoose__default['default'](_this$props2, _excluded3);
-
-      return /*#__PURE__*/React__default['default'].createElement(SmallHeader$1, _extends__default['default']({
-        ref: this.navRef,
-        isOpen: isOpen
-      }, props), /*#__PURE__*/React__default['default'].createElement(NavBarBackground$1, {
-        backgroundColor: getThemeColor(themeColor).background
-      }, /*#__PURE__*/React__default['default'].createElement(BrandingLink, {
-        "aria-label": "Nulogy logo",
-        display: "block",
-        height: subtext && !this.isSmallScreen() ? "56px" : "40px",
-        my: subtext && !this.isSmallScreen() ? "-8px" : null,
-        underline: false,
-        href: brandingLinkHref,
-        to: brandingLinkTo
-      }, /*#__PURE__*/React__default['default'].createElement(Branding, {
-        logoColor: getThemeColor(themeColor).logoColor,
-        logoType: this.isSmallScreen() ? "lettermark" : "wordmark",
-        subtext: this.isSmallScreen() ? null : subtext
-      })), /*#__PURE__*/React__default['default'].createElement(Flex, {
-        justifyContent: "flex-end",
-        style: {
-          flexGrow: "1",
-          margin: "0 0 0 " + Theme.space.x3
-        }
-      }, menuData.search && /*#__PURE__*/React__default['default'].createElement(Flex, {
-        maxWidth: "18em",
-        alignItems: "center",
-        px: "0"
-      }, /*#__PURE__*/React__default['default'].createElement(NavBarSearch, menuData.search)), (menuData.primaryMenu || menuData.secondaryMenu) && /*#__PURE__*/React__default['default'].createElement(MobileMenuTrigger$1, _extends__default['default']({}, getThemeColor(themeColor), {
-        onClick: toggleMenu,
-        "aria-expanded": isOpen ? true : null
-      }), /*#__PURE__*/React__default['default'].createElement(MenuIcon$1, {
-        isOpen: isOpen
-      })))), isOpen && /*#__PURE__*/React__default['default'].createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default['default'].createElement(MobileMenu$1, {
-        themeColorObject: getThemeColor(themeColor),
-        subtext: subtext,
-        includeSubtext: this.isSmallScreen(),
-        menuData: menuData,
-        closeMenu: closeMenu
-      })));
-    };
-
-    return SmallNavBarNoState;
-  }(React__default['default'].Component);
-  /* eslint-enable react/destructuring-assignment */
 
-
-  SmallNavBarNoState$1.propTypes = {
-    menuState: PropTypes__default['default'].shape({
-      isOpen: PropTypes__default['default'].bool,
-      toggleMenu: PropTypes__default['default'].func,
-      closeMenu: PropTypes__default['default'].func
-    }).isRequired,
-    menuData: PropTypes__default['default'].shape(MenuDataPropTypes),
-    subtext: PropTypes__default['default'].string,
-    brandingLinkHref: PropTypes__default['default'].string,
-    brandingLinkTo: PropTypes__default['default'].string,
-    breakpointLower: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string]),
-    width: PropTypes__default['default'].number,
-    themeColor: PropTypes__default['default'].oneOf(["blue", "white"])
-  };
-  SmallNavBarNoState$1.defaultProps = {
-    menuData: null,
-    subtext: null,
-    brandingLinkHref: "/",
-    brandingLinkTo: undefined,
-    breakpointLower: Theme.breakpoints.small,
-    width: undefined,
-    themeColor: undefined
-  };
-  var SmallNavBar$1 = withMenuState(SmallNavBarNoState$1);
-
-  var SelectNavBarBasedOnWidth$1 = function SelectNavBarBasedOnWidth(_ref7) {
-    var width = _ref7.width,
-        defaultOpen = _ref7.defaultOpen,
-        breakpointUpper = _ref7.breakpointUpper,
-        props = _objectWithoutPropertiesLoose__default['default'](_ref7, _excluded4);
+  var SelectNavBarBasedOnWidth$1 = function SelectNavBarBasedOnWidth(_a) {
+    var width = _a.width,
+        defaultOpen = _a.defaultOpen,
+        breakpointUpper = _a.breakpointUpper,
+        props = __rest(_a, ["width", "defaultOpen", "breakpointUpper"]);
 
     var currentWidth = width || typeof window !== "undefined" && window.innerWidth;
 
     if (currentWidth >= pixelDigitsFrom$1(breakpointUpper)) {
-      return /*#__PURE__*/React__default['default'].createElement(MediumNavBar$1, props);
+      return /*#__PURE__*/React__default['default'].createElement(MediumNavBar$1, Object.assign({}, props));
     } else {
-      return /*#__PURE__*/React__default['default'].createElement(SmallNavBar$1, _extends__default['default']({}, props, {
-        width: currentWidth,
-        defaultOpen: defaultOpen
-      }));
+      return (
+        /*#__PURE__*/
+        // @ts-ignore
+        React__default['default'].createElement(SmallNavBar$1, Object.assign({}, props, {
+          width: currentWidth,
+          defaultOpen: defaultOpen
+        }))
+      );
     }
   };
 
   var NavBar$1 = function NavBar(props) {
     return /*#__PURE__*/React__default['default'].createElement(ResizeDetector, {
       handleWidth: true
-    }, /*#__PURE__*/React__default['default'].createElement(SelectNavBarBasedOnWidth$1, props));
+    }, /*#__PURE__*/React__default['default'].createElement(SelectNavBarBasedOnWidth$1, Object.assign({}, props)));
   };
 
   NavBar$1.propTypes = {
@@ -25402,7 +25418,7 @@
       backgroundColor: tooltipStyles(theme).backgroundColor,
       borderRadius: theme.radii.medium,
       border: "1px solid " + tooltipStyles(theme).borderColor,
-      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.18)",
+      boxShadow: theme.shadows.medium,
       padding: theme.space.x1,
       transition: "opacity 0.3s",
       zIndex: theme.zIndices.content
@@ -44520,8 +44536,8 @@
         })), /*#__PURE__*/React__default['default'].createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, {
           placement: placement,
           ref: popperProps.arrowProps.ref,
-          backgroundColor: "whiteGrey",
-          borderColor: "whiteGrey"
+          backgroundColor: "white",
+          borderColor: "white"
         })), /*#__PURE__*/React__default['default'].createElement(DetectOutsideClick, {
           onClick: _this4.handleOutsideClick,
           clickRef: [_this4.menuRef, _this4.triggerRef]
@@ -44568,63 +44584,11 @@
     hideDelay: "100"
   };
 
-  var SubMenuLink = styled__default['default'](DropdownLink).withConfig({
-    displayName: "renderSubMenuItems__SubMenuLink",
-    componentId: "vyx9p-0"
-  })(fontSize, lineHeight, space);
-  SubMenuLink.propTypes = Object.assign(Object.assign(Object.assign({}, propTypes.fontSize), propTypes.lineHeight), propTypes.space);
-
-  var getSharedStyles$2 = function getSharedStyles() {
-    return {
-      display: "block",
-      whiteSpace: "nowrap",
-      textDecoration: "none",
-      borderColor: "transparent",
-      backgroundColor: "transparent",
-      lineHeight: Theme.lineHeights.smallTextBase,
-      fontSize: "" + Theme.fontSizes.small,
-      padding: Theme.space.half + " " + Theme.space.x2
-    };
-  };
-
-  var ApplySubMenuLinkStyles = styled__default['default'].li.withConfig({
-    displayName: "renderSubMenuItems__ApplySubMenuLinkStyles",
-    componentId: "vyx9p-1"
-  })(function () {
-    return {
-      color: Theme.colors.darkBlue,
-      verticalAlign: "middle",
-      "> *": Object.assign(Object.assign({}, getSharedStyles$2()), {
-        transition: ".2s",
-        textDecoration: "none",
-        "&:hover, &:focus": {
-          outline: "none",
-          backgroundColor: Theme.colors.lightGrey
-        },
-        "&:disabled": {
-          opacity: ".5"
-        },
-        "&:focus": {
-          boxShadow: Theme.shadows.focus
-        }
-      })
-    };
-  });
-  var SubMenuText = styled__default['default'].li.withConfig({
-    displayName: "renderSubMenuItems__SubMenuText",
-    componentId: "vyx9p-2"
-  })(function () {
-    return Object.assign({
-      color: Theme.colors.darkGrey
-    }, getSharedStyles$2());
-  });
-
   var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
-    return /*#__PURE__*/React__default['default'].createElement("li", {
-      style: {
-        whiteSpace: "nowrap"
-      },
-      key: subMenuItem.name
+    var _a;
+
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
       name: subMenuItem.name,
@@ -44633,14 +44597,11 @@
   };
 
   var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
-    return /*#__PURE__*/React__default['default'].createElement("li", {
-      style: {
-        whiteSpace: "nowrap"
-      },
-      key: subMenuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink, {
-      fontSize: "small",
-      lineHeight: "smallTextBase",
+    var _a;
+
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(DropdownLink, {
       py: "half",
       onClick: onItemClick,
       href: subMenuItem.href,
@@ -44650,16 +44611,19 @@
   };
 
   var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles, {
-      key: subMenuItem.name,
-      onClick: onItemClick
-    }, subMenuItem.render());
+    var _a;
+
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+    }, subMenuItem.render(onItemClick));
   };
 
   var renderText$2 = function renderText(subMenuItem) {
-    return /*#__PURE__*/React__default['default'].createElement(SubMenuText, {
-      key: subMenuItem.name
-    }, subMenuItem.name);
+    var _a;
+
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(DropdownText, null, subMenuItem.name));
   };
 
   var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
@@ -44680,37 +44644,25 @@
     });
   };
 
-  var StyledButton$1 = styled__default['default'].button.withConfig({
+  var NoWrapLi = styled__default['default'].li.withConfig({
+    displayName: "renderSubMenuItems__NoWrapLi",
+    componentId: "vyx9p-0"
+  })(function () {
+    return {
+      whiteSpace: "nowrap"
+    };
+  });
+
+  var StyledButton$1 = styled__default['default'](DropdownButton).withConfig({
     displayName: "SubMenuTrigger__StyledButton",
     componentId: "sc-1tg8y8b-0"
   })(function (_ref) {
-    var isOpen = _ref.isOpen;
+    var isOpen = _ref.isOpen,
+        theme = _ref.theme;
     return {
-      display: "block",
       position: "relative",
-      color: Theme.colors.darkBlue,
-      fontSize: Theme.fontSizes.small,
-      lineHeight: Theme.lineHeights.smallTextBase,
-      width: "100%",
-      padding: Theme.space.half + " 28px " + Theme.space.half + " 12px",
-      border: "none",
-      borderLeft: Theme.space.half + " solid transparent",
-      "&:hover": {
-        backgroundColor: Theme.colors.lightGrey
-      },
-      "&:disabled": {
-        opacity: ".5"
-      },
-      "&:focus": {
-        outline: "none",
-        color: Theme.colors.darkBlue,
-        backgroundColor: Theme.colors.lightGrey,
-        borderLeft: Theme.space.half + "  solid " + Theme.colors.blue
-      },
-      backgroundColor: isOpen ? Theme.colors.lightGrey : "transparent",
-      textDecoration: "none",
-      textAlign: "left",
-      cursor: "pointer"
+      backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
+      color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey
     };
   });
   var SubMenuTriggerButton = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
@@ -44724,10 +44676,9 @@
     }, props), name, /*#__PURE__*/React__default['default'].createElement(Icon, {
       style: {
         position: "absolute",
-        top: "7px"
+        top: "10px"
       },
       icon: "rightArrow",
-      color: "darkBlue",
       size: "20px",
       p: "2px"
     }));
@@ -44778,7 +44729,7 @@
     );
   };
 
-  SubMenuTrigger.displayName = "SubMenuTriggerButton";
+  SubMenuTrigger.displayName = "SubMenuTrigger";
 
   var StyledButton = styled__default['default'].button.withConfig({
     displayName: "MenuTrigger__StyledButton",
@@ -44923,7 +44874,7 @@
     };
   };
 
-  var ApplyMenuLinkStyles$1 = styled__default['default'].div.withConfig({
+  var ApplyMenuLinkStyles = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__ApplyMenuLinkStyles",
     componentId: "sc-8mrjkc-0"
   })(function (_ref) {
@@ -44952,7 +44903,7 @@
       })
     };
   });
-  var MenuLink$1 = styled__default['default'].a.withConfig({
+  var MenuLink = styled__default['default'].a.withConfig({
     displayName: "DesktopMenu__MenuLink",
     componentId: "sc-8mrjkc-1"
   })(function (_ref2) {
@@ -44977,7 +44928,7 @@
       }
     });
   });
-  var MenuText$1 = styled__default['default'].div.withConfig({
+  var MenuText = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__MenuText",
     componentId: "sc-8mrjkc-2"
   })(function (_ref3) {
@@ -45012,7 +44963,7 @@
 
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$1, Object.assign({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({
       href: menuItem.href,
       to: menuItem.to,
       as: menuItem.as
@@ -45022,7 +44973,7 @@
   var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({}, themeColorObject, {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }), menuItem.render());
   };
@@ -45030,7 +44981,7 @@
   var renderText$1 = function renderText(menuItem, themeColorObject) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(MenuText$1, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(MenuText, Object.assign({
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, themeColorObject), menuItem.name);
   };
@@ -45136,94 +45087,44 @@
       color: theme.colors.white,
       marginBottom: theme.space.x1
     };
-  });
+  }); // eslint-disable-next-line no-mixed-operators
 
   var getPaddingLeft = function getPaddingLeft(layer) {
     return 24 * layer + 24 + "px";
   };
 
-  var getSharedStyles = function getSharedStyles(_ref2) {
-    var color = _ref2.color,
-        layer = _ref2.layer,
-        theme = _ref2.theme;
+  var getSharedStyles = function getSharedStyles(theme) {
     return {
       display: "block",
-      color: theme.colors[color] || color,
       textDecoration: "none",
       border: "none",
       backgroundColor: "transparent",
-      borderRadius: theme.radii.medium,
-      fontSize: layer === 0 ? theme.fontSizes.large : theme.fontSizes.medium,
-      lineHeight: layer === 0 ? theme.lineHeights.heading3 : theme.lineHeights.base,
-      padding: layer === 0 ? theme.space.x1 + " " + theme.space.x3 : theme.space.x1 + " " + theme.space.x2,
-      paddingLeft: getPaddingLeft(layer),
+      fontSize: theme.fontSizes.large,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights.heading3,
       marginBottom: theme.space.x1,
-      "&:visited": {
-        color: theme.colors[color] || color
-      },
-      "&:hover": {
-        color: "#434d59",
-        background: "#f0f2f5"
-      }
+      padding: theme.space.x1 + " " + theme.space.x3,
+      paddingLeft: getPaddingLeft(0)
     };
   };
 
-  var ApplyMenuLinkStyles = styled__default['default'].li.withConfig({
-    displayName: "MobileMenu__ApplyMenuLinkStyles",
+  var TopLevelLink = styled__default['default'](Link).withConfig({
+    displayName: "MobileMenu__TopLevelLink",
     componentId: "sc-18t6zrc-1"
-  })(function (_ref3) {
-    var _ref3$color = _ref3.color,
-        color = _ref3$color === void 0 ? "white" : _ref3$color,
-        _ref3$hoverColor = _ref3.hoverColor,
-        hoverColor = _ref3$hoverColor === void 0 ? "lightBlue" : _ref3$hoverColor,
-        _ref3$hoverBackground = _ref3.hoverBackground,
-        hoverBackground = _ref3$hoverBackground === void 0 ? "white" : _ref3$hoverBackground,
-        _ref3$layer = _ref3.layer,
-        layer = _ref3$layer === void 0 ? 0 : _ref3$layer,
-        theme = _ref3.theme;
-    return {
-      display: "block",
-      "button, a": Object.assign(Object.assign({}, getSharedStyles({
-        color: color,
-        layer: layer,
-        theme: theme
-      })), {
-        textDecoration: "none",
-        "&:hover, &:focus": {
-          outline: "none",
-          color: theme.colors[hoverColor] || hoverColor,
-          backgroundColor: theme.colors[hoverBackground] || hoverBackground
-        },
-        "&:disabled": {
-          opacity: ".5"
-        },
-        "&:focus": {
-          boxShadow: theme.shadows.focus
-        }
-      })
-    };
-  });
-  var MenuLink = styled__default['default'].a.withConfig({
-    displayName: "MobileMenu__MenuLink",
-    componentId: "sc-18t6zrc-2"
-  })(function (_ref4) {
-    var color = _ref4.color,
-        hoverColor = _ref4.hoverColor,
-        hoverBackground = _ref4.hoverBackground,
-        layer = _ref4.layer,
-        theme = _ref4.theme;
-    return Object.assign(Object.assign({}, getSharedStyles({
-      color: color,
-      layer: layer,
-      theme: theme
-    })), {
+  })(function (_ref2) {
+    var theme = _ref2.theme;
+    return Object.assign(Object.assign({}, getSharedStyles(theme)), {
+      color: theme.colors.darkBlue,
+      "&:visited": {
+        color: theme.colors.darkBlue
+      },
       width: "100%",
       borderRadius: "0",
       transition: ".2s",
       "&:hover, &:focus": {
         outline: "none",
-        color: themeGet("colors." + hoverColor, hoverColor)(hoverColor),
-        backgroundColor: themeGet("colors." + hoverBackground, hoverBackground)(hoverBackground),
+        color: theme.colors.blackBlue,
+        backgroundColor: theme.colors.whiteGrey,
         cursor: "pointer"
       },
       "&:focus": {
@@ -45234,18 +45135,31 @@
       }
     });
   });
-  var MenuText = styled__default['default'].li.withConfig({
-    displayName: "MobileMenu__MenuText",
+  var TopLevelText = styled__default['default'](Text).withConfig({
+    displayName: "MobileMenu__TopLevelText",
+    componentId: "sc-18t6zrc-2"
+  })(function (_ref3) {
+    var theme = _ref3.theme;
+    return Object.assign(Object.assign({}, getSharedStyles(theme)), {
+      color: theme.colors.blackBlue
+    });
+  });
+  var ChildIndentingLi = styled__default['default'].li.withConfig({
+    displayName: "MobileMenu__ChildIndentingLi",
     componentId: "sc-18t6zrc-3"
-  })(function (_ref5) {
-    var textColor = _ref5.textColor,
-        layer = _ref5.layer,
-        theme = _ref5.theme;
-    return Object.assign({}, getSharedStyles({
-      color: textColor,
-      layer: layer,
-      theme: theme
-    }));
+  })(function (_ref4) {
+    var _ref5;
+
+    var layer = _ref4.layer,
+        theme = _ref4.theme;
+    return _ref5 = {
+      marginBottom: theme.space.x1
+    }, _ref5["> " + DropdownButton + ", > " + DropdownLink] = {
+      // eslint-disable-next-line no-mixed-operators
+      paddingLeft: 24 * layer + 20 + "px"
+    }, _ref5["> " + DropdownText] = {
+      paddingLeft: getPaddingLeft(layer)
+    }, _ref5;
   });
   var SubMenuItemsList = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__SubMenuItemsList",
@@ -45255,41 +45169,29 @@
     paddingLeft: "0",
     margin: "0"
   });
-  var StyledLi = styled__default['default'].li.withConfig({
-    displayName: "MobileMenu__StyledLi",
-    componentId: "sc-18t6zrc-5"
-  })(function (_ref6) {
-    var theme = _ref6.theme;
-    return {
-      marginBottom: theme.space.x1,
-      display: "block"
-    };
-  });
 
   var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(StyledLi, {
+    var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
+      layer: layer,
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({
-      layer: layer
-    }, themeColorObject, {
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, {
       onClick: linkOnClick,
       href: menuItem.href,
       as: menuItem.as,
       to: menuItem.to
-    }), menuItem.name));
+    }, menuItem.name));
   };
 
   var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({
-      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
       layer: layer,
-      onClick: linkOnClick
-    }), menuItem.render());
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+    }, menuItem.render(linkOnClick, layer));
   };
 
   var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
@@ -45311,10 +45213,11 @@
   var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(MenuText, Object.assign({
-      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
-      layer: layer
-    }, themeColorObject), menuItem.name);
+    var MenuText = layer === 0 ? TopLevelText : DropdownText;
+    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
+      layer: layer,
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(MenuText, null, menuItem.name));
   };
 
   var getRenderFunction = function getRenderFunction(menuItem) {
@@ -45340,50 +45243,47 @@
     return renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
   };
 
-  var getSubMenuHeading = function getSubMenuHeading(layer, color, name) {
-    return layer === 0 ? /*#__PURE__*/React__default['default'].createElement(Heading3, {
+  var getSubMenuHeading = function getSubMenuHeading(layer, name) {
+    return layer === 0 ? /*#__PURE__*/React__default['default'].createElement(TopLevelText, {
+      as: "h3"
+    }, name) : /*#__PURE__*/React__default['default'].createElement(DropdownText, {
       mb: "x1",
-      color: color
-    }, name) : /*#__PURE__*/React__default['default'].createElement(Text, {
-      mb: "x1",
-      color: color,
-      py: "x1",
       style: {
         paddingLeft: getPaddingLeft(layer)
       }
     }, name);
   };
 
-  var SubMenu = function SubMenu(_ref7) {
-    var menuItem = _ref7.menuItem,
-        linkOnClick = _ref7.linkOnClick,
-        themeColorObject = _ref7.themeColorObject,
-        layer = _ref7.layer;
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
+  var SubMenu = function SubMenu(_ref6) {
+    var menuItem = _ref6.menuItem,
+        linkOnClick = _ref6.linkOnClick,
+        themeColorObject = _ref6.themeColorObject,
+        layer = _ref6.layer;
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
   };
 
   var Menu$1 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__Menu",
-    componentId: "sc-18t6zrc-6"
-  })(function (_ref8) {
-    var _ref9;
+    componentId: "sc-18t6zrc-5"
+  })(function (_ref7) {
+    var _ref8;
 
-    var theme = _ref8.theme;
-    return _ref9 = {
+    var theme = _ref7.theme;
+    return _ref8 = {
       margin: "0",
       padding: theme.space.x1 + " 0",
       zIndex: theme.zIndices.content,
       width: "100%",
       color: theme.colors.white
-    }, _ref9["" + Heading3] = {
+    }, _ref8["" + Heading3] = {
       padding: theme.space.x1 + " 0 " + theme.space.x1 + " " + theme.space.x3
-    }, _ref9;
+    }, _ref8;
   });
   var Nav = styled__default['default'].nav.withConfig({
     displayName: "MobileMenu__Nav",
-    componentId: "sc-18t6zrc-7"
-  })(function (_ref10) {
-    var backgroundColor = _ref10.backgroundColor;
+    componentId: "sc-18t6zrc-6"
+  })(function (_ref9) {
+    var backgroundColor = _ref9.backgroundColor;
     return {
       backgroundColor: backgroundColor
     };
@@ -45421,7 +45321,7 @@
 
   var MobileMenu = styled__default['default'](BaseMobileMenu).withConfig({
     displayName: "MobileMenu",
-    componentId: "sc-18t6zrc-8"
+    componentId: "sc-18t6zrc-7"
   })(display);
 
   var borderStyle = "1px solid #e4e7eb";
@@ -45486,7 +45386,7 @@
     return {
       background: backgroundColor,
       padding: "0 " + theme.space.x3,
-      boxShadow: theme.shadows.large,
+      borderBottom: "1px solid " + theme.colors.lightGrey,
       alignItems: "center",
       height: NAVBAR_HEIGHT,
       zIndex: theme.zIndices.navBar,
@@ -52682,7 +52582,6 @@
       display: "flex",
       flexDirection: "column",
       height: "calc(100% - " + NAVBAR_HEIGHT + ")",
-      boxShadow: "large",
       borderLeftWidth: "1px",
       borderLeftStyle: "solid",
       borderLeftColor: "lightGrey",
@@ -52863,6 +52762,7 @@
   exports.DropdownItem = DropdownItem;
   exports.DropdownLink = DropdownLink;
   exports.DropdownMenu = DropdownMenu;
+  exports.DropdownText = DropdownText;
   exports.Field = Field;
   exports.FieldLabel = FieldLabel;
   exports.Fieldset = Fieldset;