baseui 11.0.1 → 11.1.0

package/datepicker/types.js.flow

@@ -27,10 +27,6 @@ import type { OptionT } from '../select/index.js';
 // flowlint-next-line unclear-type:off
 type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/locale/index.js.flow
 
-export type DateValueT<T> = ?T | Array<?T>;
-
-type onChangeT<T> = ({ date: DateValueT<T> }) => mixed;
-
 export type DensityT = $Keys<typeof DENSITY>;
 
 export type DatepickerOverridesT = {
@@ -92,13 +88,13 @@ export type DayPropsT<T = Date> = {
   month: ?number,
   onBlur: ({ event: Event, date: T }) => mixed,
   onFocus: ({ event: Event, date: T }) => mixed,
-  onSelect: ({ date: DateValueT<T> }) => mixed,
+  onSelect: ({ date: T | Array<?T> }) => mixed,
   onClick: ({ event: Event, date: T }) => mixed,
   onMouseOver: ({ event: Event, date: T }) => mixed,
   onMouseLeave: ({ event: Event, date: T }) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: DateValueT<T>,
+  value: ?T | $ReadOnlyArray<?T>,
 };
 
 export type DayStateT = {
@@ -127,15 +123,16 @@ export type WeekPropsT<T = Date> = {
   onDayFocus: ({ date: T, event: Event }) => mixed,
   onDayMouseOver: ({ date: T, event: Event }) => mixed,
   onDayMouseLeave: ({ date: T, event: Event }) => mixed,
-  onChange?: onChangeT<T>,
+  onChange?: ({ +date: ?T | Array<?T> }) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: DateValueT<T>,
+  value: ?T | $ReadOnlyArray<?T>,
   hasLockedBehavior: boolean,
   selectedInput?: InputRoleT,
 };
 
-export type MonthPropsT<T = Date> = WeekPropsT<T> & {
+export type MonthPropsT<T = Date> = {
+  ...WeekPropsT<T>,
   fixedHeight?: boolean,
 };
 
@@ -193,7 +190,7 @@ export type CalendarPropsT<T = Date> = {
   /** Event handler that is called when the current rendered month's year is changed. */
   onYearChange?: ({ date: T }) => mixed,
   /** Event handler that is called when a new date is selected. */
-  onChange?: onChangeT<T>,
+  onChange?: ({ +date: ?T | Array<?T> }) => mixed,
   /** Event handler that is called when a selection is made using the quick select menu. */
   onQuickSelectChange?: (option?: QuickSelectOption<T>) => mixed,
   /** Sets the orientation of the calendar when multiple months are displayed */
@@ -208,7 +205,7 @@ export type CalendarPropsT<T = Date> = {
   /** Defines if tabbing inside the calendar is circled within it. */
   trapTabbing?: boolean,
   /** Currently selected date. */
-  value?: DateValueT<T>,
+  value?: ?T | $ReadOnlyArray<?T>,
   fixedHeight?: boolean,
   /** Determines whether user clicked startDate or endDate input to trigger calendar open */
   selectedInput?: InputRoleT,
@@ -225,7 +222,8 @@ export type QuickSelectOption<T> = {
   endDate?: T,
 };
 
-export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
+export type DatepickerPropsT<T = Date> = {
+  ...CalendarPropsT<T>,
   'aria-label'?: string,
   'aria-labelledby'?: string,
   'aria-describedby'?: ?string,
@@ -238,14 +236,18 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   required?: boolean,
   clearable?: boolean,
   displayValueAtRangeIndex?: number,
-  formatDisplayValue?: (date: DateValueT<T>, formatString: string) => string,
+  formatDisplayValue?: (date: ?T | $ReadOnlyArray<?T>, formatString: string) => string,
   formatString: string,
   /** Where to mount the popover */
   mountNode?: HTMLElement,
+  /** When single picker, fn is always called. When range picker, fn is called when start and end date are selected. */
+  onChange?: ({ date: ?T | Array<T> }) => mixed,
   /** Called when calendar is closed */
   onClose?: () => mixed,
   /** Called when calendar is opened */
   onOpen?: () => mixed,
+  /** When single picker, fn is always called. When range picker, fn is called when either start or end date changes. */
+  onRangeChange?: ({ +date: ?T | Array<?T> }) => mixed,
   mask?: string | null,
   /** Determines whether startDate and endDate should be updated independently of eachother */
   rangedCalendarBehavior?: RangedCalendarBehaviorT,
@@ -253,6 +255,7 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   separateRangeInputs?: boolean,
   startDateLabel?: string,
   endDateLabel?: string,
+  value?: ?T | $ReadOnlyArray<?T>,
 };
 
 export type SharedStylePropsT = {
@@ -289,7 +292,7 @@ export type StateChangeTypeT = ?$Values<typeof STATE_CHANGE_TYPE>;
 
 export type ContainerStateT<T = Date> = {
   /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: DateValueT<T>,
+  value?: ?T | $ReadOnlyArray<?T>,
 };
 
 export type NavigationContainerStateT<T = Date> = {
@@ -310,46 +313,21 @@ export type StateReducerT<T = Date> = (
   currentState: ContainerStateT<T>
 ) => ContainerStateT<T>;
 
-export type NavigationContainerStateReducerT<T = Date> = (
-  stateType: StateChangeTypeT,
-  nextState: NavigationContainerStateT<T>,
-  currentState: NavigationContainerStateT<T>
-) => NavigationContainerStateT<T>;
-
 export type StatefulContainerPropsT<PropsT, T = Date> = {
   children: (PropsT) => React.Node,
   /** Initial state of an uncontrolled datepicker component. */
   initialState: ContainerStateT<T>,
   /** A state change handler. */
   stateReducer: StateReducerT<T>,
-  /** Event handler that is called when a date/time is selected. */
-  onChange?: onChangeT<T>,
+  /** When single picker, fn is called when date/time is selected. When range picker, fn is called when both start and end are selected. */
+  onChange?: ({ date: ?T | Array<T> }) => mixed,
+  /** When single picker, fn is called when date/time is selected. When range picker, fn is called when either start or end date changes. */
+  onRangeChange?: ({ +date: ?T | Array<?T> }) => mixed,
   adapter?: DateIOAdapter<T>,
   /** Should the date value be stored as an array or single value. */
   range?: boolean,
 };
 
-// This type is seemingly not used anywhere
-export type NavigationContainerPropsT<T = Date> = {
-  children: (CalendarPropsT<T>) => React.Node,
-  range?: boolean,
-  highlightedDate?: ?Date,
-  /** Day's `mouseover` event handler. */
-  onDayMouseOver: (params: { date: Date, event: Event }) => mixed,
-  /** Day's `mouseleave` event handler. */
-  onDayMouseLeave: (params: { date: Date, event: Event }) => mixed,
-  /** Event handler that is called when a new date is selected. */
-  onChange: onChangeT<T>,
-  /** Event handler that is called when the current rendered month is changed. */
-  onMonthChange?: ({ date: T }) => mixed,
-  /** Event handler that is called when the current rendered year is changed. */
-  onYearChange?: ({ date: T }) => mixed,
-  /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: DateValueT<T>,
-  stateReducer: NavigationContainerStateReducerT<T>,
-  trapTabbing: boolean,
-};
-
 export type StatefulDatepickerPropsT<PropsT, T = Date> = $Diff<
   StatefulContainerPropsT<PropsT, T>,
   {

package/datepicker/utils/date-helpers.js

@@ -93,7 +93,7 @@ var DateHelpers = function DateHelpers(_adapter) {
     var UtilsClass = adapter.constructor;
     var className = adapter.constructor.name; // This ensures that if the adapter class isn't
     // supported it just falls back the default formats
-    // NOTE: in e2e tests puppeteer seems to add
+    // NOTE: in e2e tests playwright seems to add
     // a JSHandle wrapping class to all objects
     // so className always resolves to JSHandle:e
     // and if falls back to the default

package/datepicker/utils/date-helpers.js.flow

@@ -68,7 +68,7 @@ class DateHelpers<T> {
     // This ensures that if the adapter class isn't
     // supported it just falls back the default formats
 
-    // NOTE: in e2e tests puppeteer seems to add
+    // NOTE: in e2e tests playwright seems to add
     // a JSHandle wrapping class to all objects
     // so className always resolves to JSHandle:e
     // and if falls back to the default

package/dnd-list/index.d.ts

@@ -1,21 +1,18 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
-import {
-  arrayMove as arrayMoveT,
-  arrayRemove as arrayRemoveT,
-} from 'react-movable';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
+import { arrayMove as arrayMoveT, arrayRemove as arrayRemoveT } from 'react-movable';
 
 // export {arrayMove, arrayRemove} from 'react-movable';
 
-export interface STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
+};
 
 export type StateReducer = (
-  stateChangeType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+  stateChangeType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
   nextState: State,
-  currentState: State,
+  currentState: State
 ) => State;
 
 export interface StatefulListProps {
@@ -23,17 +20,11 @@ export interface StatefulListProps {
   stateReducer?: StateReducer;
   removable?: boolean;
   removableByMove?: boolean;
-  onChange?: (
-    params: {
-      newState: React.ReactNode[];
-      oldIndex: number;
-      newIndex: number;
-    },
-  ) => any;
+  onChange?: (params: { newState: React.ReactNode[]; oldIndex: number; newIndex: number }) => any;
   overrides?: ListOverrides;
 }
 
-export const StatefulList: React.FC<StatefulListProps>;
+export declare const StatefulList: React.FC<StatefulListProps>;
 
 export interface State {
   items: React.ReactNode[];
@@ -43,14 +34,11 @@ export type StatefulComponentContainerProps = StatefulListProps & {
   children: React.ReactNode;
 };
 
-export class StatefulListContainer extends React.Component<
-  StatefulComponentContainerProps,
-  State
-> {
-  onChange({oldIndex, newIndex}: {oldIndex: number; newIndex: number}): void;
+export class StatefulListContainer extends React.Component<StatefulComponentContainerProps, State> {
+  onChange({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }): void;
   internalSetState(
-    type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
-    changes: State,
+    type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
+    changes: State
   ): void;
 }
 
@@ -75,19 +63,18 @@ export interface ListProps {
   removable?: boolean;
   removableByMove?: boolean;
   items?: React.ReactNode[];
-  onChange?: (args: {oldIndex: number; newIndex: number}) => any;
+  onChange?: (args: { oldIndex: number; newIndex: number }) => any;
   overrides?: ListOverrides;
 }
 
 export class List extends React.Component<ListProps> {}
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledList: StyletronComponent<any>;
-export const StyledItem: StyletronComponent<any>;
-export const StyledDragHandle: StyletronComponent<any>;
-export const StyledCloseHandle: StyletronComponent<any>;
-export const StyledLabel: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledList: StyletronComponent<any>;
+export declare const StyledItem: StyletronComponent<any>;
+export declare const StyledDragHandle: StyletronComponent<any>;
+export declare const StyledCloseHandle: StyletronComponent<any>;
+export declare const StyledLabel: StyletronComponent<any>;
 
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
-export const arrayMove: typeof arrayMoveT;
-export const arrayRemove: typeof arrayRemoveT;
+export declare const arrayMove: typeof arrayMoveT;
+export declare const arrayRemove: typeof arrayRemoveT;

package/drawer/index.d.ts

@@ -1,40 +1,40 @@
 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 SIZE {
+export declare const SIZE: {
   default: 'default';
   full: 'full';
   auto: 'auto';
-}
+};
 
-export interface SIZE_DIMENSIONS {
+export declare const SIZE_DIMENSIONS: {
   default: '500px';
   full: '100%';
   auto: 'auto';
-}
+};
 
-export interface ANCHOR {
+export declare const ANCHOR: {
   left: 'left';
   right: 'right';
   top: 'top';
   bottom: 'bottom';
-}
+};
 
-export interface CLOSE_SOURCE {
+export declare const CLOSE_SOURCE: {
   closeButton: 'closeButton';
   backdrop: 'backdrop';
   escape: 'escape';
-}
+};
 
 export interface SharedStylePropsArg {
   children?: React.ReactNode;
   $animating?: boolean;
   $isVisible?: boolean;
   $isOpen?: boolean;
-  $size?: SIZE[keyof SIZE];
+  $size?: typeof SIZE[keyof typeof SIZE];
   $closeable?: boolean;
-  $anchor?: ANCHOR[keyof ANCHOR];
+  $anchor?: typeof ANCHOR[keyof typeof ANCHOR];
 }
 
 export interface DrawerOverrides {
@@ -53,10 +53,10 @@ export interface DrawerProps {
   renderAll?: boolean;
   isOpen?: boolean;
   mountNode?: HTMLElement;
-  onClose?: (args: {closeSource?: CLOSE_SOURCE[keyof CLOSE_SOURCE]}) => any;
+  onClose?: (args: { closeSource?: typeof CLOSE_SOURCE[keyof typeof CLOSE_SOURCE] }) => any;
   overrides?: DrawerOverrides;
-  size?: SIZE[keyof SIZE] | string;
-  anchor?: ANCHOR[keyof ANCHOR] | string;
+  size?: typeof SIZE[keyof typeof SIZE] | string;
+  anchor?: typeof ANCHOR[keyof typeof ANCHOR] | string;
   showBackdrop?: boolean;
   onBackdropClick?: (event: React.MouseEvent<HTMLElement>) => any;
   onEscapeKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => any;
@@ -76,21 +76,16 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
   clearTimers(): void;
   didOpen(): void;
   didClose(): void;
-  triggerClose(source: CLOSE_SOURCE[keyof CLOSE_SOURCE]): void;
+  triggerClose(source: typeof CLOSE_SOURCE[keyof typeof CLOSE_SOURCE]): void;
   animateOutComplete(): void;
-  getSharedProps(): SharedStylePropsArg & {children: React.ReactNode};
+  getSharedProps(): SharedStylePropsArg & { children: React.ReactNode };
   getChildren(): React.ReactNode;
   getRef(component: string): React.Ref<any>;
   renderDrawer(): React.ReactNode;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledBackdrop: StyletronComponent<any>;
-export const StyledDrawerContainer: StyletronComponent<any>;
-export const StyledDrawerBody: StyletronComponent<any>;
-export const StyledClose: StyletronComponent<any>;
-
-export const SIZE: SIZE;
-export const ANCHOR: ANCHOR;
-export const SIZE_DIMENSIONS: SIZE_DIMENSIONS;
-export const CLOSE_SOURCE: CLOSE_SOURCE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledBackdrop: StyletronComponent<any>;
+export declare const StyledDrawerContainer: StyletronComponent<any>;
+export declare const StyledDrawerBody: StyletronComponent<any>;
+export declare const StyledClose: StyletronComponent<any>;

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

@@ -8,13 +8,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) {
@@ -72,11 +71,8 @@ function SecondaryMenu(props) {
     onSelect,
     overrides = {}
   } = props;
-  const [SubnavContainer, subnavContainerProps] = getOverrides(overrides.SubnavContainer, StyledSubnavContainer);
   const [SecondaryMenuContainer, secondaryMenuContainerProps] = getOverrides(overrides.SecondaryMenuContainer, StyledSecondaryMenuContainer);
-  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((item, index) =>
@@ -89,7 +85,7 @@ function SecondaryMenu(props) {
     key: index,
     onSelect: onSelect,
     overrides: overrides
-  }))))));
+  })));
 }
 
 export default function AppNavBar(props) {
@@ -116,6 +112,8 @@ export default function AppNavBar(props) {
   const [Spacing, spacingProps] = getOverrides(overrides.Spacing, StyledSpacing);
   const [AppName, appNameProps] = getOverrides(overrides.AppName, StyledAppName);
   const [PrimaryMenuContainer, primaryMenuContainerProps] = getOverrides(overrides.PrimaryMenuContainer, StyledPrimaryMenuContainer);
+  const [DesktopMenuContainer, desktopMenuContainerProps] = getOverrides(overrides.DesktopMenuContainer, StyledDesktopMenuContainer);
+  const [DesktopMenu, desktopMenuProps] = getOverrides(overrides.DesktopMenu, StyledDesktopMenu);
   let secondaryMenu;
   let desktopSubNavPosition = POSITION.horizontal;
   let mobileSubNavPosition = POSITION.vertical;
@@ -127,9 +125,7 @@ export default function AppNavBar(props) {
         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,
@@ -140,11 +136,7 @@ export default function AppNavBar(props) {
         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((item, index) => {
@@ -165,9 +157,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,
@@ -175,7 +165,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/es/app-nav-bar/styled-components.js

@@ -43,20 +43,11 @@ export const StyledRoot = styled('div', props => {
   } = props;
   return { ...$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 const StyledSubnavContainer = styled('div', ({
-  $theme
-}) => {
-  return {
-    boxSizing: 'border-box',
-    boxShadow: '0px -1px 0px rgba(0, 0, 0, 0.08)'
-  };
-});
+export const StyledSubnavContainer = styled('div', {});
 StyledSubnavContainer.displayName = "StyledSubnavContainer";
 export const StyledSpacing = styled('div', props => {
   const {
@@ -106,9 +97,11 @@ export const StyledPrimaryMenuContainer = styled('div', ({
     height: '100%',
     display: 'flex',
     flexDirection: 'row',
+    flexGrow: 1,
     flexWrap: 'nowrap',
     justifyContent: 'flex-end',
-    alignItems: 'stretch'
+    alignItems: 'stretch',
+    paddingInlineEnd: $theme.sizing.scale1000
   };
 });
 StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
@@ -167,6 +160,8 @@ export const StyledSecondaryMenuContainer = styled('div', ({
     flexDirection: 'row',
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
+    margin: 'auto',
+    maxWidth: `${$theme.breakpoints.large}px`,
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -219,4 +214,28 @@ export const StyledUserProfileInfoContainer = styled('div', ({
     alignSelf: 'center'
   };
 });
-StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+export const StyledDesktopMenuContainer = styled('div', ({
+  $theme
+}) => {
+  return {
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: `${$theme.colors.borderOpaque}`
+  };
+});
+StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
+export const StyledDesktopMenu = styled('div', ({
+  $theme
+}) => {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: 'auto',
+    maxWidth: `${$theme.breakpoints.large}px`,
+    paddingBlockStart: '18px',
+    paddingBlockEnd: '18px'
+  };
+});
+StyledDesktopMenu.displayName = "StyledDesktopMenu";

package/es/badge/badge.js

@@ -0,0 +1,70 @@
+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); }
+
+/*
+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';
+
+const Badge = ({
+  children,
+  content,
+  color,
+  shape = SHAPE.rectangle,
+  placement = PLACEMENT.topRight,
+  hierarchy,
+  horizontalOffset,
+  verticalOffset,
+  hidden,
+  overrides = {}
+}) => {
+  const [Badge, badgeProps] = getOverrides(overrides.Badge, StyledBadge);
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Positioner, positionerProps] = getOverrides(overrides.Positioner, StyledPositioner);
+  const anchor = getAnchorFromChildren(children);
+  const 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/es/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 const HIERARCHY = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary'
+});
+export const SHAPE = Object.freeze({
+  pill: 'pill',
+  rectangle: 'rectangle'
+});
+export const COLOR = Object.freeze({
+  accent: 'accent',
+  primary: 'primary',
+  positive: 'positive',
+  negative: 'negative',
+  warning: 'warning'
+});
+export const 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 const ROLE = Object.freeze({
+  badge: 'badge',
+  notificationCircle: 'notificationCircle',
+  hintDot: 'hintDot'
+});