baseui 11.2.1 → 12.1.1

package/es/menu/option-profile.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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.
@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react'; // Components
 
-import MaybeChildMenu from './maybe-child-menu.js';
-import { StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components.js';
-import { getOverrides } from '../helpers/overrides.js'; // Types
+import MaybeChildMenu from './maybe-child-menu';
+import { StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components';
+import { getOverrides } from '../helpers/overrides'; // Types
 
-// flowlint-next-line unclear-type:off
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function OptionProfile(props, ref) {
   const {
     item,
@@ -39,7 +39,8 @@ function OptionProfile(props, ref) {
     subtitle,
     body
   } = getProfileItemLabels(item);
-  return /*#__PURE__*/React.createElement(MaybeChildMenu, {
+  return /*#__PURE__*/React.createElement(MaybeChildMenu // @ts-expect-error todo(flow->ts)
+  , {
     ref: ref,
     getChildMenu: getChildMenu,
     isOpen: !!$isHighlighted,

package/es/menu/stateful-container.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
 
@@ -10,8 +10,8 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react'; // Files
 
-import { STATE_CHANGE_TYPES, KEY_STRINGS } from './constants.js';
-import { scrollItemIntoView } from './utils.js'; // Types
+import { STATE_CHANGE_TYPES, KEY_STRINGS } from './constants';
+import { scrollItemIntoView } from './utils'; // Types
 
 import { useUIDSeed } from 'react-uid';
 const DEFAULT_PROPS = {
@@ -43,7 +43,8 @@ class MenuStatefulContainerInner extends React.Component {
   constructor(...args) {
     super(...args);
 
-    _defineProperty(this, "state", { ...this.constructor.defaultProps.initialState,
+    _defineProperty(this, "state", { // @ts-expect-error todo(flow->ts): probably MenuStatefulContainer should be used instead of this.constructor
+      ...this.constructor.defaultProps.initialState,
       ...this.props.initialState
     });
 
@@ -128,8 +129,7 @@ class MenuStatefulContainerInner extends React.Component {
       });
 
       if (this.refList[nextIndex]) {
-        scrollItemIntoView(this.refList[nextIndex].current, // $FlowFixMe
-        rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
+        scrollItemIntoView(this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
       }
     });
 
@@ -181,8 +181,7 @@ class MenuStatefulContainerInner extends React.Component {
       }
 
       if (this.refList[nextIndex]) {
-        scrollItemIntoView(this.refList[nextIndex].current, // $FlowFixMe
-        rootRef.current, nextIndex === 0, nextIndex === this.getItems().length - 1);
+        scrollItemIntoView(this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === this.getItems().length - 1);
       }
     });
 
@@ -260,7 +259,7 @@ class MenuStatefulContainerInner extends React.Component {
     _defineProperty(this, "focusMenu", event => {
       const rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
 
-      if (!this.state.isFocused && rootRef.current && // $FlowFixMe
+      if (!this.state.isFocused && rootRef.current && // @ts-expect-error
       rootRef.current.contains(event.target)) {
         if (this.state.highlightedIndex < 0) {
           this.internalSetState(STATE_CHANGE_TYPES.focus, {
@@ -299,7 +298,6 @@ class MenuStatefulContainerInner extends React.Component {
 
     const optgroups = Object.keys(this.props.items);
     return optgroups.reduce((output, optgroup) => {
-      // $FlowFixMe already checked above that items is grouped shape
       return output.concat(this.props.items[optgroup]);
     }, []);
   }
@@ -386,14 +384,23 @@ class MenuStatefulContainerInner extends React.Component {
     // omit the stateful-container's props and don't pass it down
     // to the children (stateless menu)
     const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       initialState,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       stateReducer,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onItemSelect,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       addMenuToNesting,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       removeMenuFromNesting,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       getParentMenu,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       getChildMenu,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       forceHighlight,
       ...restProps
     } = this.props;
@@ -404,6 +411,7 @@ class MenuStatefulContainerInner extends 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 ? event => {} : this.onKeyDown,
       focusMenu: this.focusMenu,
       unfocusMenu: this.unfocusMenu

package/es/menu/stateful-menu.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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.
@@ -9,9 +9,9 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable react/prefer-stateless-function */
 import * as React from 'react';
-import Menu from './menu.js';
-import { NestedMenuContext } from './nested-menus.js';
-import StatefulContainer from './stateful-container.js';
+import Menu from './menu';
+import { NestedMenuContext } from './nested-menus';
+import StatefulContainer from './stateful-container';
 export default class StatefulMenu extends React.PureComponent {
   render() {
     const {

package/es/menu/styled-components.js

@@ -5,8 +5,8 @@ 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 { styled, withWrapper } from '../styles/index.js';
-import { OPTION_LIST_SIZE } from './constants.js';
+import { styled, withWrapper } from '../styles';
+import { OPTION_LIST_SIZE } from './constants';
 export const StyledList = styled('ul', ({
   $theme,
   $isFocusVisible
@@ -34,6 +34,7 @@ export const StyledList = styled('ul', ({
   };
 });
 StyledList.displayName = "StyledList";
+StyledList.displayName = 'StyledList';
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -83,6 +84,7 @@ export const StyledEmptyState = styled('li', props => {
   };
 });
 StyledEmptyState.displayName = "StyledEmptyState";
+StyledEmptyState.displayName = 'StyledEmptyState';
 export const StyledOptgroupHeader = styled('li', props => {
   const paddingX = props.$theme.sizing.scale300;
   const paddingY = props.$theme.sizing.scale200;
@@ -95,6 +97,7 @@ export const StyledOptgroupHeader = styled('li', props => {
   };
 });
 StyledOptgroupHeader.displayName = "StyledOptgroupHeader";
+StyledOptgroupHeader.displayName = 'StyledOptgroupHeader';
 export const StyledListItemAnchor = styled('a', props => {
   return {
     display: 'block',
@@ -102,6 +105,7 @@ export const StyledListItemAnchor = styled('a', props => {
   };
 });
 StyledListItemAnchor.displayName = "StyledListItemAnchor";
+StyledListItemAnchor.displayName = 'StyledListItemAnchor';
 export const StyledListItemElement = styled('li', props => {
   const {
     $disabled,
@@ -109,6 +113,7 @@ export const StyledListItemElement = styled('li', props => {
     $size
   } = props;
   return { ...($size === OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200),
+    boxSizing: 'border-box',
     position: 'relative',
     display: 'block',
     color: getFontColor(props),
@@ -128,7 +133,9 @@ export const StyledListItemElement = styled('li', props => {
   };
 });
 StyledListItemElement.displayName = "StyledListItemElement";
-export const StyledListItem = withWrapper(StyledListItemElement, Styled => function StyledListItem({
+StyledListItemElement.displayName = 'StyledListItemElement';
+export const StyledListItem = withWrapper(StyledListItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
+function StyledListItem({
   item,
   ...restProps
 }) {
@@ -153,6 +160,7 @@ export const StyledListItemProfile = styled('li', ({
   }
 }));
 StyledListItemProfile.displayName = "StyledListItemProfile";
+StyledListItemProfile.displayName = 'StyledListItemProfile';
 export const StyledProfileImgContainer = styled('div', {
   width: '60px',
   height: '60px',
@@ -161,6 +169,7 @@ export const StyledProfileImgContainer = styled('div', {
   alignItems: 'center'
 });
 StyledProfileImgContainer.displayName = "StyledProfileImgContainer";
+StyledProfileImgContainer.displayName = 'StyledProfileImgContainer';
 export const StyledProfileImg = styled('img', {
   width: '100%',
   height: '100%',
@@ -170,6 +179,7 @@ export const StyledProfileImg = styled('img', {
   borderBottomLeftRadius: '50%'
 });
 StyledProfileImg.displayName = "StyledProfileImg";
+StyledProfileImg.displayName = 'StyledProfileImg';
 export const StyledProfileLabelsContainer = styled('div', ({
   $theme: {
     direction,
@@ -186,6 +196,7 @@ export const StyledProfileLabelsContainer = styled('div', ({
   })
 }));
 StyledProfileLabelsContainer.displayName = "StyledProfileLabelsContainer";
+StyledProfileLabelsContainer.displayName = 'StyledProfileLabelsContainer';
 export const StyledProfileTitle = styled('h6', ({
   $theme
 }) => ({ ...$theme.typography.font350,
@@ -196,6 +207,7 @@ export const StyledProfileTitle = styled('h6', ({
   marginRight: 0
 }));
 StyledProfileTitle.displayName = "StyledProfileTitle";
+StyledProfileTitle.displayName = 'StyledProfileTitle';
 export const StyledProfileSubtitle = styled('p', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -206,6 +218,7 @@ export const StyledProfileSubtitle = styled('p', ({
   marginRight: 0
 }));
 StyledProfileSubtitle.displayName = "StyledProfileSubtitle";
+StyledProfileSubtitle.displayName = 'StyledProfileSubtitle';
 export const StyledProfileBody = styled('p', ({
   $theme
 }) => ({ ...$theme.typography.font100,
@@ -215,4 +228,21 @@ export const StyledProfileBody = styled('p', ({
   marginLeft: 0,
   marginRight: 0
 }));
-StyledProfileBody.displayName = "StyledProfileBody";
+StyledProfileBody.displayName = "StyledProfileBody";
+StyledProfileBody.displayName = 'StyledProfileBody';
+export const StyledMenuDivider = styled('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.scale500,
+  marginRight: $theme.sizing.scale500,
+  listStyle: 'none',
+  height: 0
+}));
+StyledMenuDivider.displayName = "StyledMenuDivider";
+StyledProfileBody.displayName = 'StyledMenuDivider';

package/es/menu/types.js

@@ -1,8 +1 @@
-/*
-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 { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants.js'; // flowlint-next-line unclear-type:off
+export {};

package/es/message-card/constants.js

@@ -0,0 +1,19 @@
+/*
+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 { KIND } from '../button';
+export const BACKGROUND_COLOR_TYPE = Object.freeze({
+  light: 'light',
+  dark: 'dark'
+});
+export const IMAGE_LAYOUT = Object.freeze({
+  top: 'top',
+  trailing: 'trailing'
+});
+export const BUTTON_KIND = Object.freeze({
+  [KIND.secondary]: KIND.secondary,
+  [KIND.tertiary]: KIND.tertiary
+});

package/es/message-card/index.js

@@ -0,0 +1,10 @@
+/*
+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 { default as MessageCard } from './message-card';
+export * from './constants';
+export * from './styled-components';
+export * from './types';

package/es/message-card/message-card.js

@@ -0,0 +1,114 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { StyledRoot, StyledImage, StyledContentContainer, StyledHeadingContainer, StyledParagraphContainer } from './styled-components';
+import { Button as DefaultButton, SHAPE, SIZE } from '../button';
+import { useStyletron } from '../styles/index';
+import { ThemeProvider, LightTheme } from '../';
+import { getBackgroundColorType } from './utils';
+import { colors } from '../tokens';
+import { getOverrides } from '../helpers/overrides';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE, BUTTON_KIND } from './constants';
+
+const ButtonAlwaysLightTheme = ({
+  children,
+  ...restProps
+}) => /*#__PURE__*/React.createElement(ThemeProvider, {
+  theme: LightTheme
+}, /*#__PURE__*/React.createElement(DefaultButton, restProps, children));
+
+const MessageCard = ({
+  backgroundColor = colors.white,
+  backgroundColorType: backgroundColorTypeProp,
+  buttonKind = BUTTON_KIND.secondary,
+  buttonLabel,
+  heading,
+  image,
+  onClick,
+  overrides = {},
+  paragraph
+}) => {
+  const {
+    src,
+    layout = IMAGE_LAYOUT.top,
+    backgroundPosition,
+    ariaLabel
+  } = image || {};
+  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ContentContainer, ContentContainerProps] = getOverrides(overrides.ContentContainer, StyledContentContainer);
+  const [HeadingContainer, HeadingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingContainer);
+  const [ParagraphContainer, ParagraphContainerProps] = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer);
+  const [Image, ImageProps] = getOverrides(overrides.Image, StyledImage);
+  const [Button, ButtonProps] = getOverrides(overrides.Button, ButtonAlwaysLightTheme);
+  const [, theme] = useStyletron();
+  let backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
+
+  if (!backgroundColorType) {
+    backgroundColorType = BACKGROUND_COLOR_TYPE.dark;
+
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`The provided value for 'backgroundColor', ${backgroundColor}, is not recognized as a \
+        Base Web primitive color. Please use the 'backgroundColorType' prop to indicate whether\
+         this color is light or dark so the rest of the component can be styled accordingly.`);
+    }
+  }
+
+  let buttonColors;
+
+  if (buttonKind === BUTTON_KIND.tertiary && backgroundColorType === BACKGROUND_COLOR_TYPE.dark) {
+    buttonColors = {
+      color: theme.colors.contentOnColor,
+      backgroundColor: theme.colors.buttonTertiaryFill
+    };
+  }
+
+  if (buttonKind !== BUTTON_KIND.tertiary && backgroundColor !== colors.white) {
+    buttonColors = {
+      color: theme.colors.contentOnColorInverse,
+      backgroundColor: theme.colors.backgroundAlwaysLight
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    onClick: onClick,
+    $backgroundColor: backgroundColor,
+    $backgroundColorType: backgroundColorType,
+    $imageLayout: layout
+  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+    role: "img",
+    "aria-label": ariaLabel,
+    $src: src,
+    $imageLayout: layout,
+    $backgroundPosition: backgroundPosition
+  }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+    $as: "div",
+    kind: buttonKind,
+    shape: SHAPE.pill,
+    size: SIZE.compact,
+    role: "none",
+    tabIndex: -1,
+    colors: buttonColors,
+    overrides: {
+      BaseButton: {
+        style: {
+          textAlign: 'center',
+          pointerEvents: 'none',
+          ...(buttonKind === BUTTON_KIND.tertiary ? {
+            marginTop: theme.sizing.scale100,
+            transform: theme.direction === 'rtl' ? `translateX(${theme.sizing.scale500})` : `translateX(-${theme.sizing.scale500})`
+          } : {
+            marginTop: theme.sizing.scale500
+          })
+        }
+      }
+    }
+  }, ButtonProps), buttonLabel)));
+};
+
+export default MessageCard;

package/es/message-card/styled-components.js

@@ -0,0 +1,108 @@
+/*
+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 { styled } from '../styles';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE } from './constants';
+export const StyledRoot = styled('button', ({
+  $theme,
+  $backgroundColor,
+  $backgroundColorType,
+  $imageLayout = IMAGE_LAYOUT.top
+}) => {
+  const lightBackgroundStyle = {
+    color: $theme.colors.contentOnColorInverse,
+    borderStyle: 'solid',
+    borderWidth: $theme.sizing.scale0,
+    borderColor: $theme.colors.borderOpaque
+  };
+  const darkBackgroundStyle = {
+    color: $theme.colors.contentOnColor,
+    border: 'none'
+  };
+  return {
+    alignItems: 'stretch',
+    backgroundColor: $backgroundColor,
+    borderRadius: $theme.borders.radius400,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: $imageLayout === IMAGE_LAYOUT.top ? 'column' : 'row',
+    overflow: 'hidden',
+    padding: '0',
+    position: 'relative',
+    textAlign: 'start',
+    width: '100%',
+    boxShadow: `inset 999px 999px 0px ${$theme.colors.backgroundOverlayArt}`,
+    ...($backgroundColorType === BACKGROUND_COLOR_TYPE.light ? lightBackgroundStyle : darkBackgroundStyle),
+    ':focus': {
+      outlineWidth: '3px',
+      outlineStyle: 'solid',
+      outlineColor: $theme.colors.borderAccent,
+      outlineOffset: '-3px'
+    },
+    ':hover:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.10)'
+    },
+    ':active:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.20)'
+    }
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+export const StyledImage = styled('div', ({
+  $imageLayout = IMAGE_LAYOUT.top,
+  $backgroundPosition = 'center',
+  $src
+}) => {
+  return {
+    backgroundImage: `url(${$src})`,
+    backgroundSize: 'cover',
+    backgroundPosition: $backgroundPosition,
+    ...($imageLayout === IMAGE_LAYOUT.top ? {
+      height: '132px',
+      width: '100%'
+    } : {
+      width: '112px',
+      order: '1'
+    })
+  };
+});
+StyledImage.displayName = "StyledImage";
+export const StyledContentContainer = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  boxSizing: 'border-box',
+  paddingTop: $theme.sizing.scale600,
+  paddingRight: $theme.sizing.scale300,
+  paddingBottom: $theme.sizing.scale600,
+  paddingLeft: $theme.sizing.scale600
+}));
+StyledContentContainer.displayName = "StyledContentContainer";
+export const StyledHeadingContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.HeadingXSmall
+}));
+StyledHeadingContainer.displayName = "StyledHeadingContainer";
+export const StyledParagraphContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.ParagraphSmall,
+  marginTop: $theme.sizing.scale100
+}));
+StyledParagraphContainer.displayName = "StyledParagraphContainer";

package/es/message-card/types.js

@@ -0,0 +1 @@
+export {};

package/es/message-card/utils.js

@@ -0,0 +1,27 @@
+/*
+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 { colors } from '../tokens';
+import { BACKGROUND_COLOR_TYPE } from './constants';
+const LIGHT_COLORS = new Set([colors.red50, colors.red100, colors.red200, colors.red300, colors.green50, colors.green100, colors.green200, colors.green300, colors.teal50, colors.teal100, colors.teal200, colors.teal300, colors.blue50, colors.blue100, colors.blue200, colors.blue300, colors.cobalt50, colors.cobalt100, colors.cobalt200, colors.purple50, colors.purple100, colors.purple200, colors.purple300, colors.magenta50, colors.magenta100, colors.magenta200, colors.magenta300, colors.brown50, colors.brown100, colors.brown200, colors.brown300, colors.orange50, colors.orange100, colors.orange200, colors.orange300, colors.orange400, colors.lime50, colors.lime100, colors.lime200, colors.lime300, colors.lime400, colors.platinum50, colors.platinum100, colors.platinum200, colors.platinum300, colors.platinum400, colors.yellow50, colors.yellow100, colors.yellow200, colors.yellow300, colors.yellow400, colors.yellow500, colors.white, colors.gray50, colors.gray100, colors.gray200, colors.gray300, colors.gray400]);
+const DARK_COLORS = new Set([colors.red400, colors.red500, colors.red600, colors.red700, colors.green400, colors.green500, colors.green600, colors.green700, colors.teal400, colors.teal500, colors.teal600, colors.teal700, colors.blue400, colors.blue500, colors.blue600, colors.blue700, colors.cobalt300, colors.cobalt400, colors.cobalt500, colors.cobalt600, colors.cobalt700, colors.purple400, colors.purple500, colors.purple600, colors.purple700, colors.magenta400, colors.magenta500, colors.magenta600, colors.magenta700, colors.brown400, colors.brown500, colors.brown600, colors.brown700, colors.orange500, colors.orange600, colors.orange700, colors.lime500, colors.lime600, colors.lime700, colors.platinum500, colors.platinum600, colors.platinum700, colors.platinum800, colors.yellow600, colors.yellow700, colors.gray500, colors.gray600, colors.gray700, colors.gray800, colors.gray900, colors.black]);
+const POOR_CONTRAST_COLORS = new Set([colors.red300, colors.gray500, colors.yellow600]);
+export function getBackgroundColorType(backgroundColor) {
+  if (process.env.NODE_ENV !== "production" && POOR_CONTRAST_COLORS.has(backgroundColor)) {
+    console.warn(`The provided value for backgroundColor, ${backgroundColor}, is not supported because \
+        it does not pass accessibility contrast tests for either white or black text.`);
+  }
+
+  if (LIGHT_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.light;
+  }
+
+  if (DARK_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.dark;
+  }
+
+  return null;
+}

package/es/modal/focus-once.js

@@ -12,7 +12,8 @@ import * as React from 'react';
  * */
 export default function FocusOnce(props) {
   const [tabIndex, setTabIndex] = React.useState('0');
-  const child = React.Children.only(props.children);
+  const child = React.Children.only(props.children); // @ts-expect-error todo(flow->ts): children type should restrict children to elements only
+
   return /*#__PURE__*/React.cloneElement(child, {
     tabIndex,
     onBlur: () => setTabIndex(null)

package/es/modal/index.js

@@ -4,8 +4,9 @@ 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 { default as Modal } from './modal.js';
-export { default as ModalButton } from './modal-button.js';
-export { default as FocusOnce } from './focus-once.js';
-export { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
-export { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, ModalHeader, ModalBody, ModalFooter } from './styled-components.js';
+export { default as Modal } from './modal';
+export { default as ModalButton } from './modal-button';
+export { default as FocusOnce } from './focus-once';
+export { SIZE, ROLE, CLOSE_SOURCE } from './constants';
+export { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, ModalHeader, ModalBody, ModalFooter } from './styled-components';
+export * from './types';

package/es/modal/modal-button.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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.
@@ -7,9 +7,9 @@ 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 { Button } from '../button/index.js';
-import { mergeOverrides } from '../helpers/overrides.js'; // ModalButtons should have some margin pre-applied
-
+import { Button } from '../button';
+import { mergeOverrides } from '../helpers/overrides';
+// ModalButtons should have some margin pre-applied
 const overrides = {
   BaseButton: {
     style: ({