@nulogy/components 6.7.2 → 6.7.5

package/dist/main.module.js

@@ -22552,12 +22552,12 @@ ResizeDetector.defaultProps = {
   nodeType: 'div'
 };
 
-var _excluded$5 = ["name", "onSubmit"];
+var _excluded = ["name", "onSubmit"];
 
 var BaseNavBarSearch = function BaseNavBarSearch(_ref) {
   var name = _ref.name,
       onSubmit = _ref.onSubmit,
-      props = _objectWithoutPropertiesLoose$2(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose$2(_ref, _excluded);
 
   var handleOnSubmit = function handleOnSubmit(e) {
     e.preventDefault();
@@ -22731,11 +22731,11 @@ var StatelessNavBarDropdownMenu$1 = /*#__PURE__*/function (_React$Component) {
         closeMenu: closeMenu,
         openMenu: openMenu,
         isOpen: isOpen
-      }), Object.assign({
+      }), Object.assign(Object.assign({
         "aria-haspopup": true,
         "aria-expanded": isOpen,
         type: "button"
-      }, _this4.menuTriggerEventHandlers(), {
+      }, _this4.menuTriggerEventHandlers()), {
         ref: function ref(node) {
           _ref2(node);
 
@@ -22746,7 +22746,7 @@ var StatelessNavBarDropdownMenu$1 = /*#__PURE__*/function (_React$Component) {
       placement: placement,
       modifiers: modifiers
     }, function (popperProps) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenuContainer, _extends$4({}, popperProps, {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenuContainer, Object.assign({}, popperProps, {
         placement: placement,
         showArrow: showArrow
       }, _this4.menuEventHandlers(), {
@@ -22762,7 +22762,7 @@ var StatelessNavBarDropdownMenu$1 = /*#__PURE__*/function (_React$Component) {
       }, dropdownMenuContainerEventHandlers({
         openMenu: openMenu,
         closeMenu: closeMenu
-      })), /*#__PURE__*/React__default.createElement(PopperArrow, _extends$4({}, popperProps.arrowProps, {
+      })), /*#__PURE__*/React__default.createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, {
         placement: placement,
         ref: popperProps.arrowProps.ref,
         backgroundColor: "whiteGrey",
@@ -22816,7 +22816,7 @@ NavBarDropdownMenu$1.defaultProps = {
 
 var SubMenuLink$1 = styled(DropdownLink).withConfig({
   displayName: "renderSubMenuItems__SubMenuLink",
-  componentId: "sc-17xzkuc-0"
+  componentId: "sc-10nvflk-0"
 })(fontSize, lineHeight, space);
 
 var getSharedStyles$5 = function getSharedStyles() {
@@ -22834,11 +22834,11 @@ var getSharedStyles$5 = function getSharedStyles() {
 
 var ApplySubMenuLinkStyles$1 = styled.li.withConfig({
   displayName: "renderSubMenuItems__ApplySubMenuLinkStyles",
-  componentId: "sc-17xzkuc-1"
+  componentId: "sc-10nvflk-1"
 })({
   color: Theme.colors.darkBlue,
   verticalAlign: "middle",
-  "> *": Object.assign({}, getSharedStyles$5(), {
+  "> *": Object.assign(Object.assign({}, getSharedStyles$5()), {
     transition: ".2s",
     textDecoration: "none",
     "&:hover, &:focus": {
@@ -22855,17 +22855,19 @@ var ApplySubMenuLinkStyles$1 = styled.li.withConfig({
 });
 var SubMenuText$1 = styled.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.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
     name: subMenuItem.name,
@@ -22874,11 +22876,13 @@ var renderSubMenuTrigger$1 = function renderSubMenuTrigger(subMenuItem, onItemCl
 };
 
 var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuLink$1, {
     fontSize: "small",
     lineHeight: "smallTextBase",
@@ -22891,15 +22895,19 @@ var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
 };
 
 var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles$1, {
-    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.createElement(SubMenuText$1, {
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, subMenuItem.name);
 };
 
@@ -22921,11 +22929,9 @@ var renderSubMenuItems$1 = function renderSubMenuItems(subMenuItems, onItemClick
   });
 };
 
-var _excluded$4 = ["name", "isOpen"],
-    _excluded2$2 = ["menuData", "name", "onItemClick"];
 var StyledButton$3 = styled.button.withConfig({
   displayName: "SubMenuTrigger__StyledButton",
-  componentId: "sc-1pygu12-0"
+  componentId: "sc-1jh6iro-0"
 })(function (_ref) {
   var isOpen = _ref.isOpen;
   return {
@@ -22956,15 +22962,15 @@ var StyledButton$3 = styled.button.withConfig({
     cursor: "pointer"
   };
 });
-var SubMenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
-  var name = _ref2.name,
-      isOpen = _ref2.isOpen,
-      props = _objectWithoutPropertiesLoose$2(_ref2, _excluded$4);
+var SubMenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var name = _a.name,
+      isOpen = _a.isOpen,
+      props = __rest(_a, ["name", "isOpen"]);
 
-  return /*#__PURE__*/React__default.createElement(StyledButton$3, _extends$4({
+  return /*#__PURE__*/React__default.createElement(StyledButton$3, Object.assign({
     isOpen: isOpen,
     ref: ref
-  }, props), name, /*#__PURE__*/React__default.createElement(Icon, {
+  }, props), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, name, /*#__PURE__*/React__default.createElement(Icon, {
     style: {
       position: "absolute",
       top: "7px"
@@ -22973,7 +22979,7 @@ var SubMenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_r
     color: "darkBlue",
     size: "20px",
     p: "2px"
-  }));
+  })));
 });
 SubMenuTriggerButton$1.propTypes = {
   name: PropTypes.string.isRequired,
@@ -22987,26 +22993,26 @@ var SubMenuTrigger$1 = function SubMenuTrigger(props) {
   var menuData = props.menuData,
       name = props.name,
       onItemClick = props.onItemClick,
-      otherProps = _objectWithoutPropertiesLoose$2(props, _excluded2$2);
+      otherProps = __rest(props, ["menuData", "name", "onItemClick"]);
 
-  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu$1, _extends$4({
+  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu$1, Object.assign({
     placement: "right-start",
     modifiers: null,
     showArrow: false,
     triggerTogglesMenuState: false
   }, otherProps, {
-    dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref3) {
-      var openMenu = _ref3.openMenu,
-          closeMenu = _ref3.closeMenu;
+    dropdownMenuContainerEventHandlers: function dropdownMenuContainerEventHandlers(_ref2) {
+      var openMenu = _ref2.openMenu,
+          closeMenu = _ref2.closeMenu;
       return {
         onMouseEnter: openMenu,
         onMouseLeave: closeMenu
       };
     },
-    trigger: function trigger(_ref4) {
-      var closeMenu = _ref4.closeMenu,
-          openMenu = _ref4.openMenu,
-          isOpen = _ref4.isOpen;
+    trigger: function trigger(_ref3) {
+      var closeMenu = _ref3.closeMenu,
+          openMenu = _ref3.openMenu,
+          isOpen = _ref3.isOpen;
       return /*#__PURE__*/React__default.createElement(SubMenuTriggerButton$1, {
         isOpen: isOpen,
         name: name,
@@ -23033,11 +23039,9 @@ SubMenuTrigger$1.defaultProps = {
   onItemClick: null
 };
 
-var _excluded$3 = ["name", "color", "hoverColor", "hoverBackground"],
-    _excluded2$1 = ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"];
 var StyledButton$2 = styled.button.withConfig({
   displayName: "MenuTrigger__StyledButton",
-  componentId: "sm3xx0-0"
+  componentId: "ooz0w0-0"
 })(function (_ref) {
   var color = _ref.color,
       hoverColor = _ref.hoverColor,
@@ -23079,14 +23083,14 @@ StyledButton$2.defaultProps = {
   hoverColor: Theme.colors.lightBlue,
   hoverBackground: Theme.colors.black
 };
-var MenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
-  var name = _ref2.name,
-      color = _ref2.color,
-      hoverColor = _ref2.hoverColor,
-      hoverBackground = _ref2.hoverBackground,
-      props = _objectWithoutPropertiesLoose$2(_ref2, _excluded$3);
+var MenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
+  var name = _a.name,
+      color = _a.color,
+      hoverColor = _a.hoverColor,
+      hoverBackground = _a.hoverBackground,
+      props = __rest(_a, ["name", "color", "hoverColor", "hoverBackground"]);
 
-  return /*#__PURE__*/React__default.createElement(StyledButton$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(StyledButton$2, Object.assign({
     color: color,
     hoverColor: hoverColor,
     hoverBackground: hoverBackground,
@@ -23104,7 +23108,7 @@ var MenuTriggerButton$1 = /*#__PURE__*/React__default.forwardRef(function (_ref2
   }));
 });
 MenuTriggerButton$1.propTypes = {
-  name: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired,
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.string
@@ -23122,7 +23126,7 @@ var MenuTrigger$1 = function MenuTrigger(props) {
       hoverColor = props.hoverColor,
       hoverBackground = props.hoverBackground,
       ariaLabel = props["aria-label"],
-      otherProps = _objectWithoutPropertiesLoose$2(props, _excluded2$1);
+      otherProps = __rest(props, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label"]);
 
   var dropdownMinWidth = "auto";
 
@@ -23132,7 +23136,7 @@ var MenuTrigger$1 = function MenuTrigger(props) {
     return popperData;
   };
 
-  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu$1, _extends$4({}, otherProps, {
+  return /*#__PURE__*/React__default.createElement(NavBarDropdownMenu$1, Object.assign({}, otherProps, {
     placement: "bottom-start",
     modifiers: {
       flip: {
@@ -23157,8 +23161,8 @@ var MenuTrigger$1 = function MenuTrigger(props) {
         "aria-label": ariaLabel
       });
     }
-  }), function (_ref3) {
-    var closeMenu = _ref3.closeMenu;
+  }), function (_ref2) {
+    var closeMenu = _ref2.closeMenu;
     return /*#__PURE__*/React__default.createElement("ul", {
       style: {
         listStyle: "none",
@@ -23189,8 +23193,6 @@ MenuTrigger$1.defaultProps = {
   hoverBackground: Theme.colors.black
 };
 
-var _excluded$2 = ["menuData", "themeColorObject"];
-
 var getSharedStyles$4 = function getSharedStyles(color) {
   return {
     display: "block",
@@ -23208,13 +23210,13 @@ var getSharedStyles$4 = function getSharedStyles(color) {
 
 var ApplyMenuLinkStyles$3 = styled.div.withConfig({
   displayName: "DesktopMenu__ApplyMenuLinkStyles",
-  componentId: "e4dzdq-0"
+  componentId: "sc-1mpxh2o-0"
 })(function (_ref) {
   var color = _ref.color,
       hoverColor = _ref.hoverColor,
       hoverBackground = _ref.hoverBackground;
   return {
-    "*": Object.assign({}, getSharedStyles$4(color), {
+    "*": Object.assign(Object.assign({}, getSharedStyles$4(color)), {
       transition: ".2s",
       "&:hover, &:focus": {
         outline: "none",
@@ -23243,12 +23245,12 @@ ApplyMenuLinkStyles$3.defaultProps = {
 };
 var MenuLink$3 = styled.a.withConfig({
   displayName: "DesktopMenu__MenuLink",
-  componentId: "e4dzdq-1"
+  componentId: "sc-1mpxh2o-1"
 })(function (_ref2) {
   var color = _ref2.color,
       hoverColor = _ref2.hoverColor,
       hoverBackground = _ref2.hoverBackground;
-  return Object.assign({}, getSharedStyles$4(color), {
+  return Object.assign(Object.assign({}, getSharedStyles$4(color)), {
     transition: ".2s",
     "&:hover, &:focus": {
       outline: "none",
@@ -23266,14 +23268,14 @@ var MenuLink$3 = styled.a.withConfig({
 });
 var MenuText$3 = styled.div.withConfig({
   displayName: "DesktopMenu__MenuText",
-  componentId: "e4dzdq-2"
+  componentId: "sc-1mpxh2o-2"
 })(function (_ref3) {
   var textColor = _ref3.textColor;
   return Object.assign({}, getSharedStyles$4(textColor));
 });
 var Nav$3 = styled.nav.withConfig({
   displayName: "DesktopMenu__Nav",
-  componentId: "e4dzdq-3"
+  componentId: "sc-1mpxh2o-3"
 })({
   display: "flex"
 });
@@ -23281,7 +23283,7 @@ var Nav$3 = styled.nav.withConfig({
 var renderMenuTrigger$1 = function renderMenuTrigger(menuItem, themeColorObject) {
   return /*#__PURE__*/React__default.createElement("div", {
     key: menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuTrigger$1, _extends$4({
+  }, /*#__PURE__*/React__default.createElement(MenuTrigger$1, Object.assign({
     name: menuItem.name,
     "aria-label": menuItem.ariaLabel,
     menuData: menuItem.items
@@ -23291,7 +23293,7 @@ var renderMenuTrigger$1 = function renderMenuTrigger(menuItem, themeColorObject)
 var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
   return /*#__PURE__*/React__default.createElement("div", {
     key: menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink$3, _extends$4({
+  }, /*#__PURE__*/React__default.createElement(MenuLink$3, Object.assign({
     href: menuItem.href,
     as: menuItem.as,
     to: menuItem.to
@@ -23299,13 +23301,13 @@ var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
 };
 
 var renderCustom$4 = function renderCustom(menuItem, themeColorObject) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$3, _extends$4({}, themeColorObject, {
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$3, Object.assign({}, themeColorObject, {
     key: menuItem.name
   }), menuItem.render());
 };
 
 var renderText$4 = function renderText(menuItem, themeColorObject) {
-  return /*#__PURE__*/React__default.createElement(MenuText$3, _extends$4({
+  return /*#__PURE__*/React__default.createElement(MenuText$3, Object.assign({
     key: menuItem.name
   }, themeColorObject), menuItem.name);
 };
@@ -23326,12 +23328,12 @@ var renderMenuItem$1 = function renderMenuItem(menuItem, themeColorObject) {
   return getRenderFunction$4(menuItem)(menuItem, themeColorObject);
 };
 
-var BaseDesktopMenu$1 = function BaseDesktopMenu(_ref4) {
-  var menuData = _ref4.menuData,
-      themeColorObject = _ref4.themeColorObject,
-      props = _objectWithoutPropertiesLoose$2(_ref4, _excluded$2);
+var BaseDesktopMenu$1 = function BaseDesktopMenu(_a) {
+  var menuData = _a.menuData,
+      themeColorObject = _a.themeColorObject,
+      props = __rest(_a, ["menuData", "themeColorObject"]);
 
-  return /*#__PURE__*/React__default.createElement(Nav$3, props, menuData.map(function (menuItem) {
+  return /*#__PURE__*/React__default.createElement(Nav$3, Object.assign({}, props), menuData.map(function (menuItem) {
     return renderMenuItem$1(menuItem, themeColorObject);
   }));
 };
@@ -23346,19 +23348,49 @@ BaseDesktopMenu$1.defaultProps = {
 };
 var DesktopMenu$1 = styled(BaseDesktopMenu$1).withConfig({
   displayName: "DesktopMenu",
-  componentId: "e4dzdq-4"
+  componentId: "sc-1mpxh2o-4"
 })({
-  div: {
+  "> div": {
     ":not(:last-of-type)": {
       marginRight: Theme.space.x1
     }
   }
 });
 
-var _excluded$1 = ["menuData", "closeMenu", "subtext", "includeSubtext", "themeColorObject"];
+var isValidMenuItem = function validArrayItem(arr, idx, componentName, location, propFullName) {
+  var obj = arr[idx];
+
+  if (typeof obj !== "object") {
+    throw new Error("Invalid " + propFullName + " of type `" + typeof obj + "` supplied to `" + componentName + "`, expected `object`");
+  }
+
+  PropTypes.checkPropTypes({
+    name: PropTypes.node.isRequired,
+    ariaLabel: PropTypes.string,
+    href: PropTypes.string,
+    items: PropTypes.arrayOf(isValidMenuItem),
+    render: PropTypes.func
+  }, obj, propFullName, componentName);
+  var numberOfDefiningKeys = 0;
+  var definingKeys = ["href", "items", "render"];
+  var keys = Object.keys(obj);
+
+  for (var i = 0; i < keys.length; i += 1) {
+    if (definingKeys.includes(keys[i])) {
+      numberOfDefiningKeys += 1;
+    }
+  }
+
+  if (numberOfDefiningKeys > 1) {
+    return new Error("Invalid set of keys for Menu Item with name `" + obj.name + "` supplied to `" + componentName + "`. Include a name key and optionally ONE of " + definingKeys);
+  }
+
+  return null;
+};
+
 var BrandingWrap$1 = styled.div.withConfig({
   displayName: "MobileMenu__BrandingWrap",
-  componentId: "sc-1wo8gfl-0"
+  componentId: "vqy2lk-0"
 })({
   marginTop: "-" + Theme.space.x1,
   marginBottom: Theme.space.x3,
@@ -23390,7 +23422,7 @@ var getSharedStyles$3 = function getSharedStyles(_ref) {
 
 var ApplyMenuLinkStyles$2 = styled.li.withConfig({
   displayName: "MobileMenu__ApplyMenuLinkStyles",
-  componentId: "sc-1wo8gfl-1"
+  componentId: "vqy2lk-1"
 })(function (_ref2) {
   var color = _ref2.color,
       hoverColor = _ref2.hoverColor,
@@ -23398,10 +23430,10 @@ var ApplyMenuLinkStyles$2 = styled.li.withConfig({
       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",
@@ -23431,16 +23463,16 @@ ApplyMenuLinkStyles$2.defaultProps = {
 };
 var MenuLink$2 = styled.a.withConfig({
   displayName: "MobileMenu__MenuLink",
-  componentId: "sc-1wo8gfl-2"
+  componentId: "vqy2lk-2"
 })(function (_ref3) {
   var color = _ref3.color,
       hoverColor = _ref3.hoverColor,
       hoverBackground = _ref3.hoverBackground,
       layer = _ref3.layer;
-  return Object.assign({}, getSharedStyles$3({
+  return Object.assign(Object.assign({}, getSharedStyles$3({
     color: color,
     layer: layer
-  }), {
+  })), {
     width: "100%",
     borderRadius: "0",
     transition: ".2s",
@@ -23460,7 +23492,7 @@ var MenuLink$2 = styled.a.withConfig({
 });
 var MenuText$2 = styled.li.withConfig({
   displayName: "MobileMenu__MenuText",
-  componentId: "sc-1wo8gfl-3"
+  componentId: "vqy2lk-3"
 })(function (_ref4) {
   var textColor = _ref4.textColor,
       layer = _ref4.layer;
@@ -23471,7 +23503,7 @@ var MenuText$2 = styled.li.withConfig({
 });
 var SubMenuItemsList$1 = styled.ul.withConfig({
   displayName: "MobileMenu__SubMenuItemsList",
-  componentId: "sc-1wo8gfl-4"
+  componentId: "vqy2lk-4"
 })({
   listStyle: "none",
   paddingLeft: "0",
@@ -23485,7 +23517,7 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
       display: "block",
       marginBottom: Theme.space.x1
     }
-  }, /*#__PURE__*/React__default.createElement(MenuLink$2, _extends$4({
+  }, /*#__PURE__*/React__default.createElement(MenuLink$2, Object.assign({
     layer: layer
   }, themeColorObject, {
     onClick: linkOnClick,
@@ -23496,7 +23528,7 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
 };
 
 var renderCustom$3 = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$2, Object.assign({
     key: menuItem.name
   }, themeColorObject, {
     layer: layer,
@@ -23519,7 +23551,7 @@ var renderSubMenu$1 = function renderSubMenu(menuItem, linkOnClick, themeColorOb
 };
 
 var renderText$3 = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
-  return /*#__PURE__*/React__default.createElement(MenuText$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(MenuText$2, Object.assign({
     key: menuItem.name,
     layer: layer
   }, themeColorObject), menuItem.name);
@@ -23590,7 +23622,7 @@ SubMenu$1.defaultProps = {
 };
 var Menu$2 = styled.ul.withConfig({
   displayName: "MobileMenu__Menu",
-  componentId: "sc-1wo8gfl-5"
+  componentId: "vqy2lk-5"
 })(function () {
   var _ref6;
 
@@ -23606,7 +23638,7 @@ var Menu$2 = styled.ul.withConfig({
 });
 var Nav$2 = styled.nav.withConfig({
   displayName: "MobileMenu__Nav",
-  componentId: "sc-1wo8gfl-6"
+  componentId: "vqy2lk-6"
 })(function (_ref7) {
   var backgroundColor = _ref7.backgroundColor;
   return {
@@ -23616,15 +23648,15 @@ var Nav$2 = styled.nav.withConfig({
   minHeight: "calc(100vh - 72px)"
 });
 
-var BaseMobileMenu$1 = function BaseMobileMenu(_ref8) {
-  var menuData = _ref8.menuData,
-      closeMenu = _ref8.closeMenu,
-      subtext = _ref8.subtext,
-      includeSubtext = _ref8.includeSubtext,
-      themeColorObject = _ref8.themeColorObject,
-      props = _objectWithoutPropertiesLoose$2(_ref8, _excluded$1);
+var BaseMobileMenu$1 = function BaseMobileMenu(_a) {
+  var menuData = _a.menuData,
+      closeMenu = _a.closeMenu,
+      subtext = _a.subtext,
+      includeSubtext = _a.includeSubtext,
+      themeColorObject = _a.themeColorObject,
+      props = __rest(_a, ["menuData", "closeMenu", "subtext", "includeSubtext", "themeColorObject"]);
 
-  return /*#__PURE__*/React__default.createElement(Nav$2, _extends$4({
+  return /*#__PURE__*/React__default.createElement(Nav$2, Object.assign({
     backgroundColor: themeColorObject && themeColorObject.background
   }, props), subtext && includeSubtext && /*#__PURE__*/React__default.createElement(BrandingWrap$1, null, /*#__PURE__*/React__default.createElement(BrandingText, {
     logoColor: themeColorObject && themeColorObject.logoColor
@@ -23650,44 +23682,115 @@ BaseMobileMenu$1.defaultProps = {
 };
 var MobileMenu$1 = styled(BaseMobileMenu$1).withConfig({
   displayName: "MobileMenu",
-  componentId: "sc-1wo8gfl-7"
+  componentId: "vqy2lk-7"
 })(display);
 
-var isValidMenuItem = function validArrayItem(arr, idx, componentName, location, propFullName) {
-  var obj = arr[idx];
+var SmallNavBarNoState$1 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose$2(SmallNavBarNoState, _React$Component);
 
-  if (typeof obj !== "object") {
-    throw new Error("Invalid " + propFullName + " of type `" + typeof obj + "` supplied to `" + componentName + "`, expected `object`");
+  function SmallNavBarNoState(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.navRef = /*#__PURE__*/React__default.createRef();
+    return _this;
   }
 
-  PropTypes.checkPropTypes({
-    name: PropTypes.node.isRequired,
-    ariaLabel: PropTypes.string,
-    href: PropTypes.string,
-    items: PropTypes.arrayOf(isValidMenuItem),
-    render: PropTypes.func
-  }, obj, propFullName, componentName);
-  var numberOfDefiningKeys = 0;
-  var definingKeys = ["href", "items", "render"];
-  var keys = Object.keys(obj);
+  var _proto = SmallNavBarNoState.prototype;
 
-  for (var i = 0; i < keys.length; i += 1) {
-    if (definingKeys.includes(keys[i])) {
-      numberOfDefiningKeys += 1;
-    }
-  }
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.menuState.isOpen && !prevProps.menuState.isOpen) this.navRef.current.scrollTop = 0;
+  };
 
-  if (numberOfDefiningKeys > 1) {
-    return new Error("Invalid set of keys for Menu Item with name `" + obj.name + "` supplied to `" + componentName + "`. Include a name key and optionally ONE of " + definingKeys);
-  }
+  _proto.isSmallScreen = function isSmallScreen() {
+    var _this$props = this.props,
+        breakpointLower = _this$props.breakpointLower,
+        width = _this$props.width;
+    return width < pixelDigitsFrom$1(breakpointLower);
+  };
 
-  return null;
+  _proto.render = function render() {
+    var _a = this.props,
+        menuData = _a.menuData,
+        _a$menuState = _a.menuState,
+        isOpen = _a$menuState.isOpen,
+        toggleMenu = _a$menuState.toggleMenu,
+        closeMenu = _a$menuState.closeMenu,
+        subtext = _a.subtext,
+        brandingLinkHref = _a.brandingLinkHref,
+        brandingLinkTo = _a.brandingLinkTo,
+        themeColor = _a.themeColor,
+        props = __rest(_a, ["menuData", "menuState", "subtext", "brandingLinkHref", "brandingLinkTo", "themeColor"]);
+
+    return /*#__PURE__*/React__default.createElement(SmallHeader$1, Object.assign({
+      ref: this.navRef,
+      isOpen: isOpen
+    }, props), /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
+      backgroundColor: getThemeColor(themeColor).background
+    }, /*#__PURE__*/React__default.createElement(BrandingLink, {
+      "aria-label": "Nulogy logo",
+      display: "block",
+      height: subtext && !this.isSmallScreen() ? "56px" : "40px",
+      my: subtext && !this.isSmallScreen() ? "-8px" : null,
+      underline: false,
+      href: brandingLinkHref,
+      to: brandingLinkTo
+    }, /*#__PURE__*/React__default.createElement(Branding, {
+      logoColor: getThemeColor(themeColor).logoColor,
+      logoType: this.isSmallScreen() ? "lettermark" : "wordmark",
+      subtext: this.isSmallScreen() ? null : subtext
+    })), /*#__PURE__*/React__default.createElement(Flex, {
+      justifyContent: "flex-end",
+      style: {
+        flexGrow: 1,
+        margin: "0 0 0 " + Theme.space.x3
+      }
+    }, menuData.search && /*#__PURE__*/React__default.createElement(Flex, {
+      maxWidth: "18em",
+      alignItems: "center",
+      px: "0"
+    }, /*#__PURE__*/React__default.createElement(NavBarSearch, Object.assign({}, menuData.search))), (menuData.primaryMenu || menuData.secondaryMenu) && /*#__PURE__*/React__default.createElement(MobileMenuTrigger$1, Object.assign({}, getThemeColor(themeColor), {
+      onClick: toggleMenu,
+      "aria-expanded": isOpen ? true : null
+    }), /*#__PURE__*/React__default.createElement(MenuIcon$1, {
+      isOpen: isOpen
+    })))), isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default.createElement(MobileMenu$1, {
+      themeColorObject: getThemeColor(themeColor),
+      subtext: subtext,
+      includeSubtext: this.isSmallScreen(),
+      menuData: menuData,
+      closeMenu: closeMenu
+    })));
+  };
+
+  return SmallNavBarNoState;
+}(React__default.Component);
+
+SmallNavBarNoState$1.propTypes = {
+  menuState: PropTypes.shape({
+    isOpen: PropTypes.bool,
+    toggleMenu: PropTypes.func,
+    closeMenu: PropTypes.func
+  }).isRequired,
+  menuData: PropTypes.shape(MenuDataPropTypes),
+  subtext: PropTypes.string,
+  brandingLinkHref: PropTypes.string,
+  brandingLinkTo: PropTypes.string,
+  breakpointLower: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.number,
+  themeColor: PropTypes.oneOf(["blue", "white"])
+};
+SmallNavBarNoState$1.defaultProps = {
+  menuData: null,
+  subtext: null,
+  brandingLinkHref: "/",
+  brandingLinkTo: undefined,
+  breakpointLower: Theme.breakpoints.small,
+  width: undefined,
+  themeColor: undefined
 };
+var SmallNavBar$1 = withMenuState(SmallNavBarNoState$1);
 
-var _excluded = ["to", "href", "children"],
-    _excluded2 = ["menuData", "themeColor", "subtext", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent"],
-    _excluded3 = ["menuData", "menuState", "subtext", "brandingLinkHref", "brandingLinkTo", "themeColor"],
-    _excluded4 = ["width", "defaultOpen", "breakpointUpper"];
 var themeColors = {
   blue: {
     color: Theme.colors.white,
@@ -23706,47 +23809,45 @@ var themeColors = {
     logoColor: "blue"
   }
 };
-
 var getThemeColor = function getThemeColor(themeColor) {
   return themeColors[themeColor] || themeColors.blue;
 };
-
 var NavBarBackground$1 = styled(Flex).withConfig({
   displayName: "NavBar__NavBarBackground",
-  componentId: "iayrjp-0"
+  componentId: "uw8kj5-0"
 })(function (_ref) {
-  var backgroundColor = _ref.backgroundColor;
+  var backgroundColor = _ref.backgroundColor,
+      theme = _ref.theme;
   return {
     background: backgroundColor,
-    padding: Theme.space.x2 + " " + Theme.space.x3
+    padding: theme.space.x2 + " " + theme.space.x3
   };
 });
+var BrandingLink = function BrandingLink(_a) {
+  var to = _a.to,
+      href = _a.href,
+      children = _a.children,
+      props = __rest(_a, ["to", "href", "children"]);
 
-var BrandingLink = function BrandingLink(_ref2) {
-  var to = _ref2.to,
-      href = _ref2.href,
-      children = _ref2.children,
-      props = _objectWithoutPropertiesLoose$2(_ref2, _excluded);
-
-  return /*#__PURE__*/React__default.createElement(Link, _extends$4({
+  return /*#__PURE__*/React__default.createElement(Link, Object.assign({
     href: href,
     to: to
   }, props), children);
 };
 
-var MediumNavBar$1 = function MediumNavBar(_ref3) {
-  var menuData = _ref3.menuData,
-      themeColor = _ref3.themeColor,
-      subtext = _ref3.subtext,
-      brandingLinkHref = _ref3.brandingLinkHref,
-      brandingLinkTo = _ref3.brandingLinkTo,
-      brandingLinkComponent = _ref3.brandingLinkComponent,
-      props = _objectWithoutPropertiesLoose$2(_ref3, _excluded2);
+var MediumNavBar$1 = function MediumNavBar(_a) {
+  var menuData = _a.menuData,
+      themeColor = _a.themeColor,
+      subtext = _a.subtext,
+      brandingLinkHref = _a.brandingLinkHref,
+      brandingLinkTo = _a.brandingLinkTo,
+      brandingLinkComponent = _a.brandingLinkComponent,
+      props = __rest(_a, ["menuData", "themeColor", "subtext", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
-  return /*#__PURE__*/React__default.createElement("header", props, /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
+  return /*#__PURE__*/React__default.createElement("header", Object.assign({}, props), /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
     backgroundColor: getThemeColor(themeColor).background
   }, /*#__PURE__*/React__default.createElement(BrandingLink, {
     "aria-label": "Nulogy logo",
@@ -23764,7 +23865,7 @@ var MediumNavBar$1 = function MediumNavBar(_ref3) {
     justifyContent: "space-between",
     alignContent: "flex-end",
     style: {
-      flexGrow: "1",
+      flexGrow: 1,
       margin: "0 0 0 " + Theme.space.x3
     }
   }, menuData.primaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu$1, {
@@ -23781,7 +23882,7 @@ var MediumNavBar$1 = function MediumNavBar(_ref3) {
   }, menuData.search && /*#__PURE__*/React__default.createElement(Box, {
     maxWidth: "18em",
     mr: menuData.secondaryMenu ? Theme.space.x1 : Theme.space.none
-  }, /*#__PURE__*/React__default.createElement(NavBarSearch, menuData.search)), menuData.secondaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu$1, {
+  }, /*#__PURE__*/React__default.createElement(NavBarSearch, Object.assign({}, menuData.search))), menuData.secondaryMenu && /*#__PURE__*/React__default.createElement(DesktopMenu$1, {
     themeColorObject: getThemeColor(themeColor),
     "aria-label": t("secondary navigation"),
     menuData: menuData.secondaryMenu
@@ -23811,11 +23912,11 @@ MediumNavBar$1.defaultProps = {
 };
 var MobileMenuTrigger$1 = styled.button.withConfig({
   displayName: "NavBar__MobileMenuTrigger",
-  componentId: "iayrjp-1"
-})(function (_ref4) {
-  var color = _ref4.color,
-      hoverColor = _ref4.hoverColor,
-      hoverBackground = _ref4.hoverBackground;
+  componentId: "uw8kj5-1"
+})(function (_ref2) {
+  var color = _ref2.color,
+      hoverColor = _ref2.hoverColor,
+      hoverBackground = _ref2.hoverBackground;
   return {
     color: themeGet("colors." + color, color)(color),
     background: "none",
@@ -23838,9 +23939,9 @@ var MobileMenuTrigger$1 = styled.button.withConfig({
 });
 var SmallHeader$1 = styled.header.withConfig({
   displayName: "NavBar__SmallHeader",
-  componentId: "iayrjp-2"
-})(function (_ref5) {
-  var isOpen = _ref5.isOpen;
+  componentId: "uw8kj5-2"
+})(function (_ref3) {
+  var isOpen = _ref3.isOpen;
   return isOpen ? {
     position: "fixed",
     width: "100%",
@@ -23853,13 +23954,11 @@ var SmallHeader$1 = styled.header.withConfig({
     bottom: "0"
   } : null;
 });
-
 var pixelDigitsFrom$1 = function pixelDigitsFrom(pixelString) {
   return parseInt(pixelString, 10);
 };
-
-var MenuIcon$1 = function MenuIcon(_ref6) {
-  var isOpen = _ref6.isOpen;
+var MenuIcon$1 = function MenuIcon(_ref4) {
+  var isOpen = _ref4.isOpen;
 
   var _useTranslation2 = useTranslation(),
       t = _useTranslation2.t;
@@ -23871,145 +23970,39 @@ var MenuIcon$1 = function MenuIcon(_ref6) {
     title: title
   });
 };
-
 MenuIcon$1.propTypes = {
   isOpen: PropTypes.bool
 };
 MenuIcon$1.defaultProps = {
   isOpen: false
 };
-/* eslint-disable react/destructuring-assignment */
-
-var SmallNavBarNoState$1 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose$2(SmallNavBarNoState, _React$Component);
-
-  function SmallNavBarNoState() {
-    var _this;
-
-    _this = _React$Component.call(this) || this;
-    _this.navRef = /*#__PURE__*/React__default.createRef();
-    return _this;
-  }
-
-  var _proto = SmallNavBarNoState.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (this.props.menuState.isOpen && !prevProps.menuState.isOpen) this.navRef.current.scrollTop = 0;
-  };
-
-  _proto.isSmallScreen = function isSmallScreen() {
-    var _this$props = this.props,
-        breakpointLower = _this$props.breakpointLower,
-        width = _this$props.width;
-    return width < pixelDigitsFrom$1(breakpointLower);
-  };
-
-  _proto.render = function render() {
-    var _this$props2 = this.props,
-        menuData = _this$props2.menuData,
-        _this$props2$menuStat = _this$props2.menuState,
-        isOpen = _this$props2$menuStat.isOpen,
-        toggleMenu = _this$props2$menuStat.toggleMenu,
-        closeMenu = _this$props2$menuStat.closeMenu,
-        subtext = _this$props2.subtext,
-        brandingLinkHref = _this$props2.brandingLinkHref,
-        brandingLinkTo = _this$props2.brandingLinkTo,
-        themeColor = _this$props2.themeColor,
-        props = _objectWithoutPropertiesLoose$2(_this$props2, _excluded3);
-
-    return /*#__PURE__*/React__default.createElement(SmallHeader$1, _extends$4({
-      ref: this.navRef,
-      isOpen: isOpen
-    }, props), /*#__PURE__*/React__default.createElement(NavBarBackground$1, {
-      backgroundColor: getThemeColor(themeColor).background
-    }, /*#__PURE__*/React__default.createElement(BrandingLink, {
-      "aria-label": "Nulogy logo",
-      display: "block",
-      height: subtext && !this.isSmallScreen() ? "56px" : "40px",
-      my: subtext && !this.isSmallScreen() ? "-8px" : null,
-      underline: false,
-      href: brandingLinkHref,
-      to: brandingLinkTo
-    }, /*#__PURE__*/React__default.createElement(Branding, {
-      logoColor: getThemeColor(themeColor).logoColor,
-      logoType: this.isSmallScreen() ? "lettermark" : "wordmark",
-      subtext: this.isSmallScreen() ? null : subtext
-    })), /*#__PURE__*/React__default.createElement(Flex, {
-      justifyContent: "flex-end",
-      style: {
-        flexGrow: "1",
-        margin: "0 0 0 " + Theme.space.x3
-      }
-    }, menuData.search && /*#__PURE__*/React__default.createElement(Flex, {
-      maxWidth: "18em",
-      alignItems: "center",
-      px: "0"
-    }, /*#__PURE__*/React__default.createElement(NavBarSearch, menuData.search)), (menuData.primaryMenu || menuData.secondaryMenu) && /*#__PURE__*/React__default.createElement(MobileMenuTrigger$1, _extends$4({}, getThemeColor(themeColor), {
-      onClick: toggleMenu,
-      "aria-expanded": isOpen ? true : null
-    }), /*#__PURE__*/React__default.createElement(MenuIcon$1, {
-      isOpen: isOpen
-    })))), isOpen && /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, /*#__PURE__*/React__default.createElement(MobileMenu$1, {
-      themeColorObject: getThemeColor(themeColor),
-      subtext: subtext,
-      includeSubtext: this.isSmallScreen(),
-      menuData: menuData,
-      closeMenu: closeMenu
-    })));
-  };
-
-  return SmallNavBarNoState;
-}(React__default.Component);
-/* eslint-enable react/destructuring-assignment */
-
-
-SmallNavBarNoState$1.propTypes = {
-  menuState: PropTypes.shape({
-    isOpen: PropTypes.bool,
-    toggleMenu: PropTypes.func,
-    closeMenu: PropTypes.func
-  }).isRequired,
-  menuData: PropTypes.shape(MenuDataPropTypes),
-  subtext: PropTypes.string,
-  brandingLinkHref: PropTypes.string,
-  brandingLinkTo: PropTypes.string,
-  breakpointLower: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.number,
-  themeColor: PropTypes.oneOf(["blue", "white"])
-};
-SmallNavBarNoState$1.defaultProps = {
-  menuData: null,
-  subtext: null,
-  brandingLinkHref: "/",
-  brandingLinkTo: undefined,
-  breakpointLower: Theme.breakpoints.small,
-  width: undefined,
-  themeColor: undefined
-};
-var SmallNavBar$1 = withMenuState(SmallNavBarNoState$1);
 
-var SelectNavBarBasedOnWidth$1 = function SelectNavBarBasedOnWidth(_ref7) {
-  var width = _ref7.width,
-      defaultOpen = _ref7.defaultOpen,
-      breakpointUpper = _ref7.breakpointUpper,
-      props = _objectWithoutPropertiesLoose$2(_ref7, _excluded4);
+var SelectNavBarBasedOnWidth$1 = function SelectNavBarBasedOnWidth(_a) {
+  var width = _a.width,
+      defaultOpen = _a.defaultOpen,
+      breakpointUpper = _a.breakpointUpper,
+      props = __rest(_a, ["width", "defaultOpen", "breakpointUpper"]);
 
   var currentWidth = width || typeof window !== "undefined" && window.innerWidth;
 
   if (currentWidth >= pixelDigitsFrom$1(breakpointUpper)) {
-    return /*#__PURE__*/React__default.createElement(MediumNavBar$1, props);
+    return /*#__PURE__*/React__default.createElement(MediumNavBar$1, Object.assign({}, props));
   } else {
-    return /*#__PURE__*/React__default.createElement(SmallNavBar$1, _extends$4({}, props, {
-      width: currentWidth,
-      defaultOpen: defaultOpen
-    }));
+    return (
+      /*#__PURE__*/
+      // @ts-ignore
+      React__default.createElement(SmallNavBar$1, Object.assign({}, props, {
+        width: currentWidth,
+        defaultOpen: defaultOpen
+      }))
+    );
   }
 };
 
 var NavBar$1 = function NavBar(props) {
   return /*#__PURE__*/React__default.createElement(ResizeDetector, {
     handleWidth: true
-  }, /*#__PURE__*/React__default.createElement(SelectNavBarBasedOnWidth$1, props));
+  }, /*#__PURE__*/React__default.createElement(SelectNavBarBasedOnWidth$1, Object.assign({}, props)));
 };
 
 NavBar$1.propTypes = {
@@ -24360,6 +24353,7 @@ var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
   var spaceProps = getSubset(props, propTypes.space);
   var restProps = omitSubset(props, propTypes.space);
   return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    position: "relative",
     className: className,
     py: "half",
     px: "0"
@@ -24489,6 +24483,7 @@ var Switch$1 = function Switch(_ref) {
       toggled = _ref.toggled,
       onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(AnimatedBox, {
+    position: "relative",
     display: "flex",
     alignItems: "center",
     justifyContent: toggled ? "flex-end" : "flex-start",
@@ -44592,11 +44587,13 @@ var SubMenuText = styled.li.withConfig({
 });
 
 var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
     name: subMenuItem.name,
@@ -44605,11 +44602,13 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
 };
 
 var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement("li", {
     style: {
       whiteSpace: "nowrap"
     },
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuLink, {
     fontSize: "small",
     lineHeight: "smallTextBase",
@@ -44622,15 +44621,19 @@ var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
 };
 
 var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles, {
-    key: subMenuItem.name,
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
     onClick: onItemClick
   }, subMenuItem.render());
 };
 
 var renderText$2 = function renderText(subMenuItem) {
+  var _a;
+
   return /*#__PURE__*/React__default.createElement(SubMenuText, {
-    key: subMenuItem.name
+    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, subMenuItem.name);
 };
 
@@ -45037,7 +45040,7 @@ var DesktopMenu = styled(BaseDesktopMenu).withConfig({
   displayName: "DesktopMenu",
   componentId: "sc-8mrjkc-4"
 })({
-  div: {
+  "> div": {
     ":not(:last-of-type)": {
       marginRight: "8px"
     }