baseui 11.0.2 → 11.1.1

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

@@ -48,19 +48,11 @@ export var StyledRoot = 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
   });
 });
 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 +69,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 +91,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 +146,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 +155,16 @@ export var StyledSecondaryMenuContainer = styled('div', function (_ref7) {
     flexDirection: 'row',
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
+    margin: 'auto',
+    maxWidth: "".concat($theme.breakpoints.large, "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 +175,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 +189,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 +198,33 @@ 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 {
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: "".concat($theme.colors.borderOpaque)
+  };
+});
+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.breakpoints.large, "px"),
+    paddingBlockStart: '18px',
+    paddingBlockEnd: '18px'
+  };
+});
+StyledDesktopMenu.displayName = "StyledDesktopMenu";

package/esm/badge/badge.js

@@ -0,0 +1,97 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+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 { getOverrides } from '../helpers/overrides.js';
+import { StyledBadge, StyledRoot, StyledPositioner } from './styled-components.js';
+import { PLACEMENT, ROLE, SHAPE, HIERARCHY } from './constants.js';
+import { getAnchorFromChildren } from './utils.js';
+
+var Badge = function Badge(_ref) {
+  var children = _ref.children,
+      content = _ref.content,
+      color = _ref.color,
+      _ref$shape = _ref.shape,
+      shape = _ref$shape === void 0 ? SHAPE.rectangle : _ref$shape,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? PLACEMENT.topRight : _ref$placement,
+      hierarchy = _ref.hierarchy,
+      horizontalOffset = _ref.horizontalOffset,
+      verticalOffset = _ref.verticalOffset,
+      hidden = _ref.hidden,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  var _getOverrides = getOverrides(overrides.Badge, StyledBadge),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Badge = _getOverrides2[0],
+      badgeProps = _getOverrides2[1];
+
+  var _getOverrides3 = getOverrides(overrides.Root, StyledRoot),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Root = _getOverrides4[0],
+      rootProps = _getOverrides4[1];
+
+  var _getOverrides5 = getOverrides(overrides.Positioner, StyledPositioner),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      Positioner = _getOverrides6[0],
+      positionerProps = _getOverrides6[1];
+
+  var anchor = getAnchorFromChildren(children);
+  var VALID_RECT_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topRight, PLACEMENT.bottomRight, PLACEMENT.bottomLeft];
+
+  if (process.env.NODE_ENV !== "production") {
+    if (shape === SHAPE.rectangle && !VALID_RECT_PLACEMENTS.includes(placement)) {
+      console.warn('Rectangle badges should only be placed in a corner or used inline');
+    }
+
+    if (shape === SHAPE.rectangle && hierarchy === HIERARCHY.secondary && anchor) {
+      console.warn('Secondary badges should not be positioned. Use the inline version of this badge instead.');
+    }
+
+    if (shape === SHAPE.pill && hierarchy === HIERARCHY.secondary) {
+      console.warn('Pill badges should only be used with primary hierarchy');
+    }
+  } // If there's no anchor, render the badge inline
+
+
+  if (!anchor) {
+    return /*#__PURE__*/React.createElement(Badge, _extends({
+      $hierarchy: hierarchy,
+      $shape: shape,
+      $color: color,
+      $hidden: hidden
+    }, badgeProps), content);
+  }
+
+  return /*#__PURE__*/React.createElement(Root, rootProps, anchor, /*#__PURE__*/React.createElement(Positioner, _extends({
+    $horizontalOffset: horizontalOffset,
+    $verticalOffset: verticalOffset,
+    $placement: placement,
+    $role: ROLE.badge
+  }, positionerProps), /*#__PURE__*/React.createElement(Badge, _extends({
+    $hierarchy: hierarchy,
+    $shape: shape,
+    $color: color,
+    $hidden: hidden
+  }, badgeProps), content)));
+};
+
+export default Badge;

package/esm/badge/constants.js

@@ -0,0 +1,42 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export var HIERARCHY = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary'
+});
+export var SHAPE = Object.freeze({
+  pill: 'pill',
+  rectangle: 'rectangle'
+});
+export var COLOR = Object.freeze({
+  accent: 'accent',
+  primary: 'primary',
+  positive: 'positive',
+  negative: 'negative',
+  warning: 'warning'
+});
+export var PLACEMENT = Object.freeze({
+  topLeft: 'topLeft',
+  topRight: 'topRight',
+  bottomRight: 'bottomRight',
+  bottomLeft: 'bottomLeft',
+  topLeftEdge: 'topLeftEdge',
+  topEdge: 'topEdge',
+  topRightEdge: 'topRightEdge',
+  bottomRightEdge: 'bottomRightEdge',
+  bottomEdge: 'bottomEdge',
+  bottomLeftEdge: 'bottomLeftEdge',
+  leftTopEdge: 'leftTopEdge',
+  rightTopEdge: 'rightTopEdge',
+  rightBottomEdge: 'rightBottomEdge',
+  leftBottomEdge: 'leftBottomEdge'
+});
+export var ROLE = Object.freeze({
+  badge: 'badge',
+  notificationCircle: 'notificationCircle',
+  hintDot: 'hintDot'
+});