@nulogy/components 6.7.4 → 7.0.0

package/dist/main.module.js

@@ -21,10 +21,10 @@ import reactDom, { findDOMNode, createPortal } from 'react-dom';
 import WindowedSelect, { components as components$1 } from 'react-windowed-select';
 import exenv from 'exenv';
 import smoothscroll from 'smoothscroll-polyfill';
+import t from 'classnames';
 import '@babel/runtime/helpers/toConsumableArray';
 import AutosizeInput from 'react-input-autosize';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
-import t from 'classnames';
 
 var defaultOptions = {
   bindI18n: 'languageChanged',
@@ -249,7 +249,7 @@ function I18nextProvider(_ref) {
 
 /**
  * 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";
@@ -289,9 +289,9 @@ const line_height_heading_4 = "1.33";
 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";
@@ -11893,23 +11893,23 @@ var Text = styled.p.attrs(function (props) {
 }).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");
@@ -16920,14 +16920,14 @@ var DropdownMenuContainer = styled(Box).withConfig({
       _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));
@@ -20164,7 +20164,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       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,
@@ -20216,15 +20216,14 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
 var DropdownButton = styled.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",
@@ -20250,12 +20249,11 @@ var DropdownButton = styled.button.withConfig({
       opacity: ".5"
     }
   };
-});
+}, color);
 DropdownButton.defaultProps = {
-  color: "darkBlue",
   disabled: false,
   hoverColor: "darkBlue",
-  bgHoverColor: "lightGrey"
+  bgHoverColor: "lightBlue"
 };
 
 var DropdownLink = styled.a.withConfig({
@@ -20264,13 +20262,12 @@ var DropdownLink = styled.a.withConfig({
   }
 })(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",
@@ -20278,16 +20275,15 @@ var DropdownLink = styled.a.withConfig({
     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],
@@ -20299,21 +20295,25 @@ var DropdownLink = styled.a.withConfig({
     }
   };
 });
+DropdownLink.defaultProps = {
+  disabled: false,
+  color: "darkGrey",
+  hoverColor: "darkBlue",
+  bgHoverColor: "lightBlue"
+};
 
 var DropdownItem = styled.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",
@@ -20341,6 +20341,29 @@ var DropdownItem = styled.div.withConfig({
     }
   };
 });
+DropdownItem.defaultProps = {
+  color: "darkGrey",
+  hoverColor: "darkBlue",
+  bgHoverColor: "lightBlue"
+};
+
+var DropdownText = styled(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(Text).withConfig({
   displayName: "HelpText",
@@ -22552,12 +22575,12 @@ ResizeDetector.defaultProps = {
   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$2(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose$2(_ref, _excluded);
 
   var handleOnSubmit = function handleOnSubmit(e) {
     e.preventDefault();
@@ -22731,11 +22754,11 @@ var StatelessNavBarDropdownMenu$1 = /*#__PURE__*/function (_React$Component) {
         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);
 
@@ -22746,7 +22769,7 @@ var StatelessNavBarDropdownMenu$1 = /*#__PURE__*/function (_React$Component) {
       placement: placement,
       modifiers: modifiers
     }, function (popperProps) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenuContainer, _extends$4({}, popperProps, {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenuContainer, Object.assign({}, popperProps, {
         placement: placement,
         showArrow: showArrow
       }, _this4.menuEventHandlers(), {
@@ -22762,7 +22785,7 @@ var StatelessNavBarDropdownMenu$1 = /*#__PURE__*/function (_React$Component) {
       }, dropdownMenuContainerEventHandlers({
         openMenu: openMenu,
         closeMenu: closeMenu
-      })), /*#__PURE__*/React__default.createElement(PopperArrow, _extends$4({}, popperProps.arrowProps, {
+      })), /*#__PURE__*/React__default.createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, {
         placement: placement,
         ref: popperProps.arrowProps.ref,
         backgroundColor: "whiteGrey",
@@ -22814,12 +22837,12 @@ NavBarDropdownMenu$1.defaultProps = {
   hideDelay: "100"
 };
 
-var SubMenuLink$1 = styled(DropdownLink).withConfig({
+var SubMenuLink = styled(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",
@@ -22832,13 +22855,13 @@ var getSharedStyles$5 = function getSharedStyles() {
   };
 };
 
-var ApplySubMenuLinkStyles$1 = styled.li.withConfig({
+var ApplySubMenuLinkStyles = styled.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": {
@@ -22853,19 +22876,21 @@ var ApplySubMenuLinkStyles$1 = styled.li.withConfig({
     }
   })
 });
-var SubMenuText$1 = styled.li.withConfig({
+var SubMenuText = styled.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.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.key ?? subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
     name: subMenuItem.name,
@@ -22874,12 +22899,14 @@ var renderSubMenuTrigger$1 = function renderSubMenuTrigger(subMenuItem, onItemCl
 };
 
 var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.key ?? subMenuItem.name
-  }, /*#__PURE__*/React__default.createElement(SubMenuLink$1, {
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+  }, /*#__PURE__*/React__default.createElement(SubMenuLink, {
     fontSize: "small",
     lineHeight: "smallTextBase",
     py: "half",
@@ -22891,15 +22918,19 @@ var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
 };
 
 var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
-  return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles$1, {
-    key: subMenuItem.key ?? subMenuItem.name,
+  var _a;
+
+  return /*#__PURE__*/React__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.createElement(SubMenuText$1, {
-    key: subMenuItem.key ?? subMenuItem.name
+  var _a;
+
+  return /*#__PURE__*/React__default.createElement(SubMenuText, {
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, subMenuItem.name);
 };
 
@@ -22921,11 +22952,9 @@ var renderSubMenuItems$1 = function renderSubMenuItems(subMenuItems, onItemClick
   });
 };
 
-var _excluded$4 = ["name", "isOpen"],
-    _excluded2$2 = ["menuData", "name", "onItemClick"];
 var StyledButton$3 = styled.button.withConfig({
   displayName: "SubMenuTrigger__StyledButton",
-  componentId: "sc-1pygu12-0"
+  componentId: "sc-1jh6iro-0"
 })(function (_ref) {
   var isOpen = _ref.isOpen;
   return {
@@ -22956,15 +22985,15 @@ var StyledButton$3 = styled.button.withConfig({
     cursor: "pointer"
   };
 });
-var SubMenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
-  var name = _ref2.name,
-      isOpen = _ref2.isOpen,
-      props = _objectWithoutPropertiesLoose$2(_ref2, _excluded$4);
+var SubMenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var name = _a.name,
+      isOpen = _a.isOpen,
+      props = __rest(_a, ["name", "isOpen"]);
 
-  return /*#__PURE__*/React__default.createElement(StyledButton$3, _extends$4({
+  return /*#__PURE__*/React__default.createElement(StyledButton$3, Object.assign({
     isOpen: isOpen,
     ref: ref
-  }, props), name, /*#__PURE__*/React__default.createElement(Icon, {
+  }, props), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, name, /*#__PURE__*/React__default.createElement(Icon, {
     style: {
       position: "absolute",
       top: "7px"
@@ -22973,7 +23002,7 @@ var SubMenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_r
     color: "darkBlue",
     size: "20px",
     p: "2px"
-  }));
+  })));
 });
 SubMenuTriggerButton$1.propTypes = {
   name: PropTypes.string.isRequired,
@@ -22987,26 +23016,26 @@ var SubMenuTrigger$1 = function SubMenuTrigger(props) {
   var menuData = props.menuData,
       name = props.name,
       onItemClick = props.onItemClick,
-      otherProps = _objectWithoutPropertiesLoose$2(props, _excluded2$2);
+      otherProps = __rest(props, ["menuData", "name", "onItemClick"]);
 
-  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu$1, _extends$4({
+  return /*#__PURE__*/React__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.createElement(SubMenuTriggerButton$1, {
         isOpen: isOpen,
         name: name,
@@ -23033,11 +23062,9 @@ SubMenuTrigger$1.defaultProps = {
   onItemClick: null
 };
 
-var _excluded$3 = ["name", "color", "hoverColor", "hoverBackground"],
-    _excluded2$1 = ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"];
 var StyledButton$2 = styled.button.withConfig({
   displayName: "MenuTrigger__StyledButton",
-  componentId: "sm3xx0-0"
+  componentId: "ooz0w0-0"
 })(function (_ref) {
   var color = _ref.color,
       hoverColor = _ref.hoverColor,
@@ -23079,14 +23106,14 @@ StyledButton$2.defaultProps = {
   hoverColor: Theme.colors.lightBlue,
   hoverBackground: Theme.colors.black
 };
-var MenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
-  var name = _ref2.name,
-      color = _ref2.color,
-      hoverColor = _ref2.hoverColor,
-      hoverBackground = _ref2.hoverBackground,
-      props = _objectWithoutPropertiesLoose$2(_ref2, _excluded$3);
+var MenuTriggerButton$1 = /*#__PURE__*/React__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.createElement(StyledButton$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(StyledButton$2, Object.assign({
     color: color,
     hoverColor: hoverColor,
     hoverBackground: hoverBackground,
@@ -23104,7 +23131,7 @@ var MenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_ref2
   }));
 });
 MenuTriggerButton$1.propTypes = {
-  name: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired,
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.string
@@ -23122,7 +23149,7 @@ var MenuTrigger$1 = function MenuTrigger(props) {
       hoverColor = props.hoverColor,
       hoverBackground = props.hoverBackground,
       ariaLabel = props["aria-label"],
-      otherProps = _objectWithoutPropertiesLoose$2(props, _excluded2$1);
+      otherProps = __rest(props, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"]);
 
   var dropdownMinWidth = "auto";
 
@@ -23132,7 +23159,7 @@ var MenuTrigger$1 = function MenuTrigger(props) {
     return popperData;
   };
 
-  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu$1, _extends$4({}, otherProps, {
+  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu$1, Object.assign({}, otherProps, {
     placement: "bottom-start",
     modifiers: {
       flip: {
@@ -23157,8 +23184,8 @@ var MenuTrigger$1 = function MenuTrigger(props) {
         "aria-label": ariaLabel
       });
     }
-  }), function (_ref3) {
-    var closeMenu = _ref3.closeMenu;
+  }), function (_ref2) {
+    var closeMenu = _ref2.closeMenu;
     return /*#__PURE__*/React__default.createElement("ul", {
       style: {
         listStyle: "none",
@@ -23189,9 +23216,7 @@ MenuTrigger$1.defaultProps = {
   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),
@@ -23206,15 +23231,15 @@ var getSharedStyles$4 = function getSharedStyles(color) {
   };
 };
 
-var ApplyMenuLinkStyles$3 = styled.div.withConfig({
+var ApplyMenuLinkStyles$1 = styled.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",
@@ -23231,24 +23256,24 @@ var ApplyMenuLinkStyles$3 = styled.div.withConfig({
     })
   };
 });
-ApplyMenuLinkStyles$3.propTypes = {
+ApplyMenuLinkStyles$1.propTypes = {
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.string
 };
-ApplyMenuLinkStyles$3.defaultProps = {
+ApplyMenuLinkStyles$1.defaultProps = {
   color: Theme.colors.white,
   hoverColor: Theme.colors.lightBlue,
   hoverBackground: Theme.colors.black
 };
-var MenuLink$3 = styled.a.withConfig({
+var MenuLink$2 = styled.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",
@@ -23264,16 +23289,16 @@ var MenuLink$3 = styled.a.withConfig({
     }
   });
 });
-var MenuText$3 = styled.div.withConfig({
+var MenuText$2 = styled.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.nav.withConfig({
   displayName: "DesktopMenu__Nav",
-  componentId: "e4dzdq-3"
+  componentId: "sc-1mpxh2o-3"
 })({
   display: "flex"
 });
@@ -23281,7 +23306,7 @@ var Nav$3 = styled.nav.withConfig({
 var renderMenuTrigger$1 = function renderMenuTrigger(menuItem, themeColorObject) {
   return /*#__PURE__*/React__default.createElement("div", {
     key: menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuTrigger$1, _extends$4({
+  }, /*#__PURE__*/React__default.createElement(MenuTrigger$1, Object.assign({
     name: menuItem.name,
     "aria-label": menuItem.ariaLabel,
     menuData: menuItem.items
@@ -23291,7 +23316,7 @@ var renderMenuTrigger$1 = function renderMenuTrigger(menuItem, themeColorObject)
 var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
   return /*#__PURE__*/React__default.createElement("div", {
     key: menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink$3, _extends$4({
+  }, /*#__PURE__*/React__default.createElement(MenuLink$2, Object.assign({
     href: menuItem.href,
     as: menuItem.as,
     to: menuItem.to
@@ -23299,13 +23324,13 @@ var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
 };
 
 var renderCustom$4 = function renderCustom(menuItem, themeColorObject) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$3, _extends$4({}, themeColorObject, {
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
     key: menuItem.name
   }), menuItem.render());
 };
 
 var renderText$4 = function renderText(menuItem, themeColorObject) {
-  return /*#__PURE__*/React__default.createElement(MenuText$3, _extends$4({
+  return /*#__PURE__*/React__default.createElement(MenuText$2, Object.assign({
     key: menuItem.name
   }, themeColorObject), menuItem.name);
 };
@@ -23326,12 +23351,12 @@ var renderMenuItem$1 = function renderMenuItem(menuItem, themeColorObject) {
   return getRenderFunction$4(menuItem)(menuItem, themeColorObject);
 };
 
-var BaseDesktopMenu$1 = function BaseDesktopMenu(_ref4) {
-  var menuData = _ref4.menuData,
-      themeColorObject = _ref4.themeColorObject,
-      props = _objectWithoutPropertiesLoose$2(_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.createElement(Nav$3, props, menuData.map(function (menuItem) {
+  return /*#__PURE__*/React__default.createElement(Nav$3, Object.assign({}, props), menuData.map(function (menuItem) {
     return renderMenuItem$1(menuItem, themeColorObject);
   }));
 };
@@ -23346,7 +23371,7 @@ BaseDesktopMenu$1.defaultProps = {
 };
 var DesktopMenu$1 = styled(BaseDesktopMenu$1).withConfig({
   displayName: "DesktopMenu",
-  componentId: "e4dzdq-4"
+  componentId: "sc-1mpxh2o-4"
 })({
   "> div": {
     ":not(:last-of-type)": {
@@ -23355,10 +23380,40 @@ var DesktopMenu$1 = styled(BaseDesktopMenu$1).withConfig({
   }
 });
 
-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.checkPropTypes({
+    name: PropTypes.node.isRequired,
+    ariaLabel: PropTypes.string,
+    href: PropTypes.string,
+    items: PropTypes.arrayOf(isValidMenuItem),
+    render: PropTypes.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.div.withConfig({
   displayName: "MobileMenu__BrandingWrap",
-  componentId: "sc-1wo8gfl-0"
+  componentId: "vqy2lk-0"
 })({
   marginTop: "-" + Theme.space.x1,
   marginBottom: Theme.space.x3,
@@ -23370,7 +23425,7 @@ var getPaddingLeft$1 = function getPaddingLeft(layer) {
   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 {
@@ -23388,9 +23443,9 @@ var getSharedStyles$3 = function getSharedStyles(_ref) {
   };
 };
 
-var ApplyMenuLinkStyles$2 = styled.li.withConfig({
+var ApplyMenuLinkStyles = styled.li.withConfig({
   displayName: "MobileMenu__ApplyMenuLinkStyles",
-  componentId: "sc-1wo8gfl-1"
+  componentId: "vqy2lk-1"
 })(function (_ref2) {
   var color = _ref2.color,
       hoverColor = _ref2.hoverColor,
@@ -23398,10 +23453,10 @@ var ApplyMenuLinkStyles$2 = styled.li.withConfig({
       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",
@@ -23417,30 +23472,30 @@ var ApplyMenuLinkStyles$2 = styled.li.withConfig({
     })
   };
 });
-ApplyMenuLinkStyles$2.propTypes = {
+ApplyMenuLinkStyles.propTypes = {
   layer: PropTypes.number,
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.string
 };
-ApplyMenuLinkStyles$2.defaultProps = {
+ApplyMenuLinkStyles.defaultProps = {
   layer: 0,
   color: Theme.colors.white,
   hoverColor: Theme.colors.lightBlue,
   hoverBackground: Theme.colors.black
 };
-var MenuLink$2 = styled.a.withConfig({
+var MenuLink$1 = styled.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",
@@ -23458,20 +23513,20 @@ var MenuLink$2 = styled.a.withConfig({
     }
   });
 });
-var MenuText$2 = styled.li.withConfig({
+var MenuText$1 = styled.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.ul.withConfig({
   displayName: "MobileMenu__SubMenuItemsList",
-  componentId: "sc-1wo8gfl-4"
+  componentId: "vqy2lk-4"
 })({
   listStyle: "none",
   paddingLeft: "0",
@@ -23485,7 +23540,7 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
       display: "block",
       marginBottom: Theme.space.x1
     }
-  }, /*#__PURE__*/React__default.createElement(MenuLink$2, _extends$4({
+  }, /*#__PURE__*/React__default.createElement(MenuLink$1, Object.assign({
     layer: layer
   }, themeColorObject, {
     onClick: linkOnClick,
@@ -23496,7 +23551,7 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
 };
 
 var renderCustom$3 = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles, Object.assign({
     key: menuItem.name
   }, themeColorObject, {
     layer: layer,
@@ -23519,7 +23574,7 @@ var renderSubMenu$1 = function renderSubMenu(menuItem, linkOnClick, themeColorOb
 };
 
 var renderText$3 = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
-  return /*#__PURE__*/React__default.createElement(MenuText$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(MenuText$1, Object.assign({
     key: menuItem.name,
     layer: layer
   }, themeColorObject), menuItem.name);
@@ -23590,7 +23645,7 @@ SubMenu$1.defaultProps = {
 };
 var Menu$2 = styled.ul.withConfig({
   displayName: "MobileMenu__Menu",
-  componentId: "sc-1wo8gfl-5"
+  componentId: "vqy2lk-5"
 })(function () {
   var _ref6;
 
@@ -23606,7 +23661,7 @@ var Menu$2 = styled.ul.withConfig({
 });
 var Nav$2 = styled.nav.withConfig({
   displayName: "MobileMenu__Nav",
-  componentId: "sc-1wo8gfl-6"
+  componentId: "vqy2lk-6"
 })(function (_ref7) {
   var backgroundColor = _ref7.backgroundColor;
   return {
@@ -23616,15 +23671,15 @@ var Nav$2 = styled.nav.withConfig({
   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$2(_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.createElement(Nav$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(Nav$2, Object.assign({
     backgroundColor: themeColorObject && themeColorObject.background
   }, props), subtext && includeSubtext && /*#__PURE__*/React__default.createElement(BrandingWrap$1, null, /*#__PURE__*/React__default.createElement(BrandingText, {
     logoColor: themeColorObject && themeColorObject.logoColor
@@ -23650,44 +23705,115 @@ BaseMobileMenu$1.defaultProps = {
 };
 var MobileMenu$1 = styled(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$2(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.createRef();
+    return _this;
   }
 
-  PropTypes.checkPropTypes({
-    name: PropTypes.node.isRequired,
-    ariaLabel: PropTypes.string,
-    href: PropTypes.string,
-    items: PropTypes.arrayOf(isValidMenuItem),
-    render: PropTypes.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.createElement(SmallHeader$1, Object.assign({
+      ref: this.navRef,
+      isOpen: isOpen
+    }, props), /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
+      backgroundColor: getThemeColor(themeColor).background
+    }, /*#__PURE__*/React__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.createElement(Branding, {
+      logoColor: getThemeColor(themeColor).logoColor,
+      logoType: this.isSmallScreen() ? "lettermark" : "wordmark",
+      subtext: this.isSmallScreen() ? null : subtext
+    })), /*#__PURE__*/React__default.createElement(Flex, {
+      justifyContent: "flex-end",
+      style: {
+        flexGrow: 1,
+        margin: "0 0 0 " + Theme.space.x3
+      }
+    }, menuData.search && /*#__PURE__*/React__default.createElement(Flex, {
+      maxWidth: "18em",
+      alignItems: "center",
+      px: "0"
+    }, /*#__PURE__*/React__default.createElement(NavBarSearch, Object.assign({}, menuData.search))), (menuData.primaryMenu || menuData.secondaryMenu) && /*#__PURE__*/React__default.createElement(MobileMenuTrigger$1, Object.assign({}, getThemeColor(themeColor), {
+      onClick: toggleMenu,
+      "aria-expanded": isOpen ? true : null
+    }), /*#__PURE__*/React__default.createElement(MenuIcon$1, {
+      isOpen: isOpen
+    })))), isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default.createElement(MobileMenu$1, {
+      themeColorObject: getThemeColor(themeColor),
+      subtext: subtext,
+      includeSubtext: this.isSmallScreen(),
+      menuData: menuData,
+      closeMenu: closeMenu
+    })));
+  };
+
+  return SmallNavBarNoState;
+}(React__default.Component);
+
+SmallNavBarNoState$1.propTypes = {
+  menuState: PropTypes.shape({
+    isOpen: PropTypes.bool,
+    toggleMenu: PropTypes.func,
+    closeMenu: PropTypes.func
+  }).isRequired,
+  menuData: PropTypes.shape(MenuDataPropTypes),
+  subtext: PropTypes.string,
+  brandingLinkHref: PropTypes.string,
+  brandingLinkTo: PropTypes.string,
+  breakpointLower: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.number,
+  themeColor: PropTypes.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,
@@ -23706,47 +23832,45 @@ var themeColors = {
     logoColor: "blue"
   }
 };
-
 var getThemeColor = function getThemeColor(themeColor) {
   return themeColors[themeColor] || themeColors.blue;
 };
-
 var NavBarBackground$1 = styled(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$2(_ref2, _excluded);
-
-  return /*#__PURE__*/React__default.createElement(Link, _extends$4({
+  return /*#__PURE__*/React__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$2(_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.createElement("header", props, /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
+  return /*#__PURE__*/React__default.createElement("header", Object.assign({}, props), /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
     backgroundColor: getThemeColor(themeColor).background
   }, /*#__PURE__*/React__default.createElement(BrandingLink, {
     "aria-label": "Nulogy logo",
@@ -23764,7 +23888,7 @@ var MediumNavBar$1 = function MediumNavBar(_ref3) {
     justifyContent: "space-between",
     alignContent: "flex-end",
     style: {
-      flexGrow: "1",
+      flexGrow: 1,
       margin: "0 0 0 " + Theme.space.x3
     }
   }, menuData.primaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu$1, {
@@ -23781,7 +23905,7 @@ var MediumNavBar$1 = function MediumNavBar(_ref3) {
   }, menuData.search && /*#__PURE__*/React__default.createElement(Box, {
     maxWidth: "18em",
     mr: menuData.secondaryMenu ? Theme.space.x1 : Theme.space.none
-  }, /*#__PURE__*/React__default.createElement(NavBarSearch, menuData.search)), menuData.secondaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu$1, {
+  }, /*#__PURE__*/React__default.createElement(NavBarSearch, Object.assign({}, menuData.search))), menuData.secondaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu$1, {
     themeColorObject: getThemeColor(themeColor),
     "aria-label": t("secondary navigation"),
     menuData: menuData.secondaryMenu
@@ -23811,11 +23935,11 @@ MediumNavBar$1.defaultProps = {
 };
 var MobileMenuTrigger$1 = styled.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",
@@ -23838,9 +23962,9 @@ var MobileMenuTrigger$1 = styled.button.withConfig({
 });
 var SmallHeader$1 = styled.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%",
@@ -23853,13 +23977,11 @@ var SmallHeader$1 = styled.header.withConfig({
     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;
@@ -23871,145 +23993,39 @@ var MenuIcon$1 = function MenuIcon(_ref6) {
     title: title
   });
 };
-
 MenuIcon$1.propTypes = {
   isOpen: PropTypes.bool
 };
 MenuIcon$1.defaultProps = {
   isOpen: false
 };
-/* eslint-disable react/destructuring-assignment */
-
-var SmallNavBarNoState$1 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose$2(SmallNavBarNoState, _React$Component);
-
-  function SmallNavBarNoState() {
-    var _this;
-
-    _this = _React$Component.call(this) || this;
-    _this.navRef = /*#__PURE__*/React__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$2(_this$props2, _excluded3);
-
-    return /*#__PURE__*/React__default.createElement(SmallHeader$1, _extends$4({
-      ref: this.navRef,
-      isOpen: isOpen
-    }, props), /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
-      backgroundColor: getThemeColor(themeColor).background
-    }, /*#__PURE__*/React__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.createElement(Branding, {
-      logoColor: getThemeColor(themeColor).logoColor,
-      logoType: this.isSmallScreen() ? "lettermark" : "wordmark",
-      subtext: this.isSmallScreen() ? null : subtext
-    })), /*#__PURE__*/React__default.createElement(Flex, {
-      justifyContent: "flex-end",
-      style: {
-        flexGrow: "1",
-        margin: "0 0 0 " + Theme.space.x3
-      }
-    }, menuData.search && /*#__PURE__*/React__default.createElement(Flex, {
-      maxWidth: "18em",
-      alignItems: "center",
-      px: "0"
-    }, /*#__PURE__*/React__default.createElement(NavBarSearch, menuData.search)), (menuData.primaryMenu || menuData.secondaryMenu) && /*#__PURE__*/React__default.createElement(MobileMenuTrigger$1, _extends$4({}, getThemeColor(themeColor), {
-      onClick: toggleMenu,
-      "aria-expanded": isOpen ? true : null
-    }), /*#__PURE__*/React__default.createElement(MenuIcon$1, {
-      isOpen: isOpen
-    })))), isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default.createElement(MobileMenu$1, {
-      themeColorObject: getThemeColor(themeColor),
-      subtext: subtext,
-      includeSubtext: this.isSmallScreen(),
-      menuData: menuData,
-      closeMenu: closeMenu
-    })));
-  };
-
-  return SmallNavBarNoState;
-}(React__default.Component);
-/* eslint-enable react/destructuring-assignment */
-
-
-SmallNavBarNoState$1.propTypes = {
-  menuState: PropTypes.shape({
-    isOpen: PropTypes.bool,
-    toggleMenu: PropTypes.func,
-    closeMenu: PropTypes.func
-  }).isRequired,
-  menuData: PropTypes.shape(MenuDataPropTypes),
-  subtext: PropTypes.string,
-  brandingLinkHref: PropTypes.string,
-  brandingLinkTo: PropTypes.string,
-  breakpointLower: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.number,
-  themeColor: PropTypes.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$2(_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.createElement(MediumNavBar$1, props);
+    return /*#__PURE__*/React__default.createElement(MediumNavBar$1, Object.assign({}, props));
   } else {
-    return /*#__PURE__*/React__default.createElement(SmallNavBar$1, _extends$4({}, props, {
-      width: currentWidth,
-      defaultOpen: defaultOpen
-    }));
+    return (
+      /*#__PURE__*/
+      // @ts-ignore
+      React__default.createElement(SmallNavBar$1, Object.assign({}, props, {
+        width: currentWidth,
+        defaultOpen: defaultOpen
+      }))
+    );
   }
 };
 
 var NavBar$1 = function NavBar(props) {
   return /*#__PURE__*/React__default.createElement(ResizeDetector, {
     handleWidth: true
-  }, /*#__PURE__*/React__default.createElement(SelectNavBarBasedOnWidth$1, props));
+  }, /*#__PURE__*/React__default.createElement(SelectNavBarBasedOnWidth$1, Object.assign({}, props)));
 };
 
 NavBar$1.propTypes = {
@@ -25376,7 +25392,7 @@ var TooltipContainer = styled(Box).withConfig({
     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
@@ -44494,8 +44510,8 @@ var StatelessNavBarDropdownMenu = /*#__PURE__*/function (_StatelessNavBarDropd)
       })), /*#__PURE__*/React__default.createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, {
         placement: placement,
         ref: popperProps.arrowProps.ref,
-        backgroundColor: "whiteGrey",
-        borderColor: "whiteGrey"
+        backgroundColor: "white",
+        borderColor: "white"
       })), /*#__PURE__*/React__default.createElement(DetectOutsideClick, {
         onClick: _this4.handleOutsideClick,
         clickRef: [_this4.menuRef, _this4.triggerRef]
@@ -44542,64 +44558,10 @@ NavBarDropdownMenu.defaultProps = {
   hideDelay: "100"
 };
 
-var SubMenuLink = styled(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.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.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) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement("li", {
-    style: {
-      whiteSpace: "nowrap"
-    },
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
@@ -44611,14 +44573,9 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
 var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement("li", {
-    style: {
-      whiteSpace: "nowrap"
-    },
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, /*#__PURE__*/React__default.createElement(SubMenuLink, {
-    fontSize: "small",
-    lineHeight: "smallTextBase",
+  }, /*#__PURE__*/React__default.createElement(DropdownLink, {
     py: "half",
     onClick: onItemClick,
     href: subMenuItem.href,
@@ -44630,18 +44587,17 @@ var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
 var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles, {
-    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
-    onClick: onItemClick
-  }, subMenuItem.render());
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+  }, subMenuItem.render(onItemClick));
 };
 
 var renderText$2 = function renderText(subMenuItem) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(SubMenuText, {
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, subMenuItem.name);
+  }, /*#__PURE__*/React__default.createElement(DropdownText, null, subMenuItem.name));
 };
 
 var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
@@ -44662,37 +44618,25 @@ var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick,
   });
 };
 
-var StyledButton$1 = styled.button.withConfig({
+var NoWrapLi = styled.li.withConfig({
+  displayName: "renderSubMenuItems__NoWrapLi",
+  componentId: "vyx9p-0"
+})(function () {
+  return {
+    whiteSpace: "nowrap"
+  };
+});
+
+var StyledButton$1 = styled(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.forwardRef(function (_a, ref) {
@@ -44706,10 +44650,9 @@ var SubMenuTriggerButton = /*#__PURE__*/React__default.forwardRef(function (_a,
   }, props), name, /*#__PURE__*/React__default.createElement(Icon, {
     style: {
       position: "absolute",
-      top: "7px"
+      top: "10px"
     },
     icon: "rightArrow",
-    color: "darkBlue",
     size: "20px",
     p: "2px"
   }));
@@ -44760,7 +44703,7 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
   );
 };
 
-SubMenuTrigger.displayName = "SubMenuTriggerButton";
+SubMenuTrigger.displayName = "SubMenuTrigger";
 
 var StyledButton = styled.button.withConfig({
   displayName: "MenuTrigger__StyledButton",
@@ -44905,43 +44848,14 @@ var getSharedStyles$1 = function getSharedStyles(color, theme) {
   };
 };
 
-var ApplyMenuLinkStyles$1 = styled.div.withConfig({
-  displayName: "DesktopMenu__ApplyMenuLinkStyles",
+var MenuLink = styled.a.withConfig({
+  displayName: "DesktopMenu__MenuLink",
   componentId: "sc-8mrjkc-0"
 })(function (_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "white" : _ref$color,
-      _ref$hoverColor = _ref.hoverColor,
-      hoverColor = _ref$hoverColor === void 0 ? "lightBlue" : _ref$hoverColor,
-      _ref$hoverBackground = _ref.hoverBackground,
-      hoverBackground = _ref$hoverBackground === void 0 ? "black" : _ref$hoverBackground,
+  var color = _ref.color,
+      hoverColor = _ref.hoverColor,
+      hoverBackground = _ref.hoverBackground,
       theme = _ref.theme;
-  return {
-    "button, a": Object.assign(Object.assign({}, getSharedStyles$1(color, theme)), {
-      transition: ".2s",
-      "&:hover, &:focus": {
-        outline: "none",
-        color: theme.colors[hoverColor] || hoverColor,
-        backgroundColor: theme.colors[hoverBackground] || hoverBackground,
-        cursor: "pointer"
-      },
-      "&:disabled": {
-        opacity: ".5"
-      },
-      "&:focus": {
-        boxShadow: theme.shadows.focus
-      }
-    })
-  };
-});
-var MenuLink$1 = styled.a.withConfig({
-  displayName: "DesktopMenu__MenuLink",
-  componentId: "sc-8mrjkc-1"
-})(function (_ref2) {
-  var color = _ref2.color,
-      hoverColor = _ref2.hoverColor,
-      hoverBackground = _ref2.hoverBackground,
-      theme = _ref2.theme;
   return Object.assign(Object.assign({}, getSharedStyles$1(color, theme)), {
     fontWeight: theme.fontWeights.medium,
     transition: ".2s",
@@ -44959,19 +44873,19 @@ var MenuLink$1 = styled.a.withConfig({
     }
   });
 });
-var MenuText$1 = styled.div.withConfig({
+var MenuText = styled.div.withConfig({
   displayName: "DesktopMenu__MenuText",
-  componentId: "sc-8mrjkc-2"
-})(function (_ref3) {
-  var textColor = _ref3.textColor,
-      theme = _ref3.theme;
+  componentId: "sc-8mrjkc-1"
+})(function (_ref2) {
+  var textColor = _ref2.textColor,
+      theme = _ref2.theme;
   return Object.assign(Object.assign({}, getSharedStyles$1(textColor, theme)), {
     fontWeight: theme.fontWeights.medium
   });
 });
 var Nav$1 = styled.nav.withConfig({
   displayName: "DesktopMenu__Nav",
-  componentId: "sc-8mrjkc-3"
+  componentId: "sc-8mrjkc-2"
 })({
   display: "flex",
   alignItems: "center"
@@ -44994,25 +44908,25 @@ var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
 
   return /*#__PURE__*/React__default.createElement("div", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink$1, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
     href: menuItem.href,
     to: menuItem.to,
     as: menuItem.as
   }, themeColorObject), menuItem.name));
 };
 
-var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
+var renderCustom$1 = function renderCustom(menuItem) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
+  return /*#__PURE__*/React__default.createElement("div", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }), menuItem.render());
+  }, menuItem.render());
 };
 
 var renderText$1 = function renderText(menuItem, themeColorObject) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(MenuText$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(MenuText, Object.assign({
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, themeColorObject), menuItem.name);
 };
@@ -45045,7 +44959,7 @@ var BaseDesktopMenu = function BaseDesktopMenu(_a) {
 
 var DesktopMenu = styled(BaseDesktopMenu).withConfig({
   displayName: "DesktopMenu",
-  componentId: "sc-8mrjkc-4"
+  componentId: "sc-8mrjkc-3"
 })({
   "> div": {
     ":not(:last-of-type)": {
@@ -45118,94 +45032,44 @@ var BrandingWrap = styled.div.withConfig({
     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.li.withConfig({
-  displayName: "MobileMenu__ApplyMenuLinkStyles",
+var TopLevelLink = styled(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.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": {
@@ -45216,18 +45080,31 @@ var MenuLink = styled.a.withConfig({
     }
   });
 });
-var MenuText = styled.li.withConfig({
-  displayName: "MobileMenu__MenuText",
+var TopLevelText = styled(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.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.ul.withConfig({
   displayName: "MobileMenu__SubMenuItemsList",
@@ -45237,41 +45114,29 @@ var SubMenuItemsList = styled.ul.withConfig({
   paddingLeft: "0",
   margin: "0"
 });
-var StyledLi = styled.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.createElement(StyledLi, {
+  var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+  return /*#__PURE__*/React__default.createElement(ChildIndentingLi, {
+    layer: layer,
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
-    layer: layer
-  }, themeColorObject, {
+  }, /*#__PURE__*/React__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.createElement(ApplyMenuLinkStyles, Object.assign({
-    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, themeColorObject, {
+  return /*#__PURE__*/React__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) {
@@ -45293,10 +45158,11 @@ var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObje
 var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
   var _a;
 
-  return /*#__PURE__*/React__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.createElement(ChildIndentingLi, {
+    layer: layer,
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+  }, /*#__PURE__*/React__default.createElement(MenuText, null, menuItem.name));
 };
 
 var getRenderFunction = function getRenderFunction(menuItem) {
@@ -45322,50 +45188,47 @@ var renderTopLayerMenuItems = function renderTopLayerMenuItems(menuData, linkOnC
   return renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
 };
 
-var getSubMenuHeading = function getSubMenuHeading(layer, color, name) {
-  return layer === 0 ? /*#__PURE__*/React__default.createElement(Heading3, {
+var getSubMenuHeading = function getSubMenuHeading(layer, name) {
+  return layer === 0 ? /*#__PURE__*/React__default.createElement(TopLevelText, {
+    as: "h3"
+  }, name) : /*#__PURE__*/React__default.createElement(DropdownText, {
     mb: "x1",
-    color: color
-  }, name) : /*#__PURE__*/React__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.createElement(React__default.Fragment, null, getSubMenuHeading(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__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.createElement(React__default.Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
 };
 
 var Menu$1 = styled.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.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
   };
@@ -45403,7 +45266,7 @@ var BaseMobileMenu = function BaseMobileMenu(_a) {
 
 var MobileMenu = styled(BaseMobileMenu).withConfig({
   displayName: "MobileMenu",
-  componentId: "sc-18t6zrc-8"
+  componentId: "sc-18t6zrc-7"
 })(display);
 
 var borderStyle = "1px solid #e4e7eb";
@@ -45468,7 +45331,7 @@ var NavBarBackground = styled(Flex).withConfig({
   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,
@@ -52664,7 +52527,6 @@ var Sidebar = function Sidebar(_a) {
     display: "flex",
     flexDirection: "column",
     height: "calc(100% - " + NAVBAR_HEIGHT + ")",
-    boxShadow: "large",
     borderLeftWidth: "1px",
     borderLeftStyle: "solid",
     borderLeftColor: "lightGrey",
@@ -52821,4 +52683,4 @@ var SortingTable = function SortingTable(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };