baseui 12.0.0 → 12.1.2

package/es/map-marker/location-puck.js

@@ -0,0 +1,142 @@
+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 { useStyletron } from '../styles';
+import { getOverrides } from '../helpers/overrides';
+import { LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES, EARNER_LOCATION_PUCK_CORE_SCALES } from './constants';
+import { LocationPuckContainer, StyledConsumerLocationPuckCore, StyledLocationPuckApproximation, StyledEarnerLocationPuckCore } from './styled-components';
+
+const ConsumerLocationPuckHeading = ({
+  heading
+}) => {
+  const [css, theme] = useStyletron();
+  return /*#__PURE__*/React.createElement("svg", {
+    className: css({
+      height: `${6}px`,
+      width: `${11}px`,
+      position: 'absolute',
+      color: theme.colors.contentAccent,
+      transition: `${theme.animation.timing300} ${theme.animation.easeOutCurve} all`
+    }),
+    style: {
+      transform: `rotate(${heading}deg) translateY(-16px)`
+    },
+    width: "11",
+    height: "6",
+    viewBox: "0 0 11 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.5 0L0 6L5.5 5L11 6L5.5 0Z",
+    fill: "currentColor"
+  }));
+};
+
+const ConsumerLocationPuck = ({
+  heading,
+  showHeading,
+  confidenceRadius,
+  overrides
+}) => {
+  const [, theme] = useStyletron();
+  const [Root, rootProps] = getOverrides(overrides.Root, LocationPuckContainer);
+  const [ConsumerLocationPuckCore, consumerLocationPuckCoreProps] = getOverrides(overrides.ConsumerLocationPuckCore, StyledConsumerLocationPuckCore);
+  const [LocationPuckApproximation, locationPuckApproximationProps] = getOverrides(overrides.LocationPuckApproximation, StyledLocationPuckApproximation);
+  return /*#__PURE__*/React.createElement(Root, rootProps, /*#__PURE__*/React.createElement(LocationPuckApproximation, _extends({
+    $color: theme.colors.contentAccent,
+    $radius: confidenceRadius
+  }, locationPuckApproximationProps)), /*#__PURE__*/React.createElement(ConsumerLocationPuckCore, consumerLocationPuckCoreProps), showHeading && /*#__PURE__*/React.createElement(ConsumerLocationPuckHeading, {
+    heading: heading
+  }));
+};
+
+const EarnerLocationPuckHeading = ({
+  size,
+  color,
+  heading
+}) => {
+  const [css, theme] = useStyletron();
+  return /*#__PURE__*/React.createElement("svg", {
+    className: css({
+      position: 'absolute',
+      transition: `${theme.animation.timing300} ${theme.animation.easeOutCurve} all`
+    }),
+    style: {
+      transform: `rotate(${heading}deg) scale(${EARNER_LOCATION_PUCK_CORE_SCALES[size]})`
+    },
+    width: "72",
+    height: "72",
+    viewBox: "0 0 72 72",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M36 20L52 52L36 42.8571L20 52L36 20Z",
+    fill: color
+  }));
+};
+
+const EarnerLocationPuck = ({
+  heading,
+  confidenceRadius,
+  size,
+  overrides
+}) => {
+  const [, theme] = useStyletron();
+  const color = theme.colors.contentPrimary;
+  const [Root, rootProps] = getOverrides(overrides.Root, LocationPuckContainer);
+  const [LocationPuckApproximation, locationPuckApproximationProps] = getOverrides(overrides.LocationPuckApproximation, StyledLocationPuckApproximation);
+  const [EarnerLocationPuckCore, earnerLocationPuckCoreProps] = getOverrides(overrides.EarnerLocationPuckCore, StyledEarnerLocationPuckCore);
+  return /*#__PURE__*/React.createElement(Root, rootProps, /*#__PURE__*/React.createElement(LocationPuckApproximation, _extends({
+    $color: color,
+    $radius: confidenceRadius
+  }, locationPuckApproximationProps)), /*#__PURE__*/React.createElement(EarnerLocationPuckCore, _extends({
+    $color: color,
+    $size: size
+  }, earnerLocationPuckCoreProps)), /*#__PURE__*/React.createElement(EarnerLocationPuckHeading, {
+    size: size,
+    color: color,
+    heading: heading
+  }));
+};
+
+const LocationPuck = ({
+  size = LOCATION_PUCK_SIZES.medium,
+  heading = 0,
+  showHeading = true,
+  confidenceRadius = 0,
+  type = LOCATION_PUCK_TYPES.consumer,
+  overrides = {}
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (size !== LOCATION_PUCK_SIZES.medium && type === LOCATION_PUCK_TYPES.consumer) {
+      console.warn(`Location puck size can only be applied to type === LOCATION_PUCK_TYPES.earner`);
+    }
+
+    if (!showHeading && type === LOCATION_PUCK_TYPES.earner) {
+      console.warn(`Earner location puck must show the heading indicator`);
+    }
+  }
+
+  const sharedProps = {
+    heading,
+    confidenceRadius,
+    overrides
+  };
+  return type === LOCATION_PUCK_TYPES.consumer ? /*#__PURE__*/React.createElement(ConsumerLocationPuck, _extends({}, sharedProps, {
+    showHeading: showHeading
+  })) : /*#__PURE__*/React.createElement(EarnerLocationPuck, _extends({}, sharedProps, {
+    size: size
+  }));
+};
+
+export default LocationPuck;

package/es/map-marker/pin-head.js

@@ -21,6 +21,7 @@ const PinHead = ({
   color,
   background,
   type = PINHEAD_TYPES.fixed,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   anchorType,
   needle = NEEDLE_SIZES.none,
   labelEnhancerContent,

package/es/map-marker/styled-components.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
-import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES } from './constants';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES } from './constants';
 export const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
   [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
@@ -28,6 +28,7 @@ export const StyledDragShadowContainer = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
+StyledDragShadowContainer.displayName = 'StyledDragShadowContainer';
 export const StyledDragShadow = styled('div', ({
   $theme,
   $background,
@@ -41,6 +42,7 @@ export const StyledDragShadow = styled('div', ({
   bottom: 0
 }));
 StyledDragShadow.displayName = "StyledDragShadow";
+StyledDragShadow.displayName = 'StyledDragShadow';
 export const StyledNeedle = styled('div', ({
   $theme,
   $background,
@@ -52,6 +54,7 @@ export const StyledNeedle = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledNeedle.displayName = "StyledNeedle";
+StyledNeedle.displayName = 'StyledNeedle';
 export const StyledFloatingMarkerRoot = styled('div', ({
   $size
 }) => ({
@@ -60,6 +63,7 @@ export const StyledFloatingMarkerRoot = styled('div', ({
   width: `${$size}px`
 }));
 StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
+StyledFloatingMarkerRoot.displayName = 'StyledFloatingMarkerRoot';
 export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   $theme,
   $anchor,
@@ -70,16 +74,19 @@ export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   transform: getAnchorTransform($anchor, $anchorSize)
 }));
 StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
+StyledFloatingMarkerPinHeadContainer.displayName = 'StyledFloatingMarkerPinHeadContainer';
 export const StyledFloatingMarkerAnchorContainer = styled('div', () => ({
   position: 'absolute'
 }));
 StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
+StyledFloatingMarkerAnchorContainer.displayName = 'StyledFloatingMarkerAnchorContainer';
 export const StyledFixedMarkerRoot = styled('div', () => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
 }));
 StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
+StyledFixedMarkerRoot.displayName = 'StyledFixedMarkerRoot';
 export const StyledFixedMarkerDragContainer = styled('div', ({
   $theme,
   $translateAmount,
@@ -94,6 +101,7 @@ export const StyledFixedMarkerDragContainer = styled('div', ({
   };
 });
 StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
+StyledFixedMarkerDragContainer.displayName = 'StyledFixedMarkerDragContainer';
 export const StyledOuterXXSmallAnchor = styled('div', ({
   $theme,
   $round,
@@ -110,6 +118,7 @@ export const StyledOuterXXSmallAnchor = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
+StyledOuterXXSmallAnchor.displayName = 'StyledOuterXXSmallAnchor';
 export const StyledInnerXXSmallAnchor = styled('div', ({
   $round,
   $color,
@@ -121,6 +130,7 @@ export const StyledInnerXXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0
 }));
 StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
+StyledInnerXXSmallAnchor.displayName = 'StyledInnerXXSmallAnchor';
 export const StyledOuterXSmallAnchor = styled('div', ({
   $theme,
   $round,
@@ -137,6 +147,7 @@ export const StyledOuterXSmallAnchor = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
+StyledOuterXSmallAnchor.displayName = 'StyledOuterXSmallAnchor';
 export const StyledInnerXSmallAnchor = styled('div', ({
   $round,
   $color,
@@ -148,6 +159,7 @@ export const StyledInnerXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0
 }));
 StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
+StyledInnerXSmallAnchor.displayName = 'StyledInnerXSmallAnchor';
 export const StyledPinHead = styled('div', ({
   $theme,
   $height,
@@ -183,6 +195,7 @@ export const StyledPinHead = styled('div', ({
   };
 });
 StyledPinHead.displayName = "StyledPinHead";
+StyledPinHead.displayName = 'StyledPinHead';
 export const StyledStrokedLabelContainer = styled('div', ({
   $position,
   $theme,
@@ -229,6 +242,7 @@ export const StyledStrokedLabelContainer = styled('div', ({
   };
 });
 StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
+StyledStrokedLabelContainer.displayName = 'StyledStrokedLabelContainer';
 export const StyledStrokedLabel = styled('div', ({
   $theme,
   $size
@@ -255,6 +269,7 @@ export const StyledStrokedLabel = styled('div', ({
   };
 });
 StyledStrokedLabel.displayName = "StyledStrokedLabel";
+StyledStrokedLabel.displayName = 'StyledStrokedLabel';
 export const StyledBadgeEnhancerRoot = styled('div', ({
   $theme,
   $size,
@@ -277,12 +292,14 @@ export const StyledBadgeEnhancerRoot = styled('div', ({
   };
 });
 StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
+StyledBadgeEnhancerRoot.displayName = 'StyledBadgeEnhancerRoot';
 export const RelativeContainer = styled('div', () => {
   return {
     position: 'relative'
   };
 });
 RelativeContainer.displayName = "RelativeContainer";
+RelativeContainer.displayName = 'RelativeContainer';
 export const StyledContentItem = styled('div', ({
   $theme,
   $color,
@@ -298,4 +315,71 @@ export const StyledContentItem = styled('div', ({
     color: $color
   };
 });
-StyledContentItem.displayName = "StyledContentItem";
+StyledContentItem.displayName = "StyledContentItem";
+StyledContentItem.displayName = 'StyledContentItem';
+export const LocationPuckContainer = styled('div', () => {
+  return {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+});
+LocationPuckContainer.displayName = "LocationPuckContainer";
+LocationPuckContainer.displayName = 'LocationPuckContainer';
+export const consumerLocationShadow = {
+  boxShadow: `0px 2px 4px 0px rgba(67, 76, 123, 0.2)`
+};
+export const earnerLocationShadow = {
+  boxShadow: `0px 3px 5px 0px rgba(67, 76, 123, 0.4)`
+};
+export const StyledConsumerLocationPuckCore = styled('div', ({
+  $theme
+}) => {
+  return {
+    height: `${12}px`,
+    width: `${12}px`,
+    background: $theme.colors.contentAccent,
+    borderRadius: `${100}px `,
+    position: 'absolute',
+    ...consumerLocationShadow
+  };
+});
+StyledConsumerLocationPuckCore.displayName = "StyledConsumerLocationPuckCore";
+export const StyledLocationPuckApproximation = styled('div', ({
+  $theme,
+  $color,
+  $radius
+}) => {
+  return {
+    background: $color,
+    opacity: 0.12,
+    height: `${$radius / 2}px`,
+    width: `${$radius / 2}px`,
+    borderRadius: `${10000}px `,
+    position: 'absolute',
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`
+  };
+});
+StyledLocationPuckApproximation.displayName = "StyledLocationPuckApproximation";
+StyledLocationPuckApproximation.displayName = 'StyledLocationPuckApproximation';
+export const StyledEarnerLocationPuckCore = styled('div', ({
+  $theme,
+  $color,
+  $size
+}) => {
+  return {
+    position: 'absolute',
+    transform: `scale(${EARNER_LOCATION_PUCK_CORE_SCALES[$size]})`,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    ...earnerLocationShadow,
+    borderRadius: '50%',
+    height: `${72}px`,
+    width: `${72}px`,
+    background: $theme.colors.backgroundPrimary,
+    border: `${6}px solid ${$color}`,
+    boxSizing: 'border-box'
+  };
+});
+StyledEarnerLocationPuckCore.displayName = "StyledEarnerLocationPuckCore";
+StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';

package/es/menu/index.js

@@ -13,6 +13,6 @@ export { default as NestedMenus, NestedMenuContext } from './nested-menus'; // C
 
 export { KEY_STRINGS, STATE_CHANGE_TYPES } from './constants'; // Styled elements
 
-export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components'; // Flow
+export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, StyledMenuDivider } from './styled-components'; // Flow
 
 export * from './types';

package/es/menu/menu.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale'; // Components
 
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components';
+import { StyledList, StyledEmptyState, StyledOptgroupHeader, StyledMenuDivider } from './styled-components';
 import OptionList from './option-list';
 import { getOverrides } from '../helpers/overrides'; // Types
 
@@ -22,6 +22,7 @@ export default function Menu(props) {
     focusMenu = () => {},
     unfocusMenu = () => {},
     handleMouseLeave = () => {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleKeyDown = event => {},
     renderAll = false
   } = props;
@@ -31,7 +32,8 @@ export default function Menu(props) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  };
+  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   const handleBlur = event => {
     if (focusVisible !== false) {
@@ -43,6 +45,7 @@ export default function Menu(props) {
   const [Option, optionProps] = getOverrides(overrides.Option, OptionList);
   const [EmptyState, emptyStateProps] = getOverrides(overrides.EmptyState, StyledEmptyState);
   const [OptgroupHeader, optgroupHeaderProps] = getOverrides(overrides.OptgroupHeader, StyledOptgroupHeader);
+  const [MenuDivider, menuDividerProps] = getOverrides(overrides.MenuDivider, StyledMenuDivider);
   const groupedItems = Array.isArray(props.items) ? {
     __ungrouped: props.items
   } : props.items;
@@ -52,13 +55,20 @@ export default function Menu(props) {
       els.push( /*#__PURE__*/React.createElement(OptgroupHeader, _extends({
         key: optgroup
       }, optgroupHeaderProps), optgroup));
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
     const groupItems = groupedItems[optgroup].map((item, index) => {
-      itemIndex = itemIndex + 1;
+      itemIndex = itemIndex + 1; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
       const {
         getRequiredItemProps = (item, index) => ({})
       } = props;
+
+      if (item.divider === true) {
+        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+      }
+
       const {
         disabled,
         isFocused,

package/es/menu/option-profile.js

@@ -12,6 +12,7 @@ import MaybeChildMenu from './maybe-child-menu';
 import { StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components';
 import { getOverrides } from '../helpers/overrides'; // Types
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function OptionProfile(props, ref) {
   const {
     item,

package/es/menu/stateful-container.js

@@ -384,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;
@@ -402,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/styled-components.js

@@ -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/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';