baseui 12.0.0 → 12.1.0

package/map-marker/types.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND } from './constants';
+import type * as React from 'react';
+import type { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND, LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES } from './constants';
 import type { Override } from '../helpers/overrides';
 export declare type AnchorPositions = typeof FLOATING_MARKER_ANCHOR_POSITIONS[keyof typeof FLOATING_MARKER_ANCHOR_POSITIONS];
 export declare type NeedleSize = typeof NEEDLE_SIZES[keyof typeof NEEDLE_SIZES];
@@ -10,6 +10,8 @@ export declare type FloatingMarkerAnchorType = typeof FLOATING_MARKER_ANCHOR_TYP
 export declare type BadgeEnhancerSize = typeof BADGE_ENHANCER_SIZES[keyof typeof BADGE_ENHANCER_SIZES];
 export declare type LabelEnhancerPosition = typeof LABEL_ENHANCER_POSITIONS[keyof typeof LABEL_ENHANCER_POSITIONS];
 export declare type Kind = typeof KIND[keyof typeof KIND];
+export declare type LocationPuckSize = typeof LOCATION_PUCK_SIZES[keyof typeof LOCATION_PUCK_SIZES];
+export declare type LocationPuckType = typeof LOCATION_PUCK_TYPES[keyof typeof LOCATION_PUCK_TYPES];
 export declare type FixedMarkerOverrides = {
     Root?: Override;
     InnerAnchor?: Override;
@@ -62,7 +64,7 @@ export declare type BadgePosition = {
 export declare type FixedMarkerProps = {
     size?: PinHeadSize;
     needle?: NeedleSize;
-    label?: string;
+    label?: React.ReactNode;
     startEnhancer?: React.ComponentType<{
         size: number;
     }>;
@@ -90,7 +92,7 @@ export declare type FloatingMarkerOverrides = {
     LabelEnhancerContainer?: Override;
 };
 export declare type FloatingMarkerProps = {
-    label?: string;
+    label?: React.ReactNode;
     anchor?: AnchorPositions;
     endEnhancer?: React.ComponentType<{
         size: number;
@@ -104,7 +106,7 @@ export declare type FloatingMarkerProps = {
 };
 export declare type PinHeadProps = {
     size?: PinHeadSize;
-    label?: string;
+    label?: React.ReactNode;
     endEnhancer?: React.ComponentType<{
         size: number;
     }>;
@@ -124,3 +126,29 @@ export declare type DragShadowProps = {
     height: number;
     overrides: FixedMarkerOverrides;
 };
+export declare type LocationPuckOverrides = {
+    Root?: Override;
+    LocationPuckApproximation?: Override;
+    ConsumerLocationPuckCore?: Override;
+    EarnerLocationPuckCore?: Override;
+};
+export declare type LocationPuckProps = {
+    size?: LocationPuckSize;
+    heading?: number;
+    confidenceRadius?: number;
+    showHeading?: boolean;
+    type?: LocationPuckType;
+    overrides?: LocationPuckOverrides;
+};
+export declare type ConsumerLocationPuckProps = {
+    heading: number;
+    confidenceRadius?: number;
+    showHeading?: boolean;
+    overrides: LocationPuckOverrides;
+};
+export declare type EarnerLocationPuckProps = {
+    heading: number;
+    confidenceRadius?: number;
+    size: LocationPuckSize;
+    overrides?: LocationPuckOverrides;
+};

package/map-marker/types.js.flow

@@ -16,6 +16,8 @@ import {
   BADGE_ENHANCER_SIZES,
   LABEL_ENHANCER_POSITIONS,
   KIND,
+  LOCATION_PUCK_SIZES,
+  LOCATION_PUCK_TYPES,
 } from './constants.js';
 import type { OverrideT } from '../helpers/overrides.js';
 
@@ -38,6 +40,9 @@ export type LabelEnhancerPositionT = $Values<typeof LABEL_ENHANCER_POSITIONS>;
 
 export type KindT = $Values<typeof KIND>;
 
+export type LocationPuckSizeT = $Values<typeof LOCATION_PUCK_SIZES>;
+export type LocationPuckTypeT = $Values<typeof LOCATION_PUCK_TYPES>;
+
 export type FixedMarkerOverridesT = {
   Root?: OverrideT,
   InnerAnchor?: OverrideT,
@@ -97,7 +102,7 @@ export type BadgePositionT = {
 export type FixedMarkerPropsT = {|
   size?: PinHeadSizeT,
   needle?: NeedleSizeT,
-  label?: string,
+  label?: React.Node,
   startEnhancer?: React.AbstractComponent<{| size: number |}>,
   endEnhancer?: React.AbstractComponent<{| size: number |}>,
   kind?: KindT,
@@ -125,7 +130,7 @@ export type FloatingMarkerOverridesT = {
 };
 
 export type FloatingMarkerPropsT = {
-  label?: string,
+  label?: React.Node,
   anchor?: AnchorPositionsT,
   endEnhancer?: React.AbstractComponent<{| size: number |}>,
   startEnhancer?: React.AbstractComponent<{| size: number |}>,
@@ -136,7 +141,7 @@ export type FloatingMarkerPropsT = {
 
 export type PinHeadPropsT = {
   size?: PinHeadSizeT,
-  label?: string,
+  label?: React.Node,
   endEnhancer?: React.AbstractComponent<{| size: number |}>,
   startEnhancer?: React.AbstractComponent<{| size: number |}>,
   color: string,
@@ -156,6 +161,35 @@ export type DragShadowPropsT = {
   overrides: FixedMarkerOverridesT,
 };
 
+export type LocationPuckOverridesT = {
+  Root?: OverrideT,
+  LocationPuckApproximation?: OverrideT,
+  ConsumerLocationPuckCore?: OverrideT,
+  EarnerLocationPuckCore?: OverrideT,
+};
+
+export type LocationPuckPropsT = {
+  size?: LocationPuckSizeT,
+  heading?: number,
+  confidenceRadius?: number,
+  showHeading?: boolean,
+  type?: LocationPuckTypeT,
+  overrides?: LocationPuckOverridesT,
+};
+
+export type ConsumerLocationPuckPropsT = {
+  heading: number,
+  confidenceRadius?: number,
+  showHeading?: boolean,
+  overrides: LocationPuckOverridesT,
+};
+export type EarnerLocationPuckPropsT = {
+  heading: number,
+  confidenceRadius?: number,
+  size: LocationPuckSizeT,
+  overrides?: LocationPuckOverridesT,
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/menu/index.d.ts

@@ -1,5 +1,4 @@
-import type { Item, ArrayItems, GroupedItems, Items, MenuProps, StatefulContainerProps } from './types';
-import { GetRequiredItemPropsFn, StateReducerFn } from './types';
+import type { Item, ArrayItems, GroupedItems, GetRequiredItemPropsFn, Items, MenuProps, StatefulContainerProps, StateReducerFn } from './types';
 export { default as StatefulMenu } from './stateful-menu';
 export { default as StatefulContainer } from './stateful-container';
 export { default as OptionList } from './option-list';
@@ -7,7 +6,7 @@ export { default as OptionProfile } from './option-profile';
 export { default as Menu } from './menu';
 export { default as NestedMenus, NestedMenuContext, type NestedMenuState, type NestedMenuProps, } from './nested-menus';
 export { KEY_STRINGS, STATE_CHANGE_TYPES } from './constants';
-export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, } from './styled-components';
+export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, StyledMenuDivider, } from './styled-components';
 export * from './types';
 export type { MenuLocale } from './locale';
 /** @deprecated use Item instead. To be removed in future versions.*/

package/menu/index.js

@@ -24,7 +24,8 @@ var _exportNames = {
   StyledProfileLabelsContainer: true,
   StyledProfileTitle: true,
   StyledProfileSubtitle: true,
-  StyledProfileBody: true
+  StyledProfileBody: true,
+  StyledMenuDivider: true
 };
 Object.defineProperty(exports, "KEY_STRINGS", {
   enumerable: true,
@@ -104,6 +105,12 @@ Object.defineProperty(exports, "StyledListItemProfile", {
     return _styledComponents.StyledListItemProfile;
   }
 });
+Object.defineProperty(exports, "StyledMenuDivider", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.StyledMenuDivider;
+  }
+});
 Object.defineProperty(exports, "StyledProfileBody", {
   enumerable: true,
   get: function get() {

package/menu/index.js.flow

@@ -25,6 +25,7 @@ export {
   StyledProfileTitle,
   StyledProfileSubtitle,
   StyledProfileBody,
+  StyledMenuDivider,
 } from './styled-components.js';
 // Flow
 export type * from './types.js';

package/menu/menu.js

@@ -72,7 +72,8 @@ function Menu(props) {
     if ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
     }
-  };
+  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   var handleBlur = function handleBlur(event) {
     if (focusVisible !== false) {
@@ -100,6 +101,11 @@ function Menu(props) {
       OptgroupHeader = _getOverrides8[0],
       optgroupHeaderProps = _getOverrides8[1];
 
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.MenuDivider, _styledComponents.StyledMenuDivider),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      MenuDivider = _getOverrides10[0],
+      menuDividerProps = _getOverrides10[1];
+
   var groupedItems = Array.isArray(props.items) ? {
     __ungrouped: props.items
   } : props.items;
@@ -114,15 +120,21 @@ function Menu(props) {
       els.push( /*#__PURE__*/React.createElement(OptgroupHeader, _extends({
         key: optgroup
       }, optgroupHeaderProps), optgroup));
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
     var groupItems = groupedItems[optgroup].map(function (item, index) {
-      itemIndex = itemIndex + 1;
+      itemIndex = itemIndex + 1; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
       var _props$getRequiredIte = props.getRequiredItemProps,
           getRequiredItemProps = _props$getRequiredIte === void 0 ? function (item, index) {
         return {};
       } : _props$getRequiredIte;
 
+      if (item.divider === true) {
+        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+      }
+
       var _getRequiredItemProps = getRequiredItemProps(item, itemIndex),
           disabled = _getRequiredItemProps.disabled,
           isFocused = _getRequiredItemProps.isFocused,

package/menu/menu.js.flow

@@ -8,7 +8,12 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale/index.js';
 // Components
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components.js';
+import {
+  StyledList,
+  StyledEmptyState,
+  StyledOptgroupHeader,
+  StyledMenuDivider,
+} from './styled-components.js';
 import OptionList from './option-list.js';
 import { getOverrides } from '../helpers/overrides.js';
 // Types
@@ -49,6 +54,7 @@ export default function Menu(props: StatelessMenuPropsT) {
     overrides.OptgroupHeader,
     StyledOptgroupHeader
   );
+  const [MenuDivider, menuDividerProps] = getOverrides(overrides.MenuDivider, StyledMenuDivider);
 
   const groupedItems = Array.isArray(props.items) ? { __ungrouped: props.items } : props.items;
   const optgroups = Object.keys(groupedItems);
@@ -65,6 +71,10 @@ export default function Menu(props: StatelessMenuPropsT) {
         itemIndex = itemIndex + 1;
         const { getRequiredItemProps = (item, index) => ({}) } = props;
 
+        if (item.divider === true) {
+          return <MenuDivider {...menuDividerProps} />;
+        }
+
         const {
           disabled,
           isFocused,

package/menu/option-profile.js

@@ -41,6 +41,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function OptionProfile(props, ref) {
   var item = props.item,
       getChildMenu = props.getChildMenu,

package/menu/stateful-container.js

@@ -475,6 +475,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         handleMouseLeave: this.handleMouseLeave,
         highlightedIndex: this.state.highlightedIndex,
         isFocused: this.state.isFocused,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         handleKeyDown: this.props.keyboardControlNode.current ? function (event) {} : this.onKeyDown,
         focusMenu: this.focusMenu,
         unfocusMenu: this.unfocusMenu

package/menu/styled-components.d.ts

@@ -21,4 +21,5 @@ export declare const StyledProfileLabelsContainer: import("styletron-react").Sty
 export declare const StyledProfileTitle: import("styletron-react").StyletronComponent<"h6", StyledProps>;
 export declare const StyledProfileSubtitle: import("styletron-react").StyletronComponent<"p", StyledProps>;
 export declare const StyledProfileBody: import("styletron-react").StyletronComponent<"p", StyledProps>;
+export declare const StyledMenuDivider: import("styletron-react").StyletronComponent<"li", StyledProps>;
 export {};

package/menu/styled-components.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledProfileTitle = exports.StyledProfileSubtitle = exports.StyledProfileLabelsContainer = exports.StyledProfileImgContainer = exports.StyledProfileImg = exports.StyledProfileBody = exports.StyledOptgroupHeader = exports.StyledListItemProfile = exports.StyledListItemElement = exports.StyledListItemAnchor = exports.StyledListItem = exports.StyledList = exports.StyledEmptyState = void 0;
+exports.StyledProfileTitle = exports.StyledProfileSubtitle = exports.StyledProfileLabelsContainer = exports.StyledProfileImgContainer = exports.StyledProfileImg = exports.StyledProfileBody = exports.StyledOptgroupHeader = exports.StyledMenuDivider = exports.StyledListItemProfile = exports.StyledListItemElement = exports.StyledListItemAnchor = exports.StyledListItem = exports.StyledList = exports.StyledEmptyState = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -56,6 +56,7 @@ var StyledList = (0, _styles.styled)('ul', function (_ref) {
 });
 exports.StyledList = StyledList;
 StyledList.displayName = "StyledList";
+StyledList.displayName = 'StyledList';
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -104,6 +105,7 @@ var StyledEmptyState = (0, _styles.styled)('li', function (props) {
 });
 exports.StyledEmptyState = StyledEmptyState;
 StyledEmptyState.displayName = "StyledEmptyState";
+StyledEmptyState.displayName = 'StyledEmptyState';
 var StyledOptgroupHeader = (0, _styles.styled)('li', function (props) {
   var paddingX = props.$theme.sizing.scale300;
   var paddingY = props.$theme.sizing.scale200;
@@ -117,6 +119,7 @@ var StyledOptgroupHeader = (0, _styles.styled)('li', function (props) {
 });
 exports.StyledOptgroupHeader = StyledOptgroupHeader;
 StyledOptgroupHeader.displayName = "StyledOptgroupHeader";
+StyledOptgroupHeader.displayName = 'StyledOptgroupHeader';
 var StyledListItemAnchor = (0, _styles.styled)('a', function (props) {
   return {
     display: 'block',
@@ -125,11 +128,13 @@ var StyledListItemAnchor = (0, _styles.styled)('a', function (props) {
 });
 exports.StyledListItemAnchor = StyledListItemAnchor;
 StyledListItemAnchor.displayName = "StyledListItemAnchor";
+StyledListItemAnchor.displayName = 'StyledListItemAnchor';
 var StyledListItemElement = (0, _styles.styled)('li', function (props) {
   var $disabled = props.$disabled,
       $theme = props.$theme,
       $size = props.$size;
   return _objectSpread(_objectSpread({}, $size === _constants.OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200), {}, {
+    boxSizing: 'border-box',
     position: 'relative',
     display: 'block',
     color: getFontColor(props),
@@ -150,13 +155,16 @@ var StyledListItemElement = (0, _styles.styled)('li', function (props) {
 });
 exports.StyledListItemElement = StyledListItemElement;
 StyledListItemElement.displayName = "StyledListItemElement";
+StyledListItemElement.displayName = 'StyledListItemElement';
 var StyledListItem = (0, _styles.withWrapper)(StyledListItemElement, function (Styled) {
-  return function StyledListItem(_ref2) {
-    var item = _ref2.item,
-        restProps = _objectWithoutProperties(_ref2, _excluded);
+  return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function StyledListItem(_ref2) {
+      var item = _ref2.item,
+          restProps = _objectWithoutProperties(_ref2, _excluded);
 
-    return /*#__PURE__*/React.createElement(Styled, restProps);
-  };
+      return /*#__PURE__*/React.createElement(Styled, restProps);
+    }
+  );
 });
 exports.StyledListItem = StyledListItem;
 var StyledListItemProfile = (0, _styles.styled)('li', function (_ref3) {
@@ -180,6 +188,7 @@ var StyledListItemProfile = (0, _styles.styled)('li', function (_ref3) {
 });
 exports.StyledListItemProfile = StyledListItemProfile;
 StyledListItemProfile.displayName = "StyledListItemProfile";
+StyledListItemProfile.displayName = 'StyledListItemProfile';
 var StyledProfileImgContainer = (0, _styles.styled)('div', {
   width: '60px',
   height: '60px',
@@ -189,6 +198,7 @@ var StyledProfileImgContainer = (0, _styles.styled)('div', {
 });
 exports.StyledProfileImgContainer = StyledProfileImgContainer;
 StyledProfileImgContainer.displayName = "StyledProfileImgContainer";
+StyledProfileImgContainer.displayName = 'StyledProfileImgContainer';
 var StyledProfileImg = (0, _styles.styled)('img', {
   width: '100%',
   height: '100%',
@@ -199,6 +209,7 @@ var StyledProfileImg = (0, _styles.styled)('img', {
 });
 exports.StyledProfileImg = StyledProfileImg;
 StyledProfileImg.displayName = "StyledProfileImg";
+StyledProfileImg.displayName = 'StyledProfileImg';
 var StyledProfileLabelsContainer = (0, _styles.styled)('div', function (_ref4) {
   var _ref4$$theme = _ref4.$theme,
       direction = _ref4$$theme.direction,
@@ -215,6 +226,7 @@ var StyledProfileLabelsContainer = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StyledProfileLabelsContainer = StyledProfileLabelsContainer;
 StyledProfileLabelsContainer.displayName = "StyledProfileLabelsContainer";
+StyledProfileLabelsContainer.displayName = 'StyledProfileLabelsContainer';
 var StyledProfileTitle = (0, _styles.styled)('h6', function (_ref5) {
   var $theme = _ref5.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font350), {}, {
@@ -227,6 +239,7 @@ var StyledProfileTitle = (0, _styles.styled)('h6', function (_ref5) {
 });
 exports.StyledProfileTitle = StyledProfileTitle;
 StyledProfileTitle.displayName = "StyledProfileTitle";
+StyledProfileTitle.displayName = 'StyledProfileTitle';
 var StyledProfileSubtitle = (0, _styles.styled)('p', function (_ref6) {
   var $theme = _ref6.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
@@ -239,6 +252,7 @@ var StyledProfileSubtitle = (0, _styles.styled)('p', function (_ref6) {
 });
 exports.StyledProfileSubtitle = StyledProfileSubtitle;
 StyledProfileSubtitle.displayName = "StyledProfileSubtitle";
+StyledProfileSubtitle.displayName = 'StyledProfileSubtitle';
 var StyledProfileBody = (0, _styles.styled)('p', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font100), {}, {
@@ -250,4 +264,23 @@ var StyledProfileBody = (0, _styles.styled)('p', function (_ref7) {
   });
 });
 exports.StyledProfileBody = StyledProfileBody;
-StyledProfileBody.displayName = "StyledProfileBody";
+StyledProfileBody.displayName = "StyledProfileBody";
+StyledProfileBody.displayName = 'StyledProfileBody';
+var StyledMenuDivider = (0, _styles.styled)('li', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return {
+    color: $theme.colors.contentPrimary,
+    borderBottomWidth: $theme.borders.border300.borderWidth,
+    borderBottomStyle: $theme.borders.border300.borderStyle,
+    borderBottomColor: $theme.borders.border300.borderColor,
+    marginTop: $theme.sizing.scale100,
+    marginBottom: $theme.sizing.scale100,
+    marginLeft: $theme.sizing.scale500,
+    marginRight: $theme.sizing.scale500,
+    listStyle: 'none',
+    height: 0
+  };
+});
+exports.StyledMenuDivider = StyledMenuDivider;
+StyledMenuDivider.displayName = "StyledMenuDivider";
+StyledProfileBody.displayName = 'StyledMenuDivider';

package/menu/styled-components.js.flow

@@ -211,6 +211,19 @@ export const StyledProfileBody = styled<StyledPropsT>('p', ({ $theme }) => ({
   marginRight: 0,
 }));
 
+export const StyledMenuDivider = styled<StyledPropsT>('li', ({ $theme }) => ({
+  color: $theme.colors.contentPrimary,
+  borderBottomWidth: $theme.borders.border300.borderWidth,
+  borderBottomStyle: $theme.borders.border300.borderStyle,
+  borderBottomColor: $theme.borders.border300.borderColor,
+  marginTop: $theme.sizing.scale100,
+  marginBottom: $theme.sizing.scale100,
+  marginLeft: $theme.sizing.scale600,
+  marginRight: $theme.sizing.scale600,
+  listStyle: 'none',
+  height: 0,
+}));
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/menu/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants';
-import type { SyntheticEvent, FocusEvent, MouseEvent } from 'react';
+import type { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants';
 export declare type Item = any;
 export declare type ArrayItems = ReadonlyArray<Item>;
 export declare type GroupedItems = {
@@ -23,7 +22,7 @@ export declare type RootRef = {
 };
 export declare type OnItemSelectFn = (a: {
     item: Item;
-    event?: SyntheticEvent<HTMLElement> | KeyboardEvent;
+    event?: React.SyntheticEvent<HTMLElement> | KeyboardEvent;
 }) => unknown;
 export declare type ProfileOverrides = {
     List?: Override;
@@ -41,8 +40,8 @@ export declare type RenderItemProps = {
     id?: string | null;
     isFocused?: boolean;
     isHighlighted?: boolean;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
     resetMenu?: () => void;
 };
 export declare type GetRequiredItemPropsFn = (item: Item, index: number) => RenderItemProps;
@@ -119,6 +118,7 @@ export declare type MenuOverrides = {
     Option?: Override;
     OptgroupHeader?: Override;
     ListItem?: Override;
+    MenuDivider?: Override;
 };
 export declare type MenuProps = {
     overrides?: MenuOverrides;
@@ -144,18 +144,18 @@ export declare type SharedStatelessProps = {
     'aria-label'?: string;
     getRequiredItemProps?: GetRequiredItemPropsFn;
     isFocused?: boolean;
-    handleMouseLeave?: (event: MouseEvent<HTMLElement>) => unknown;
+    handleMouseLeave?: (event: React.MouseEvent<HTMLElement>) => unknown;
     /** Index of highlighted menu item. */
     highlightedIndex?: number;
     /** List of menu items. */
     items: Items;
     /** Message to be displayed if no menu items are passed in. */
     noResultsMsg?: React.ReactNode;
-    onBlur?: (event: FocusEvent<HTMLElement>) => unknown;
-    onFocus?: (event: FocusEvent<HTMLElement>) => unknown;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => unknown;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => unknown;
     /** Ref for the menu container element. Used to capture key events for navigation */
     rootRef?: RootRef;
-    focusMenu?: (event: FocusEvent | MouseEvent | KeyboardEvent) => unknown;
+    focusMenu?: (event: React.FocusEvent | React.MouseEvent | KeyboardEvent) => unknown;
     unfocusMenu?: () => unknown;
     handleKeyDown?: (event: KeyboardEvent) => unknown;
 };
@@ -210,11 +210,11 @@ export declare type OptionListProps = {
     getItemLabel: GetItemLabelFn;
     /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */
     getChildMenu?: (item: Item) => React.ReactNode;
-    onClick?: (event: MouseEvent) => unknown;
+    onClick?: (event: React.MouseEvent) => unknown;
     /** Callback used to change highlighted index in stateful menu. */
-    onMouseDown?: (event: MouseEvent) => unknown;
+    onMouseDown?: (event: React.MouseEvent) => unknown;
     /** Callback used to change highlighted index in stateful menu. */
-    onMouseEnter?: (event: MouseEvent) => unknown;
+    onMouseEnter?: (event: React.MouseEvent) => unknown;
     /** Renders UI in defined scale. */
     size?: keyof typeof OPTION_LIST_SIZE;
     overrides?: {

package/menu/types.js.flow

@@ -144,6 +144,7 @@ export type MenuPropsT = {
     Option?: OverrideT,
     OptgroupHeader?: OverrideT,
     ListItem?: OverrideT,
+    MenuDivider?: OverrideT;
   },
   /** Renders all menu content for SEO purposes regardless of menu  state */
   renderAll?: boolean,

package/message-card/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const BACKGROUND_COLOR_TYPE: Readonly<{
+    readonly light: "light";
+    readonly dark: "dark";
+}>;
+export declare const IMAGE_LAYOUT: Readonly<{
+    readonly top: "top";
+    readonly trailing: "trailing";
+}>;
+export declare const BUTTON_KIND: Readonly<{
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+}>;

package/message-card/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IMAGE_LAYOUT = exports.BUTTON_KIND = exports.BACKGROUND_COLOR_TYPE = void 0;
+
+var _button = require("../button");
+
+var _Object$freeze;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var BACKGROUND_COLOR_TYPE = Object.freeze({
+  light: 'light',
+  dark: 'dark'
+});
+exports.BACKGROUND_COLOR_TYPE = BACKGROUND_COLOR_TYPE;
+var IMAGE_LAYOUT = Object.freeze({
+  top: 'top',
+  trailing: 'trailing'
+});
+exports.IMAGE_LAYOUT = IMAGE_LAYOUT;
+var BUTTON_KIND = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, _button.KIND.secondary, _button.KIND.secondary), _defineProperty(_Object$freeze, _button.KIND.tertiary, _button.KIND.tertiary), _Object$freeze));
+exports.BUTTON_KIND = BUTTON_KIND;

package/message-card/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MessageCard } from './message-card';
+export * from './constants';
+export * from './styled-components';
+export * from './types';

package/message-card/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  MessageCard: true
+};
+Object.defineProperty(exports, "MessageCard", {
+  enumerable: true,
+  get: function get() {
+    return _messageCard.default;
+  }
+});
+
+var _messageCard = _interopRequireDefault(require("./message-card"));
+
+var _constants = require("./constants");
+
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }