baseui 11.0.3 → 11.1.2

package/es/select/select-component.js

@@ -11,7 +11,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import { getOverrides } from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import DeleteAlt from '../icon/delete-alt.js';
 import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
@@ -19,10 +19,10 @@ import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
-import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
+import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
-import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
+import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
 
 function Noop() {
@@ -592,7 +592,7 @@ class Select extends React.Component {
       }
 
       if (!prevState.isFocused && this.state.isFocused) {
-        document.addEventListener('click', this.handleClickOutside);
+        setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
       }
     }
   }
@@ -812,24 +812,27 @@ class Select extends React.Component {
       return;
     }
 
-    const sharedProps = this.getSharedProps();
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
     const {
       overrides = {}
     } = this.props;
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+    const sizes = {
+      [SIZE.mini]: 15,
+      [SIZE.compact]: 15,
+      [SIZE.default]: 18,
+      [SIZE.large]: 22
+    };
     return /*#__PURE__*/React.createElement(ClearIcon, _extends({
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
       role: "button",
-      overrides: {
-        Svg: {
-          component: StyledClearIcon,
-          props: overrides.ClearIcon && overrides.ClearIcon.props ? overrides.ClearIcon.props : {},
-          style: overrides.ClearIcon && overrides.ClearIcon.style ? overrides.ClearIcon.style : {}
-        }
-      }
+      size: sizes[this.props.size] || sizes[SIZE.default]
     }, sharedProps, clearIconProps));
   }
 
@@ -838,21 +841,35 @@ class Select extends React.Component {
       return null;
     }
 
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
     const {
       overrides = {}
     } = this.props;
     const [SelectArrow, selectArrowProps] = getOverrides(overrides.SelectArrow, TriangleDownIcon);
-    const sharedProps = this.getSharedProps();
-    return /*#__PURE__*/React.createElement(SelectArrow, _extends({
-      size: 16,
-      title: 'open',
-      overrides: {
-        Svg: {
-          component: StyledSelectArrow,
-          props: overrides.SelectArrow && overrides.SelectArrow.props ? overrides.SelectArrow.props : {},
-          style: overrides.SelectArrow && overrides.SelectArrow.style ? overrides.SelectArrow.style : {}
+    selectArrowProps.overrides = mergeOverrides({
+      Svg: {
+        style: ({
+          $theme,
+          $disabled
+        }) => {
+          return {
+            color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
+          };
         }
       }
+    }, selectArrowProps.overrides);
+    const sizes = {
+      [SIZE.mini]: 16,
+      [SIZE.compact]: 16,
+      [SIZE.default]: 20,
+      [SIZE.large]: 24
+    };
+    return /*#__PURE__*/React.createElement(SelectArrow, _extends({
+      size: sizes[this.props.size] || sizes[SIZE.default],
+      title: 'open'
     }, sharedProps, selectArrowProps));
   }
 

package/es/table-semantic/styled-components.js

@@ -118,6 +118,20 @@ export const StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, ({
   };
 });
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
+export const StyledSortIconContainer = styled('span', ({
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    top: '50%',
+    right: $theme.sizing.scale500,
+    transform: 'translateY(-50%)'
+  };
+}); // No longer used, but will maintain for some time to support existing usage
+
+StyledSortIconContainer.displayName = "StyledSortIconContainer";
 export const StyledSortAscIcon = styled(ChevronUp, ({
   $theme
 }) => {

package/es/table-semantic/table-builder.js

@@ -9,8 +9,11 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortAscIcon, StyledSortDescIcon, StyledSortNoneIcon } from './styled-components.js';
+import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortIconContainer } from './styled-components.js';
 import { getOverrides } from '../helpers/overrides.js';
+import Blank from '../icon/blank.js';
+import ChevronDown from '../icon/chevron-down.js';
+import ChevronUp from '../icon/chevron-up.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 export default class TableBuilder extends React.Component {
   constructor(...args) {
@@ -64,9 +67,10 @@ export default class TableBuilder extends React.Component {
     const [TableBodyCell, tableBodyCellProps] = getOverrides(overrides.TableBodyCell, StyledTableBodyCell);
     const [TableLoadingMessage, tableLoadingMessageProps] = getOverrides(overrides.TableLoadingMessage, StyledTableLoadingMessage);
     const [TableEmptyMessage, tableEmptyMessageProps] = getOverrides(overrides.TableEmptyMessage, StyledTableEmptyMessage);
-    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, StyledSortAscIcon);
-    const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, StyledSortDescIcon);
-    const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, StyledSortNoneIcon);
+    const [SortIconContainer, sortIconContainerProps] = getOverrides(overrides.SortIconContainer, StyledSortIconContainer);
+    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, ChevronUp);
+    const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, ChevronDown);
+    const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, Blank);
     const columns = React.Children.toArray(children).filter(Boolean).map(child => child.props);
 
     function renderHeader(col, colIndex, isFocusVisible) {
@@ -91,6 +95,7 @@ export default class TableBuilder extends React.Component {
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
           sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortAscIconProps));
@@ -99,6 +104,7 @@ export default class TableBuilder extends React.Component {
 
         case 'DESC':
           sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortDescIconProps));
@@ -107,6 +113,7 @@ export default class TableBuilder extends React.Component {
 
         default:
           sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortNoneIconProps));
@@ -130,7 +137,7 @@ export default class TableBuilder extends React.Component {
             onSort && onSort(col.id);
           }
         }
-      }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, sortIcon);
+      }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, sortIconContainerProps, sortIcon));
     }
 
     function renderCell(col, colIndex, row, rowIndex, lastRowindex) {

package/es/textarea/textarea.js

@@ -18,21 +18,25 @@ class Textarea extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isFocused: this.props.autoFocus || false
+      isFocused: this.props.autoFocus && !this.props.readOnly || false
     });
 
     _defineProperty(this, "onFocus", e => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: true
+        });
+        this.props.onFocus(e);
+      }
     });
 
     _defineProperty(this, "onBlur", e => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: false
+        });
+        this.props.onBlur(e);
+      }
     });
   }
 
@@ -52,6 +56,7 @@ class Textarea extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "textarea",
       $isFocused: this.state.isFocused,
+      $isReadOnly: this.props.readOnly,
       $disabled: this.props.disabled,
       $error: this.props.error,
       $positive: this.props.positive,
@@ -70,6 +75,7 @@ class Textarea extends React.Component {
 _defineProperty(Textarea, "defaultProps", {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   error: false,
   name: '',
   onBlur: () => {},

package/es/themes/dark-theme/color-component-tokens.js

@@ -13,6 +13,14 @@ const tagHoverBackground = `rgba(255, 255, 255, 0.2)`;
 // need to be overrideable through primitives
 
 export default ((themePrimitives = colorTokens) => ({
+  bannerActionLowInfo: themePrimitives.accent600,
+  bannerActionLowNegative: themePrimitives.negative600,
+  bannerActionLowPositive: themePrimitives.positive600,
+  bannerActionLowWarning: themePrimitives.warning600,
+  bannerActionHighInfo: themePrimitives.accent500,
+  bannerActionHighNegative: themePrimitives.negative600,
+  bannerActionHighPositive: themePrimitives.positive600,
+  bannerActionHighWarning: themePrimitives.warning600,
   // Buttons
   buttonPrimaryFill: themePrimitives.primary,
   buttonPrimaryText: themePrimitives.black,

package/es/themes/light-theme/color-component-tokens.js

@@ -13,6 +13,14 @@ const tagHoverBackground = `rgba(0, 0, 0, 0.08)`;
 // overrideable through primitives (`foundation` )
 
 export default ((themePrimitives = colorTokens) => ({
+  bannerActionLowInfo: themePrimitives.accent100,
+  bannerActionLowNegative: themePrimitives.negative100,
+  bannerActionLowPositive: themePrimitives.positive100,
+  bannerActionLowWarning: themePrimitives.warning200,
+  bannerActionHighInfo: themePrimitives.accent500,
+  bannerActionHighNegative: themePrimitives.negative500,
+  bannerActionHighPositive: themePrimitives.positive500,
+  bannerActionHighWarning: themePrimitives.warning200,
   // Buttons
   buttonPrimaryFill: themePrimitives.primary,
   buttonPrimaryText: themePrimitives.white,

package/es/tree-view/tree-label.js

@@ -49,7 +49,15 @@ const TreeLabel = ({
   return (
     /*#__PURE__*/
     // $FlowExpectedError[cannot-spread-inexact]
-    React.createElement(TreeItemContent, _extends({}, sharedProps, props), hasChildren && /*#__PURE__*/React.createElement(IconContainer, _extends({}, sharedProps, getOverrideProps(IconContainerOverride)), !isExpanded ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({}, sharedProps, LeftProps)) : /*#__PURE__*/React.createElement(Right, _extends({}, sharedProps, RightProps))) : /*#__PURE__*/React.createElement(CollapseIcon, _extends({}, sharedProps, getOverrideProps(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/React.createElement(LeafIconContainer, _extends({}, sharedProps, getOverrideProps(LeafIconContainerOverride)), /*#__PURE__*/React.createElement(LeafIcon, _extends({}, sharedProps, getOverrideProps(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
+    React.createElement(TreeItemContent, _extends({}, sharedProps, props), hasChildren && /*#__PURE__*/React.createElement(IconContainer, _extends({}, sharedProps, getOverrideProps(IconContainerOverride)), !isExpanded ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
+      size: 16
+    }, sharedProps, LeftProps)) : /*#__PURE__*/React.createElement(Right, _extends({
+      size: 16
+    }, sharedProps, RightProps))) : /*#__PURE__*/React.createElement(CollapseIcon, _extends({
+      size: 16
+    }, sharedProps, getOverrideProps(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/React.createElement(LeafIconContainer, _extends({}, sharedProps, getOverrideProps(LeafIconContainerOverride)), /*#__PURE__*/React.createElement(LeafIcon, _extends({
+      size: 16
+    }, sharedProps, getOverrideProps(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
   );
 };
 

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

@@ -22,13 +22,12 @@ 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';
 import { KIND, POSITION } from './constants.js';
 import MobileNav from './mobile-menu.js';
 import UserMenu from './user-menu.js';
-import { StyledRoot, StyledSpacing, StyledPrimaryMenuContainer, StyledSubnavContainer, StyledSecondaryMenuContainer, StyledAppName, StyledMainMenuItem } from './styled-components.js';
+import { StyledRoot, StyledSpacing, StyledPrimaryMenuContainer, StyledSecondaryMenuContainer, StyledAppName, StyledMainMenuItem, StyledDesktopMenuContainer, StyledDesktopMenu } from './styled-components.js';
 import { defaultMapItemToNode, mapItemsActive } from './utils.js';
 
 function MainMenuItem(props) {
@@ -95,19 +94,12 @@ function SecondaryMenu(props) {
       _props$overrides2 = props.overrides,
       overrides = _props$overrides2 === void 0 ? {} : _props$overrides2;
 
-  var _getOverrides3 = getOverrides(overrides.SubnavContainer, StyledSubnavContainer),
+  var _getOverrides3 = getOverrides(overrides.SecondaryMenuContainer, StyledSecondaryMenuContainer),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-      SubnavContainer = _getOverrides4[0],
-      subnavContainerProps = _getOverrides4[1];
+      SecondaryMenuContainer = _getOverrides4[0],
+      secondaryMenuContainerProps = _getOverrides4[1];
 
-  var _getOverrides5 = getOverrides(overrides.SecondaryMenuContainer, StyledSecondaryMenuContainer),
-      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-      SecondaryMenuContainer = _getOverrides6[0],
-      secondaryMenuContainerProps = _getOverrides6[1];
-
-  return /*#__PURE__*/React.createElement(SubnavContainer, subnavContainerProps, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(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) {
@@ -123,7 +115,7 @@ function SecondaryMenu(props) {
         overrides: overrides
       })
     );
-  })))));
+  }));
 }
 
 export default function AppNavBar(props) {
@@ -154,25 +146,35 @@ export default function AppNavBar(props) {
     return props.mainItems || [];
   }, [props.mainItems, props.isMainItemActive]);
 
-  var _getOverrides7 = getOverrides(overrides.Root, StyledRoot),
+  var _getOverrides5 = getOverrides(overrides.Root, StyledRoot),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      Root = _getOverrides6[0],
+      rootProps = _getOverrides6[1];
+
+  var _getOverrides7 = getOverrides(overrides.Spacing, StyledSpacing),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-      Root = _getOverrides8[0],
-      rootProps = _getOverrides8[1];
+      Spacing = _getOverrides8[0],
+      spacingProps = _getOverrides8[1];
 
-  var _getOverrides9 = getOverrides(overrides.Spacing, StyledSpacing),
+  var _getOverrides9 = getOverrides(overrides.AppName, StyledAppName),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      Spacing = _getOverrides10[0],
-      spacingProps = _getOverrides10[1];
+      AppName = _getOverrides10[0],
+      appNameProps = _getOverrides10[1];
 
-  var _getOverrides11 = getOverrides(overrides.AppName, StyledAppName),
+  var _getOverrides11 = getOverrides(overrides.PrimaryMenuContainer, StyledPrimaryMenuContainer),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      AppName = _getOverrides12[0],
-      appNameProps = _getOverrides12[1];
+      PrimaryMenuContainer = _getOverrides12[0],
+      primaryMenuContainerProps = _getOverrides12[1];
 
-  var _getOverrides13 = getOverrides(overrides.PrimaryMenuContainer, StyledPrimaryMenuContainer),
+  var _getOverrides13 = getOverrides(overrides.DesktopMenuContainer, StyledDesktopMenuContainer),
       _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      PrimaryMenuContainer = _getOverrides14[0],
-      primaryMenuContainerProps = _getOverrides14[1];
+      DesktopMenuContainer = _getOverrides14[0],
+      desktopMenuContainerProps = _getOverrides14[1];
+
+  var _getOverrides15 = getOverrides(overrides.DesktopMenu, StyledDesktopMenu),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      DesktopMenu = _getOverrides16[0],
+      desktopMenuProps = _getOverrides16[1];
 
   var secondaryMenu;
   var desktopSubNavPosition = POSITION.horizontal;
@@ -183,9 +185,7 @@ export default function AppNavBar(props) {
     className: css(_defineProperty({}, "@media screen and (min-width: ".concat(theme.breakpoints.large, "px)"), {
       display: 'none'
     }))
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-    span: [4, 8, 0]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(MobileNav, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)))), secondaryMenu && mobileSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
+  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(MobileNav, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)), secondaryMenu && mobileSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
     items: secondaryMenu,
     mapItemToNode: mapItemToNode,
     onSelect: onMainItemSelect,
@@ -194,11 +194,7 @@ export default function AppNavBar(props) {
     className: css(_defineProperty({}, "@media screen and (max-width: ".concat(theme.breakpoints.large - 1, "px)"), {
       display: 'none'
     }))
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-    span: [0, 3, 3]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, /*#__PURE__*/React.createElement(AppName, appNameProps, title))), /*#__PURE__*/React.createElement(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) {
@@ -219,9 +215,7 @@ export default function AppNavBar(props) {
       onSelect: onMainItemSelect,
       overrides: overrides
     });
-  }))), userItems.length ? /*#__PURE__*/React.createElement(Cell, {
-    span: [0, 1, 1]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, /*#__PURE__*/React.createElement(UserMenu, {
+  })), userItems.length ? /*#__PURE__*/React.createElement(UserMenu, {
     mapItemToNode: mapItemToNode,
     onItemSelect: onUserItemSelect,
     overrides: overrides,
@@ -229,7 +223,7 @@ export default function AppNavBar(props) {
     usernameSubtitle: usernameSubtitle,
     userImgUrl: userImgUrl,
     userItems: userItems
-  }))) : null), secondaryMenu && desktopSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
+  }) : null)), secondaryMenu && desktopSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
     items: secondaryMenu,
     mapItemToNode: mapItemToNode,
     onSelect: onMainItemSelect,

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

@@ -11,6 +11,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled, withStyle } from '../styles/index.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
 import { StyledListItem } from '../menu/index.js';
 import { KIND } from './constants.js';
 var StyledButton = styled('button', function (_ref) {
@@ -46,21 +47,49 @@ var StyledButton = styled('button', function (_ref) {
 StyledButton.displayName = "StyledButton";
 export var StyledRoot = styled('div', function (props) {
   var $theme = props.$theme;
-  return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
+  var mediaQueries = getMediaQueries($theme.breakpoints);
+  var breakpoints = Object.values($theme.breakpoints).sort();
+  var margins = [];
+
+  if (Array.isArray($theme.grid.margins)) {
+    for (var i = 0; i < breakpoints.length; i++) {
+      var margin = $theme.grid.margins[i];
+
+      if (margin == null) {
+        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
+      } else {
+        margins.push(margin);
+      }
+    }
+  } else {
+    for (var _i = 0; _i < breakpoints.length; _i++) {
+      margins.push($theme.grid.margins);
+    }
+  }
+
+  var style = _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
     boxSizing: 'border-box',
     backgroundColor: $theme.colors.backgroundPrimary,
-    boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.08)',
-    width: '100%'
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: "".concat($theme.colors.borderOpaque),
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px'
   });
+
+  for (var _i2 = 1; _i2 < mediaQueries.length; _i2++) {
+    var _margin = Array.isArray($theme.grid.margins) ? $theme.grid.margins[_i2] : $theme.grid.margins;
+
+    style[mediaQueries[_i2]] = {
+      paddingInlineStart: _margin + 'px',
+      paddingInlineEnd: _margin + 'px'
+    };
+  }
+
+  return style;
 });
 StyledRoot.displayName = "StyledRoot";
-export var StyledSubnavContainer = styled('div', function (_ref2) {
-  var $theme = _ref2.$theme;
-  return {
-    boxSizing: 'border-box',
-    boxShadow: '0px -1px 0px rgba(0, 0, 0, 0.08)'
-  };
-});
+export var StyledSubnavContainer = styled('div', {});
 StyledSubnavContainer.displayName = "StyledSubnavContainer";
 export var StyledSpacing = styled('div', function (props) {
   var $theme = props.$theme;
@@ -77,16 +106,16 @@ export var StyledSpacing = styled('div', function (props) {
   });
 });
 StyledSpacing.displayName = "StyledSpacing";
-export var StyledAppName = styled('div', function (_ref4) {
-  var $theme = _ref4.$theme;
+export var StyledAppName = styled('div', function (_ref3) {
+  var $theme = _ref3.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font550), {}, _defineProperty({
     color: $theme.colors.primary,
     textDecoration: 'none'
   }, $theme.mediaQuery.medium, _objectSpread({}, $theme.typography.font650)));
 });
 StyledAppName.displayName = "StyledAppName";
-export var StyledSideMenuButton = withStyle(StyledButton, function (_ref5) {
-  var $theme = _ref5.$theme;
+export var StyledSideMenuButton = withStyle(StyledButton, function (_ref4) {
+  var $theme = _ref4.$theme;
   return _objectSpread(_objectSpread({}, $theme.direction === 'rtl' ? {
     marginLeft: $theme.sizing.scale600
   } : {
@@ -99,16 +128,18 @@ export var StyledSideMenuButton = withStyle(StyledButton, function (_ref5) {
   });
 });
 StyledSideMenuButton.displayName = "StyledSideMenuButton";
-export var StyledPrimaryMenuContainer = styled('div', function (_ref6) {
-  var $theme = _ref6.$theme;
+export var StyledPrimaryMenuContainer = 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
   };
 });
 StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
@@ -152,8 +183,8 @@ export var StyledMainMenuItem = styled('div', function (props) {
   };
 });
 StyledMainMenuItem.displayName = "StyledMainMenuItem";
-export var StyledSecondaryMenuContainer = styled('div', function (_ref7) {
-  var $theme = _ref7.$theme;
+export var StyledSecondaryMenuContainer = styled('div', function (_ref6) {
+  var $theme = _ref6.$theme;
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -161,14 +192,16 @@ export var StyledSecondaryMenuContainer = styled('div', function (_ref7) {
     flexDirection: 'row',
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
+    margin: 'auto',
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
     alignItems: 'stretch',
     overflow: 'auto'
   };
 });
 StyledSecondaryMenuContainer.displayName = "StyledSecondaryMenuContainer";
 export var StyledUserMenuButton = StyledButton;
-export var StyledUserMenuProfileListItem = withStyle(StyledListItem, function (_ref8) {
-  var $theme = _ref8.$theme;
+export var StyledUserMenuProfileListItem = withStyle(StyledListItem, function (_ref7) {
+  var $theme = _ref7.$theme;
   return _objectSpread({
     paddingTop: '0',
     paddingBottom: '0'
@@ -179,8 +212,8 @@ export var StyledUserMenuProfileListItem = withStyle(StyledListItem, function (_
   });
 });
 StyledUserMenuProfileListItem.displayName = "StyledUserMenuProfileListItem";
-export var StyledUserProfileTileContainer = styled('div', function (_ref9) {
-  var $theme = _ref9.$theme;
+export var StyledUserProfileTileContainer = styled('div', function (_ref8) {
+  var $theme = _ref8.$theme;
   return {
     boxSizing: 'border-box',
     height: '100%',
@@ -193,8 +226,8 @@ export var StyledUserProfileTileContainer = styled('div', function (_ref9) {
   };
 });
 StyledUserProfileTileContainer.displayName = "StyledUserProfileTileContainer";
-export var StyledUserProfilePictureContainer = styled('div', function (_ref10) {
-  var $theme = _ref10.$theme;
+export var StyledUserProfilePictureContainer = styled('div', function (_ref9) {
+  var $theme = _ref9.$theme;
   return _objectSpread({}, $theme.direction === 'rtl' ? {
     marginLeft: $theme.sizing.scale600
   } : {
@@ -202,11 +235,29 @@ export var StyledUserProfilePictureContainer = styled('div', function (_ref10) {
   });
 });
 StyledUserProfilePictureContainer.displayName = "StyledUserProfilePictureContainer";
-export var StyledUserProfileInfoContainer = styled('div', function (_ref11) {
-  var $theme = _ref11.$theme;
+export var StyledUserProfileInfoContainer = styled('div', function (_ref10) {
+  var $theme = _ref10.$theme;
   return {
     boxSizing: 'border-box',
     alignSelf: 'center'
   };
 });
-StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+export var StyledDesktopMenuContainer = styled('div', function (_ref11) {
+  var $theme = _ref11.$theme;
+  return {};
+});
+StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
+export var StyledDesktopMenu = styled('div', function (_ref12) {
+  var $theme = _ref12.$theme;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: 'auto',
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
+    paddingBlockStart: '18px',
+    paddingBlockEnd: '18px'
+  };
+});
+StyledDesktopMenu.displayName = "StyledDesktopMenu";