@nulogy/components 7.5.0 → 8.1.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); } }
 
@@ -23335,7 +23328,6 @@
         required = _a.required,
         requirementText = _a.requirementText,
         helpText = _a.helpText,
-        noOptionsMessage = _a.noOptionsMessage,
         disabled = _a.disabled,
         errorMessage = _a.errorMessage,
         errorList = _a.errorList,
@@ -23344,27 +23336,16 @@
         id = _a.id,
         initialIsOpen = _a.initialIsOpen,
         maxHeight = _a.maxHeight,
-        menuPosition = _a.menuPosition,
         multiselect = _a.multiselect,
-        name = _a.name,
         onChange = _a.onChange,
         placeholder = _a.placeholder,
         value = _a.value,
         defaultValue = _a.defaultValue,
-        className = _a.className,
-        classNamePrefix = _a.classNamePrefix,
-        onBlur = _a.onBlur,
-        menuIsOpen = _a.menuIsOpen,
-        onMenuOpen = _a.onMenuOpen,
-        onMenuClose = _a.onMenuClose,
-        onInputChange = _a.onInputChange,
         components = _a.components,
         ariaLabel = _a["aria-label"],
         _a$windowThreshold = _a.windowThreshold,
         windowThreshold = _a$windowThreshold === void 0 ? 300 : _a$windowThreshold,
-        filterOption = _a.filterOption,
-        closeMenuOnSelect = _a.closeMenuOnSelect,
-        props = __rest(_a, ["autocomplete", "options", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "error", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "windowThreshold", "filterOption", "closeMenuOnSelect"]);
+        props = __rest(_a, ["autocomplete", "options", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "error", "id", "initialIsOpen", "maxHeight", "multiselect", "onChange", "placeholder", "value", "defaultValue", "components", "aria-label", "windowThreshold"]);
 
     var _useTranslation = useTranslation(),
         t = _useTranslation.t;
@@ -23378,14 +23359,9 @@
       labelText: labelText,
       requirementText: requirementText,
       helpText: helpText
-    }, /*#__PURE__*/React__default['default'].createElement(WindowedSelect__default['default'], {
+    }, /*#__PURE__*/React__default['default'].createElement(WindowedSelect__default['default'], Object.assign({
       ref: ref,
-      className: className,
-      classNamePrefix: classNamePrefix,
-      noOptionsMessage: noOptionsMessage,
       placeholder: placeholder || t("select ..."),
-      options: options,
-      labelText: labelText,
       windowThreshold: windowThreshold,
       styles: customStyles({
         theme: themeContext,
@@ -23399,19 +23375,12 @@
       "aria-invalid": error,
       defaultMenuIsOpen: initialIsOpen,
       inputId: id,
-      onBlur: onBlur,
       onChange: onChange && function (option) {
         return onChange(extractValue(option, multiselect));
       },
       defaultValue: getReactSelectValue(options, defaultValue),
       value: getReactSelectValue(options, value),
-      name: name,
       isMulti: multiselect,
-      menuIsOpen: menuIsOpen,
-      onMenuOpen: onMenuOpen,
-      onMenuClose: onMenuClose,
-      menuPosition: menuPosition,
-      onInputChange: onInputChange,
       theme: themeContext,
       components: Object.assign({
         Option: SelectOption,
@@ -23424,9 +23393,9 @@
         Input: SelectInput
       }, components),
       "aria-label": ariaLabel,
-      filterOption: filterOption,
-      closeMenuOnSelect: closeMenuOnSelect
-    }), /*#__PURE__*/React__default['default'].createElement(InlineValidation, {
+      options: options,
+      labelText: labelText
+    }, props)), /*#__PURE__*/React__default['default'].createElement(InlineValidation, {
       mt: "x1",
       errorMessage: errorMessage,
       errorList: errorList
@@ -43571,14 +43540,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",
@@ -43625,7 +43594,7 @@
       color: theme.colors[color] || color,
       background: "none",
       border: "none",
-      padding: subPx(theme.space.x1) + " " + theme.space.x1,
+      padding: theme.space.x1,
       marginLeft: theme.space.x1,
       borderRadius: theme.radii.medium,
       transition: ".2s",
@@ -43684,16 +43653,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 () {
@@ -43705,6 +43673,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,
@@ -43712,12 +43681,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
@@ -43725,17 +43689,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,
+      ariaExpanded: ariaExpanded,
+      isOpen: isOpen
+    }) : /*#__PURE__*/React__default['default'].createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, {
       onClick: toggleMenu,
-      "aria-expanded": isOpen ? true : null
+      "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 */
@@ -43755,14 +43724,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;
@@ -43770,13 +43736,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,
@@ -43793,7 +43753,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,
@@ -43809,19 +43769,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); } }
 
@@ -23309,7 +23302,6 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       required = _a.required,
       requirementText = _a.requirementText,
       helpText = _a.helpText,
-      noOptionsMessage = _a.noOptionsMessage,
       disabled = _a.disabled,
       errorMessage = _a.errorMessage,
       errorList = _a.errorList,
@@ -23318,27 +23310,16 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       id = _a.id,
       initialIsOpen = _a.initialIsOpen,
       maxHeight = _a.maxHeight,
-      menuPosition = _a.menuPosition,
       multiselect = _a.multiselect,
-      name = _a.name,
       onChange = _a.onChange,
       placeholder = _a.placeholder,
       value = _a.value,
       defaultValue = _a.defaultValue,
-      className = _a.className,
-      classNamePrefix = _a.classNamePrefix,
-      onBlur = _a.onBlur,
-      menuIsOpen = _a.menuIsOpen,
-      onMenuOpen = _a.onMenuOpen,
-      onMenuClose = _a.onMenuClose,
-      onInputChange = _a.onInputChange,
       components = _a.components,
       ariaLabel = _a["aria-label"],
       _a$windowThreshold = _a.windowThreshold,
       windowThreshold = _a$windowThreshold === void 0 ? 300 : _a$windowThreshold,
-      filterOption = _a.filterOption,
-      closeMenuOnSelect = _a.closeMenuOnSelect,
-      props = __rest(_a, ["autocomplete", "options", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "error", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "windowThreshold", "filterOption", "closeMenuOnSelect"]);
+      props = __rest(_a, ["autocomplete", "options", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "error", "id", "initialIsOpen", "maxHeight", "multiselect", "onChange", "placeholder", "value", "defaultValue", "components", "aria-label", "windowThreshold"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -23352,14 +23333,9 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     labelText: labelText,
     requirementText: requirementText,
     helpText: helpText
-  }, /*#__PURE__*/React__default.createElement(WindowedSelect, {
+  }, /*#__PURE__*/React__default.createElement(WindowedSelect, Object.assign({
     ref: ref,
-    className: className,
-    classNamePrefix: classNamePrefix,
-    noOptionsMessage: noOptionsMessage,
     placeholder: placeholder || t("select ..."),
-    options: options,
-    labelText: labelText,
     windowThreshold: windowThreshold,
     styles: customStyles({
       theme: themeContext,
@@ -23373,19 +23349,12 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-invalid": error,
     defaultMenuIsOpen: initialIsOpen,
     inputId: id,
-    onBlur: onBlur,
     onChange: onChange && function (option) {
       return onChange(extractValue(option, multiselect));
     },
     defaultValue: getReactSelectValue(options, defaultValue),
     value: getReactSelectValue(options, value),
-    name: name,
     isMulti: multiselect,
-    menuIsOpen: menuIsOpen,
-    onMenuOpen: onMenuOpen,
-    onMenuClose: onMenuClose,
-    menuPosition: menuPosition,
-    onInputChange: onInputChange,
     theme: themeContext,
     components: Object.assign({
       Option: SelectOption,
@@ -23398,9 +23367,9 @@ var ReactSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       Input: SelectInput
     }, components),
     "aria-label": ariaLabel,
-    filterOption: filterOption,
-    closeMenuOnSelect: closeMenuOnSelect
-  }), /*#__PURE__*/React__default.createElement(InlineValidation, {
+    options: options,
+    labelText: labelText
+  }, props)), /*#__PURE__*/React__default.createElement(InlineValidation, {
     mt: "x1",
     errorMessage: errorMessage,
     errorList: errorList
@@ -43545,14 +43514,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",
@@ -43599,7 +43568,7 @@ var MobileMenuTrigger = styled.button.withConfig({
     color: theme.colors[color] || color,
     background: "none",
     border: "none",
-    padding: subPx(theme.space.x1) + " " + theme.space.x1,
+    padding: theme.space.x1,
     marginLeft: theme.space.x1,
     borderRadius: theme.radii.medium,
     transition: ".2s",
@@ -43658,16 +43627,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 () {
@@ -43679,6 +43647,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,
@@ -43686,12 +43655,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
@@ -43699,17 +43663,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,
+    ariaExpanded: ariaExpanded,
+    isOpen: isOpen
+  }) : /*#__PURE__*/React__default.createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, {
     onClick: toggleMenu,
-    "aria-expanded": isOpen ? true : null
+    "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 */
@@ -43729,14 +43698,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;
@@ -43744,13 +43710,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,
@@ -43767,7 +43727,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,
@@ -43783,19 +43743,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/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/Select/Select.story.d.ts

@@ -107,3 +107,4 @@ export declare const UsingRefToControlFocus: {
         name: string;
     };
 };
+export declare const WithCustomProps: () => JSX.Element;

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.5.0",
+  "version": "8.1.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {