@nulogy/components 14.8.0 → 14.8.2

package/dist/main.js

@@ -43750,6 +43750,8 @@
         flexDirection: "column",
         minHeight: "100vh"
       }, props), /*#__PURE__*/React__default["default"].createElement(Box, {
+        position: "sticky",
+        top: "0",
         zIndex: "navBar"
       }, environment && /*#__PURE__*/React__default["default"].createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default["default"].createElement(Flex, {
         flexDirection: "column",
@@ -43869,6 +43871,30 @@
       }, children));
     };
 
+    var FeatureFlagsContext = /*#__PURE__*/React.createContext(undefined);
+    function FeatureFlagsProvider(_ref) {
+      var featureFlags = _ref.featureFlags,
+        children = _ref.children;
+      return /*#__PURE__*/React__default["default"].createElement(FeatureFlagsContext.Provider, {
+        value: {
+          featureFlags: featureFlags
+        }
+      }, children);
+    }
+    function useFeatureFlags() {
+      var context = React.useContext(FeatureFlagsContext);
+      if (!context) {
+        throw new Error("useFeatureFlags must be used within the NDSProvider");
+      }
+      return context.featureFlags;
+    }
+
+    var NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
+    var NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
+    var NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY = "medium";
+    var NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
+    var MIN_DISTANCE_BETWEEN_MENUS_PX = 64;
+
     var sidebarWidths = {
       xs: "400px",
       s: "520px",
@@ -43933,8 +43959,7 @@
         triggerRef = _a.triggerRef,
         _a$duration = _a.duration,
         duration = _a$duration === void 0 ? 0.25 : _a$duration,
-        _a$top = _a.top,
-        top = _a$top === void 0 ? NAVBAR_HEIGHT : _a$top,
+        top = _a.top,
         _a$closeOnOutsideClic = _a.closeOnOutsideClick,
         closeOnOutsideClick = _a$closeOnOutsideClic === void 0 ? true : _a$closeOnOutsideClic,
         _a$overlay = _a.overlay,
@@ -43957,6 +43982,10 @@
       var sideBarRef = React.useRef(null);
       var contentRef = React.useRef(null);
       var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
+      var _useFeatureFlags = useFeatureFlags(),
+        navigationV3 = _useFeatureFlags.navigationV3;
+      var theme = styled.useTheme();
+      top || (top = navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT);
       useScrollLock({
         autoLock: overlay && disableScroll && isOpen
       });
@@ -44021,7 +44050,7 @@
         bg: "white",
         display: "flex",
         flexDirection: "column",
-        height: "calc(100% - " + NAVBAR_HEIGHT + ")",
+        height: "calc(100% - " + (navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT) + ")",
         borderLeftWidth: "1px",
         borderLeftStyle: "solid",
         borderLeftColor: "lightGrey",
@@ -45235,12 +45264,6 @@
     }, addStyledProps);
     VerticalDivider.displayName = "VerticalDivider";
 
-    var NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
-    var NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
-    var NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY = "medium";
-    var NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
-    var MIN_DISTANCE_BETWEEN_MENUS_PX = 64;
-
     var disableHoverEvents = {
       onPointerMove: function onPointerMove(e) {
         return e.preventDefault();
@@ -45476,7 +45499,7 @@
         }
       });
     }, addStyledProps);
-    var SubMenuContent$1 = styled__default["default"]($322c88a641701f3b$export$7c6e2c02157bb7d2).attrs(disableHoverEvents).withConfig({
+    var SubMenuContent = styled__default["default"]($322c88a641701f3b$export$7c6e2c02157bb7d2).attrs(disableHoverEvents).withConfig({
       displayName: "styled__SubMenuContent",
       componentId: "sc-11znyq0-2"
     })(function (_ref3) {
@@ -45508,7 +45531,7 @@
       position: "relative",
       width: "100%"
     }, addStyledProps);
-    var SubMenuList$1 = styled__default["default"]($322c88a641701f3b$export$54c2e3dc7acea9f5).withConfig({
+    var SubMenuList = styled__default["default"]($322c88a641701f3b$export$54c2e3dc7acea9f5).withConfig({
       displayName: "styled__SubMenuList",
       componentId: "sc-11znyq0-4"
     })({
@@ -45567,12 +45590,12 @@
         asChild: true
       }, item.element ? (/*#__PURE__*/React__default["default"].cloneElement(item.element, Object.assign(Object.assign({}, item.props), {
         children: content
-      }))) : (/*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, item.props), content)))) : (/*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SubMenuItemButton, Object.assign({}, item.props), content), hasSubMenu && (/*#__PURE__*/React__default["default"].createElement(SubMenuContent$1, {
+      }))) : (/*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, item.props), content)))) : (/*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SubMenuItemButton, Object.assign({}, item.props), content), hasSubMenu && (/*#__PURE__*/React__default["default"].createElement(SubMenuContent, {
         left: "calc(100% - " + theme.space.half + ")",
         top: "calc(-1 * " + theme.space.x1 + ")"
       }, /*#__PURE__*/React__default["default"].createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
         orientation: "vertical"
-      }, /*#__PURE__*/React__default["default"].createElement(SubMenuList$1, null, (_b = item.items) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
+      }, /*#__PURE__*/React__default["default"].createElement(SubMenuList, null, (_b = item.items) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
         return /*#__PURE__*/React__default["default"].createElement(MenuSubItem, {
           key: subItem.key,
           item: subItem,
@@ -45651,7 +45674,7 @@
         "aria-label": hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : undefined,
         borderRadius: hasIconOnly ? "rounded" : undefined,
         p: hasIcon ? "x1" : undefined
-      }, /*#__PURE__*/React__default["default"].createElement(Button, Object.assign({}, item.props), Content)), hasSubMenu && (/*#__PURE__*/React__default["default"].createElement(SubMenuContent$1, null, /*#__PURE__*/React__default["default"].createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
+      }, /*#__PURE__*/React__default["default"].createElement(Button, Object.assign({}, item.props), Content)), hasSubMenu && (/*#__PURE__*/React__default["default"].createElement(SubMenuContent, null, /*#__PURE__*/React__default["default"].createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
         orientation: "vertical"
       }, /*#__PURE__*/React__default["default"].createElement(NavigationMenuSubList, null, (_b = item.items) === null || _b === void 0 ? void 0 : _b.map(function (sub) {
         return /*#__PURE__*/React__default["default"].createElement(MenuSubItem, {
@@ -45787,38 +45810,6 @@
         textAlign: "left"
       });
     }, addStyledProps);
-    var SubMenuContent = styled__default["default"]($322c88a641701f3b$export$7c6e2c02157bb7d2).withConfig({
-      displayName: "styled__SubMenuContent",
-      componentId: "sc-11w4bv0-2"
-    })(function (_ref3) {
-      var theme = _ref3.theme;
-      return {
-        position: "absolute",
-        top: "calc(-1 * " + theme.space.x1 + ")",
-        right: "calc(100% - " + theme.space.half + ")",
-        width: "max-content",
-        minWidth: "150px",
-        background: theme.colors.white,
-        borderRadius: theme.radii.medium,
-        boxShadow: theme.shadows.medium,
-        padding: theme.space.none,
-        listStyle: "none"
-      };
-    });
-    var SubMenuList = styled__default["default"]($322c88a641701f3b$export$54c2e3dc7acea9f5).withConfig({
-      displayName: "styled__SubMenuList",
-      componentId: "sc-11w4bv0-3"
-    })(function (_ref4) {
-      var theme = _ref4.theme;
-      return {
-        listStyle: "none",
-        paddingLeft: theme.space.none,
-        paddingRight: theme.space.none,
-        paddingTop: theme.space.x1,
-        paddingBottom: theme.space.x1,
-        margin: 0
-      };
-    });
 
     var Item$1 = /*#__PURE__*/React__default["default"].forwardRef(function (_a, forwardedRef) {
       var item = _a.item,
@@ -45831,18 +45822,7 @@
         asChild: true
       }, item.element ? (/*#__PURE__*/React__default["default"].cloneElement(item.element, Object.assign(Object.assign({}, item.props), {
         children: item.label
-      }))) : (/*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, item.props), item.label)))), item.type === "button" && (/*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(UserMenuTrigger, Object.assign({}, item.props), item.label, "items" in item && item.items && item.items.length > 0 && /*#__PURE__*/React__default["default"].createElement(CaretRight, {
-        "aria-hidden": true,
-        size: "x2"
-      })), "items" in item && item.items && item.items.length > 0 && (/*#__PURE__*/React__default["default"].createElement(SubMenuContent, null, /*#__PURE__*/React__default["default"].createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
-        orientation: "vertical"
-      }, /*#__PURE__*/React__default["default"].createElement(SubMenuList, null, item.items.map(function (subItem) {
-        return /*#__PURE__*/React__default["default"].createElement(Item$1, {
-          key: subItem.key,
-          item: subItem,
-          level: level + 1
-        });
-      }))))))), item.type === "custom" && item.render({
+      }))) : (/*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, item.props), item.label)))), item.type === "button" && /*#__PURE__*/React__default["default"].createElement(UserMenuTrigger, Object.assign({}, item.props), item.label), item.type === "custom" && item.render({
         level: level,
         withinMobileNav: false
       }));
@@ -45935,7 +45915,6 @@
         _a$level = _a.level,
         level = _a$level === void 0 ? 0 : _a$level,
         props = __rest(_a, ["item", "level"]);
-      var hasSubItems = "items" in item && item.items && item.items.length > 0;
       var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, item.type === "link" && (/*#__PURE__*/React__default["default"].createElement(IndentedContainer, {
         level: level
       }, /*#__PURE__*/React__default["default"].createElement(UserMenuLink, {
@@ -45951,19 +45930,6 @@
         level: level,
         withinMobileNav: true
       }));
-      if (item.type === "button" && hasSubItems) {
-        return /*#__PURE__*/React__default["default"].createElement(RadixNavigationMenuItem, Object.assign({
-          ref: forwardedRef
-        }, props), content, /*#__PURE__*/React__default["default"].createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
-          orientation: "vertical"
-        }, /*#__PURE__*/React__default["default"].createElement(SubMenuList$1, null, item.items.map(function (subItem) {
-          return /*#__PURE__*/React__default["default"].createElement(MobileItem, {
-            key: subItem.key,
-            item: subItem,
-            level: level + 1
-          });
-        }))));
-      }
       return /*#__PURE__*/React__default["default"].createElement(RadixNavigationMenuItem, Object.assign({
         ref: forwardedRef
       }, props), content);
@@ -45991,6 +45957,8 @@
       return {
         position: "absolute",
         top: "calc(100% + " + theme.space.x1 + ")",
+        maxHeight: "calc(100dvh - " + theme.space.x2 + " - " + theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] + ")",
+        overflowY: "auto",
         display: "flex",
         flexDirection: "column",
         borderRadius: theme.radii.large,
@@ -49680,24 +49648,6 @@
     /* Z+1 */
     );
 
-    var FeatureFlagsContext = /*#__PURE__*/React.createContext(undefined);
-    function FeatureFlagsProvider(_ref) {
-      var featureFlags = _ref.featureFlags,
-        children = _ref.children;
-      return /*#__PURE__*/React__default["default"].createElement(FeatureFlagsContext.Provider, {
-        value: {
-          featureFlags: featureFlags
-        }
-      }, children);
-    }
-    function useFeatureFlags() {
-      var context = React.useContext(FeatureFlagsContext);
-      if (!context) {
-        throw new Error("useFeatureFlags must be used within the NDSProvider");
-      }
-      return context.featureFlags;
-    }
-
     var mergeThemes = function mergeThemes(theme, customTheme) {
       return Object.keys(theme).reduce(function (mergedTheme, group) {
         if (customTheme && mergedTheme[group] && customTheme[group]) {

package/dist/main.module.js

@@ -43733,6 +43733,8 @@ var ApplicationFrame = function ApplicationFrame(_a) {
     flexDirection: "column",
     minHeight: "100vh"
   }, props), /*#__PURE__*/React__default.createElement(Box, {
+    position: "sticky",
+    top: "0",
     zIndex: "navBar"
   }, environment && /*#__PURE__*/React__default.createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default.createElement(Flex, {
     flexDirection: "column",
@@ -43852,6 +43854,30 @@ var Page = function Page(_a) {
   }, children));
 };
 
+var FeatureFlagsContext = /*#__PURE__*/createContext(undefined);
+function FeatureFlagsProvider(_ref) {
+  var featureFlags = _ref.featureFlags,
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(FeatureFlagsContext.Provider, {
+    value: {
+      featureFlags: featureFlags
+    }
+  }, children);
+}
+function useFeatureFlags() {
+  var context = useContext(FeatureFlagsContext);
+  if (!context) {
+    throw new Error("useFeatureFlags must be used within the NDSProvider");
+  }
+  return context.featureFlags;
+}
+
+var NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
+var NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
+var NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY = "medium";
+var NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
+var MIN_DISTANCE_BETWEEN_MENUS_PX = 64;
+
 var sidebarWidths = {
   xs: "400px",
   s: "520px",
@@ -43916,8 +43942,7 @@ function Sidebar(_a) {
     triggerRef = _a.triggerRef,
     _a$duration = _a.duration,
     duration = _a$duration === void 0 ? 0.25 : _a$duration,
-    _a$top = _a.top,
-    top = _a$top === void 0 ? NAVBAR_HEIGHT : _a$top,
+    top = _a.top,
     _a$closeOnOutsideClic = _a.closeOnOutsideClick,
     closeOnOutsideClick = _a$closeOnOutsideClic === void 0 ? true : _a$closeOnOutsideClic,
     _a$overlay = _a.overlay,
@@ -43940,6 +43965,10 @@ function Sidebar(_a) {
   var sideBarRef = useRef(null);
   var contentRef = useRef(null);
   var selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
+  var _useFeatureFlags = useFeatureFlags(),
+    navigationV3 = _useFeatureFlags.navigationV3;
+  var theme = useTheme();
+  top || (top = navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT);
   useScrollLock({
     autoLock: overlay && disableScroll && isOpen
   });
@@ -44004,7 +44033,7 @@ function Sidebar(_a) {
     bg: "white",
     display: "flex",
     flexDirection: "column",
-    height: "calc(100% - " + NAVBAR_HEIGHT + ")",
+    height: "calc(100% - " + (navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT) + ")",
     borderLeftWidth: "1px",
     borderLeftStyle: "solid",
     borderLeftColor: "lightGrey",
@@ -45218,12 +45247,6 @@ var VerticalDivider = styled.div.withConfig({
 }, addStyledProps);
 VerticalDivider.displayName = "VerticalDivider";
 
-var NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
-var NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
-var NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY = "medium";
-var NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
-var MIN_DISTANCE_BETWEEN_MENUS_PX = 64;
-
 var disableHoverEvents = {
   onPointerMove: function onPointerMove(e) {
     return e.preventDefault();
@@ -45459,7 +45482,7 @@ var SubMenuItemButton = styled($322c88a641701f3b$export$41fb9f06171c75f4).withCo
     }
   });
 }, addStyledProps);
-var SubMenuContent$1 = styled($322c88a641701f3b$export$7c6e2c02157bb7d2).attrs(disableHoverEvents).withConfig({
+var SubMenuContent = styled($322c88a641701f3b$export$7c6e2c02157bb7d2).attrs(disableHoverEvents).withConfig({
   displayName: "styled__SubMenuContent",
   componentId: "sc-11znyq0-2"
 })(function (_ref3) {
@@ -45491,7 +45514,7 @@ var SubMenuItem = styled($322c88a641701f3b$export$6d08773d2e66f8f2).withConfig({
   position: "relative",
   width: "100%"
 }, addStyledProps);
-var SubMenuList$1 = styled($322c88a641701f3b$export$54c2e3dc7acea9f5).withConfig({
+var SubMenuList = styled($322c88a641701f3b$export$54c2e3dc7acea9f5).withConfig({
   displayName: "styled__SubMenuList",
   componentId: "sc-11znyq0-4"
 })({
@@ -45550,12 +45573,12 @@ function MenuSubItem(_ref) {
     asChild: true
   }, item.element ? (/*#__PURE__*/React__default.cloneElement(item.element, Object.assign(Object.assign({}, item.props), {
     children: content
-  }))) : (/*#__PURE__*/React__default.createElement("a", Object.assign({}, item.props), content)))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SubMenuItemButton, Object.assign({}, item.props), content), hasSubMenu && (/*#__PURE__*/React__default.createElement(SubMenuContent$1, {
+  }))) : (/*#__PURE__*/React__default.createElement("a", Object.assign({}, item.props), content)))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SubMenuItemButton, Object.assign({}, item.props), content), hasSubMenu && (/*#__PURE__*/React__default.createElement(SubMenuContent, {
     left: "calc(100% - " + theme.space.half + ")",
     top: "calc(-1 * " + theme.space.x1 + ")"
   }, /*#__PURE__*/React__default.createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
     orientation: "vertical"
-  }, /*#__PURE__*/React__default.createElement(SubMenuList$1, null, (_b = item.items) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
+  }, /*#__PURE__*/React__default.createElement(SubMenuList, null, (_b = item.items) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
     return /*#__PURE__*/React__default.createElement(MenuSubItem, {
       key: subItem.key,
       item: subItem,
@@ -45634,7 +45657,7 @@ var NavigationMenuItem = /*#__PURE__*/React__default.forwardRef(function (_a, fo
     "aria-label": hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : undefined,
     borderRadius: hasIconOnly ? "rounded" : undefined,
     p: hasIcon ? "x1" : undefined
-  }, /*#__PURE__*/React__default.createElement(Button, Object.assign({}, item.props), Content)), hasSubMenu && (/*#__PURE__*/React__default.createElement(SubMenuContent$1, null, /*#__PURE__*/React__default.createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
+  }, /*#__PURE__*/React__default.createElement(Button, Object.assign({}, item.props), Content)), hasSubMenu && (/*#__PURE__*/React__default.createElement(SubMenuContent, null, /*#__PURE__*/React__default.createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
     orientation: "vertical"
   }, /*#__PURE__*/React__default.createElement(NavigationMenuSubList, null, (_b = item.items) === null || _b === void 0 ? void 0 : _b.map(function (sub) {
     return /*#__PURE__*/React__default.createElement(MenuSubItem, {
@@ -45770,38 +45793,6 @@ var UserMenuTrigger = styled($322c88a641701f3b$export$41fb9f06171c75f4).withConf
     textAlign: "left"
   });
 }, addStyledProps);
-var SubMenuContent = styled($322c88a641701f3b$export$7c6e2c02157bb7d2).withConfig({
-  displayName: "styled__SubMenuContent",
-  componentId: "sc-11w4bv0-2"
-})(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    position: "absolute",
-    top: "calc(-1 * " + theme.space.x1 + ")",
-    right: "calc(100% - " + theme.space.half + ")",
-    width: "max-content",
-    minWidth: "150px",
-    background: theme.colors.white,
-    borderRadius: theme.radii.medium,
-    boxShadow: theme.shadows.medium,
-    padding: theme.space.none,
-    listStyle: "none"
-  };
-});
-var SubMenuList = styled($322c88a641701f3b$export$54c2e3dc7acea9f5).withConfig({
-  displayName: "styled__SubMenuList",
-  componentId: "sc-11w4bv0-3"
-})(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    listStyle: "none",
-    paddingLeft: theme.space.none,
-    paddingRight: theme.space.none,
-    paddingTop: theme.space.x1,
-    paddingBottom: theme.space.x1,
-    margin: 0
-  };
-});
 
 var Item$1 = /*#__PURE__*/React__default.forwardRef(function (_a, forwardedRef) {
   var item = _a.item,
@@ -45814,18 +45805,7 @@ var Item$1 = /*#__PURE__*/React__default.forwardRef(function (_a, forwardedRef)
     asChild: true
   }, item.element ? (/*#__PURE__*/React__default.cloneElement(item.element, Object.assign(Object.assign({}, item.props), {
     children: item.label
-  }))) : (/*#__PURE__*/React__default.createElement("a", Object.assign({}, item.props), item.label)))), item.type === "button" && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(UserMenuTrigger, Object.assign({}, item.props), item.label, "items" in item && item.items && item.items.length > 0 && /*#__PURE__*/React__default.createElement(CaretRight, {
-    "aria-hidden": true,
-    size: "x2"
-  })), "items" in item && item.items && item.items.length > 0 && (/*#__PURE__*/React__default.createElement(SubMenuContent, null, /*#__PURE__*/React__default.createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
-    orientation: "vertical"
-  }, /*#__PURE__*/React__default.createElement(SubMenuList, null, item.items.map(function (subItem) {
-    return /*#__PURE__*/React__default.createElement(Item$1, {
-      key: subItem.key,
-      item: subItem,
-      level: level + 1
-    });
-  }))))))), item.type === "custom" && item.render({
+  }))) : (/*#__PURE__*/React__default.createElement("a", Object.assign({}, item.props), item.label)))), item.type === "button" && /*#__PURE__*/React__default.createElement(UserMenuTrigger, Object.assign({}, item.props), item.label), item.type === "custom" && item.render({
     level: level,
     withinMobileNav: false
   }));
@@ -45918,7 +45898,6 @@ var MobileItem = /*#__PURE__*/React__default.forwardRef(function (_a, forwardedR
     _a$level = _a.level,
     level = _a$level === void 0 ? 0 : _a$level,
     props = __rest(_a, ["item", "level"]);
-  var hasSubItems = "items" in item && item.items && item.items.length > 0;
   var content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.type === "link" && (/*#__PURE__*/React__default.createElement(IndentedContainer, {
     level: level
   }, /*#__PURE__*/React__default.createElement(UserMenuLink, {
@@ -45934,19 +45913,6 @@ var MobileItem = /*#__PURE__*/React__default.forwardRef(function (_a, forwardedR
     level: level,
     withinMobileNav: true
   }));
-  if (item.type === "button" && hasSubItems) {
-    return /*#__PURE__*/React__default.createElement(RadixNavigationMenuItem, Object.assign({
-      ref: forwardedRef
-    }, props), content, /*#__PURE__*/React__default.createElement($322c88a641701f3b$export$d7a01e11500dfb6f, {
-      orientation: "vertical"
-    }, /*#__PURE__*/React__default.createElement(SubMenuList$1, null, item.items.map(function (subItem) {
-      return /*#__PURE__*/React__default.createElement(MobileItem, {
-        key: subItem.key,
-        item: subItem,
-        level: level + 1
-      });
-    }))));
-  }
   return /*#__PURE__*/React__default.createElement(RadixNavigationMenuItem, Object.assign({
     ref: forwardedRef
   }, props), content);
@@ -45974,6 +45940,8 @@ var NavigationMenuContent = styled($322c88a641701f3b$export$7c6e2c02157bb7d2).at
   return {
     position: "absolute",
     top: "calc(100% + " + theme.space.x1 + ")",
+    maxHeight: "calc(100dvh - " + theme.space.x2 + " - " + theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] + ")",
+    overflowY: "auto",
     display: "flex",
     flexDirection: "column",
     borderRadius: theme.radii.large,
@@ -49663,24 +49631,6 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
 /* Z+1 */
 );
 
-var FeatureFlagsContext = /*#__PURE__*/createContext(undefined);
-function FeatureFlagsProvider(_ref) {
-  var featureFlags = _ref.featureFlags,
-    children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(FeatureFlagsContext.Provider, {
-    value: {
-      featureFlags: featureFlags
-    }
-  }, children);
-}
-function useFeatureFlags() {
-  var context = useContext(FeatureFlagsContext);
-  if (!context) {
-    throw new Error("useFeatureFlags must be used within the NDSProvider");
-  }
-  return context.featureFlags;
-}
-
 var mergeThemes = function mergeThemes(theme, customTheme) {
   return Object.keys(theme).reduce(function (mergedTheme, group) {
     if (customTheme && mergedTheme[group] && customTheme[group]) {

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

@@ -1,8 +1,6 @@
 export { default as BrandedNavBar } from "./NavBar";
 export { default as MenuTrigger } from "./MenuTrigger";
 export type { MenuTriggerProps } from "./MenuTrigger";
-export { default as EnvironmentBanner } from "./EnvironmentBanner";
-export type { EnvironmentBannerProps } from "./EnvironmentBanner";
 export { default as NavBarBackground } from "./NavBarBackground";
 export type { NavBarBackgroundProps } from "./NavBarBackground";
 export { default as BrandLogoContainer } from "./BrandLogoContainer";

package/dist/src/Layout/Page.applicationFrame.story.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const NoPageTitle: () => React.JSX.Element;
+export declare const NoBreadcrumbs: () => React.JSX.Element;
+export declare const WithFullHeight: () => React.JSX.Element;

package/dist/src/NDSProvider/FeatureFlagsContext.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export interface FeatureFlags {
     experimentalDesktopTypographyScale?: boolean;
+    navigationV3?: boolean;
 }
 export interface FeatureFlagsContextValue {
     featureFlags: FeatureFlags;

package/dist/src/{BrandedNavBar → Navigation/components/EnvironmentBanner}/EnvironmentBanner.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export type EnvironmentBannerProps = {
     children?: React.ReactNode;
 };
 declare const EnvironmentBanner: ({ children }: EnvironmentBannerProps) => React.JSX.Element;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default EnvironmentBanner;

package/dist/src/Navigation/components/EnvironmentBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EnvironmentBanner } from "./EnvironmentBanner";
+export type { EnvironmentBannerProps } from "./EnvironmentBanner";

package/dist/src/Navigation/components/UserMenu/parts/styled.d.ts

@@ -6,5 +6,3 @@ export declare const UserMenuLink: import("styled-components/dist/types").IStyle
 export declare const UserMenuTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, {
     $isMobile?: boolean;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const SubMenuContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const SubMenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>, keyof import("react").Component<any, {}, any>>;

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

@@ -2,6 +2,8 @@ export { default as Navigation } from "./Navigation";
 export { NulogyLogo } from "./components/NulogyLogo/NulogyLogo";
 export { NavigationLogoLink } from "./components/shared/NavigationLogoLink";
 export { NavigationLogo } from "./components/shared/NavigationLogo";
+export { EnvironmentBanner } from "./components/EnvironmentBanner";
 export type { NavigationProps } from "./Navigation";
 export type { MenuItems, MenuItem, UserMenu, UserMenuItem, UserMenuInfo } from "./types";
 export type { AppSwitcherConfig } from "./components/AppSwitcher/NulogyAppSwitcher";
+export type { EnvironmentBannerProps } from "./components/EnvironmentBanner";

package/dist/src/Navigation/stories/Navigation.story.d.ts

@@ -8,3 +8,4 @@ declare const _default: {
 export default _default;
 export declare const BasicUsage: () => React.JSX.Element;
 export declare const WithACustomBreakpoint: () => React.JSX.Element;
+export declare const WithBanners: () => React.JSX.Element;

package/dist/src/Navigation/types.d.ts

@@ -27,7 +27,6 @@ interface ButtonUserMenuItem {
     label: string;
     type: "button";
     props?: React.ComponentPropsWithoutRef<"button">;
-    items?: UserMenuItem[];
 }
 interface CustomUserMenuItem {
     type: "custom";

package/dist/src/index.d.ts

@@ -7,8 +7,8 @@ export { Banner } from "./Banner";
 export { BottomSheet, BottomSheetParts } from "./BottomSheet";
 export type { BottomSheetProps } from "./BottomSheet";
 export { AnimatedBox, Box } from "./Box";
-export { BrandedNavBar, BrandLogoContainer, DesktopMenu, EnvironmentBanner, MenuTrigger, NavBarBackground, SmallNavBar, } from "./BrandedNavBar";
-export type { BrandLogoContainerProps, DesktopMenuProps, EnvironmentBannerProps, MenuTriggerProps, NavBarBackgroundProps, RenderMenuButtonProps, SmallNavBarProps, } from "./BrandedNavBar";
+export { BrandedNavBar, BrandLogoContainer, DesktopMenu, MenuTrigger, NavBarBackground, SmallNavBar, } from "./BrandedNavBar";
+export type { BrandLogoContainerProps, DesktopMenuProps, MenuTriggerProps, NavBarBackgroundProps, RenderMenuButtonProps, SmallNavBarProps, } from "./BrandedNavBar";
 export { Branding } from "./Branding";
 export { Breadcrumbs } from "./Breadcrumbs";
 export { Button, ControlIcon, DangerButton, IconicButton, PrimaryButton, QuietButton } from "./Button";
@@ -33,8 +33,8 @@ export { List, ListItem } from "./List";
 export { LoadingAnimation } from "./LoadingAnimation";
 export { ALL_NDS_LOCALES } from "./locales.const";
 export { Modal } from "./Modal";
-export { Navigation, NulogyLogo, NavigationLogoLink, NavigationLogo } from "./Navigation";
-export type { NavigationProps, MenuItems, MenuItem, UserMenu, UserMenuItem, UserMenuInfo, AppSwitcherConfig, } from "./Navigation";
+export { Navigation, NulogyLogo, NavigationLogoLink, NavigationLogo, EnvironmentBanner } from "./Navigation";
+export type { NavigationProps, MenuItems, MenuItem, UserMenu, UserMenuItem, UserMenuInfo, AppSwitcherConfig, EnvironmentBannerProps, } from "./Navigation";
 export { NDSProvider } from "./NDSProvider";
 export { Overlay } from "./Overlay";
 export { Pagination } from "./Pagination";

package/package.json

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