baseui 11.0.1 → 11.1.0

package/a11y/index.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 
-export const Unstable_A11y: React.FC;
+export declare const Unstable_A11y: React.FC;

package/accordion/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export interface STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   expand: 'expand';
-}
+};
 
 export interface AccordionOverrides<T> {
   Content?: Override<T>;
@@ -24,9 +24,9 @@ export interface SharedProps {
 }
 
 export type StateReducer<T> = (
-  stateChangeType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+  stateChangeType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
   nextState: T,
-  currentState: T,
+  currentState: T
 ) => T;
 
 export interface AccordionProps {
@@ -34,7 +34,7 @@ export interface AccordionProps {
   children: React.ReactNode;
   disabled?: boolean;
   initialState?: AccordionState;
-  onChange?: (args: {expanded: React.Key[]}) => any;
+  onChange?: (args: { expanded: React.Key[] }) => any;
   overrides?: AccordionOverrides<SharedProps>;
   stateReducer?: StateReducer<AccordionState>;
   renderAll?: boolean;
@@ -45,12 +45,12 @@ export type StatelessAccordionProps = {
   children: React.ReactNode;
   disabled?: boolean;
   expanded: React.Key[];
-  onChange?: (args: {expanded: React.Key[]; key: React.Key}) => any;
+  onChange?: (args: { expanded: React.Key[]; key: React.Key }) => any;
   overrides?: AccordionOverrides<SharedProps> & PanelOverrides<SharedProps>;
   renderAll?: boolean;
 };
 
-export const StatelessAccordion: React.FC<StatelessAccordionProps>;
+export declare const StatelessAccordion: React.FC<StatelessAccordionProps>;
 
 export interface AccordionState {
   expanded: React.Key[];
@@ -59,8 +59,8 @@ export interface AccordionState {
 export class Accordion extends React.Component<AccordionProps, AccordionState> {
   onPanelChange(key: React.Key, onChange: () => any, ...args: any): void;
   internalSetState(
-    type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
-    changes: AccordionState,
+    type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
+    changes: AccordionState
   ): void;
   getItems(): React.ReactNode;
 }
@@ -78,7 +78,7 @@ export interface SharedPanelProps {
   children: React.ReactNode;
   disabled?: boolean;
   key?: React.Key;
-  onChange?: (args: {expanded: boolean}) => any;
+  onChange?: (args: { expanded: boolean }) => any;
   onClick?: (e: Event) => any;
   onKeyDown?: (e: KeyboardEvent) => any;
   overrides?: PanelOverrides<SharedProps>;
@@ -88,11 +88,11 @@ export interface SharedPanelProps {
 
 export interface SharedStatefulPanelContainerProps {
   initialState?: PanelState;
-  onChange?: (args: {expanded: boolean}) => any;
+  onChange?: (args: { expanded: boolean }) => any;
   stateReducer?: StateReducer<PanelState>;
 }
 
-export type PanelProps = SharedPanelProps & {expanded?: boolean};
+export type PanelProps = SharedPanelProps & { expanded?: boolean };
 
 export class Panel extends React.Component<PanelProps> {
   onClick(e: Event): void;
@@ -100,10 +100,9 @@ export class Panel extends React.Component<PanelProps> {
   getSharedProps(): SharedProps;
 }
 
-export type StatefulPanelProps = SharedPanelProps &
-  SharedStatefulPanelContainerProps;
+export type StatefulPanelProps = SharedPanelProps & SharedStatefulPanelContainerProps;
 
-export const StatefulPanel: React.FC<StatefulPanelProps>;
+export declare const StatefulPanel: React.FC<StatefulPanelProps>;
 
 export type StatefulPanelContainerProps = SharedStatefulPanelContainerProps & {
   children: React.ReactNode;
@@ -119,17 +118,15 @@ export class StatefulPanelContainer extends React.Component<
 > {
   onChange(args: any): void;
   internalSetState(
-    type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
-    changes: PanelState,
+    type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
+    changes: PanelState
   ): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledPanelContainer: StyletronComponent<any>;
-export const StyledHeader: StyletronComponent<any>;
-export const StyledContent: StyletronComponent<any>;
-export const StyledContentAnimationContainer: StyletronComponent<any>;
-export const StyledToggleIcon: StyletronComponent<any>;
-export const StyledToggleIconGroup: StyletronComponent<any>;
-
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledPanelContainer: StyletronComponent<any>;
+export declare const StyledHeader: StyletronComponent<any>;
+export declare const StyledContent: StyletronComponent<any>;
+export declare const StyledContentAnimationContainer: StyletronComponent<any>;
+export declare const StyledToggleIcon: StyletronComponent<any>;
+export declare const StyledToggleIconGroup: StyletronComponent<any>;

package/app-nav-bar/app-nav-bar.js

@@ -11,9 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _overrides = require("../helpers/overrides.js");
 
-var _index = require("../layout-grid/index.js");
-
-var _index2 = require("../styles/index.js");
+var _index = require("../styles/index.js");
 
 var _focusVisible = require("../utils/focusVisible.js");
 
@@ -113,19 +111,12 @@ function SecondaryMenu(props) {
       _props$overrides2 = props.overrides,
       overrides = _props$overrides2 === void 0 ? {} : _props$overrides2;
 
-  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.SubnavContainer, _styledComponents.StyledSubnavContainer),
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.SecondaryMenuContainer, _styledComponents.StyledSecondaryMenuContainer),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-      SubnavContainer = _getOverrides4[0],
-      subnavContainerProps = _getOverrides4[1];
-
-  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.SecondaryMenuContainer, _styledComponents.StyledSecondaryMenuContainer),
-      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-      SecondaryMenuContainer = _getOverrides6[0],
-      secondaryMenuContainerProps = _getOverrides6[1];
+      SecondaryMenuContainer = _getOverrides4[0],
+      secondaryMenuContainerProps = _getOverrides4[1];
 
-  return /*#__PURE__*/React.createElement(SubnavContainer, subnavContainerProps, /*#__PURE__*/React.createElement(_index.Grid, null, /*#__PURE__*/React.createElement(_index.Cell, {
-    span: [0, 8, 12]
-  }, /*#__PURE__*/React.createElement(SecondaryMenuContainer, _extends({
+  return /*#__PURE__*/React.createElement(SecondaryMenuContainer, _extends({
     role: "navigation",
     "aria-label": "Secondary navigation"
   }, secondaryMenuContainerProps), items.map(function (item, index) {
@@ -141,11 +132,11 @@ function SecondaryMenu(props) {
         overrides: overrides
       })
     );
-  })))));
+  }));
 }
 
 function AppNavBar(props) {
-  var _useStyletron = (0, _index2.useStyletron)(),
+  var _useStyletron = (0, _index.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
       theme = _useStyletron2[1];
@@ -172,25 +163,35 @@ function AppNavBar(props) {
     return props.mainItems || [];
   }, [props.mainItems, props.isMainItemActive]);
 
-  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      Root = _getOverrides6[0],
+      rootProps = _getOverrides6[1];
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.Spacing, _styledComponents.StyledSpacing),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-      Root = _getOverrides8[0],
-      rootProps = _getOverrides8[1];
+      Spacing = _getOverrides8[0],
+      spacingProps = _getOverrides8[1];
 
-  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.Spacing, _styledComponents.StyledSpacing),
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.AppName, _styledComponents.StyledAppName),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      Spacing = _getOverrides10[0],
-      spacingProps = _getOverrides10[1];
+      AppName = _getOverrides10[0],
+      appNameProps = _getOverrides10[1];
 
-  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.AppName, _styledComponents.StyledAppName),
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.PrimaryMenuContainer, _styledComponents.StyledPrimaryMenuContainer),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      AppName = _getOverrides12[0],
-      appNameProps = _getOverrides12[1];
+      PrimaryMenuContainer = _getOverrides12[0],
+      primaryMenuContainerProps = _getOverrides12[1];
 
-  var _getOverrides13 = (0, _overrides.getOverrides)(overrides.PrimaryMenuContainer, _styledComponents.StyledPrimaryMenuContainer),
+  var _getOverrides13 = (0, _overrides.getOverrides)(overrides.DesktopMenuContainer, _styledComponents.StyledDesktopMenuContainer),
       _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      PrimaryMenuContainer = _getOverrides14[0],
-      primaryMenuContainerProps = _getOverrides14[1];
+      DesktopMenuContainer = _getOverrides14[0],
+      desktopMenuContainerProps = _getOverrides14[1];
+
+  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.DesktopMenu, _styledComponents.StyledDesktopMenu),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      DesktopMenu = _getOverrides16[0],
+      desktopMenuProps = _getOverrides16[1];
 
   var secondaryMenu;
   var desktopSubNavPosition = _constants.POSITION.horizontal;
@@ -201,9 +202,7 @@ function AppNavBar(props) {
     className: css(_defineProperty({}, "@media screen and (min-width: ".concat(theme.breakpoints.large, "px)"), {
       display: 'none'
     }))
-  }, /*#__PURE__*/React.createElement(_index.Grid, null, /*#__PURE__*/React.createElement(_index.Cell, {
-    span: [4, 8, 0]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(_mobileMenu.default, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)))), secondaryMenu && mobileSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
+  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(_mobileMenu.default, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)), secondaryMenu && mobileSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
     items: secondaryMenu,
     mapItemToNode: mapItemToNode,
     onSelect: onMainItemSelect,
@@ -212,11 +211,7 @@ function AppNavBar(props) {
     className: css(_defineProperty({}, "@media screen and (max-width: ".concat(theme.breakpoints.large - 1, "px)"), {
       display: 'none'
     }))
-  }, /*#__PURE__*/React.createElement(_index.Grid, null, /*#__PURE__*/React.createElement(_index.Cell, {
-    span: [0, 3, 3]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, /*#__PURE__*/React.createElement(AppName, appNameProps, title))), /*#__PURE__*/React.createElement(_index.Cell, {
-    span: userItems.length ? [0, 4, 8] : [0, 5, 9]
-  }, /*#__PURE__*/React.createElement(PrimaryMenuContainer, _extends({
+  }, /*#__PURE__*/React.createElement(DesktopMenuContainer, desktopMenuContainerProps, /*#__PURE__*/React.createElement(DesktopMenu, desktopMenuProps, /*#__PURE__*/React.createElement(AppName, appNameProps, title), /*#__PURE__*/React.createElement(PrimaryMenuContainer, _extends({
     role: "navigation",
     "aria-label": "Main navigation"
   }, primaryMenuContainerProps), mainItems.map(function (item, index) {
@@ -237,9 +232,7 @@ function AppNavBar(props) {
       onSelect: onMainItemSelect,
       overrides: overrides
     });
-  }))), userItems.length ? /*#__PURE__*/React.createElement(_index.Cell, {
-    span: [0, 1, 1]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, /*#__PURE__*/React.createElement(_userMenu.default, {
+  })), userItems.length ? /*#__PURE__*/React.createElement(_userMenu.default, {
     mapItemToNode: mapItemToNode,
     onItemSelect: onUserItemSelect,
     overrides: overrides,
@@ -247,7 +240,7 @@ function AppNavBar(props) {
     usernameSubtitle: usernameSubtitle,
     userImgUrl: userImgUrl,
     userItems: userItems
-  }))) : null), secondaryMenu && desktopSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
+  }) : null)), secondaryMenu && desktopSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
     items: secondaryMenu,
     mapItemToNode: mapItemToNode,
     onSelect: onMainItemSelect,

package/app-nav-bar/app-nav-bar.js.flow

@@ -9,7 +9,6 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 
 import { getOverrides } from '../helpers/overrides.js';
-import { Cell, Grid } from '../layout-grid/index.js';
 import { useStyletron } from '../styles/index.js';
 import { isFocusVisible } from '../utils/focusVisible.js';
 
@@ -20,10 +19,11 @@ import {
   StyledRoot,
   StyledSpacing,
   StyledPrimaryMenuContainer,
-  StyledSubnavContainer,
   StyledSecondaryMenuContainer,
   StyledAppName,
   StyledMainMenuItem,
+  StyledDesktopMenuContainer,
+  StyledDesktopMenu,
 } from './styled-components.js';
 import type { AppNavBarPropsT } from './types.js';
 import { defaultMapItemToNode, mapItemsActive } from './utils.js';
@@ -82,39 +82,29 @@ function MainMenuItem(props) {
 function SecondaryMenu(props) {
   const { items = [], mapItemToNode, onSelect, overrides = {} } = props;
 
-  const [SubnavContainer, subnavContainerProps] = getOverrides(
-    overrides.SubnavContainer,
-    StyledSubnavContainer
-  );
   const [SecondaryMenuContainer, secondaryMenuContainerProps] = getOverrides(
     overrides.SecondaryMenuContainer,
     StyledSecondaryMenuContainer
   );
 
   return (
-    <SubnavContainer {...subnavContainerProps}>
-      <Grid>
-        <Cell span={[0, 8, 12]}>
-          <SecondaryMenuContainer
-            role="navigation"
-            aria-label="Secondary navigation"
-            {...secondaryMenuContainerProps}
-          >
-            {items.map((item, index) => (
-              // Replace with a menu item renderer
-              <MainMenuItem
-                mapItemToNode={mapItemToNode}
-                item={item}
-                kind={KIND.secondary}
-                key={index}
-                onSelect={onSelect}
-                overrides={overrides}
-              />
-            ))}
-          </SecondaryMenuContainer>
-        </Cell>
-      </Grid>
-    </SubnavContainer>
+    <SecondaryMenuContainer
+      role="navigation"
+      aria-label="Secondary navigation"
+      {...secondaryMenuContainerProps}
+    >
+      {items.map((item, index) => (
+        // Replace with a menu item renderer
+        <MainMenuItem
+          mapItemToNode={mapItemToNode}
+          item={item}
+          kind={KIND.secondary}
+          key={index}
+          onSelect={onSelect}
+          overrides={overrides}
+        />
+      ))}
+    </SecondaryMenuContainer>
   );
 }
 
@@ -146,6 +136,11 @@ export default function AppNavBar(props: AppNavBarPropsT) {
     overrides.PrimaryMenuContainer,
     StyledPrimaryMenuContainer
   );
+  const [DesktopMenuContainer, desktopMenuContainerProps] = getOverrides(
+    overrides.DesktopMenuContainer,
+    StyledDesktopMenuContainer
+  );
+  const [DesktopMenu, desktopMenuProps] = getOverrides(overrides.DesktopMenu, StyledDesktopMenu);
 
   let secondaryMenu;
   let desktopSubNavPosition = POSITION.horizontal;
@@ -161,14 +156,10 @@ export default function AppNavBar(props: AppNavBarPropsT) {
           },
         })}
       >
-        <Grid>
-          <Cell span={[4, 8, 0]}>
-            <Spacing {...spacingProps}>
-              {mainItems.length || userItems.length ? <MobileNav {...props} /> : null}
-              <AppName {...appNameProps}>{title}</AppName>
-            </Spacing>
-          </Cell>
-        </Grid>
+        <Spacing {...spacingProps}>
+          {mainItems.length || userItems.length ? <MobileNav {...props} /> : null}
+          <AppName {...appNameProps}>{title}</AppName>
+        </Spacing>
 
         {secondaryMenu && mobileSubNavPosition === POSITION.horizontal && (
           <SecondaryMenu
@@ -188,14 +179,11 @@ export default function AppNavBar(props: AppNavBarPropsT) {
           },
         })}
       >
-        <Grid>
-          <Cell span={[0, 3, 3]}>
-            <Spacing {...spacingProps}>
-              {/* Replace with a Logo renderer */}
-              <AppName {...appNameProps}>{title}</AppName>
-            </Spacing>
-          </Cell>
-          <Cell span={userItems.length ? [0, 4, 8] : [0, 5, 9]}>
+        <DesktopMenuContainer {...desktopMenuContainerProps}>
+          <DesktopMenu {...desktopMenuProps}>
+            {/* Replace with a Logo renderer */}
+            <AppName {...appNameProps}>{title}</AppName>
+
             <PrimaryMenuContainer
               role="navigation"
               aria-label="Main navigation"
@@ -221,24 +209,20 @@ export default function AppNavBar(props: AppNavBarPropsT) {
                 );
               })}
             </PrimaryMenuContainer>
-          </Cell>
 
-          {userItems.length ? (
-            <Cell span={[0, 1, 1]}>
-              <Spacing {...spacingProps}>
-                <UserMenu
-                  mapItemToNode={mapItemToNode}
-                  onItemSelect={onUserItemSelect}
-                  overrides={overrides}
-                  username={username}
-                  usernameSubtitle={usernameSubtitle}
-                  userImgUrl={userImgUrl}
-                  userItems={userItems}
-                />
-              </Spacing>
-            </Cell>
-          ) : null}
-        </Grid>
+            {userItems.length ? (
+              <UserMenu
+                mapItemToNode={mapItemToNode}
+                onItemSelect={onUserItemSelect}
+                overrides={overrides}
+                username={username}
+                usernameSubtitle={usernameSubtitle}
+                userImgUrl={userImgUrl}
+                userItems={userItems}
+              />
+            ) : null}
+          </DesktopMenu>
+        </DesktopMenuContainer>
 
         {secondaryMenu && desktopSubNavPosition === POSITION.horizontal && (
           <SecondaryMenu

package/app-nav-bar/index.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import {Override} from '../overrides';
+import { Override } from '../overrides';
 
 export interface AppNavBarOverridesT {
   Root?: Override<any>;
   AppName?: Override<any>;
+  DesktopMenu?: Override<any>;
+  DesktopMenuContainer?: Override<any>;
   MainMenuItem?: Override<any>;
   PrimaryMenuContainer?: Override<any>;
   ProfileTileContainer?: Override<any>;
@@ -31,8 +33,8 @@ export type NavItemT = {
   children?: NavItemT[];
   navExitIcon?: React.ComponentType<any>;
   navPosition?: {
-    desktop?: POSITION[keyof POSITION];
-    mobile?: POSITION[keyof POSITION];
+    desktop?: typeof POSITION[keyof typeof POSITION];
+    mobile?: typeof POSITION[keyof typeof POSITION];
   };
 };
 
@@ -53,16 +55,15 @@ export type AppNavBarPropsT = UserMenuPropsT & {
   title?: React.ReactNode;
 };
 
-export interface POSITION {
+export declare const POSITION: {
   horizontal: 'horizontal';
   vertical: 'vertical';
-}
+};
 
 export class AppNavBar extends React.Component<AppNavBarPropsT> {}
-export const POSITION: POSITION;
 
-export const setItemActive: (
+export declare const setItemActive: (
   items: NavItemT[],
   item: NavItemT,
-  getUniqueueIdentifier?: (currentItem: NavItemT) => string | number,
+  getUniqueueIdentifier?: (currentItem: NavItemT) => string | number
 ) => NavItemT[];

package/app-nav-bar/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledUserProfileInfoContainer = exports.StyledUserProfilePictureContainer = exports.StyledUserProfileTileContainer = exports.StyledUserMenuProfileListItem = exports.StyledUserMenuButton = exports.StyledSecondaryMenuContainer = exports.StyledMainMenuItem = exports.StyledPrimaryMenuContainer = exports.StyledSideMenuButton = exports.StyledAppName = exports.StyledSpacing = exports.StyledSubnavContainer = exports.StyledRoot = void 0;
+exports.StyledDesktopMenu = exports.StyledDesktopMenuContainer = exports.StyledUserProfileInfoContainer = exports.StyledUserProfilePictureContainer = exports.StyledUserProfileTileContainer = exports.StyledUserMenuProfileListItem = exports.StyledUserMenuButton = exports.StyledSecondaryMenuContainer = exports.StyledMainMenuItem = exports.StyledPrimaryMenuContainer = exports.StyledSideMenuButton = exports.StyledAppName = exports.StyledSpacing = exports.StyledSubnavContainer = exports.StyledRoot = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -52,20 +52,12 @@ var StyledRoot = (0, _index.styled)('div', function (props) {
   var $theme = props.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
     boxSizing: 'border-box',
-    backgroundColor: $theme.colors.backgroundPrimary,
-    boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.08)',
-    width: '100%'
+    backgroundColor: $theme.colors.backgroundPrimary
   });
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-var StyledSubnavContainer = (0, _index.styled)('div', function (_ref2) {
-  var $theme = _ref2.$theme;
-  return {
-    boxSizing: 'border-box',
-    boxShadow: '0px -1px 0px rgba(0, 0, 0, 0.08)'
-  };
-});
+var StyledSubnavContainer = (0, _index.styled)('div', {});
 exports.StyledSubnavContainer = StyledSubnavContainer;
 StyledSubnavContainer.displayName = "StyledSubnavContainer";
 var StyledSpacing = (0, _index.styled)('div', function (props) {
@@ -84,8 +76,8 @@ var StyledSpacing = (0, _index.styled)('div', function (props) {
 });
 exports.StyledSpacing = StyledSpacing;
 StyledSpacing.displayName = "StyledSpacing";
-var StyledAppName = (0, _index.styled)('div', function (_ref4) {
-  var $theme = _ref4.$theme;
+var StyledAppName = (0, _index.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font550), {}, _defineProperty({
     color: $theme.colors.primary,
     textDecoration: 'none'
@@ -93,8 +85,8 @@ var StyledAppName = (0, _index.styled)('div', function (_ref4) {
 });
 exports.StyledAppName = StyledAppName;
 StyledAppName.displayName = "StyledAppName";
-var StyledSideMenuButton = (0, _index.withStyle)(StyledButton, function (_ref5) {
-  var $theme = _ref5.$theme;
+var StyledSideMenuButton = (0, _index.withStyle)(StyledButton, function (_ref4) {
+  var $theme = _ref4.$theme;
   return _objectSpread(_objectSpread({}, $theme.direction === 'rtl' ? {
     marginLeft: $theme.sizing.scale600
   } : {
@@ -108,16 +100,18 @@ var StyledSideMenuButton = (0, _index.withStyle)(StyledButton, function (_ref5)
 });
 exports.StyledSideMenuButton = StyledSideMenuButton;
 StyledSideMenuButton.displayName = "StyledSideMenuButton";
-var StyledPrimaryMenuContainer = (0, _index.styled)('div', function (_ref6) {
-  var $theme = _ref6.$theme;
+var StyledPrimaryMenuContainer = (0, _index.styled)('div', function (_ref5) {
+  var $theme = _ref5.$theme;
   return {
     boxSizing: 'border-box',
     height: '100%',
     display: 'flex',
     flexDirection: 'row',
+    flexGrow: 1,
     flexWrap: 'nowrap',
     justifyContent: 'flex-end',
-    alignItems: 'stretch'
+    alignItems: 'stretch',
+    paddingInlineEnd: $theme.sizing.scale1000
   };
 });
 exports.StyledPrimaryMenuContainer = StyledPrimaryMenuContainer;
@@ -163,8 +157,8 @@ var StyledMainMenuItem = (0, _index.styled)('div', function (props) {
 });
 exports.StyledMainMenuItem = StyledMainMenuItem;
 StyledMainMenuItem.displayName = "StyledMainMenuItem";
-var StyledSecondaryMenuContainer = (0, _index.styled)('div', function (_ref7) {
-  var $theme = _ref7.$theme;
+var StyledSecondaryMenuContainer = (0, _index.styled)('div', function (_ref6) {
+  var $theme = _ref6.$theme;
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -172,6 +166,8 @@ var StyledSecondaryMenuContainer = (0, _index.styled)('div', function (_ref7) {
     flexDirection: 'row',
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
+    margin: 'auto',
+    maxWidth: "".concat($theme.breakpoints.large, "px"),
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -180,8 +176,8 @@ exports.StyledSecondaryMenuContainer = StyledSecondaryMenuContainer;
 StyledSecondaryMenuContainer.displayName = "StyledSecondaryMenuContainer";
 var StyledUserMenuButton = StyledButton;
 exports.StyledUserMenuButton = StyledUserMenuButton;
-var StyledUserMenuProfileListItem = (0, _index.withStyle)(_index2.StyledListItem, function (_ref8) {
-  var $theme = _ref8.$theme;
+var StyledUserMenuProfileListItem = (0, _index.withStyle)(_index2.StyledListItem, function (_ref7) {
+  var $theme = _ref7.$theme;
   return _objectSpread({
     paddingTop: '0',
     paddingBottom: '0'
@@ -193,8 +189,8 @@ var StyledUserMenuProfileListItem = (0, _index.withStyle)(_index2.StyledListItem
 });
 exports.StyledUserMenuProfileListItem = StyledUserMenuProfileListItem;
 StyledUserMenuProfileListItem.displayName = "StyledUserMenuProfileListItem";
-var StyledUserProfileTileContainer = (0, _index.styled)('div', function (_ref9) {
-  var $theme = _ref9.$theme;
+var StyledUserProfileTileContainer = (0, _index.styled)('div', function (_ref8) {
+  var $theme = _ref8.$theme;
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -208,8 +204,8 @@ var StyledUserProfileTileContainer = (0, _index.styled)('div', function (_ref9)
 });
 exports.StyledUserProfileTileContainer = StyledUserProfileTileContainer;
 StyledUserProfileTileContainer.displayName = "StyledUserProfileTileContainer";
-var StyledUserProfilePictureContainer = (0, _index.styled)('div', function (_ref10) {
-  var $theme = _ref10.$theme;
+var StyledUserProfilePictureContainer = (0, _index.styled)('div', function (_ref9) {
+  var $theme = _ref9.$theme;
   return _objectSpread({}, $theme.direction === 'rtl' ? {
     marginLeft: $theme.sizing.scale600
   } : {
@@ -218,12 +214,36 @@ var StyledUserProfilePictureContainer = (0, _index.styled)('div', function (_ref
 });
 exports.StyledUserProfilePictureContainer = StyledUserProfilePictureContainer;
 StyledUserProfilePictureContainer.displayName = "StyledUserProfilePictureContainer";
-var StyledUserProfileInfoContainer = (0, _index.styled)('div', function (_ref11) {
-  var $theme = _ref11.$theme;
+var StyledUserProfileInfoContainer = (0, _index.styled)('div', function (_ref10) {
+  var $theme = _ref10.$theme;
   return {
     boxSizing: 'border-box',
     alignSelf: 'center'
   };
 });
 exports.StyledUserProfileInfoContainer = StyledUserProfileInfoContainer;
-StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+var StyledDesktopMenuContainer = (0, _index.styled)('div', function (_ref11) {
+  var $theme = _ref11.$theme;
+  return {
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: "".concat($theme.colors.borderOpaque)
+  };
+});
+exports.StyledDesktopMenuContainer = StyledDesktopMenuContainer;
+StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
+var StyledDesktopMenu = (0, _index.styled)('div', function (_ref12) {
+  var $theme = _ref12.$theme;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: 'auto',
+    maxWidth: "".concat($theme.breakpoints.large, "px"),
+    paddingBlockStart: '18px',
+    paddingBlockEnd: '18px'
+  };
+});
+exports.StyledDesktopMenu = StyledDesktopMenu;
+StyledDesktopMenu.displayName = "StyledDesktopMenu";