@nulogy/components 6.7.4 → 6.7.5

package/dist/main.js

@@ -22578,12 +22578,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 +22757,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 +22772,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 +22788,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",
@@ -22842,7 +22842,7 @@
 
   var SubMenuLink$1 = styled__default['default'](DropdownLink).withConfig({
     displayName: "renderSubMenuItems__SubMenuLink",
-    componentId: "sc-17xzkuc-0"
+    componentId: "sc-10nvflk-0"
   })(fontSize, lineHeight, space);
 
   var getSharedStyles$5 = function getSharedStyles() {
@@ -22860,11 +22860,11 @@
 
   var ApplySubMenuLinkStyles$1 = 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$5()), {
       transition: ".2s",
       textDecoration: "none",
       "&:hover, &:focus": {
@@ -22881,17 +22881,19 @@
   });
   var SubMenuText$1 = styled__default['default'].li.withConfig({
     displayName: "renderSubMenuItems__SubMenuText",
-    componentId: "sc-17xzkuc-2"
+    componentId: "sc-10nvflk-2"
   })(Object.assign({
     color: Theme.colors.darkGrey
   }, getSharedStyles$5()));
 
   var renderSubMenuTrigger$1 = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+    var _a;
+
     return /*#__PURE__*/React__default['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['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
       name: subMenuItem.name,
@@ -22900,11 +22902,13 @@
   };
 
   var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
+    var _a;
+
     return /*#__PURE__*/React__default['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['default'].createElement(SubMenuLink$1, {
       fontSize: "small",
       lineHeight: "smallTextBase",
@@ -22917,15 +22921,19 @@
   };
 
   var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles$1, {
-      key: subMenuItem.key ?? subMenuItem.name,
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
       onClick: onItemClick
     }, subMenuItem.render());
   };
 
   var renderText$5 = function renderText(subMenuItem) {
+    var _a;
+
     return /*#__PURE__*/React__default['default'].createElement(SubMenuText$1, {
-      key: subMenuItem.key ?? subMenuItem.name
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, subMenuItem.name);
   };
 
@@ -22947,11 +22955,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 +22988,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 +23005,7 @@
       color: "darkBlue",
       size: "20px",
       p: "2px"
-    }));
+    })));
   });
   SubMenuTriggerButton$1.propTypes = {
     name: PropTypes__default['default'].string.isRequired,
@@ -23013,26 +23019,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 +23065,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 +23109,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 +23134,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 +23152,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 +23162,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 +23187,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,8 +23219,6 @@
     hoverBackground: Theme.colors.black
   };
 
-  var _excluded$2 = ["menuData", "themeColorObject"];
-
   var getSharedStyles$4 = function getSharedStyles(color) {
     return {
       display: "block",
@@ -23234,13 +23236,13 @@
 
   var ApplyMenuLinkStyles$3 = 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$4(color)), {
         transition: ".2s",
         "&:hover, &:focus": {
           outline: "none",
@@ -23269,12 +23271,12 @@
   };
   var MenuLink$3 = 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$4(color)), {
       transition: ".2s",
       "&:hover, &:focus": {
         outline: "none",
@@ -23292,14 +23294,14 @@
   });
   var MenuText$3 = 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));
   });
   var Nav$3 = styled__default['default'].nav.withConfig({
     displayName: "DesktopMenu__Nav",
-    componentId: "e4dzdq-3"
+    componentId: "sc-1mpxh2o-3"
   })({
     display: "flex"
   });
@@ -23307,7 +23309,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 +23319,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$3, Object.assign({
       href: menuItem.href,
       as: menuItem.as,
       to: menuItem.to
@@ -23325,13 +23327,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$3, 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$3, Object.assign({
       key: menuItem.name
     }, themeColorObject), menuItem.name);
   };
@@ -23352,12 +23354,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 +23374,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 +23383,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,
@@ -23416,7 +23448,7 @@
 
   var ApplyMenuLinkStyles$2 = 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 +23456,10 @@
         layer = _ref2.layer;
     return {
       display: "block",
-      "*": Object.assign({}, getSharedStyles$3({
+      "*": Object.assign(Object.assign({}, getSharedStyles$3({
         color: color,
         layer: layer
-      }), {
+      })), {
         textDecoration: "none",
         "&:hover, &:focus": {
           outline: "none",
@@ -23457,16 +23489,16 @@
   };
   var MenuLink$2 = 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$3({
       color: color,
       layer: layer
-    }), {
+    })), {
       width: "100%",
       borderRadius: "0",
       transition: ".2s",
@@ -23486,7 +23518,7 @@
   });
   var MenuText$2 = styled__default['default'].li.withConfig({
     displayName: "MobileMenu__MenuText",
-    componentId: "sc-1wo8gfl-3"
+    componentId: "vqy2lk-3"
   })(function (_ref4) {
     var textColor = _ref4.textColor,
         layer = _ref4.layer;
@@ -23497,7 +23529,7 @@
   });
   var SubMenuItemsList$1 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__SubMenuItemsList",
-    componentId: "sc-1wo8gfl-4"
+    componentId: "vqy2lk-4"
   })({
     listStyle: "none",
     paddingLeft: "0",
@@ -23511,7 +23543,7 @@
         display: "block",
         marginBottom: Theme.space.x1
       }
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$2, _extends__default['default']({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$2, Object.assign({
       layer: layer
     }, themeColorObject, {
       onClick: linkOnClick,
@@ -23522,7 +23554,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$2, Object.assign({
       key: menuItem.name
     }, themeColorObject, {
       layer: layer,
@@ -23545,7 +23577,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$2, Object.assign({
       key: menuItem.name,
       layer: layer
     }, themeColorObject), menuItem.name);
@@ -23616,7 +23648,7 @@
   };
   var Menu$2 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__Menu",
-    componentId: "sc-1wo8gfl-5"
+    componentId: "vqy2lk-5"
   })(function () {
     var _ref6;
 
@@ -23632,7 +23664,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 +23674,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 +23708,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 +23835,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 +23891,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 +23908,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 +23938,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 +23965,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 +23980,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 +23996,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 = {