@nulogy/components 7.3.1 → 8.0.0

package/dist/main.js

@@ -12512,26 +12512,19 @@
     return MenuState;
   }(MenuStateInt);
 
-  var withMenuState = function withMenuState(MenuComponent) {
-    var MenuComponentWithState = function MenuComponentWithState(_a) {
-      var showDelay = _a.showDelay,
-          hideDelay = _a.hideDelay,
-          defaultOpen = _a.defaultOpen,
-          props = __rest(_a, ["showDelay", "hideDelay", "defaultOpen"]);
-
+  function withMenuState(MenuComponent) {
+    return function (props) {
       return /*#__PURE__*/React__default['default'].createElement(MenuState, {
-        showDelay: showDelay,
-        hideDelay: hideDelay,
-        defaultOpen: defaultOpen
+        showDelay: props.showDelay,
+        hideDelay: props.hideDelay,
+        defaultOpen: props.defaultOpen
       }, function (menuComponentProps) {
         return /*#__PURE__*/React__default['default'].createElement(MenuComponent, Object.assign({
           menuState: menuComponentProps
         }, props));
       });
     };
-
-    return MenuComponentWithState;
-  };
+  }
 
   function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
@@ -16153,7 +16146,11 @@
     var _hover, _active, _hoverActive, _focus, _ref3;
 
     var disabled = _ref2.disabled,
+        hoverBackgroundColor = _ref2.hoverBackgroundColor,
         theme = _ref2.theme;
+
+    var _a;
+
     return _ref3 = {
       background: "transparent",
       border: "none",
@@ -16172,7 +16169,7 @@
     }, _ref3["" + HoverText] = {
       opacity: "0"
     }, _ref3["&:hover"] = (_hover = {}, _hover["" + Icon] = {
-      backgroundColor: theme.colors.lightBlue
+      backgroundColor: (_a = theme.colors[hoverBackgroundColor]) !== null && _a !== void 0 ? _a : hoverBackgroundColor
     }, _hover["" + HoverText] = {
       opacity: "1"
     }, _hover), _ref3["&:active"] = (_active = {}, _active["" + Icon] = {
@@ -16196,18 +16193,21 @@
     var children = _a.children,
         _a$color = _a.color,
         color = _a$color === void 0 ? "darkBlue" : _a$color,
+        _a$hoverBackgroundCol = _a.hoverBackgroundColor,
+        hoverBackgroundColor = _a$hoverBackgroundCol === void 0 ? "lightBlue" : _a$hoverBackgroundCol,
         icon = _a.icon,
         labelHidden = _a.labelHidden,
         className = _a.className,
         iconSize = _a.iconSize,
         fontSize = _a.fontSize,
         tooltip = _a.tooltip,
-        props = __rest(_a, ["children", "color", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
+        props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
 
     return /*#__PURE__*/React__default['default'].createElement(WrapperButton$1, Object.assign({
       ref: forwardedRef,
       "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined,
-      className: className
+      className: className,
+      hoverBackgroundColor: hoverBackgroundColor
     }, props), /*#__PURE__*/React__default['default'].createElement(Manager$2, null, /*#__PURE__*/React__default['default'].createElement(Reference$2, null, function (_ref4) {
       var ref = _ref4.ref;
       return /*#__PURE__*/React__default['default'].createElement(Icon, {
@@ -16713,6 +16713,10 @@
   };
 
   var sizes$1 = {
+    small: {
+      height: "24px",
+      width: "28px"
+    },
     medium: {
       height: "32px",
       width: "37px"
@@ -43560,14 +43564,14 @@
         closeMenu = _a.closeMenu,
         subtext = _a.subtext,
         themeColorObject = _a.themeColorObject,
-        logoSrc = _a.logoSrc,
-        props = __rest(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "logoSrc"]);
+        showNulogyLogo = _a.showNulogyLogo,
+        props = __rest(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "showNulogyLogo"]);
 
     return /*#__PURE__*/React__default['default'].createElement(Nav, Object.assign({
       backgroundColor: themeColorObject && themeColorObject.background
     }, props), /*#__PURE__*/React__default['default'].createElement(BrandingWrap, null, /*#__PURE__*/React__default['default'].createElement(BrandingText, {
       logoColor: themeColorObject && themeColorObject.logoColor
-    })), /*#__PURE__*/React__default['default'].createElement(Menu$1, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), logoSrc && /*#__PURE__*/React__default['default'].createElement(Flex, {
+    })), /*#__PURE__*/React__default['default'].createElement(Menu$1, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), showNulogyLogo && /*#__PURE__*/React__default['default'].createElement(Flex, {
       textAlign: "center",
       borderTop: borderStyle,
       height: "40px",
@@ -43673,16 +43677,15 @@
         toggleMenu = _a$menuState.toggleMenu,
         closeMenu = _a$menuState.closeMenu,
         subtext = _a.subtext,
-        _a$brandingLinkHref = _a.brandingLinkHref,
-        brandingLinkHref = _a$brandingLinkHref === void 0 ? "/" : _a$brandingLinkHref,
-        brandingLinkTo = _a.brandingLinkTo,
         environment = _a.environment,
-        logoSrc = _a.logoSrc,
+        showNulogyLogo = _a.showNulogyLogo,
         _a$breakpointLower = _a.breakpointLower,
         breakpointLower = _a$breakpointLower === void 0 ? "small" : _a$breakpointLower,
         themeColorObject = _a.themeColorObject,
         navBarHeight = _a.navBarHeight,
-        props = __rest(_a, ["menuData", "menuState", "subtext", "brandingLinkHref", "brandingLinkTo", "environment", "logoSrc", "breakpointLower", "themeColorObject", "navBarHeight"]);
+        logo = _a.logo,
+        renderMenuButton = _a.renderMenuButton,
+        props = __rest(_a, ["menuData", "menuState", "subtext", "environment", "showNulogyLogo", "breakpointLower", "themeColorObject", "navBarHeight", "logo", "renderMenuButton"]);
 
     var navRef = React__default['default'].useRef(null);
     React.useEffect(function () {
@@ -43694,6 +43697,7 @@
     var _useTheme = styled.useTheme(),
         breakpoints = _useTheme.breakpoints;
 
+    var ariaExpanded = isOpen ? true : null;
     return /*#__PURE__*/React__default['default'].createElement(SmallHeader, Object.assign({
       ref: navRef,
       isOpen: isOpen,
@@ -43701,12 +43705,7 @@
     }, props), environment && /*#__PURE__*/React__default['default'].createElement(EnvironmentBanner, null, environment), /*#__PURE__*/React__default['default'].createElement(NavBarBackground, {
       backgroundColor: "white",
       height: navBarHeight
-    }, /*#__PURE__*/React__default['default'].createElement(BrandLogoContainer, {
-      logoSrc: logoSrc,
-      brandingLinkHref: brandingLinkHref,
-      brandingLinkTo: brandingLinkTo,
-      subtext: subtext
-    }), /*#__PURE__*/React__default['default'].createElement(Flex, {
+    }, logo, /*#__PURE__*/React__default['default'].createElement(Flex, {
       justifyContent: "flex-end",
       ml: "x3",
       flexGrow: 1
@@ -43714,17 +43713,22 @@
       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, Object.assign({}, themeColorObject, {
+    }, /*#__PURE__*/React__default['default'].createElement(NavBarSearch, Object.assign({}, menuData.search))), (menuData.primaryMenu || menuData.secondaryMenu) && (renderMenuButton ? renderMenuButton({
+      themeColorObject: themeColorObject,
       onClick: toggleMenu,
-      "aria-expanded": isOpen ? true : null
+      ariaExpanded: ariaExpanded,
+      isOpen: isOpen
+    }) : /*#__PURE__*/React__default['default'].createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, {
+      onClick: toggleMenu,
+      "aria-expanded": ariaExpanded
     }), /*#__PURE__*/React__default['default'].createElement(MenuIcon, {
       isOpen: isOpen
-    })))), isOpen && /*#__PURE__*/React__default['default'].createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default['default'].createElement(MobileMenu, {
+    }))))), isOpen && /*#__PURE__*/React__default['default'].createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default['default'].createElement(MobileMenu, {
       themeColorObject: themeColorObject,
       subtext: subtext,
       menuData: menuData,
       closeMenu: closeMenu,
-      logoSrc: logoSrc
+      showNulogyLogo: showNulogyLogo
     })));
   };
   /* eslint-enable react/destructuring-assignment */
@@ -43744,14 +43748,11 @@
 
   var MediumNavBar = function MediumNavBar(_a) {
     var menuData = _a.menuData,
-        subtext = _a.subtext,
         environment = _a.environment,
-        logoSrc = _a.logoSrc,
-        _a$brandingLinkHref = _a.brandingLinkHref,
-        brandingLinkHref = _a$brandingLinkHref === void 0 ? "/" : _a$brandingLinkHref,
-        brandingLinkTo = _a.brandingLinkTo,
-        brandingLinkComponent = _a.brandingLinkComponent,
-        props = __rest(_a, ["menuData", "subtext", "environment", "logoSrc", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent"]);
+        logo = _a.logo,
+        showNulogyLogo = _a.showNulogyLogo,
+        subtext = _a.subtext,
+        props = __rest(_a, ["menuData", "environment", "logo", "showNulogyLogo", "subtext"]);
 
     var _useTranslation = useTranslation(),
         t = _useTranslation.t;
@@ -43759,13 +43760,7 @@
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, environment && /*#__PURE__*/React__default['default'].createElement(EnvironmentBanner, null, environment), /*#__PURE__*/React__default['default'].createElement("header", Object.assign({}, props), /*#__PURE__*/React__default['default'].createElement(NavBarBackground, {
       backgroundColor: "white",
       height: NAVBAR_HEIGHT
-    }, /*#__PURE__*/React__default['default'].createElement(BrandLogoContainer, {
-      logoSrc: logoSrc,
-      brandingLinkHref: brandingLinkHref,
-      brandingLinkTo: brandingLinkTo,
-      brandingLinkComponent: brandingLinkComponent,
-      subtext: subtext
-    }), /*#__PURE__*/React__default['default'].createElement(Flex, {
+    }, logo, /*#__PURE__*/React__default['default'].createElement(Flex, {
       justifyContent: "space-between",
       alignContent: "flex-end",
       flexGrow: 1,
@@ -43782,7 +43777,7 @@
       themeColorObject: themeColorObject,
       "aria-label": t("secondary navigation"),
       menuData: menuData.secondaryMenu
-    }), logoSrc && /*#__PURE__*/React__default['default'].createElement(Box, {
+    }), showNulogyLogo && /*#__PURE__*/React__default['default'].createElement(Box, {
       pl: "x3"
     }, /*#__PURE__*/React__default['default'].createElement(NulogyLogoContainer, {
       height: NAVBAR_HEIGHT,
@@ -43798,19 +43793,36 @@
     var width = _a.width,
         defaultOpen = _a.defaultOpen,
         breakpointUpper = _a.breakpointUpper,
-        props = __rest(_a, ["width", "defaultOpen", "breakpointUpper"]);
+        _a$brandingLinkHref = _a.brandingLinkHref,
+        brandingLinkHref = _a$brandingLinkHref === void 0 ? "/" : _a$brandingLinkHref,
+        brandingLinkTo = _a.brandingLinkTo,
+        brandingLinkComponent = _a.brandingLinkComponent,
+        logoSrc = _a.logoSrc,
+        props = __rest(_a, ["width", "defaultOpen", "breakpointUpper", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent", "logoSrc"]);
 
     var currentWidth = width || typeof window !== "undefined" && window.innerWidth;
+    var logo = /*#__PURE__*/React__default['default'].createElement(BrandLogoContainer, {
+      logoSrc: logoSrc,
+      brandingLinkHref: brandingLinkHref,
+      brandingLinkTo: brandingLinkTo,
+      brandingLinkComponent: brandingLinkComponent,
+      subtext: props.subtext
+    });
 
     if (currentWidth >= pixelDigitsFrom(breakpointUpper)) {
-      return /*#__PURE__*/React__default['default'].createElement(MediumNavBar, Object.assign({}, props));
+      return /*#__PURE__*/React__default['default'].createElement(MediumNavBar, Object.assign({
+        logo: logo,
+        showNulogyLogo: logoSrc
+      }, props));
     } else {
-      return /*#__PURE__*/React__default['default'].createElement(SmallNavBar, Object.assign({}, props, {
+      return /*#__PURE__*/React__default['default'].createElement(SmallNavBar, Object.assign({
         width: currentWidth,
         defaultOpen: defaultOpen,
         themeColorObject: themeColorObject,
-        navBarHeight: NAVBAR_HEIGHT
-      }));
+        navBarHeight: NAVBAR_HEIGHT,
+        logo: logo,
+        showNulogyLogo: logoSrc
+      }, props));
     }
   };
 

package/dist/main.module.js

@@ -12486,26 +12486,19 @@ var MenuState = /*#__PURE__*/function (_MenuStateInt) {
   return MenuState;
 }(MenuStateInt);
 
-var withMenuState = function withMenuState(MenuComponent) {
-  var MenuComponentWithState = function MenuComponentWithState(_a) {
-    var showDelay = _a.showDelay,
-        hideDelay = _a.hideDelay,
-        defaultOpen = _a.defaultOpen,
-        props = __rest(_a, ["showDelay", "hideDelay", "defaultOpen"]);
-
+function withMenuState(MenuComponent) {
+  return function (props) {
     return /*#__PURE__*/React__default.createElement(MenuState, {
-      showDelay: showDelay,
-      hideDelay: hideDelay,
-      defaultOpen: defaultOpen
+      showDelay: props.showDelay,
+      hideDelay: props.hideDelay,
+      defaultOpen: props.defaultOpen
     }, function (menuComponentProps) {
       return /*#__PURE__*/React__default.createElement(MenuComponent, Object.assign({
         menuState: menuComponentProps
       }, props));
     });
   };
-
-  return MenuComponentWithState;
-};
+}
 
 function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
@@ -16127,7 +16120,11 @@ var WrapperButton$1 = styled.button.withConfig({
   var _hover, _active, _hoverActive, _focus, _ref3;
 
   var disabled = _ref2.disabled,
+      hoverBackgroundColor = _ref2.hoverBackgroundColor,
       theme = _ref2.theme;
+
+  var _a;
+
   return _ref3 = {
     background: "transparent",
     border: "none",
@@ -16146,7 +16143,7 @@ var WrapperButton$1 = styled.button.withConfig({
   }, _ref3["" + HoverText] = {
     opacity: "0"
   }, _ref3["&:hover"] = (_hover = {}, _hover["" + Icon] = {
-    backgroundColor: theme.colors.lightBlue
+    backgroundColor: (_a = theme.colors[hoverBackgroundColor]) !== null && _a !== void 0 ? _a : hoverBackgroundColor
   }, _hover["" + HoverText] = {
     opacity: "1"
   }, _hover), _ref3["&:active"] = (_active = {}, _active["" + Icon] = {
@@ -16170,18 +16167,21 @@ var IconicButton = /*#__PURE__*/React__default.forwardRef(function (_a, forwarde
   var children = _a.children,
       _a$color = _a.color,
       color = _a$color === void 0 ? "darkBlue" : _a$color,
+      _a$hoverBackgroundCol = _a.hoverBackgroundColor,
+      hoverBackgroundColor = _a$hoverBackgroundCol === void 0 ? "lightBlue" : _a$hoverBackgroundCol,
       icon = _a.icon,
       labelHidden = _a.labelHidden,
       className = _a.className,
       iconSize = _a.iconSize,
       fontSize = _a.fontSize,
       tooltip = _a.tooltip,
-      props = __rest(_a, ["children", "color", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
+      props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
 
   return /*#__PURE__*/React__default.createElement(WrapperButton$1, Object.assign({
     ref: forwardedRef,
     "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined,
-    className: className
+    className: className,
+    hoverBackgroundColor: hoverBackgroundColor
   }, props), /*#__PURE__*/React__default.createElement(Manager$2, null, /*#__PURE__*/React__default.createElement(Reference$2, null, function (_ref4) {
     var ref = _ref4.ref;
     return /*#__PURE__*/React__default.createElement(Icon, {
@@ -16687,6 +16687,10 @@ BrandingText.defaultProps = {
 };
 
 var sizes$1 = {
+  small: {
+    height: "24px",
+    width: "28px"
+  },
   medium: {
     height: "32px",
     width: "37px"
@@ -43534,14 +43538,14 @@ var BaseMobileMenu = function BaseMobileMenu(_a) {
       closeMenu = _a.closeMenu,
       subtext = _a.subtext,
       themeColorObject = _a.themeColorObject,
-      logoSrc = _a.logoSrc,
-      props = __rest(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "logoSrc"]);
+      showNulogyLogo = _a.showNulogyLogo,
+      props = __rest(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "showNulogyLogo"]);
 
   return /*#__PURE__*/React__default.createElement(Nav, Object.assign({
     backgroundColor: themeColorObject && themeColorObject.background
   }, props), /*#__PURE__*/React__default.createElement(BrandingWrap, null, /*#__PURE__*/React__default.createElement(BrandingText, {
     logoColor: themeColorObject && themeColorObject.logoColor
-  })), /*#__PURE__*/React__default.createElement(Menu$1, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), logoSrc && /*#__PURE__*/React__default.createElement(Flex, {
+  })), /*#__PURE__*/React__default.createElement(Menu$1, null, menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)), showNulogyLogo && /*#__PURE__*/React__default.createElement(Flex, {
     textAlign: "center",
     borderTop: borderStyle,
     height: "40px",
@@ -43647,16 +43651,15 @@ var SmallNavBarNoState = function SmallNavBarNoState(_a) {
       toggleMenu = _a$menuState.toggleMenu,
       closeMenu = _a$menuState.closeMenu,
       subtext = _a.subtext,
-      _a$brandingLinkHref = _a.brandingLinkHref,
-      brandingLinkHref = _a$brandingLinkHref === void 0 ? "/" : _a$brandingLinkHref,
-      brandingLinkTo = _a.brandingLinkTo,
       environment = _a.environment,
-      logoSrc = _a.logoSrc,
+      showNulogyLogo = _a.showNulogyLogo,
       _a$breakpointLower = _a.breakpointLower,
       breakpointLower = _a$breakpointLower === void 0 ? "small" : _a$breakpointLower,
       themeColorObject = _a.themeColorObject,
       navBarHeight = _a.navBarHeight,
-      props = __rest(_a, ["menuData", "menuState", "subtext", "brandingLinkHref", "brandingLinkTo", "environment", "logoSrc", "breakpointLower", "themeColorObject", "navBarHeight"]);
+      logo = _a.logo,
+      renderMenuButton = _a.renderMenuButton,
+      props = __rest(_a, ["menuData", "menuState", "subtext", "environment", "showNulogyLogo", "breakpointLower", "themeColorObject", "navBarHeight", "logo", "renderMenuButton"]);
 
   var navRef = React__default.useRef(null);
   useEffect(function () {
@@ -43668,6 +43671,7 @@ var SmallNavBarNoState = function SmallNavBarNoState(_a) {
   var _useTheme = useTheme(),
       breakpoints = _useTheme.breakpoints;
 
+  var ariaExpanded = isOpen ? true : null;
   return /*#__PURE__*/React__default.createElement(SmallHeader, Object.assign({
     ref: navRef,
     isOpen: isOpen,
@@ -43675,12 +43679,7 @@ var SmallNavBarNoState = function SmallNavBarNoState(_a) {
   }, props), environment && /*#__PURE__*/React__default.createElement(EnvironmentBanner, null, environment), /*#__PURE__*/React__default.createElement(NavBarBackground, {
     backgroundColor: "white",
     height: navBarHeight
-  }, /*#__PURE__*/React__default.createElement(BrandLogoContainer, {
-    logoSrc: logoSrc,
-    brandingLinkHref: brandingLinkHref,
-    brandingLinkTo: brandingLinkTo,
-    subtext: subtext
-  }), /*#__PURE__*/React__default.createElement(Flex, {
+  }, logo, /*#__PURE__*/React__default.createElement(Flex, {
     justifyContent: "flex-end",
     ml: "x3",
     flexGrow: 1
@@ -43688,17 +43687,22 @@ var SmallNavBarNoState = function SmallNavBarNoState(_a) {
     maxWidth: "18em",
     alignItems: "center",
     px: "0"
-  }, /*#__PURE__*/React__default.createElement(NavBarSearch, Object.assign({}, menuData.search))), (menuData.primaryMenu || menuData.secondaryMenu) && /*#__PURE__*/React__default.createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, {
+  }, /*#__PURE__*/React__default.createElement(NavBarSearch, Object.assign({}, menuData.search))), (menuData.primaryMenu || menuData.secondaryMenu) && (renderMenuButton ? renderMenuButton({
+    themeColorObject: themeColorObject,
     onClick: toggleMenu,
-    "aria-expanded": isOpen ? true : null
+    ariaExpanded: ariaExpanded,
+    isOpen: isOpen
+  }) : /*#__PURE__*/React__default.createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, {
+    onClick: toggleMenu,
+    "aria-expanded": ariaExpanded
   }), /*#__PURE__*/React__default.createElement(MenuIcon, {
     isOpen: isOpen
-  })))), isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default.createElement(MobileMenu, {
+  }))))), isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default.createElement(MobileMenu, {
     themeColorObject: themeColorObject,
     subtext: subtext,
     menuData: menuData,
     closeMenu: closeMenu,
-    logoSrc: logoSrc
+    showNulogyLogo: showNulogyLogo
   })));
 };
 /* eslint-enable react/destructuring-assignment */
@@ -43718,14 +43722,11 @@ var themeColorObject = {
 
 var MediumNavBar = function MediumNavBar(_a) {
   var menuData = _a.menuData,
-      subtext = _a.subtext,
       environment = _a.environment,
-      logoSrc = _a.logoSrc,
-      _a$brandingLinkHref = _a.brandingLinkHref,
-      brandingLinkHref = _a$brandingLinkHref === void 0 ? "/" : _a$brandingLinkHref,
-      brandingLinkTo = _a.brandingLinkTo,
-      brandingLinkComponent = _a.brandingLinkComponent,
-      props = __rest(_a, ["menuData", "subtext", "environment", "logoSrc", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent"]);
+      logo = _a.logo,
+      showNulogyLogo = _a.showNulogyLogo,
+      subtext = _a.subtext,
+      props = __rest(_a, ["menuData", "environment", "logo", "showNulogyLogo", "subtext"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -43733,13 +43734,7 @@ var MediumNavBar = function MediumNavBar(_a) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, environment && /*#__PURE__*/React__default.createElement(EnvironmentBanner, null, environment), /*#__PURE__*/React__default.createElement("header", Object.assign({}, props), /*#__PURE__*/React__default.createElement(NavBarBackground, {
     backgroundColor: "white",
     height: NAVBAR_HEIGHT
-  }, /*#__PURE__*/React__default.createElement(BrandLogoContainer, {
-    logoSrc: logoSrc,
-    brandingLinkHref: brandingLinkHref,
-    brandingLinkTo: brandingLinkTo,
-    brandingLinkComponent: brandingLinkComponent,
-    subtext: subtext
-  }), /*#__PURE__*/React__default.createElement(Flex, {
+  }, logo, /*#__PURE__*/React__default.createElement(Flex, {
     justifyContent: "space-between",
     alignContent: "flex-end",
     flexGrow: 1,
@@ -43756,7 +43751,7 @@ var MediumNavBar = function MediumNavBar(_a) {
     themeColorObject: themeColorObject,
     "aria-label": t("secondary navigation"),
     menuData: menuData.secondaryMenu
-  }), logoSrc && /*#__PURE__*/React__default.createElement(Box, {
+  }), showNulogyLogo && /*#__PURE__*/React__default.createElement(Box, {
     pl: "x3"
   }, /*#__PURE__*/React__default.createElement(NulogyLogoContainer, {
     height: NAVBAR_HEIGHT,
@@ -43772,19 +43767,36 @@ var SelectNavBarBasedOnWidth = function SelectNavBarBasedOnWidth(_a) {
   var width = _a.width,
       defaultOpen = _a.defaultOpen,
       breakpointUpper = _a.breakpointUpper,
-      props = __rest(_a, ["width", "defaultOpen", "breakpointUpper"]);
+      _a$brandingLinkHref = _a.brandingLinkHref,
+      brandingLinkHref = _a$brandingLinkHref === void 0 ? "/" : _a$brandingLinkHref,
+      brandingLinkTo = _a.brandingLinkTo,
+      brandingLinkComponent = _a.brandingLinkComponent,
+      logoSrc = _a.logoSrc,
+      props = __rest(_a, ["width", "defaultOpen", "breakpointUpper", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent", "logoSrc"]);
 
   var currentWidth = width || typeof window !== "undefined" && window.innerWidth;
+  var logo = /*#__PURE__*/React__default.createElement(BrandLogoContainer, {
+    logoSrc: logoSrc,
+    brandingLinkHref: brandingLinkHref,
+    brandingLinkTo: brandingLinkTo,
+    brandingLinkComponent: brandingLinkComponent,
+    subtext: props.subtext
+  });
 
   if (currentWidth >= pixelDigitsFrom(breakpointUpper)) {
-    return /*#__PURE__*/React__default.createElement(MediumNavBar, Object.assign({}, props));
+    return /*#__PURE__*/React__default.createElement(MediumNavBar, Object.assign({
+      logo: logo,
+      showNulogyLogo: logoSrc
+    }, props));
   } else {
-    return /*#__PURE__*/React__default.createElement(SmallNavBar, Object.assign({}, props, {
+    return /*#__PURE__*/React__default.createElement(SmallNavBar, Object.assign({
       width: currentWidth,
       defaultOpen: defaultOpen,
       themeColorObject: themeColorObject,
-      navBarHeight: NAVBAR_HEIGHT
-    }));
+      navBarHeight: NAVBAR_HEIGHT,
+      logo: logo,
+      showNulogyLogo: logoSrc
+    }, props));
   }
 };
 

package/dist/src/BrandedNavBar/MobileMenu.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 declare type ThemeColorObject = {
     textColor?: string;
     background?: string;
@@ -13,7 +13,7 @@ declare type BaseMobileMenuProps = {
     subtext?: string;
     closeMenu?: Function;
     themeColorObject?: ThemeColorObject;
-    logoSrc?: string;
+    showNulogyLogo?: boolean;
 };
-declare const MobileMenu: import("styled-components").StyledComponent<({ menuData, closeMenu, subtext, themeColorObject, logoSrc, ...props }: BaseMobileMenuProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare const MobileMenu: import("styled-components").StyledComponent<React.FC<BaseMobileMenuProps>, import("styled-components").DefaultTheme, {}, never>;
 export default MobileMenu;

package/dist/src/BrandedNavBar/NavBarDropdownMenu.d.ts

@@ -1,8 +1,19 @@
-/// <reference types="react" />
-declare const NavBarDropdownMenu: ({ showDelay, hideDelay, defaultOpen, ...props }: {
-    [x: string]: any;
-    showDelay: any;
-    hideDelay: any;
-    defaultOpen: any;
-}) => JSX.Element;
+import React from "react";
+declare type MenuState = {
+    isOpen?: boolean;
+    openMenu?: Function;
+    closeMenu?: Function;
+    toggleMenu?: Function;
+};
+declare type NavBarDropdownMenuProps = {
+    children?: React.ReactNode;
+    trigger?: Function;
+    menuState?: MenuState;
+    showArrow?: boolean;
+    placement?: "bottom-start" | "right-start";
+    modifiers?: any;
+    triggerTogglesMenuState?: boolean;
+    dropdownMenuContainerEventHandlers?: Function;
+};
+declare const NavBarDropdownMenu: React.JSXElementConstructor<NavBarDropdownMenuProps & import("../utils").WithMenuStateProps>;
 export default NavBarDropdownMenu;

package/dist/src/BrandedNavBar/SmallNavBar.d.ts

@@ -1,24 +1,36 @@
-/// <reference types="react" />
-import { WithMenuStateProps } from "../utils";
-import { BrandLogoContainerProps } from "./BrandLogoContainer";
-declare type SmallNavBarNoStateProps = BrandLogoContainerProps & {
-    menuState?: any;
+import React from "react";
+import { WithMenuStateProps, AcceptsMenuStateProps } from "../utils";
+export declare type RenderMenuButtonProps = {
+    themeColorObject: any;
+    onClick: () => void;
+    ariaExpanded: true | null;
+    isOpen: boolean;
+};
+declare type SmallNavBarNoStateProps = {
     menuData?: any;
     subtext?: string;
-    brandingLinkHref?: string;
-    brandingLinkTo?: string;
     breakpointLower?: number | string;
     width?: number;
     themeColor?: "blue" | "white";
-    themeColorObject: any;
+    themeColorObject?: any;
     environment?: "development" | "training";
     navBarHeight: string;
-};
-declare const SmallNavBar: ({ showDelay, hideDelay, defaultOpen, ...props }: {
-    [x: string]: any;
-    showDelay: any;
-    hideDelay: any;
-    defaultOpen: any;
-}) => JSX.Element;
+    logo?: React.ReactElement;
+    showNulogyLogo?: boolean;
+    renderMenuButton?: (props: RenderMenuButtonProps) => React.ReactElement;
+} & AcceptsMenuStateProps;
+declare const SmallNavBar: React.JSXElementConstructor<{
+    menuData?: any;
+    subtext?: string;
+    breakpointLower?: number | string;
+    width?: number;
+    themeColor?: "blue" | "white";
+    themeColorObject?: any;
+    environment?: "development" | "training";
+    navBarHeight: string;
+    logo?: React.ReactElement;
+    showNulogyLogo?: boolean;
+    renderMenuButton?: (props: RenderMenuButtonProps) => React.ReactElement;
+} & AcceptsMenuStateProps & WithMenuStateProps>;
 export declare type SmallNavBarProps = SmallNavBarNoStateProps & WithMenuStateProps;
 export default SmallNavBar;

package/dist/src/BrandedNavBar/SmallNavBar.story.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};
+export default _default;
+export declare const _SmallNavBar: () => JSX.Element;
+export declare const SmallNavBarOpen: () => JSX.Element;
+export declare const WithALogo: () => JSX.Element;
+export declare const WithALogoOpen: () => JSX.Element;
+export declare const WithABrandLogoContainerLogo: () => JSX.Element;
+export declare const WithANulogyLogoAndAppName: () => JSX.Element;
+export declare const WithEnvironmentBanner: () => JSX.Element;
+export declare const WithCustomMenuButton: () => JSX.Element;

package/dist/src/BrandedNavBar/index.d.ts

@@ -10,4 +10,4 @@ export type { BrandLogoContainerProps } from "./BrandLogoContainer";
 export { default as DesktopMenu } from "./DesktopMenu";
 export type { DesktopMenuProps } from "./DesktopMenu";
 export { default as SmallNavBar } from "./SmallNavBar";
-export type { SmallNavBarProps } from "./SmallNavBar";
+export type { SmallNavBarProps, RenderMenuButtonProps } from "./SmallNavBar";

package/dist/src/Button/IconicButton.d.ts

@@ -5,6 +5,7 @@ declare type BaseProps = {
     labelHidden?: boolean;
     icon?: any;
     iconSize?: string;
+    hoverBackgroundColor?: string;
     fontSize?: string;
     tooltip?: string;
 };

package/dist/src/Button/IconicButton.story.d.ts

@@ -71,3 +71,5 @@ export declare const WithNonTextChildren: {
         name: string;
     };
 };
+export declare const WithCustomHoverBackgroundThemeColor: () => JSX.Element;
+export declare const WithCustomHoverBackgroundNonThemeColor: () => JSX.Element;

package/dist/src/NavBar/NavBarDropdownMenu.d.ts

@@ -1,8 +1,3 @@
-/// <reference types="react" />
-declare const NavBarDropdownMenu: ({ showDelay, hideDelay, defaultOpen, ...props }: {
-    [x: string]: any;
-    showDelay: any;
-    hideDelay: any;
-    defaultOpen: any;
-}) => JSX.Element;
+import React from "react";
+declare const NavBarDropdownMenu: React.JSXElementConstructor<import("../utils").WithMenuStateProps>;
 export default NavBarDropdownMenu;

package/dist/src/NavBar/SmallNavBar.d.ts

@@ -1,8 +1,3 @@
-/// <reference types="react" />
-declare const SmallNavBar: ({ showDelay, hideDelay, defaultOpen, ...props }: {
-    [x: string]: any;
-    showDelay: any;
-    hideDelay: any;
-    defaultOpen: any;
-}) => JSX.Element;
+import React from "react";
+declare const SmallNavBar: React.JSXElementConstructor<import("../utils").WithMenuStateProps>;
 export default SmallNavBar;

package/dist/src/index.d.ts

@@ -43,7 +43,7 @@ export { ALL_NDS_LOCALES } from "./locales.const";
 export { TruncatedText } from "./TruncatedText";
 export { Toast } from "./Toast";
 export { BrandedNavBar, MenuTrigger, EnvironmentBanner, NavBarBackground, BrandLogoContainer, DesktopMenu, SmallNavBar, } from "./BrandedNavBar";
-export type { MenuTriggerProps, EnvironmentBannerProps, NavBarBackgroundProps, BrandLogoContainerProps, DesktopMenuProps, SmallNavBarProps, } from "./BrandedNavBar";
+export type { MenuTriggerProps, EnvironmentBannerProps, NavBarBackgroundProps, BrandLogoContainerProps, DesktopMenuProps, SmallNavBarProps, RenderMenuButtonProps, } from "./BrandedNavBar";
 export { AsyncSelect } from "./AsyncSelect";
 export { ApplicationFrame, Page, Sidebar } from "./Layout";
 export { useWindowDimensions } from "./utils";

package/dist/src/utils/index.d.ts

@@ -7,6 +7,6 @@ export { default as DetectOutsideClick } from "./DetectOutsideClick";
 export { default as PopperArrow } from "./PopperArrow";
 export { default as ScrollIndicators } from "./ScrollIndicators";
 export { default as withMenuState } from "./withMenuState";
-export type { WithMenuStateProps } from "./withMenuState";
+export type { WithMenuStateProps, AcceptsMenuStateProps } from "./withMenuState";
 export { default as PreventBodyElementScrolling } from "./PreventBodyElementScrolling";
 export { default as useWindowDimensions } from "./useWindowDimensions";

package/dist/src/utils/withMenuState.d.ts

@@ -1,14 +1,12 @@
-/// <reference types="react" />
+import React from "react";
 export declare type WithMenuStateProps = {
     children?: any;
     showDelay?: string | number;
     hideDelay?: string | number;
     defaultOpen?: boolean;
 };
-declare const withMenuState: (MenuComponent: any) => ({ showDelay, hideDelay, defaultOpen, ...props }: {
-    [x: string]: any;
-    showDelay: any;
-    hideDelay: any;
-    defaultOpen: any;
-}) => JSX.Element;
+export declare type AcceptsMenuStateProps = {
+    menuState?: any;
+};
+declare function withMenuState<P extends AcceptsMenuStateProps>(MenuComponent: React.JSXElementConstructor<P>): React.JSXElementConstructor<P & WithMenuStateProps>;
 export default withMenuState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "7.3.1",
+  "version": "8.0.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {