@automattic/vip-design-system 2.4.1 → 2.4.3

package/build/system/Dropdown/DropdownItem.d.ts

@@ -15,6 +15,7 @@ export const styles: {
     py: number;
     '&:hover, &:focus': {
         backgroundColor: string;
+        textDecoration: string;
     };
     '&[data-disabled]': {
         color: string;

package/build/system/Dropdown/DropdownItem.js

@@ -25,6 +25,7 @@ export const styles = {
 	py: 1,
 	'&:hover, &:focus': {
 		backgroundColor: 'hover',
+		textDecoration: 'none',
 	},
 
 	'&[data-disabled]': {
@@ -34,7 +35,7 @@ export const styles = {
 
 	'&[data-highlighted]': {
 		backgroundColor: 'hover',
-		color: 'primary',
+		color: 'link',
 	},
 };
 

package/build/system/MobileMenu/MobileMenu.js

@@ -44,18 +44,19 @@ var MobileMenu = exports.MobileMenu = /*#__PURE__*/(0, _react.forwardRef)(functi
         children: (0, _jsxRuntime.jsx)(_Logo.Logo, {})
       }), (0, _jsxRuntime.jsx)("div", {
         sx: {
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          height: 'calc(100vh - 64px)',
+          height: '100vh',
           display: 'flex',
           flex: 1
         },
         children: (0, _jsxRuntime.jsxs)(_index.Flex, {
           sx: {
             width: '100%',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            height: 'calc(100vh - 64px)',
+            overflowX: 'hidden',
+            overflowY: 'auto'
           },
-          children: [toolbarItems && (0, _jsxRuntime.jsx)(_index.Nav.Primary, {
+          children: [toolbarItems && (0, _jsxRuntime.jsx)(_index.Nav.PrimaryInverse, {
             label: "Main Links",
             orientation: "vertical",
             children: toolbarItems
@@ -63,7 +64,7 @@ var MobileMenu = exports.MobileMenu = /*#__PURE__*/(0, _react.forwardRef)(functi
             sx: {
               alignSelf: 'stretch',
               backgroundColor: 'layer.1',
-              minHeight: "calc(100vh - 64px)",
+              height: '100%',
               gap: 4,
               width: '100%',
               a: {

package/build/system/MobileMenu/MobileMenu.stories.js

@@ -40,126 +40,134 @@ var MobileMenuExample = exports.MobileMenuExample = function MobileMenuExample()
           children: "My Organizations"
         })]
       }),
-      children: (0, _jsxRuntime.jsxs)(_.Nav.Menu, {
+      children: (0, _jsxRuntime.jsx)(_.Flex, {
         sx: {
-          mb: 4
+          gap: 3,
+          px: 5,
+          py: 0,
+          flexDirection: 'column'
         },
-        label: "Nav Menu",
-        children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          href: "https://wordpress.com",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiGridAlt, {
-              size: size
-            });
-          },
-          as: _CustomLink.CustomLink,
-          children: "Overview"
-        }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiWindows, {
-              size: size
-            });
-          },
-          children: "Network Sites"
-        }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_ai.AiOutlineLock, {
-              size: size
-            });
-          },
-          children: "Domains & TLS"
-        }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
-          active: true,
-          label: "Logs",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiHistory, {
-              size: size
-            });
+        children: (0, _jsxRuntime.jsxs)(_.Nav.Menu, {
+          sx: {
+            mb: 4
           },
+          label: "Nav Menu",
           children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+            href: "https://wordpress.com",
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiGridAlt, {
+                size: size
+              });
+            },
             as: _CustomLink.CustomLink,
-            href: "https://google.com/",
-            children: "Audit"
+            children: "Overview"
           }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+            as: _CustomLink.CustomLink,
+            href: "https://random-website.com/",
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiWindows, {
+                size: size
+              });
+            },
+            children: "Network Sites"
+          }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+            as: _CustomLink.CustomLink,
+            href: "https://random-website.com/",
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_ai.AiOutlineLock, {
+                size: size
+              });
+            },
+            children: "Domains & TLS"
+          }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
             active: true,
+            label: "Logs",
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiHistory, {
+                size: size
+              });
+            },
+            children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+              as: _CustomLink.CustomLink,
+              href: "https://google.com/",
+              children: "Audit"
+            }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+              active: true,
+              as: _CustomLink.CustomLink,
+              href: "https://wpvip.com/",
+              children: "Runtime"
+            }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+              as: _CustomLink.CustomLink,
+              href: "https://dashboard.wpvip.com/",
+              children: "Slow Query"
+            })]
+          }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
+            label: "Performance",
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiTachometer, {
+                size: size
+              });
+            },
+            children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+              as: _CustomLink.CustomLink,
+              href: "https://random-website.com/",
+              children: "Metrics"
+            }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+              as: _CustomLink.CustomLink,
+              href: "https://random-website.com/",
+              children: "Monitor"
+            }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+              as: _CustomLink.CustomLink,
+              href: "https://random-website.com/",
+              children: "Cache"
+            })]
+          }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
             as: _CustomLink.CustomLink,
-            href: "https://wpvip.com/",
-            children: "Runtime"
+            href: "https://random-website.com/",
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiCodeAlt, {
+                size: size
+              });
+            },
+            children: "Code [v]"
           }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
             as: _CustomLink.CustomLink,
-            href: "https://dashboard.wpvip.com/",
-            children: "Slow Query"
-          })]
-        }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
-          label: "Performance",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiTachometer, {
-              size: size
-            });
-          },
-          children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+            href: "https://random-website.com/",
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiData, {
+                size: size
+              });
+            },
+            children: "Database [v]"
+          }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
             as: _CustomLink.CustomLink,
             href: "https://random-website.com/",
-            children: "Metrics"
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_md.MdOutlinePhotoLibrary, {
+                size: size
+              });
+            },
+            children: "Media [v]"
           }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
             as: _CustomLink.CustomLink,
             href: "https://random-website.com/",
-            children: "Monitor"
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiBell, {
+                size: size
+              });
+            },
+            children: "Notifications"
           }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
             as: _CustomLink.CustomLink,
             href: "https://random-website.com/",
-            children: "Cache"
+            renderIcon: function renderIcon(size) {
+              return (0, _jsxRuntime.jsx)(_bi.BiBulb, {
+                size: size
+              });
+            },
+            children: "Features"
           })]
-        }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiCodeAlt, {
-              size: size
-            });
-          },
-          children: "Code [v]"
-        }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiData, {
-              size: size
-            });
-          },
-          children: "Database [v]"
-        }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_md.MdOutlinePhotoLibrary, {
-              size: size
-            });
-          },
-          children: "Media [v]"
-        }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiBell, {
-              size: size
-            });
-          },
-          children: "Notifications"
-        }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-          as: _CustomLink.CustomLink,
-          href: "https://random-website.com/",
-          renderIcon: function renderIcon(size) {
-            return (0, _jsxRuntime.jsx)(_bi.BiBulb, {
-              size: size
-            });
-          },
-          children: "Features"
-        })]
+        })
       })
     })]
   });

package/build/system/Nav/Nav.d.ts

@@ -2,7 +2,7 @@
 /** @jsxImportSource theme-ui */
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 export declare const VIP_NAV = "vip-nav-component";
-export type NavVariant = 'primary' | 'tabs' | 'toolbar' | 'menu' | 'menu-inverse' | 'breadcrumbs';
+export type NavVariant = 'primary' | 'tabs' | 'toolbar' | 'menu' | 'menu-inverse' | 'breadcrumbs' | 'primary-inverse';
 export interface NavProps extends NavigationMenu.NavigationMenuProps {
     className?: string;
     variant?: NavVariant;
@@ -12,6 +12,7 @@ export interface NavProps extends NavigationMenu.NavigationMenuProps {
 export type NavItemRenderIconProp = (size: number) => JSX.Element | null;
 export declare const Nav: {
     Primary: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
+    PrimaryInverse: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
     Tab: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
     Toolbar: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
     Menu: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Nav/Nav.js

@@ -39,6 +39,12 @@ var NavPrimary = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref
   }));
 });
+var NavPrimaryInverse = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _jsxRuntime.jsx)(NavBase, _extends({}, props, {
+    variant: "primary-inverse",
+    ref: ref
+  }));
+});
 var NavTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _jsxRuntime.jsx)(NavBase, _extends({}, props, {
     variant: "tabs",
@@ -60,6 +66,7 @@ var NavMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 var Nav = exports.Nav = {
   Primary: NavPrimary,
+  PrimaryInverse: NavPrimaryInverse,
   Tab: NavTab,
   Toolbar: NavToolbar,
   Menu: NavMenu

package/build/system/Nav/Nav.stories.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     title: string;
     component: {
         Primary: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
+        PrimaryInverse: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
         Tab: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
         Toolbar: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
         Menu: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Nav/styles/variants/menu.js

@@ -28,7 +28,7 @@ var menuInverseItemStyles = exports.menuInverseItemStyles = function menuInverse
   return _extends({}, menuItemStyles(orientation), {
     width: '100%',
     mr: 0,
-    height: 45,
+    height: 38,
     color: 'toolbar.text.default'
   });
 };

package/build/system/Nav/styles.js

@@ -88,6 +88,15 @@ var navStyles = exports.navStyles = function navStyles(variant, orientation) {
         navStyle = _toolbar.toolbarRootStyles;
       }
       break;
+    case 'primary-inverse':
+      {
+        navStyle = _extends({}, _primary.defaultNavRootStyles, {
+          px: 5,
+          pt: 2,
+          pb: 4
+        });
+      }
+      break;
     default:
       {
         navStyle = _primary.defaultNavRootStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",
@@ -15,7 +15,7 @@
     "format:check": "npm run cmd:format -- --check",
     "jest": "NODE_ENV=test jest --env=jsdom",
     "jest:coverage": "npm run jest && open-cli ./coverage/index.html",
-    "jest:watch": "npm run jest --watch",
+    "jest:watch": "npm run jest -- --watch",
     "theme-builder-copy": "npm run theme-builder-copy-light && npm run theme-builder-copy-dark",
     "theme-builder-copy-light": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-light.json build/system/theme/generated/valet-theme-light.json",
     "theme-builder-copy-dark": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-dark.json build/system/theme/generated/valet-theme-dark.json",

package/src/system/Dropdown/DropdownItem.js

@@ -25,6 +25,7 @@ export const styles = {
 	py: 1,
 	'&:hover, &:focus': {
 		backgroundColor: 'hover',
+		textDecoration: 'none',
 	},
 
 	'&[data-disabled]': {
@@ -34,7 +35,7 @@ export const styles = {
 
 	'&[data-highlighted]': {
 		backgroundColor: 'hover',
-		color: 'primary',
+		color: 'link',
 	},
 };
 

package/src/system/MobileMenu/MobileMenu.stories.tsx

@@ -14,7 +14,7 @@ import {
 import { MdOutlinePhotoLibrary } from 'react-icons/md';
 
 import { MobileMenu, MobileMenuTrigger, MobileMenuWrapper } from './MobileMenu';
-import { Nav, NavItem } from '..';
+import { Flex, Nav, NavItem } from '..';
 import { CustomLink } from '../utils/stories/CustomLink';
 
 import type { StoryObj } from '@storybook/react';
@@ -73,91 +73,100 @@ export const MobileMenuExample = () => (
 				</>
 			}
 		>
-			<Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
-				<NavItem.Menu
-					href="https://wordpress.com"
-					renderIcon={ size => <BiGridAlt size={ size } /> }
-					as={ CustomLink }
-				>
-					Overview
-				</NavItem.Menu>
-				<NavItem.Menu
-					as={ CustomLink }
-					href="https://random-website.com/"
-					renderIcon={ size => <BiWindows size={ size } /> }
-				>
-					Network Sites
-				</NavItem.Menu>
-				<NavItem.Menu
-					as={ CustomLink }
-					href="https://random-website.com/"
-					renderIcon={ size => <AiOutlineLock size={ size } /> }
-				>
-					Domains & TLS
-				</NavItem.Menu>
-
-				<NavItem.MenuGroup active label="Logs" renderIcon={ size => <BiHistory size={ size } /> }>
-					<NavItem.Menu as={ CustomLink } href="https://google.com/">
-						Audit
+			<Flex
+				sx={ {
+					gap: 3,
+					px: 5,
+					py: 0,
+					flexDirection: 'column',
+				} }
+			>
+				<Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
+					<NavItem.Menu
+						href="https://wordpress.com"
+						renderIcon={ size => <BiGridAlt size={ size } /> }
+						as={ CustomLink }
+					>
+						Overview
 					</NavItem.Menu>
-					<NavItem.Menu active as={ CustomLink } href="https://wpvip.com/">
-						Runtime
+					<NavItem.Menu
+						as={ CustomLink }
+						href="https://random-website.com/"
+						renderIcon={ size => <BiWindows size={ size } /> }
+					>
+						Network Sites
 					</NavItem.Menu>
-					<NavItem.Menu as={ CustomLink } href="https://dashboard.wpvip.com/">
-						Slow Query
+					<NavItem.Menu
+						as={ CustomLink }
+						href="https://random-website.com/"
+						renderIcon={ size => <AiOutlineLock size={ size } /> }
+					>
+						Domains & TLS
 					</NavItem.Menu>
-				</NavItem.MenuGroup>
-
-				<NavItem.MenuGroup
-					label="Performance"
-					renderIcon={ size => <BiTachometer size={ size } /> }
-				>
-					<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
-						Metrics
+
+					<NavItem.MenuGroup active label="Logs" renderIcon={ size => <BiHistory size={ size } /> }>
+						<NavItem.Menu as={ CustomLink } href="https://google.com/">
+							Audit
+						</NavItem.Menu>
+						<NavItem.Menu active as={ CustomLink } href="https://wpvip.com/">
+							Runtime
+						</NavItem.Menu>
+						<NavItem.Menu as={ CustomLink } href="https://dashboard.wpvip.com/">
+							Slow Query
+						</NavItem.Menu>
+					</NavItem.MenuGroup>
+
+					<NavItem.MenuGroup
+						label="Performance"
+						renderIcon={ size => <BiTachometer size={ size } /> }
+					>
+						<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
+							Metrics
+						</NavItem.Menu>
+						<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
+							Monitor
+						</NavItem.Menu>
+						<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
+							Cache
+						</NavItem.Menu>
+					</NavItem.MenuGroup>
+					<NavItem.Menu
+						as={ CustomLink }
+						href="https://random-website.com/"
+						renderIcon={ size => <BiCodeAlt size={ size } /> }
+					>
+						Code [v]
+					</NavItem.Menu>
+					<NavItem.Menu
+						as={ CustomLink }
+						href="https://random-website.com/"
+						renderIcon={ size => <BiData size={ size } /> }
+					>
+						Database [v]
+					</NavItem.Menu>
+					<NavItem.Menu
+						as={ CustomLink }
+						href="https://random-website.com/"
+						renderIcon={ size => <MdOutlinePhotoLibrary size={ size } /> }
+					>
+						Media [v]
 					</NavItem.Menu>
-					<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
-						Monitor
+					<NavItem.Menu
+						as={ CustomLink }
+						href="https://random-website.com/"
+						renderIcon={ size => <BiBell size={ size } /> }
+					>
+						Notifications
 					</NavItem.Menu>
-					<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
-						Cache
+					<NavItem.Menu
+						as={ CustomLink }
+						href="https://random-website.com/"
+						renderIcon={ size => <BiBulb size={ size } /> }
+					>
+						Features
 					</NavItem.Menu>
-				</NavItem.MenuGroup>
-				<NavItem.Menu
-					as={ CustomLink }
-					href="https://random-website.com/"
-					renderIcon={ size => <BiCodeAlt size={ size } /> }
-				>
-					Code [v]
-				</NavItem.Menu>
-				<NavItem.Menu
-					as={ CustomLink }
-					href="https://random-website.com/"
-					renderIcon={ size => <BiData size={ size } /> }
-				>
-					Database [v]
-				</NavItem.Menu>
-				<NavItem.Menu
-					as={ CustomLink }
-					href="https://random-website.com/"
-					renderIcon={ size => <MdOutlinePhotoLibrary size={ size } /> }
-				>
-					Media [v]
-				</NavItem.Menu>
-				<NavItem.Menu
-					as={ CustomLink }
-					href="https://random-website.com/"
-					renderIcon={ size => <BiBell size={ size } /> }
-				>
-					Notifications
-				</NavItem.Menu>
-				<NavItem.Menu
-					as={ CustomLink }
-					href="https://random-website.com/"
-					renderIcon={ size => <BiBulb size={ size } /> }
-				>
-					Features
-				</NavItem.Menu>
-			</Nav.Menu>
+				</Nav.Menu>
+			</Flex>
 		</MobileMenu>
 	</MobileMenuWrapper>
 );

package/src/system/MobileMenu/MobileMenu.tsx

@@ -44,25 +44,31 @@ export const MobileMenu = forwardRef< HTMLDivElement, MobileMenuProps >(
 
 				<div
 					sx={ {
-						overflowX: 'hidden',
-						overflowY: 'auto',
-						height: 'calc(100vh - 64px)',
+						height: '100vh',
 						display: 'flex',
 						flex: 1,
 					} }
 				>
-					<Flex sx={ { width: '100%', flexDirection: 'column' } }>
+					<Flex
+						sx={ {
+							width: '100%',
+							flexDirection: 'column',
+							height: 'calc(100vh - 64px)',
+							overflowX: 'hidden',
+							overflowY: 'auto',
+						} }
+					>
 						{ toolbarItems && (
-							<Nav.Primary label="Main Links" orientation="vertical">
+							<Nav.PrimaryInverse label="Main Links" orientation="vertical">
 								{ toolbarItems }
-							</Nav.Primary>
+							</Nav.PrimaryInverse>
 						) }
 
 						<Box
 							sx={ {
 								alignSelf: 'stretch',
 								backgroundColor: 'layer.1',
-								minHeight: `calc(100vh - 64px)`,
+								height: '100%',
 								gap: 4,
 								width: '100%',
 								a: {

package/src/system/Nav/Nav.tsx

@@ -6,7 +6,14 @@ import { Ref, forwardRef } from 'react';
 import { navMenuListStyles, navStyles } from './styles';
 
 export const VIP_NAV = 'vip-nav-component';
-export type NavVariant = 'primary' | 'tabs' | 'toolbar' | 'menu' | 'menu-inverse' | 'breadcrumbs';
+export type NavVariant =
+	| 'primary'
+	| 'tabs'
+	| 'toolbar'
+	| 'menu'
+	| 'menu-inverse'
+	| 'breadcrumbs'
+	| 'primary-inverse';
 
 export interface NavProps extends NavigationMenu.NavigationMenuProps {
 	className?: string;
@@ -43,6 +50,12 @@ const NavPrimary = forwardRef< HTMLElement, NavProps >(
 	)
 );
 
+const NavPrimaryInverse = forwardRef< HTMLElement, NavProps >(
+	( props: NavProps, ref: Ref< HTMLElement > ) => (
+		<NavBase { ...props } variant="primary-inverse" ref={ ref } />
+	)
+);
+
 const NavTab = forwardRef< HTMLElement, NavProps >(
 	( props: NavProps, ref: Ref< HTMLElement > ) => (
 		<NavBase { ...props } variant="tabs" ref={ ref } />
@@ -65,6 +78,7 @@ export type NavItemRenderIconProp = ( size: number ) => JSX.Element | null;
 
 export const Nav = {
 	Primary: NavPrimary,
+	PrimaryInverse: NavPrimaryInverse,
 	Tab: NavTab,
 	Toolbar: NavToolbar,
 	Menu: NavMenu,

package/src/system/Nav/styles/variants/menu.ts

@@ -30,7 +30,7 @@ export const menuInverseItemStyles = (
 	...menuItemStyles( orientation ),
 	width: '100%',
 	mr: 0,
-	height: 45,
+	height: 38,
 	color: 'toolbar.text.default',
 } );
 

package/src/system/Nav/styles.ts

@@ -104,6 +104,17 @@ export const navStyles = (
 				navStyle = toolbarRootStyles;
 			}
 
+			break;
+		case 'primary-inverse':
+			{
+				navStyle = {
+					...defaultNavRootStyles,
+					px: 5,
+					pt: 2,
+					pb: 4,
+				};
+			}
+
 			break;
 		default: {
 			navStyle = defaultNavRootStyles;